Tailwind CSS Tips for Production Apps

## Why Tailwind? Tailwind CSS provides utility-first classes that let you build custom designs without leaving your HTML. ## Tips ### 1. Use `@apply` Sparingly Only use `@apply` for truly repeated patterns like `.btn-primary`. Otherwise, extract React components. ### 2. Dark Mode Enable class-based dark mode in `tailwind.config.ts`: ```typescript module.exports = { darkMode: "class", // ... }; ``` ### 3. CSS Variables for Theming Define your color palette as CSS custom properties so themes can be swapped at runtime. ### 4. Purge Unused Styles Tailwind v3+ automatically tree-shakes unused styles in production builds — make sure your `content` paths cover all template files. ### 5. Typography Plugin Use `@tailwindcss/typography` for beautiful prose styling with the `prose` class. ## Conclusion Tailwind scales from prototypes to production without accumulating technical debt in your stylesheets.