Tailwind CSS - Theme Configuration

---

Tailwind CSS Theme Configuration specifies theme for the project.

In 'tailwind.config.js', the 'Theme' section lets you define your project's color palette, type scale, fonts, breakpoints, border radius values, and more.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      sm: '480px',
      md: '768px',
      lg: '976px',
      xl: '1440px',
    },
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  }
}

Theme Structure

The 'Theme' section of 'tailwind.config.js' contains a list of keys such as 'screens', 'colors', 'spacing', and 'core plugin' for customization.

Screens

The 'screens' key lets you set the responsive breakpoints in your project.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
    }
  }
}

Colors

The 'colors' key lets you set the global color palette for your project.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      black: '#000',
      white: '#fff',
      gray: {
        100: '#f7fafc',
        // ...
        900: '#1a202c',
      },

      // ...
    }
  }
}

Spacing

The 'spacing' key lets you to set the global spacing and sizing scale for your project.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    spacing: {
      px: '1px',
      0: '0',
      0.5: '0.125rem',
      1: '0.25rem',
      1.5: '0.375rem',
      2: '0.5rem',
      2.5: '0.625rem',
      3: '0.75rem',
      3.5: '0.875rem',
      4: '1rem',
      5: '1.25rem',
    },
  }
}

Core Plugins

Theme settings let you choose options for each plugin. For example, borderRadius sets the rounded corner styles.

module.exports = {
    theme: {
        borderRadius: {
        'none': '0',
        'sm': '.125rem',
        DEFAULT: '.25rem',
        'lg': '.5rem',
        'full': '9999px',
        },
    }
    }

The Names become class names, and values set the style. This creates classes like rounded. It's how Tailwind works for all plugins.

.rounded-none { border-radius: 0 }
.rounded-sm   { border-radius: .125rem }
.rounded      { border-radius: .25rem }
.rounded-lg   { border-radius: .5rem }
.rounded-full { border-radius: 9999px }

Customizing Default Theme

Your project uses the default theme settings automatically. If you want to change them, you have options to customize the theme to fit your needs.

Extending Default Theme

The 'theme.extend' option allows you to add new values to theme while keeping the default values. This combines new and existing values, creating new classes for you.

As an example, here we extend the fontFamily property to add the font-display class that can change the font used on an element:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        display: 'Oswald, ui-serif', // Adds a new `font-display` class
      }
    }
  }
}

After adding this to your theme, you can use it just like any other font family utility:

<h1 class="font-display">
  This uses the Oswald font
</h1>

Overriding The Default Theme

You can change the default theme options by adding overrides directly to the theme section in 'tailwind.config.js'.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    // Replaces all of the default `opacity` values
    opacity: {
      '0': '0',
      '20': '0.2',
      '40': '0.4',
      '60': '0.6',
      '80': '0.8',
      '100': '1',
    }
  }
}

Referencing other values

Use a closure to reference other theme values. It gives you a theme() function to access other values using dot notation.

For example, you could generate background-size utilities for every value in your spacing scale by referencing theme('spacing') in your backgroundSize configuration.

/** @type {import('tailwindcss').Config} */
module.exports = {
    theme: {
    spacing: {
        // ...
    },
    backgroundSize: ({ theme }) => ({
        auto: 'auto',
        cover: 'cover',
        contain: 'contain',
        ...theme('spacing')
    })
    }
}

Note: Use functions for top-level theme keys.

/** @type {import('tailwindcss').Config} */
module.exports = {
    theme: {
    fill: ({ theme }) => ({
        gray: theme('colors.gray')
    })
    }
}

Referencing the default theme

To use a value from the default theme, import it from tailwindcss/defaultTheme.

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: [
          'Lato',
          ...defaultTheme.fontFamily.sans,
        ]
      }
    }
  }
}

Disabling an entire core plugin

To disable a core plugin, set it to 'false' in corePlugins, not an empty object in theme configuration.

/** Don't Do */
  
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    opacity: {},
  }
}

/** Always Do */
/** @type {import('tailwindcss').Config} */
module.exports = {
corePlugins: {
  opacity: false,
}
}

Configuration reference

Most theme object keys match Tailwind's core plugins, except screens, colors, and spacing. Some plugins don't have theme keys because they only accept fixed values. You can also extend the default theme using the theme.extend key.

All of these keys are also available under the theme.extend key to enable extending the default theme.