In recent times, I’ve been closely monitoring three technologies: Quarkus, htmx, and Tailwind CSS. The common thread? They all share a common goal—to simplify web development. It’s a return to the roots, a call to resist unnecessary complexity and gratuitous overengineering.

I will delve into Quarkus and htmx later (I promise!), but for now, let’s turn our attention to Tailwind CSS.

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes for styling directly within your markup. Instead of offering pre-designed components, Tailwind empowers developers to apply styles using a comprehensive set of utility classes, allowing for unparalleled flexibility and customization.

I’ve recently refactored my personal blog, bidding farewell to the old theme (jekyll-now). What remains is a minimalistic, Tailwind-inspired design.

Technical Insights

For those curious about the implementation details of Tailwind CSS on my Jekyll-powered GitHub Pages, all the relevant information is neatly tucked away in the _includes/tailwindcss.html file. Yes, I acknowledge that deploying against a CDN might not be the most optimal solution, but let’s be realistic—I’m not anticipating millions of visits.

Next, you can see what the result of the markup language looks like:

Heading

Head 1

Head 2

Head 3

Paragraphs

Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.

Emphasis

Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.

Links

Paragraphs generated by Zombie Ipsum.

Blockquotes

Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.

Unordered lists

• First item
• Second item
• Third item
  • Indented item
  • Indented item
• Fourth item

Ordered lists

1. First item
2. Second item
   1. Item 2.1
   2. Item 2.2
3. Third item
   • Item 3.1
   • Item 3.2
4. Fourth item

Horizontal Rules

To create a horizontal rule, use three or more asterisks (***), dashes (—), or underscores (___) on a line by themselves.

The content following the rule.

Code Blocks

To create code blocks, indent every line of the block by at least four spaces or one tab.

HelloWorld.Java

void main() { 
	System.out.println("Hello, World!");
}

Tables

To add a table, use three or more hyphens to create each column’s header, and use pipes (|) to separate each column. For compatibility, you should also add a pipe on either end of the row.

Table with alignment:

Conclusion

In the realm of web development, simplicity reigns supreme, and Tailwind CSS stands as a testament to the “Keep It Simple, Stupid” (KISS) principle. By adopting a utility-first approach and offering a streamlined, customization-friendly experience, Tailwind removes unnecessary complexities, letting developers focus on what truly matters—efficiency and creativity.