What's the new and improved way to override the gray color, to lets say, slate or stone?

[marchershey]

As stated in the title, what is the best way to override colors in v4?

In the past, you would have the following in your config file:

module.exports = {
    theme: {
        extend: {
            colors: {
                gray: require("tailwindcss/colors").slate, // Change 'gray' to 'slate'
            },
        },
    },
};

Is this still the best way, or does it even work anymore?

Thanks for the help!

[stephen-ics]

I'm pretty sure in v4 the best way is to override the default colours altogether rather than "extending" it.

const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: { gray: colors.slate },
  },
}

[adamwathan]

We explored coming up with some clever syntax for this but ultimately decided the right thing to recommend is just defining the colors in the most basic way possible.

Here's an example of taking all of the zinc shades but calling them gray instead:

@import "tailwindcss";

@theme {
  --color-gray-50: oklch(0.985 0 0);
  --color-gray-100: oklch(0.967 0.001 286.375);
  --color-gray-200: oklch(0.92 0.004 286.32);
  --color-gray-300: oklch(0.871 0.006 286.286);
  --color-gray-400: oklch(0.705 0.015 286.067);
  --color-gray-500: oklch(0.552 0.016 285.938);
  --color-gray-600: oklch(0.442 0.017 285.786);
  --color-gray-700: oklch(0.37 0.013 285.805);
  --color-gray-800: oklch(0.274 0.006 286.033);
  --color-gray-900: oklch(0.21 0.006 285.885);
  --color-gray-950: oklch(0.141 0.005 285.823);
}

Basically just copy the color you want and change the name. You only have to do it once, and then when you go to look at your source files the values are right there in plain sight instead of some cryptic abstract DSL for aliasing things.

Can find all of the default colors here for copy and pasting reference:

https://tailwindcss.com/docs/colors#default-color-palette-reference

[marchershey]

Welp, the most basic way possible it is then. I'm off to add a ./colors.css file for organization. Thanks for the response!

[babakfp]

• It was much better with the config file :(. No one complained about the config file, it was useful, and now it's gone! You could do so much with the JS config, not it's gone. Great.
• It's also not possible to disable core plugins.
• Prettier formats some things incorrectly because of the made up CSS syntax.
• Annoying logs in the terminal!

[typescript-any]

I have this css file but color ovverride is not woking can anyone help me?

@import "tailwindcss";

@theme {
--*: initial;
--color-dark-25: "#7A7E80";
--color-dark-50: "#464A4D";
--color-dark-75: "#161719";
--color-dark-100: "#0D0E0F";

--color-light-20: "#E3E5E5";
--color-light-40: "#F2F4F5";
--color-light-60: "#F7F9FA";
--color-light-80: "#FBFBFB";
--color-light-100: "#FFFFFF";

--color-violet-20: "#EEE5FF";
--color-violet-40: "#D3BDFF";
--color-violet-60: "#B18AFF";
--color-violet-80: "#8F57FF";
--color-violet-100: "#8F57FF";

--color-red-20: "#FDD5D7";
--color-red-40: "#FDA2A9";
--color-red-60: "#FD5662";
--color-red-80: "#FD5662";
--color-red-100: "#FD3C4A";

--color-green-20: "#CFFAEA";
--color-green-40: "#93EACA";
--color-green-60: "#65D1AA";
--color-green-80: "#2AB784";
--color-green-100: "#00A86B";

--color-yellow-20: "#FCEED4";
--color-yellow-40: "#FCDDA1";
--color-yellow-60: "#FCCC6F";
--color-yellow-80: "#FCBB3C";
--color-yellow-100: "#FCAC12";

--color-blue-20: "#BDDCFF";
--color-blue-40: "#8AC0FF";
--color-blue-60: "#57A5FF";
--color-blue-80: "#248AFF";
--color-blue-100: "#0077FF";
}

[marchershey]

Nothing in your snippet is noticeably wrong, so it's probably an issue elsewhere. I suggest you make a new issue so others will be able to ask questions directly related to your environment.

Make sure you're compiling correctly by looking over the documentation. And this page specifically will be of good use to you.

Edit: I would get rid of the double quotes around your values, even though it most likely doesn't matter. (it in fact does matter lol)

Like so:

@theme {
  --*: initial;
  --color-white: #fff;
  --color-purple: #3f3cbb;
  --color-midnight: #121063;
  --color-tahiti: #3ab7bf;
  --color-bermuda: #78dcca;
}

I'm also not sure if it matters but if you're not using the default variables, I'd stay away from using similar variables. So instead of using *-20/30/40, you either use color names or use the default variables of 100/200/300. It may mess up the way tailwind finds the variables, but that's a total guess.

A quick way to test it is by seeing if *-100 works, but the rest do not.

Anyways, if non of the above works, create your own issue/discussion so others can dive deeper into your setup.

[wongjn]

It's the quotes around the values that is stopping the config from working. The names are valid.