A script to live-edit Tailwind in your browser
No need to set up a toolchain, you’re just a tag away
One of the things I hate when dealing with frontend design, is setting up the kitchen sink, or the toolchain if you’re purist. Webpack 5 with Hot Module Replacement for just CSS is not a walk in the park, specially if you are not accustomed to setting it up constantly, as it may chop you some minutes to set up.
Anyway, today the guys at BeyondCode released a script that does all for you, just a script away in your HTML <head> tag. You heard that right, the Tailwind CSS playground in your browser.
The kitchen running over your salad
The new tools is “Tailwind JIT CDN”. It a Tailwind CSS version that runs their JIT engine entirely in the browser.
What this script does is relatively simple: it uses the new Tailwind CSS JIT Engine to run something like HMR on your browser. Everytime the document elements are edited with new classes — like using the Developer Tools of your browser — the style will be updated to reflect these changes. No water needed.
It even supports custom arbitrary values like top-[90px], automatic variants like md:dark:disabled:focus:hover:bg-gray-400, and even custom Configuration and Plugins. The JIT entine will automatically update Tailwind to use the config and plugins, and also tree-shake the resulting CSS to not include CSS code not used in the page.
<div class="absolute top-[90px] md:top-[120px]>
<button class="md:dark:disabled:focus:hover:bg-gray-400">
</div>This is a godsend if you need to quickly start designing or prototyping something without an IDE, and just the browser.
Does this replaces my local config?
For those wanting to quickstart Tailwind CSS by just shoving many classes into their HTML code just to jump into the hype, this tool is definitely useful.
The problem of this tool is not one, but three:
Code changes are lost
Code changes in the Developers Tools of your browser are not permanent, so refreshing the page means losing all your work. If you want to edit the local HTML file yourself, you can, but these changes won’t reflect into the DOM unless you refresh the page.
No IDE help
There is no “Intellisense” for Tailwind CSS on browser, so you’re working with the documentation at your side at the worst case scenario.
For those who know the framework, the CSS classes are probably in your fingertips, so you this may be not a roadblock.
No component extraction
Using Component Extraction with @apply to avoid large list of classes on your HTML — something recommended to make your frontend code more understandable — is not supported.
You will still need to use a local bundler running for Component Extraction.
Should you use this? Of course!
This is definitely a god send if you don’t like setting up toolchains just to see your HTML edits on the browser. Those who are on-the-fence about switching to Tailwind CSS, this is a good opportunity.
Better yet, you can use this combined with BrowserSync, that will update your browser automatically each time you edit your HTML in your editor of choice.
What about on production?
If you’re using a deep custom build for your CSS, this also won’t offer anything meaningful. You will probably still use a local Webpack to bundle an usable CSS for production.
Those who think it’s a good idea to put this on production, the script bundle weights less than 400KB, something like an average 1 megapixel JPEG.
400 KB may be pretty big if you plan to launch a site targeting people with 2G connections, or you’re targeting a near-zero First Meaningful Paint. Consider that that a well tree-shaked CSS with PurgeCSS can weight just a few kilobytes.
