How do you customize Tailwind CSS colors?

[Hadyen888]

I want to change the overall theme of my website without reassigning the variables everywhere

[AidenJastrzembski]

Edit the theme.extend.colors section in tailwind.config.js.
it would look like this

  theme: {
    extend: {
      colors: {
        primary: {
          light: '#6D28D9', // Custom light shade
          DEFAULT: '#4C1D95', // Default primary color
          dark: '#3B0764', // Custom dark shade
        },
        secondary: '#14B8A6', // Single custom color
        danger: '#EF4444', // Another custom color
      },
    },
  },
  plugins: [],
};

[AbdushukurRasulov]

How this can be done with Tailwind v4 in css file ?
@AidenJastrzembski

[wongjn]

@theme {
  --color-primary-light: #6D28D9;
  --color-primary: #4C1D95;
  --color-primary-dark: #3B0764;
  --color-secondary: #14B8A6;
  --color-danger: #EF4444;
}

[AbdushukurRasulov]

      colors: {
        brand: {
          primary: "#18214D",
          purple: "#5800CA",
          red: "#FF4B4A",
          "light-red": "#FFE0EB",
          green: "#16DBAA",
          "medium-green": "#41D4A8",
          "medium-blue": "#718EBF",
        },
      },

I usually define brand colors inside brand object with config.js.
But on css file, I should write :

@theme {
  --color-brand-light: ...;
  --color-brand-purple: ...;
  ....
}

what I am asking, is there any way to do like object based without repeating --color- each line ?
@wongjn

[wongjn]

Nope!