BrokenRubik
Tailwind CSS Best Practices
Tailwind CSS has revolutionized how we write CSS. Here are some best practices to help you make the most of this utility-first framework.
1. Use the cn() Utility
Combining classes can get messy. Use a utility function to merge Tailwind classes properly:
import { clsx } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}Usage:
<div className={cn(
"px-4 py-2",
isActive && "bg-primary text-white",
className
)}>
Content
</div>2. Leverage Class Variance Authority
For component variants, use class-variance-authority:
import { cva } from "class-variance-authority"
const buttonVariants = cva(
"font-medium rounded-lg transition-colors",
{
variants: {
variant: {
primary: "bg-primary text-white hover:opacity-90",
secondary: "bg-secondary text-black hover:opacity-90",
outline: "border-2 border-foreground hover:bg-foreground hover:text-background",
},
size: {
sm: "px-3 py-1.5 text-sm",
md: "px-6 py-2",
lg: "px-8 py-3 text-lg",
},
},
defaultVariants: {
variant: "primary",
size: "md",
},
}
)3. Organize Your Tailwind Config
Keep your tailwind.config.ts organized and use design tokens:
export default {
theme: {
extend: {
colors: {
primary: "#9547FF",
secondary: "#DFF95F",
accent: "#FF707A",
},
fontFamily: {
heading: ["var(--font-whyte)"],
body: ["var(--font-inter)"],
},
spacing: {
'18': '4.5rem',
'88': '22rem',
},
},
},
}4. Use @layer for Custom Styles
When you need custom CSS, use Tailwind's @layer directive:
@layer components {
.card {
@apply rounded-lg border border-foreground/10 p-6 bg-foreground/5;
}
}
@layer utilities {
.text-balance {
text-wrap: balance;
}
}5. Mobile-First Approach
Always design mobile-first, then add breakpoints:
<div className="
grid grid-cols-1
md:grid-cols-2
lg:grid-cols-3
xl:grid-cols-4
gap-4
">
{/* Content */}
</div>6. Avoid Arbitrary Values When Possible
Use design tokens instead of arbitrary values:
{/* ❌ Avoid */}
<div className="mt-[23px] text-[#9547FF]" />
{/* ✅ Better */}
<div className="mt-6 text-primary" />Performance Tips
- Use PurgeCSS in production (included by default)
- Minimize use of arbitrary values
- Reuse component classes
- Use @apply sparingly
Conclusion
Following these best practices will help you write cleaner, more maintainable Tailwind CSS code. Happy styling!
BrokenRubik
NetSuite Development Agency
Expert team specializing in NetSuite ERP, SuiteCommerce development, and enterprise integrations. Oracle NetSuite partner with 10+ years of experience delivering scalable solutions for mid-market and enterprise clients worldwide.
Get More Insights Like This
Join our newsletter for weekly tips, tutorials, and exclusive content delivered to your inbox.
Related Articles
How a SuiteCommerce theme project comes to life
An inside look at SuiteCommerce theme development from discovery to launch. Learn the process and best practices behind a successful project.
Why custom SuiteCommerce theme development is essential for your brand
Why SuiteCommerce theme development is essential. Build brand identity, improve UX, and drive conversions.