How I Fixed My Tailwind Colors: Confusing v3 Config with v4 @theme

For the past few days I couldn’t figure out why my Tailwind colors weren’t showing. I was trying to match a Figma design, but nothing worked

At first i was using tailwind v3 syntax to add custom colors which didn't work since i was using tailwind v4..

theme: {
  extend: {
    colors: {
      'blue': {
        950: '#10141E',
        900: '#161D2F',
        500: '#5A698F',
      },
      'red': {
        500: '#FC4747',
      },
    }
  }
}

The problem: my project was already on tailwind v4. This syntax doesn't work anymore in v4.

So today i finally went back to tailwind docs...and found the solution :

@import "tailwindcss";

@theme {
  --color-blue-950: #10141E;
  --color-blue-900: #161D2F;
  --color-blue-500: #5A698F;
  --color-red-500: #FC4747;
}

Lesson learned: In Tailwind v4, you don’t need tailwind.config.js for custom colors. Instead, you define them directly in your CSS using @theme {}.