Applying the full color palette of Tailwind CSS

tailwindcss 3.0.16

Tailwindcss does not activate whole color pallete by default.

Default color palette

In order to do it, add the following configuration to tailwind.config.js.

const colors = require('tailwindcss/colors');

module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: '#000',
      white: '#fff',
      gray: colors.gray,
      red: colors.red,
      orange: colors.orange,
      amber: colors.amber,
      yellow: colors.yellow,
      lime: colors.lime,
      green: colors.green,
      emerald: colors.emerald,
      teal: colors.teal,
      cyan: colors.cyan,
      sky: colors.sky,
      blue: colors.blue,
      indigo: colors.indigo,
      violet: colors.violet,
      purple: colors.purple,
      fuchsia: colors.fuchsia,
      pink: colors.pink,
      rose: colors.rose,
    },
  },
};

Up to here, it is so easy. However, there is a little thing you need to be careful about.
If you enable purge function of the tailwind and those colors are used as dynamically changed class names, they will be purged which means the exported css doesn't have any of those colors.

This caused unexpected behavior.

module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  ...

You need this instead.

module.exports = {
  purge: {
    content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
    options: {
      safelist: [/^(bg|border|text)-[a-zA-Z]+-[0-9]+$/],
    },
  },

Related Posts