Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
@tailwindcss/jit
Advanced tools
An experimental just-in-time compiler for Tailwind CSS that generates your styles on-demand as you author your templates instead of generating everything in advance at initial build time.
This comes with a lot of advantages:
focus-visible
, active
, disabled
, and others are not normally enabled by default due to file-size considerations. Since this library generates styles on demand, you can use any variant you want, whenever you want. You can even stack them like sm:hover:active:disabled:opacity-75
. Never configure your variants again.top: -113px
for a quirky background image? Since styles are generated on demand, you can just generate a utility for this as needed using square bracket notation like top-[-113px]
. Works with variants too, like md:top-[-113px]
.To see it in action, watch our announcement video.
Install @tailwindcss/jit
from npm:
npm install -D @tailwindcss/jit tailwindcss postcss
The existing
tailwindcss
library is a peer-dependency of@tailwindcss/jit
, and is also needed for compatibility with Tailwind plugins.
Add @tailwindcss/jit
to your PostCSS configuration (instead of tailwindcss
):
// postcss.config.js
module.exports = {
plugins: {
'@tailwindcss/jit': {},
autoprefixer: {},
}
}
If you are using autoprefixer, make sure you are on the latest version using
npm install -D autoprefixer@latest
— there's a bug in older versions that makes it incompatible with this library.
Configure the purge
option in your tailwind.config.js
file with all of your template paths:
// tailwind.config.js
module.exports = {
purge: [
'./public/**/*.html',
'./src/**/*.{js,jsx,ts,tsx,vue}',
],
theme: {
// ...
}
// ...
}
Now start your dev server or build tool as you normally would and you're good to go.
Make sure you set
NODE_ENV=development
if you are running a watcher, or Tailwind won't watch your template files for changes. SetNODE_ENV=production
for one-off builds.If you want to control whether Tailwind watches files or not more explicitly, set
TAILWIND_MODE=watch
orTAILWIND_MODE=build
to override the defaultNODE_ENV
-based behavior.For example if you want to do one-off builds with
NODE_ENV=development
, explicitly setTAILWIND_MODE=build
so that Tailwind knows you are just doing a one-off build and doesn't hang.
This library is simply a new internal engine for Tailwind CSS, so for a complete API reference visit the official Tailwind CSS documentation.
The on-demand nature of this new engine does afford some new features that weren't possible before, which you can learn about below.
Since styles are generated on-demand, there's no need to configure which variants are available for each core plugin.
<input class="disabled:opacity-75">
You can use variants like focus-visible
, active
, disabled
, even
, and more in combination with any utility, without making any changes to your tailwind.config.js
file.
All variants can be combined together to easily target very specific situations without writing custom CSS.
<button class="md:dark:disabled:focus:hover:bg-gray-400">
Many utilities support arbitrary values using a new square bracket notation to indicate that you're "breaking out" of your design system.
<!-- Sizes and positioning -->
<img class="absolute w-[762px] h-[918px] top-[-325px] right-[62px] md:top-[-400px] md:right-[80px]" src="/crazy-background-image.png">
<!-- Colors -->
<button class="bg-[#1da1f1]">Share on Twitter</button>
<!-- Complex grids -->
<div class="grid-cols-[1fr,700px,2fr]">
<!-- ... -->
</div>
This is very useful for building pixel-perfect designs where there are a few elements that need hyper-specific styles, like a carefully positioned background image on a marketing site.
We'll likely add some form of "strict mode" in the future for power-hungry team leads who don't trust their colleagues to use this feature responsibly.
This library is very close to feature parity with tailwindcss
currently and for most projects I bet you'll find it works exactly as you'd expect.
There are a few items still on our todo list though that we are actively working on:
important
option does not yet support selectors (like #app
).safelist
aren't supported yet since we aren't actually using PurgeCSS. We'll add a way to safelist classes for sure though. For now, a safelist.txt
file somewhere in your project with all the classes you want to safelist will work fine.@apply
classes that are part of core, generated by plugins, or defined within a @layer
rule. You can't @apply
arbitrary CSS classes that aren't defined within a @layer
rule.If you run into any other issues or find any bugs, please open an issue so we can fix it.
Eventually we plan to merge this project with tailwindcss
and expose it via an option in your tailwind.config.js
file, something like this:
// tailwind.config.js
module.exports = {
mode: 'jit',
purge: [
// ...
],
theme: {
// ...
}
// ...
}
Once it's been heavily tested by the community and we've worked out any kinks, we hope to make it the default mode for Tailwind CSS v3.0 later this year.
We'll always provide a mode: 'aot'
option for people who want to generate the stylesheet in advance and purge later — we'll need that ourselves for our CDN builds.
This library is MIT licensed.
FAQs
Unknown package
We found that @tailwindcss/jit demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.