Tailwind v2.2 was just released with a brand-new Tailwind CLI tool, a ton of new features using the JIT engine, and more. Let’s take a look at some of the new features.
Brand New Tailwind CLI
The Tailwind team released a brand-new tailwindcss CLI from the ground-up, adding support for some nice features to make it convenient to work with Tailwind right away:
1npx tailwindcss
2 -o dist/tailwind.css
3 --watch
4 --jit
5 --purge="./src/**/*.html"
The above example from the release notes showcases a new watch mode, a --jit flag to build Tailwind with the JIT mode, and the --purge flag used to remove unused classes. The CLI is also backward-compatible with the previous CLI.
Check the updated CLI documentation to learn more about using this option to work with Tailwind without any external build tooling.
Styling Pseudo Elements With JIT
Tailwind now has first-party support for styling pseudo elements using the just-in-time mode:
1<div class="before:block before:bg-blue-500 after:flex after:bg-pink-300"></div>
2
3<!-- customize pseudo content value -->
4<div class="before:content-['hello'] before:block ..."></div>
Thanks to the JIT compiler added to core in Tailwind CSS v2.1, many new features can leverage this feature without risking bloat to the overall weight of Tailwind builds. That being said, the JIT mode is required to use this feature.
Sibling Selector Variants
New peer-* variants target sibling elements, which is useful for styling elements based on the state of other siblings. The example provided from the release notes is styling an element when a sibling checkbox is checked:
1<label>
2 <input <.......