Extending the Default Tailwinds Theme

Tailwinds is a fantastic CSS build tool when you want to prototype or build your apps faster, but also find tools like Bootstrap too generic and limited in customization. One of the first things you'll wish to do in Tailwinds is get your brand color palette configured. With the tailwinds intellisense extension in VS Code, you can easily pick the color you need without having to look back at a reference sheet or memorize your colors.

Let's take a look at how to replace or extend the default theme colors in Tailwind. First you will need a tailwind.config.js file. Don't have one setup yet? Go to your root folder in your terminal of choice and run

npx tailwindcss init

This will generate the config file required. It will look similar to this...

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],}

You can create a completely customized color palette of your choosing, and get full intellisense to color pick. To override the default colors, you could do something like this in your config file under theme.

  theme: {
    colors: {
      blue: {
        light: '#85d7ff',
        DEFAULT: '#1fb6ff',
        dark: '#009eeb',
      },
      pink: {
        light: '#ff7ce5',
        DEFAULT: '#ff49db',
        dark: '#ff16d1',
      },
      gray: {
        darkest: '#1f2d3d',
        dark: '#3c4858',
        DEFAULT: '#c0ccda',
        light: '#e0e6ed',
        lightest: '#f9fafc',
      }
    }
  }

However, maybe you like the default colors, and simply wish to extend a few changes. You can do that by adding extend to the theme...

  theme: {
    extend: {
      colors: {
        'regal-blue': '#243c5a',
      }
    }
  }

Now you'll have all other default colors available, plus your custom regal-blue. To use a custom color, it simply works the same as the default colors you can find in the Tailwind docs. To create a div container with a regal blue background, try this...

<div className="container bg-regal-blue"></div>

You can generate classes for your custom colors anywhere you like. Tailwinds provides a lot of options to make the CSS your own style, while making the experience a lot less stressful once you get in a groove using their methods of CSS creation.