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 …


This content originally appeared on Bram.us and was authored by Bramus!

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 and your build times will improve.

Today our intern Elian integrated @tailwindcss/jit into a project we’re working on that uses it. 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 lost my mind here by praising something from 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 understand that it allows one to iterate quickly while prototyping and that is a very welcome gift for developers who are somewhat familiar with CSS.

However, I will always recommend to learn CSS. That knowledge is relevant today, tomorrow, and still will be 10 years from now, when Tailwind is long gone.


This content originally appeared on Bram.us and was authored by Bramus!


Print Share Comment Cite Upload Translate Updates
APA

Bramus! | Sciencx (2021-03-16T22:11:38+00:00) Just-In-Time: The Next Generation of Tailwind CSS. Retrieved from https://www.scien.cx/2021/03/16/just-in-time-the-next-generation-of-tailwind-css/

MLA
" » Just-In-Time: The Next Generation of Tailwind CSS." Bramus! | Sciencx - Tuesday March 16, 2021, https://www.scien.cx/2021/03/16/just-in-time-the-next-generation-of-tailwind-css/
HARVARD
Bramus! | Sciencx Tuesday March 16, 2021 » Just-In-Time: The Next Generation of Tailwind CSS., viewed ,<https://www.scien.cx/2021/03/16/just-in-time-the-next-generation-of-tailwind-css/>
VANCOUVER
Bramus! | Sciencx - » Just-In-Time: The Next Generation of Tailwind CSS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/03/16/just-in-time-the-next-generation-of-tailwind-css/
CHICAGO
" » Just-In-Time: The Next Generation of Tailwind CSS." Bramus! | Sciencx - Accessed . https://www.scien.cx/2021/03/16/just-in-time-the-next-generation-of-tailwind-css/
IEEE
" » Just-In-Time: The Next Generation of Tailwind CSS." Bramus! | Sciencx [Online]. Available: https://www.scien.cx/2021/03/16/just-in-time-the-next-generation-of-tailwind-css/. [Accessed: ]
rf:citation
» Just-In-Time: The Next Generation of Tailwind CSS | Bramus! | Sciencx | https://www.scien.cx/2021/03/16/just-in-time-the-next-generation-of-tailwind-css/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.