Tailwind4

Tailwind CSS v4+ Best Practices

Core Concepts & Setup (v4 Focus)

• Leverage Native CSS: Understand that Tailwind v4 integrates more deeply with native CSS features.
• Primary CSS Entry Point: Use a single CSS file (e.g., src/app.css) as the main entry point.
• Import Tailwind: Import Tailwind's core styles using native CSS @import statements within your main CSS file:

  /* src/app.css */
  @import "tailwindcss";
  

• CSS Variables for Configuration: Configure and customize Tailwind primarily using standard CSS variables directly in your CSS file. The tailwind.config.js file is often unnecessary for basic theme customizations.

  /* src/app.css */
  @import "tailwindcss";
  
  @layer theme {
    :root {
      --color-primary: oklch(60% 0.2 260);
      --font-sans: "Inter", sans-serif;
    }
  }
  

• Minimal tailwind.config.js: Only use tailwind.config.js (or .ts) for advanced configurations not expressible via CSS variables (like plugins or complex variants) or if preferred for organization.
• No content Configuration Needed (Typically): Tailwind v4's engine often doesn't require the content array in the config file due to its build process integration.
• Framework Integration: Follow framework-specific guides (Next.js, Vite, etc.) for optimal setup, ensuring Tailwind processes your main CSS entry point.

Styling Philosophy

• Utility-First: Apply styles primarily using Tailwind's utility classes directly in your markup (HTML/JSX/Vue/Svelte templates).
• Avoid Premature Abstraction: Only create reusable component classes or use @layer components when a pattern is truly reused significantly and warrants abstraction.
• Consistency: Use the defined theme values (colors, spacing, fonts) via utilities rather than arbitrary magic numbers.

Using Utilities

• Apply utilities directly in the class attribute.
• Combine utilities for desired styling (e.g., flex items-center justify-between p-4 bg-primary text-white).
• Understand variant modifiers for states (e.g., hover:, focus:, dark:, group-hover:) and breakpoints (e.g., sm:, md:, lg:).