The Gist

• Install Tailwind CSS IntelliSense Extension for VS Code.
• Create an empty tailwind.config.js file.
• Type, hover, copy, paste, and repeat as needed.

Why

I've grown used to the unparalleled iteration speed of using Tailwind classes with Vue components. Changing my workflow and learning to properly build and maintain CCS files would take far more time than I am willing to spend on it.

I needed a blog and chose Zola because I've reached the stage in my programming career where I'm looking to minimize the amount of JS in my life. I would be remiss if I didn't mention that there's certainly a bit of rusty fanaticism going on.

Zola supports SASS compilation out of the box, but I don't know SASS. So installed the tailwind package, pointed its output to the static/ directory.

tailwindcss --input ./input.css --output ./static/style.css --watch

Discovery

While this workflow did work well. This system went against my plan to move away from the node ecosystem. Additionally, I didn't like running two shells just to work on a static website. One to hot reload (zola serve) and the other to generate CSS (mentioned above). I deleted the package.json file and node_modules/ folder and emptied the styles.css and decided to do it the right way. Once I got back to work I made the discovery.

The Tailwind CSS IntelliSense Extension was still suggesting classes. I thought it relied on the package.json or at the very least the node_modules folder. The only trace of tailwind was its configuration file (tailwind.config.js). At this point I began to run a few experiments. As it turns out, the file simply needs to exist for the extension to activate and do its job.

Usage

Hovering over an inline class reveals the CSS that make up the class in a popover. I simply copy that to utilities.css which is then imported to styles.css. The problem I foresee is the potential for duplicate classes but what's a few more bytes when I've served you 0 bytes of JavaScript.