DaisyUI and Tailwind CSS without NodeJS

We have witnessed the horrors of the node_modules folders from NodeJS and its dependency hell, and we don’t want them in our lives. We already have enough with Maven's dependency hell, and we don’t want to deal with more JavaScript than necessary.

Tailwind CSS

Tailwind saves us from having to write specific CSS by, instead, letting us define the styles we want using classes added to the HTML `class` attribute. From those classes, the specific CSS is generated.

To avoid incorporating all possible class definitions, a build tool is needed to scan your HTML files for the Tailwind classes you use and generate the corresponding CSS. If this happens in real-time, even better. And if it does this without requiring NodeJS, we will kiss it, tuck it in, and tell it a bedtime story so it sleeps peacefully.

Well, the people at Tailwind have done an excellent job here, with astandalone console tool. At the time of this writing, that blog post is dated 2021. Although the way to download the standalone has not changed since then, and the executable you get will be up to date with the latest version, the usage instructions have changed starting with Tailwind 4.0 (now the config is not done using a .js file). So just download the latest executable and keep reading, you will see how to do it below.

DaisyUI

The problem with Tailwind CSS is that, even though it simplifies things to some extent, and especially improves the Locality of Behavior (LoB), you still need to write a lot of classes to define the style for an HTML element.

When I say a lot, I mean it—frequently copying and pasting the same thing to the point where HTML is full of noise.

It would be awesome to further reduce the complexity, allowing us to define what the HTML element intends to be using just a few classes, instead of listing all the detailed styles required to fulfill that purpose.

That’s DaisyUI's goal, and it achieves it quite decently.

DaisyUI explains how to use Tailwind CSS's standalone console tool here.

So it’s as simple as following those steps, with one final detail: if you run it using --watch and leave it open in a separate console, you can continue developing while the tool automatically updates the CSS for your project.