← Back

Tailwind CSS Tips for Cleaner Code

Daniel · · CSS

Tailwind CSS is powerful, but without some discipline your markup can get messy. Here are a few tips.

Extract Components, Not Classes

Instead of @apply everywhere, extract reusable components. In Astro, this is as simple as creating a .astro file.

Use the Config File

Extend the default theme in tailwind.config.mjs rather than using arbitrary values like text-[13px] scattered throughout your code.

Leverage Dark Mode

With darkMode: "class", you can toggle dark mode with a single class on <html>. Pair it with localStorage for persistence.