Tailwind CSS

Configuration

Location: tailwind.config.ts

Key Features:

• ✅ Dark mode: Class-based (darkMode: ["class"])
• ✅ Content paths: Scans src/ directory for classes
• ✅ Extended theme: Custom colors, fonts, spacing
• ✅ Plugins: tailwindcss-animate for animations

Custom Theme Extensions

// tailwind.config.ts
export default {
  theme: {
    extend: {
      colors: {
        // CSS variable-based colors
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        // ... more colors
      },
      fontFamily: {
        inter: ["Inter", "sans-serif"], // Enables class="font-inter"
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "caret-blink": {
          "0%,70%,100%": { opacity: "1" },
          "20%,50%": { opacity: "0" },
        },
      },
      animation: {
        "caret-blink": "caret-blink 1.25s ease-out infinite",
      },
      zIndex: {
        100: "100",
        150: "150",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
};

Using Tailwind Classes

// Example: Utility classes
<div className="flex items-center justify-between gap-4 p-6 bg-background rounded-lg border">
  <h2 className="text-2xl font-semibold text-foreground">Title</h2>
  <button className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90">
    Click me
  </button>
</div>

Custom Utility Classes

Custom utilities are defined in globals.css:

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  
  .centered-full-w-container {
    max-width: 1600px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}