Tailwind 3.0 defaultTheme colors

user_1729405 0
Viewed 459

In an attempt to update PHP version, I came up with some funky node issues oddly enough instead. I'm having some weird Tailwind 3.0 compiling issues where not all the color shades are appearing. The defaultTheme colors are not compiling right. I have colors in the tailwind-config.js but not all shades are appearing like the 700 for blue. I noticed if I put the colors I want in the array (view gray in the example attached), it works. Do I have to add every color shade? This suddenly just started happening. It was fine before the PHP update. I'm trying to use text-blue-700 and it can't find it.

Example of the setup: https://play.tailwindcss.com/HSzmza7os3?file=config

Has anyone else had this issue before where the defaultTheme won't pull in all the theme color shades?

tailwind-css
1 Answers

You don't have to use defaultTheme if you're trying to add variations to the existing theme. Instead, you can put your color additions in the extend section of the config object. For example, to keep the default Tailwind classes like text-gray-500 and add your new ones:

module.exports = {
  plugins: [],
  theme: {
    extend: {
      colors: {
        gray: {
          lightest: '#F7F7F7',
          lighter: '#f1f1f1',
          light: '#e1e1e1',
          default: '#57677A',
          dark: '#C2CAD3',
          darker: '#656565',
          darkest: '#808080',
        },
      },
    },
  },
}

If you only want to use the default colors (no additions), you should not have to add anything to the config.

Working version of your example: https://play.tailwindcss.com/rKi0lRmivh

user_2874760
Related