I’m on the 7th screencast “Customizing your design system”, it’s talking about themes.

This is handy way to see the full default config file from Tailwind CSS, just run

npx tailwind init tailwind-full.config.js --full

You can scaffold this file (after running aforementioned command to generate this file). You are free to edit the values to whatever you want

Downsides to this approach:

• Customised Vs Default 🤔🤷🏻‍♀️
• Upgrading Tailwind CSS won’t automatically inherit new styles (you’ll miss out on new features) 😓

But you will have full ownership of this config file, just not up-to-date with TailWind CSS’ latest developments.

So alternatively, you can use a minimal default config file. With this way, you can inherit Tailwind CSS’ new design updates.
👆 This is the recommended way as you can see your custom changes only and leaving the default config file alone.

Other things to note

In the tailwind.config,js:

theme: {
    colors: {
      ‘brand-blue’: ‘#1992d4’’ 
    },
    extend:{}
  },

• In “theme”, color is at the root and overrides all the other colours (which is handy if you want to have control of your own brand colours, for example). This does mean it wipes out Tailwind CSS’ default colour palette like gray, indigo, etc. This means only ‘brand-blue’: ‘#1992d4’’ exists!
• If you want to keep Tailwind CSS’ default palette colours, use extend section in the config file. Anything in here will be merged with the default values.

And that's as far as I got... adulting and dinner-making a calling 'cause I'm hungee, and it's good to take a break. 😊