Tailwind CSS (latest stable) best practices. Use when setting up, migrating, or debugging Tailwind in HTML, Vue + Vite, or Nuxt projects. Auto-activates when tailwind.config.ts is present or class="..." patterns suggest Tailwind.
# Check which version is installed
cat package.json | grep tailwind
# v4 — config via CSS, no tailwind.config.ts needed
# v3 — requires tailwind.config.ts
/* app.css */
@import "tailwindcss";
@theme {
--color-primary: #2563eb;
--font-sans: "Inter", sans-serif;
--radius-card: 0.75rem;
}
// tailwind.config.ts
import type { Config } from "tailwindcss";
export default {
content: ["./src/**/*.{html,ts,vue}"],
theme: {
extend: {
colors: { primary: "#2563eb" },
},
},
} satisfies Config;
Extract repeated class patterns to components or @apply — never repeat long chains:
/* Use @apply for repeated patterns only */
@layer components {
.btn-primary {
@apply px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90;
}
}
clsx or cn() helper for conditional class logic in TS/Vuebunx tailwindcss --input app.css --output out.css to verify output# Check generated output
bunx tailwindcss -i ./src/app.css -o ./dist/out.css --watch
# Verify content paths are correct (v3)
cat tailwind.config.ts | grep content