Tailwind Config Generator Free Online Tool 2026

Last updated March 22, 2026

Minimal Starter Configuration

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{html,js,jsx,ts,tsx}',
    './public/index.html',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

The content array tells Tailwind which files to scan for class names. Only classes found in these files are included in the final CSS bundle, keeping it small.

Custom Brand Colors

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
  theme: {
    extend: {
      colors: {
        // Brand primary color with full shade scale
        primary: {
          50:  '#eff6ff',
          100: '#dbeafe',
          200: '#bfdbfe',
          300: '#93c5fd',
          400: '#60a5fa',
          500: '#3b82f6',
          600: '#2563eb',
          700: '#1d4ed8',
          800: '#1e40af',
          900: '#1e3a8a',
          950: '#172554',
        },
        // Semantic colors
        success: '#16a34a',
        warning: '#d97706',
        danger:  '#dc2626',
        // Simple named color
        brand: '#7c3aed',
      },
    },
  },
  plugins: [],
}

Use extend to add colors without removing the default Tailwind palette. Your custom colors work with all utility prefixes: bg-primary-600, text-primary-700, border-primary-500.

Custom Typography Scale

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans:  ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
        serif: ['Merriweather', 'ui-serif', 'Georgia', 'serif'],
        mono:  ['JetBrains Mono', 'ui-monospace', 'monospace'],
      },
      fontSize: {
        'xs':   ['0.75rem',  { lineHeight: '1rem' }],
        'sm':   ['0.875rem', { lineHeight: '1.25rem' }],
        'base': ['1rem',     { lineHeight: '1.5rem' }],
        'lg':   ['1.125rem', { lineHeight: '1.75rem' }],
        'xl':   ['1.25rem',  { lineHeight: '1.75rem' }],
        '2xl':  ['1.5rem',   { lineHeight: '2rem' }],
        '3xl':  ['1.875rem', { lineHeight: '2.25rem' }],
        '4xl':  ['2.25rem',  { lineHeight: '2.5rem' }],
        '5xl':  ['3rem',     { lineHeight: '1' }],
        // Custom display size
        'display': ['4rem', { lineHeight: '1', letterSpacing: '-0.02em' }],
      },
      fontWeight: {
        thin:       '100',
        light:      '300',
        normal:     '400',
        medium:     '500',
        semibold:   '600',
        bold:       '700',
        extrabold:  '800',
      },
    },
  },
}

Custom Spacing Scale

module.exports = {
  theme: {
    extend: {
      spacing: {
        // Add values not in the default scale
        '13':  '3.25rem',
        '15':  '3.75rem',
        '18':  '4.5rem',
        '22':  '5.5rem',
        '26':  '6.5rem',
        '30':  '7.5rem',
        // Named semantic spacing
        'sidebar': '16rem',
        'header':  '4rem',
        'content': '72rem',
      },
    },
  },
}

Custom Breakpoints

module.exports = {
  theme: {
    screens: {
      // Replace default breakpoints entirely
      'xs':  '480px',
      'sm':  '640px',
      'md':  '768px',
      'lg':  '1024px',
      'xl':  '1280px',
      '2xl': '1536px',
      // Custom named breakpoints
      'tablet':  '768px',
      'laptop':  '1024px',
      'desktop': '1280px',
      'wide':    '1600px',
    },
  },
}

Dark Mode Configuration

module.exports = {
  // 'media' uses prefers-color-scheme
  // 'class' uses a .dark class on the html element
  darkMode: 'class',

  content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

With darkMode: 'class', toggle dark mode by adding or removing the dark class on the html element:

// Toggle dark mode
document.documentElement.classList.toggle('dark');

// Persist preference
localStorage.setItem('theme', 'dark');

With Popular Plugins

module.exports = {
  content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/forms'),        // Better form element styles
    require('@tailwindcss/typography'),   // Prose styles for rich text
    require('@tailwindcss/aspect-ratio'), // Aspect ratio utilities
    require('@tailwindcss/line-clamp'),   // Text truncation utilities
  ],
}

Install plugins first: npm install -D @tailwindcss/forms @tailwindcss/typography

Custom Animations and Keyframes

module.exports = {
  theme: {
    extend: {
      keyframes: {
        'fade-in': {
          '0%':   { opacity: '0', transform: 'translateY(-10px)' },
          '100%': { opacity: '1', transform: 'translateY(0)' },
        },
        'slide-in': {
          '0%':   { transform: 'translateX(-100%)' },
          '100%': { transform: 'translateX(0)' },
        },
      },
      animation: {
        'fade-in':  'fade-in 0.3s ease-out',
        'slide-in': 'slide-in 0.4s ease-out',
      },
    },
  },
}

Use with: class="animate-fade-in" or class="animate-slide-in"

Custom Box Shadows

module.exports = {
  theme: {
    extend: {
      boxShadow: {
        'card':    '0 2px 8px rgba(0, 0, 0, 0.08)',
        'modal':   '0 20px 60px rgba(0, 0, 0, 0.3)',
        'button':  '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
        'colored': '0 4px 14px rgba(59, 130, 246, 0.4)',
      },
    },
  },
}

Configuration Checklist

• content array covers all files that use Tailwind classes
• Use extend to add to the default theme, not replace it
• Define brand colors as shade scales (50–950) for full utility coverage
• Set darkMode to 'class' for user-controlled dark mode
• Add font families with fallback stacks
• Install and require any plugins you add to the plugins array
• Run npx tailwindcss --dry-run to validate the config before building

Use the Tailwind Config Generator to build your configuration visually, then drop the generated tailwind.config.js directly into your project.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{html,js,jsx,ts,tsx,vue}',
    './public/index.html',
  ],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        primary: {
          500: '#6366f1',
          600: '#4f46e5',
          700: '#4338ca',
        },
      },
      fontFamily: {
        sans: ['Inter var', 'sans-serif'],
      },
      borderRadius: {
        'xl':  '0.75rem',
        '2xl': '1rem',
        '3xl': '1.5rem',
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
  ],
}