Skip to content
This repository was archived by the owner on Apr 6, 2021. It is now read-only.

Commit 0ed90d5

Browse files
committed
Update README
1 parent 6ab9d3f commit 0ed90d5

File tree

2 files changed

+80
-30
lines changed

2 files changed

+80
-30
lines changed

.github/logo.svg

Lines changed: 13 additions & 0 deletions
Loading

README.md

Lines changed: 67 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,35 @@
1-
**Internal**. Please don't tweet about this project, write tutorials, create screencasts, etc. until we are ready to announce it ourselves. We've published it to make it easier to get feedback from a handful of bleeding-edge early adopters (including you if you found this and want to try it!) but really don't want the general public judging it until it's ready. Still missing lots of important features and there are lots of rough edges.
21

3-
---
2+
![Tailwind CSS Just-In-Time](.github/logo.svg?raw=true)
43

5-
# @tailwindcss/jit
6-
7-
An experimental library that generates CSS with the same API you already know from Tailwind CSS, but on-demand as you author your template files instead of generating an extremely large stylesheet at initial build time.
4+
An experimental library that generates CSS with the same API you already know from [Tailwind CSS](https://tailwindcss.com), but on-demand as you author your templates instead of generating everything in advance at initial build time.
85

96
This comes with a lot of advantages:
107

11-
- **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, no matter what build tool you're using.
8+
- **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.
129
- **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.
1310
- **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]`.
1411
- **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.
15-
- **Better browser performance in development**. Since development builds are as small as production builds, the browser doesn't has to parse and manage multiple megabytes of CSS like it does with an ahead-of-time Tailwind build. This makes dev tools a lot more responsive.
12+
- **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.
1613

17-
---
14+
To see it in action, [watch our announcement video](https://www.youtube.com/watch?v=3O_3X7InOw8).
1815

1916
## Getting started
2017

21-
> While this idea is still in the pre-release phase, we've published it under a separate package. Eventually, we'll merge it with `tailwindcss` and expose it as a configuration option.
22-
2318
Install `@tailwindcss/jit` from npm:
2419

2520
```sh
26-
npm install -D @tailwindcss/jit postcss tailwindcss
21+
npm install -D @tailwindcss/jit tailwindcss postcss
2722
```
2823

29-
> The existing `tailwindcss` library is needed as a peer-dependency for third-party Tailwind plugins to work.
24+
> The existing `tailwindcss` library is a peer-dependency of `@tailwindcss/jit`, and is also needed for compatibility with Tailwind plugins.
3025
31-
Add `@tailwindcss/jit` to your PostCSS configuration instead of `tailwindcss`:
26+
Add `@tailwindcss/jit` to your PostCSS configuration _(instead of `tailwindcss`)_:
3227

33-
```diff
28+
```js
3429
// postcss.config.js
3530
module.exports = {
3631
plugins: {
37-
- tailwindcss: {},
38-
+ '@tailwindcss/jit': {},
32+
'@tailwindcss/jit': {},
3933
autoprefixer: {},
4034
}
4135
}
@@ -63,7 +57,62 @@ Now start your dev server or build tool as you normally would and you're good to
6357
>
6458
> 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.
6559
66-
---
60+
## Documentation
61+
62+
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).
63+
64+
The on-demand nature of this new engine does afford some new features that weren't possible before, which you can learn about below.
65+
66+
### All variants are enabled out of the box
67+
68+
Since styles are generated on-demand, there's no need to configure which variants are available for each core plugin.
69+
70+
```html
71+
<input class="disabled:opacity-75">
72+
```
73+
74+
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.
75+
76+
### Stackable variants
77+
78+
All variants can be combined together to easily target very specific situations without writing custom CSS.
79+
80+
```html
81+
<button class="md:dark:disabled:focus:hover:bg-gray-400">
82+
```
83+
84+
### Arbitrary value support
85+
86+
Many utilities support arbitrary values using a new square bracket notation to indicate that you're "breaking out" of your design system.
87+
88+
```html
89+
<!-- Sizes and positioning -->
90+
<img class="absolute w-[762px] h-[918px] top-[-325px] right-[62px] md:top-[-400px] md:right-[80px]" src="/crazy-background-image.png">
91+
92+
<!-- Colors -->
93+
<button class="bg-[#1da1f1]">Share on Twitter</button>
94+
95+
<!-- Complex grids -->
96+
<div class="grid-cols-[1fr,700px,2fr]">
97+
<!-- ... -->
98+
</div>
99+
```
100+
101+
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.
102+
103+
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.
104+
105+
## Known limitations
106+
107+
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.
108+
109+
There are a few items still on our todo list though that we are actively working on:
110+
111+
- The `important` option does not yet support selectors (like `#app`).
112+
- Advanced PurgeCSS options like `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.
113+
- You can only `@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.
114+
115+
If you run into any other issues or find any bugs, please [open an issue](https://github.com/tailwindlabs/tailwindcss-jit/issues/new) so we can fix it.
67116

68117
## Roadmap
69118

@@ -83,18 +132,6 @@ module.exports = {
83132
}
84133
```
85134

86-
If this proves to be the best way to use Tailwind 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.
135+
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.
87136

88137
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.
89-
90-
---
91-
92-
## Known limitations
93-
94-
This library is very close to feature parity with `tailwindcss` currently and for most projects I bet you will find it works exactly as you'd expect.
95-
96-
There are a few items on our todo list still though that we are still implementing:
97-
98-
- The `important` option does not support strings like `#app` yet.
99-
- Advanced PurgeCSS options like `safelist` aren't supported yet since we aren't actually using PurgeCSS. We'll add a way to safelist classes for sure though.
100-
- You can only `@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.

0 commit comments

Comments
 (0)