This gives you the ability to go completely wild with Tailwind CSS variants. The JIT (just-in-time) compiler watches your HTML files and only creates the CSS classes for the helpers that you use in your code – already during development! The new Tailwind CSS JIT compiler is the main idea that drives the new feature. Of course, we don't want to deploy such a big CSS file when our website is ready to go live and so we use PurgeCSS to remove all CSS definitions for all Tailwind CSS classes that we don't use. When you write HTML with Tailwind CSS classes during development, Tailwind takes your file and then generates a big fat CSS file that contains all possible colors and responsive helpers for all the configured variants. What is Tailwind CSS JIT?īefore we dive into the details of this CDN version, lets talk about the new JIT compiler that the Tailwind CSS team introduced lately. It is also fully open source and you can find it on GitHub. No HTML is sent to a server to generate the CSS. Of course all of the processing happens on the client side. Paste the CDN URL in your code and you're ready to go – pretty much like using the existing Tailwind CSS CDN. This version runs entirely in the browser and does not require any additional build tools or setup. Let me introduce the Tailwind CSS JIT CDN version.
#TAILWINDCSS UNPKG FULL#
Instead of doing this, I want to have the full Tailwind CSS JIT experience available right in my browser.
#TAILWINDCSS UNPKG INSTALL#
Most of the time, those downsides don't matter that much – but I regularly run into a couple of situations where I want to either customize a color, use additional variants or install a third-party plugin.Īlright – this is the moment where most developers install Tailwind into their Webpack build process and get angry about node_modules, PostCSS and whatnot.