Tailwind CSS Best Practices

Embrace the Utility-First Workflow

The core idea of Tailwind is to build complex components from a constrained set of primitive utilities. Instead of writing custom CSS for every component, you apply existing classes directly in your HTML. This might feel strange at first, but it leads to faster development and more consistent designs.

Don't Over-Abstract

A common mistake is to immediately start abstracting utility classes into component classes with @apply. While @apply has its uses, you should first try to create reusable components at the template level (e.g., React or Vue components). This keeps your styling and markup co-located and easier to reason about.

Use theme() to access your design tokens

Your tailwind.config.js file is the source of truth for your design system. When you need to write custom CSS (and you sometimes will), use the theme() function to access your design tokens directly. This ensures your custom styles are consistent with your utility classes.

.my-custom-class {
background-color: theme('colors.primary');
}