10 Tailwind CSS Tips That Will Change How You Write Styles

Why Tailwind CSS?

When Tailwind CSS first appeared, I honestly didn’t like it.

Writing utility classes directly inside HTML felt messy and completely against the traditional “separation of concerns” mindset most developers learn early on.

Then I used it on a real production project.

After a few days, something clicked.

The speed, consistency, and freedom it gave me completely changed how I build interfaces. Now going back to traditional CSS files feels slower and more frustrating.

If you’re learning Tailwind or already using it, these tips will save you time and improve your workflow immediately.

---

1. Use @apply Sparingly

One of the biggest beginner mistakes is overusing @apply.

Tailwind is designed around utility classes. If you move everything into custom CSS classes, you lose most of Tailwind’s advantages.

Use @apply only for patterns you genuinely reuse often.

/* Good */
.btn {
  @apply inline-flex items-center px-4 py-2 rounded-lg font-medium;
}

/* Bad */
.card-title {
  @apply text-lg font-bold;
}

For simple styling, keeping utilities inline is usually cleaner and easier to maintain.

---

2. Master group and peer

These two utilities unlock incredibly powerful interactions without writing JavaScript.

Using group

<div class="group">
  <img class="transition-transform group-hover:scale-105" />
  <h2 class="group-hover:text-blue-500">
    Title
  </h2>
</div>

Hovering the parent element triggers styles on all child elements using group-hover:.

This is perfect for:

• Cards
• Product previews
• Navigation menus
• Interactive lists

---

Using peer

<input type="checkbox" class="peer hidden" />

<div class="peer-checked:block hidden">
  Visible when checked
</div>

This makes form interactions much cleaner without extra scripts.

---

3. Use clsx or cn for Dynamic Classes

Avoid manually concatenating class strings.

This becomes unreadable very quickly.

Instead, use utilities like clsx or cn.

import { clsx } from "clsx";

const classes = clsx(
  "base-class",
  isActive && "active-class",
  variant === "primary" && "bg-blue-500"
);

This keeps your components cleaner and easier to debug.

If you’re using React, Next.js, or Astro components, this tip becomes extremely valuable.

---

4. Prefer the class Dark Mode Strategy

Always use:

darkMode: "class"

inside your Tailwind config.

This gives you full control over dark mode instead of relying entirely on the user’s system settings.

Benefits include:

• Manual dark mode toggles
• Persistent user preferences
• Better UI consistency
• Easier theme management

Combined with localStorage, you can create a polished theme experience very easily.

---

5. Define Custom Colors Early

Don’t scatter random hex codes throughout your project.

Instead, centralize your brand colors inside tailwind.config.ts.

colors: {
  accent: {
    500: "#3b82f6",
    600: "#2563eb",
  }
}

This improves:

• Consistency
• Maintainability
• Team collaboration
• Theme scalability

Later, changing your brand color becomes a single edit instead of hunting through dozens of files.

---

6. Use Arbitrary Values Carefully

Tailwind supports arbitrary values like this:

<div class="top-[117px]">

This is useful sometimes, but overusing it can make your design system inconsistent.

Before using arbitrary values:

• Check if a Tailwind spacing value already exists
• Ask whether the value should become part of your design system

Use them as exceptions, not defaults.

---

7. Learn Flexbox and Grid Properly

Tailwind doesn’t replace CSS knowledge.

In fact, Tailwind becomes dramatically more powerful once you fully understand:

• Flexbox
• CSS Grid
• Positioning
• Spacing
• Responsive design

Tailwind simply gives you faster access to those concepts.

Developers who struggle with layout in Tailwind usually struggle with layout in CSS generally.

---

8. Use Typography Plugin for Blog Content

If you’re building:

• Blogs
• Documentation
• Articles
• Markdown pages

Install the Typography plugin.

npm install @tailwindcss/typography

Then use:

<article class="prose dark:prose-invert">

This instantly gives beautiful styling for:

• Headings
• Paragraphs
• Lists
• Tables
• Code blocks

Without it, raw markdown content often looks unfinished.

---

9. Keep Utility Order Consistent

Large Tailwind class lists become difficult to scan if unordered.

A clean order improves readability dramatically.

Example structure:

1. Layout
2. Spacing
3. Sizing
4. Typography
5. Colors
6. Effects
7. States

Example:

<div class="flex items-center gap-4 p-6 text-lg font-medium bg-gray-900 rounded-xl shadow-lg">

Consistent ordering helps both solo developers and teams.

---

10. Don’t Fear Long Class Lists

At first, Tailwind classes look overwhelming.

But over time, you realize the benefits:

• Everything is visible immediately
• No jumping between files
• Easier refactoring
• Faster iteration
• Less naming frustration

Long class lists are often easier to maintain than hundreds of scattered CSS selectors.

The key is keeping them organized and readable.

---

Final Thoughts

Tailwind CSS rewards repetition.

The first few days can feel awkward, especially if you’re coming from traditional CSS or frameworks like Bootstrap.

But once the utility-first workflow clicks, development becomes incredibly fast and enjoyable.

You stop fighting CSS and start focusing on building interfaces.

And honestly, that’s when frontend development becomes fun again.