Extending the Default Theme in tailwind.config.js

Tailwind's design system is fully configurable through tailwind.config.js. The theme key holds the default values, and theme.extend is the safe way to add to or override the defaults without losing the built-in scales. Everything inside theme.extend is merged with the defaults, while values placed directly in theme replace the corresponding default scale entirely. Common extensions include adding brand colors, custom spacing values, additional font families, extra border-radius values, and extended breakpoints. Adding a color inside theme.extend.colors as an object with shade keys (50 through 950) integrates seamlessly with all color utilities — bg-brand-500, text-brand-200, border-brand-700 all become available automatically. Adding a single named color like brand: '#4f46e5' makes bg-brand available without shades. Screen breakpoints can be added (or replaced) under theme.extend.screens. Custom breakpoints like xs: '475px' for very small devices or 3xl: '1920px' for ultra-wide monitors extend the responsive prefix system. You can also define container-query-style breakpoints or print breakpoints. The theme function within config values allows referencing other parts of the theme — theme('colors.blue.500') evaluates to the hex value of blue-500 in any config string.

Example

// tailwind.config.js — comprehensive theme extension
const defaultTheme = require('tailwindcss/defaultTheme');

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  content: ['./src/**/*.{html,js,jsx,tsx,vue}'],

  theme: {
    extend: {
      // Custom brand color with full shade scale
      colors: {
        brand: {
          50:  '#f0f4ff',
          100: '#dce5fe',
          200: '#b9cafe',
          300: '#93adfd',
          400: '#6d8dfc',
          500: '#4f6ef7',  // primary
          600: '#3a52e8',
          700: '#2d3fcb',
          800: '#2733a4',
          900: '#232e82',
          950: '#151a4e',
        },
        // Simple single-value color (no shades)
        'custom-teal': '#14b8a6',
      },

      // Extend font families (prepend to the default stack)
      fontFamily: {
        sans: ['Inter', ...defaultTheme.fontFamily.sans],
        display: ['Cal Sans', 'Inter', ...defaultTheme.fontFamily.sans],
        mono: ['JetBrains Mono', ...defaultTheme.fontFamily.mono],
      },

      // Extra spacing values
      spacing: {
        '18': '4.5rem',
        '88': '22rem',
        '128': '32rem',
      },

      // Extra border radii
      borderRadius: {
        '4xl': '2rem',
        '5xl': '2.5rem',
      },

      // Extra screen breakpoints
      screens: {
        'xs': '475px',
        '3xl': '1920px',
      },

      // Custom box shadows
      boxShadow: {
        'card': '0 2px 15px -3px rgba(0,0,0,0.07), 0 10px 20px -2px rgba(0,0,0,0.04)',
        'glow-blue': '0 0 20px rgba(79,110,247,0.4)',
      },
    },
  },

  plugins: [],
};

HTML

Full Editor

Related Resources

Tailwind CSS Reference

Complete tag & property list

Tailwind CSS How-To Guides

Step-by-step practical guides

Tailwind CSS Exercises

Practice what you've learned