We at Beyond Code love Tailwind CSS. This is why we created the DevTools for Tailwind CSS.
When hacking on a new Tailwind CSS site, I mostly use the Tailwind CSS CDN version. I can try out multiple designs without having to worry about Webpack or Node. All I want to do is writing some HTML with Tailwind classes and see the rendered output without rebuilding my frontend.
The CDN version of Tailwind CSS has its downsides and according to the official TailwindCSS documentation, the downsides are:
- 😞 You can't customize Tailwind's default theme
- 😞 You can't use any directives like @apply, @variants etc.
- 😞 You can't enable additional variants like group-focus
- 😞 You can't install third-party plugins
- 😞 You can't tree-shake unused styles
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.
Alright – this is the moment where most developers install Tailwind into their Webpack build process and get angry about node_modules, PostCSS and whatnot. Instead of doing this, I want to have the full Tailwind CSS JIT experience available right in my browser. Zero configuration – just like the CDN.
Introducing Tailwind JIT CDN
Let me introduce the Tailwind CSS JIT CDN version.
This version runs entirely in the browser and does not require any additional build tools or setup. Paste the CDN URL in your code and you're ready to go – pretty much like using the existing Tailwind CSS CDN. Of course all of the processing happens on the client side. No HTML is sent to a server to generate the CSS.
It is also fully open source and you can find it on GitHub.
What is Tailwind CSS JIT?
Before we dive into the details of this CDN version, lets talk about the new JIT compiler that the Tailwind CSS team introduced lately.
When you write HTML with Tailwind CSS classes during development, Tailwind takes your tailwind.config.js file and then generates a big fat CSS file that contains all possible colors and responsive helpers for all the configured variants.
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.
The new Tailwind CSS JIT compiler is the main idea that drives the new feature. 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!
This gives you the ability to go completely wild with Tailwind CSS variants. You no longer need to define them manually, but the JIT compiler detects and dynamically adds them to the resulting CSS file – magic.
You can write HTML code like this:
<button class="md:dark:disabled:focus:hover:bg-gray-400">
A brilliant feature of the JIT mode is the ability to use Tailwind CSS helpers in combination with arbitrary values. If you have an element on your website that needs some absolute positioning – but also needs to be pixel perfect. The JIT mode can dynamically create Tailwind classes that combine existing helpers with arbitrary values and this lokk like this:
<div class="absolute top-[90px] md:top-[120px]></div>
The combination of responsive variants with arbitrary values makes this incredibly powerful.
Back to the CDN version
Alright, we've covered what the JIT mode is and what it does, lets see how we can use it using the Tailwind CSS JIT CDN:
<!-- Include CDN JavaScript -->
<script src="https://unpkg.com/tailwindcss-jit-cdn"></script>
<div class="p-16">
<div class="h-[120px] w-[120px] rounded-full border bg-red-400 hover:bg-blue-400 cursor-pointer"></div>
</div>
See the Pen TailwindCSS JIT CDN by Beyond Code (@beyondcode) on CodePen.
🤯 All you need to do is adding the CDN JavaScript and it will take care of everything automatically – all Tailwind classes get parsed on the fly.
The Tailwind CSS JIT CDN uses a MutationObserver, that means that you can add classes via the browser developer tools and the CSS gets an update dynamically.
More control with a custom Tailwind configuration
If you think that this is already amazing, that's still not all that the new Tailwind CSS JIT CDN can do. You can specify a custom Tailwind CSS configuration that you want to use on your site.
<!-- Include CDN JavaScript -->
<script src="https://unpkg.com/tailwindcss-jit-cdn"></script>
<!-- Specify a custom TailwindCSS configuration -->
<script type="tailwind-config">
{
theme: {
extend: {
colors: {
'dark-blue-800': '#0A214C',
'hulk-800': '#3D42F5',
}
}
}
}
</script>
<div class="p-16">
<div class="h-[120px] w-[120px] rounded-full border bg-dark-blue-800 hover:bg-hulk-800 cursor-pointer"></div>
</div>
See the Pen TailwindCSS JIT CDN custom config by Beyond Code (@beyondcode) on CodePen.
The CDN JavaScript will parse any <script type="tailwind-config"> tag that it finds and uses it for the generation of the Tailwind CSS output.
Using PostCSS
Having the full power of the JIT compiler available is really cool - but sometimes you might still need to write custom CSS and access any Tailwind CSS classes.
For example, in order to use one of the Tailwind CSS colors for the ::selection pseudo element, you need to use the @apply syntax.
This is also possible with the CDN version!
All you need to do is write inline styles that have a special postcss type - and it will automatically be converted to CSS for you!
<style type="postcss">
::selection {
@apply bg-pink-500;
}
.custom-class {
@apply border bg-gray-100 p-4
}
</style>
See the Pen Tailwind CSS JIT inline PostCSS by Beyond Code (@beyondcode) on CodePen.
Custom plugins
The Tailwind CSS JIT CDN version is able to detect and use custom Tailwind CSS plugins.
Here is an example of the Tailwind CSS Typography plugin:
<!-- Include CDN JavaScript -->
<script src="https://unpkg.com/tailwindcss-jit-cdn"></script>
<!-- Specify a custom TailwindCSS configuration -->
<script type="module" >
import tailwindcssTypography from 'https://cdn.skypack.dev/@tailwindcss/typography';
window.tailwindConfig = {
plugins: [
tailwindcssTypography,
]
};
window.tailwindCSS.refresh();
</script>
<script type="tailwind-config">
window.tailwindConfig
</script>
<div class="p-16">
<div class="prose">
Lorem, ipsum, dolor sit amet consectetur adipisicing elit. Ratione optio fugit ipsa recusandae, natus eligendi hic laudantium, voluptatem doloribus quibusdam dignissimos, veritatis nemo a. Deleniti necessitatibus laudantium praesentium, neque tenetur?
</div>
</div>
See the Pen TailwindCSS JIT CDN custom plugin by Beyond Code (@beyondcode) on CodePen.
The only downside of this approach is that the plugin loading will be deferred, because the module loading blocks the processing until the plugin is loaded.
Let's take another look at the missing features from the Tailwind CSS CDN version and how this compares to the Tailwind CSS JIT CDN:
- 🙂 You can customize Tailwind's default theme
- 🙂 You can use any combination of custom variants
- 🙂 You can enable any additional variants like group-focus
- 🙂 You can install third-party plugins
- 🙂 The resulting CSS will always tree-shake unused styles
Should I use this in production?
It depends.
I'm certain that this is production ready for lightweight applications – the Tailwind CSS JIT CDN is not using a custom way to process your classes and CSS. This means that it will be up to date with the latest and greatest Tailwind CSS features.
The bundle size is pretty big (375kb gzipped) when compared to a production built CSS that is usually ~10kb. But some people don't mind this.
I'm definitely going to use this during development – especially in the cases where I do not need a custom build process.