Tailwind CSS config generator

Enter your brand colors and fonts to generate a tailwind.config.js theme extension snippet.

Primary color

Secondary color

Heading font

Body font

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#2563eb',
        secondary: '#3b82f6',
      },
      fontFamily: {
        heading: ['Sora', 'sans-serif'],
        body: ['DM Sans', 'sans-serif'],
      },
    },
  },
};

Frequently asked questions

Where do I paste this?

Merge the generated theme.extend object into your existing tailwind.config.js file.

Related tools

See all 10 free css & design tools

CSS Gradient Generator

Design linear and radial gradients and copy ready-to-use CSS code.

Use CSS Gradient Generator

Box Shadow Generator

Fine-tune offset, blur and color with live preview, then copy the CSS.

Use Box Shadow Generator

Border Radius Previewer

Adjust each corner independently and copy the CSS border-radius.

Use Border Radius Previewer

SVG Pattern Generator

Create tiling dots, stripes, grid or cross-hatch background patterns.

Use SVG Pattern Generator

Tailwind CSS config generator

Enter your brand colors and fonts to generate a tailwind.config.js theme extension snippet.

Primary color

Secondary color

Heading font

Body font

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#2563eb',
        secondary: '#3b82f6',
      },
      fontFamily: {
        heading: ['Sora', 'sans-serif'],
        body: ['DM Sans', 'sans-serif'],
      },
    },
  },
};

Frequently asked questions

Where do I paste this?

Merge the generated theme.extend object into your existing tailwind.config.js file.

Related tools

See all 10 free css & design tools

CSS Gradient Generator

Design linear and radial gradients and copy ready-to-use CSS code.

Use CSS Gradient Generator

Box Shadow Generator

Fine-tune offset, blur and color with live preview, then copy the CSS.

Use Box Shadow Generator

Border Radius Previewer

Adjust each corner independently and copy the CSS border-radius.

Use Border Radius Previewer

SVG Pattern Generator

Create tiling dots, stripes, grid or cross-hatch background patterns.

Use SVG Pattern Generator