(Tailwind v4) Different Color set for element like text color, background color etc

[keshavkatwe]

How can we achieve the same behaviour in tailwind v4, Using only css file

module.exports = {
  theme: {
    extend: {
      textColors: {
        'primary': red,
      },
     backgroundColor: {
        'primary': blue,
     }
    }
  }
}

I am not able to achieve the same in tailwind v4, I have a design system with predined colors for text, background, border.
Can someone help me.?

[wongjn]

You can use --text-color and --background-color namespaces respectively:

@theme {
  --text-color-primary: red;
  --background-color-primary: blue;
}

[keshavkatwe]

@wongjn How can we achieve same behaviour for space and size. I am trying below

@theme {
    --space-xxs: 4px;
    --space-xs: 8px;

    --size-18: 18px;
    --size-24: 24px;
}

this is not working.

[wongjn]

Seems to be working in this Tailwind Play which could suggest it is something particular to your project.

[keshavkatwe]

My bad, I was trying to set spacing like padding, margin, gap and size like h,w etc. Is there a unified way to set spacing and size.

[wongjn]

For those, use --spacing-* like:

@theme {
    --spacing-xxs: 4px;
    --spacing-xs: 8px;
}

[keshavkatwe]

Thank you @wongjn , I got the solution.