# tailwindcss-jit
**Repository Path**: mirrors/tailwindcss-jit
## Basic Information
- **Project Name**: tailwindcss-jit
- **Description**: tailwindcss-jit 是用于 Tailwind CSS 的 JIT 编译器
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: main
- **Homepage**: https://www.oschina.net/p/tailwindcss-jit
- **GVP Project**: No
## Statistics
- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-03-29
- **Last Updated**: 2025-09-20
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
**As of [Tailwind CSS v2.1](https://blog.tailwindcss.com/tailwindcss-2-1) this project has been merged with [the core Tailwind CSS repository](https://github.com/tailwindlabs/tailwindcss) and all future development will happen there.**
---
## Overview
**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:
- **Lightning fast build times**. Tailwind can take 3–8s to initially compile using our CLI, and upwards of 30–45s in webpack projects because webpack struggles with large CSS files. This library can compile even the biggest projects in about 800ms _(with incremental rebuilds as fast as 3ms)_, no matter what build tool you're using.
- **Every variant is enabled out of the box**. Variants like `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.
- **Generate arbitrary styles without writing custom CSS.** Ever needed some ultra-specific value that wasn't part of your design system, like `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]`.
- **Your CSS is identical in development and production**. Since styles are generated as they are needed, you don't need to purge unused styles for production, which means you see the exact same CSS in all environments. Never worry about accidentally purging an important style in production again.
- **Better browser performance in development**. Since development builds are as small as production builds, the browser doesn't have to parse and manage multiple megabytes of pre-generated CSS. In projects with heavily extended configurations this makes dev tools a lot more responsive.
To see it in action, [watch our announcement video](https://www.youtube.com/watch?v=3O_3X7InOw8).
## Getting started
Install `@tailwindcss/jit` from npm:
```sh
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`)_:
```js
// 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:
```js
// 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. Set `NODE_ENV=production` for one-off builds.
>
> If you want to control whether Tailwind watches files or not more explicitly, set `TAILWIND_MODE=watch` or `TAILWIND_MODE=build` to override the default `NODE_ENV`-based behavior.
>
> For example if you want to do one-off builds with `NODE_ENV=development`, explicitly set `TAILWIND_MODE=build` so that Tailwind knows you are just doing a one-off build and doesn't hang.
## Documentation
This library is simply a new internal engine for Tailwind CSS, so for a complete API reference [visit the official Tailwind CSS documentation](https://tailwindcss.com).
The on-demand nature of this new engine does afford some new features that weren't possible before, which you can learn about below.
### All variants are enabled out of the box
Since styles are generated on-demand, there's no need to configure which variants are available for each core plugin.
```html
```
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.
### Stackable variants
All variants can be combined together to easily target very specific situations without writing custom CSS.
```html
