Just-In-Time: The Next Generation of Tailwind CSS

Adam Wathan from Tailwind:

One of the hardest constraints we’ve had to deal with as we’ve improved Tailwind CSS over the years is the generated file size in development. With enough customizations to your config file, the generated CSS can reach 10mb or more, and there’s only so much CSS that build tools and even the browser itself will comfortably tolerate.

Today I’m super excited to share a new project we’ve been working on that makes this constraint a thing of the past: a just-in-time compiler for Tailwind CSS.

If you’re using Tailwind, then the JIT Compiler — Sherlocked from Windi CSS (ref) — will be a very welcome gift. Using it you can basically drop all variants from your config, improve build-times and filesize.

Today our intern Elian integrated @tailwindcss/jit into a Tailwind-based project we’re working on. Compile times dropped by 60% (from ±25s to ±10s) and filesize dropped by 90% (from 918kB to 84kB), as detailed on his blog.

😱 In case you think I’ve switched over to Tailwind: No, I’m still no fan of Tailwind and — unless you use it with @apply — would not recommend using it. On the other hand I do see that it allows one to iterate quickly while prototyping and that is a very welcome gift for developers who are somewhat familiar with CSS. If that floats your boat, then that’s fine. If it doesn’t, then that’s fine too 🙂

However, if one were to ask me to choose between the two, I will always recommend one to learn CSS. That knowledge is relevant today, tomorrow, and still will be 10 years from now, when Tailwind is long gone.

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.