Tailwind CSS - Presets

Tailwind CSS - Presets

Tailwind Presets are a powerful feature for creating shareable, reusable configurations. Think of them as a way to build your own flavor of Tailwind—perfect for maintaining a consistent design system across multiple projects or for sharing a starter kit with your team.

The presets option in your tailwind.config.js allows you to specify a base configuration, which is then intelligently merged with your project-specific customizations.

Creating a Preset

A preset is simply a standard Tailwind configuration object, exported from a JavaScript file. It can define a theme, add plugins, and customize core plugins—just like a regular tailwind.config.js.

Example: A Corporate Brand Preset

Let’s create a preset for a fictional company, “Acmecorp”. We’ll define their brand colors, fonts, and include a common plugin.

presets/acmecorp-preset.js

module.exports = {
  theme: {
    colors: {
      // Base colors
      'transparent': 'transparent',
      'white': '#ffffff',
      'black': '#000000',
      // Brand colors
      'brand': {
        'light': '#67e8f9',
        'DEFAULT': '#06b6d4', // Used for 'bg-brand', 'text-brand', etc.
        'dark': '#0e7490',
      },
      // Neutral palette
      'gray': {
        '100': '#f7fafc',
        '500': '#a0aec0',
        '900': '#1a202c',
      }
    },
    fontFamily: {
      sans: ['Inter', 'sans-serif'],
    },
    extend: {
      // Add extended theme values here
    }
  },
  plugins: [
    require('@tailwindcss/forms'),
  ],
};

Using a Preset

To use this preset in a project, require it in the presets array of your tailwind.config.js. Your local customizations will be merged on top of the preset.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [
    require('./presets/acmecorp-preset.js')
  ],
  // Project-specific customizations go here
  theme: {
    extend: {
      spacing: {
        '128': '32rem', // Add a new spacing value just for this project
      }
    }
  },
};

Understanding Merging Logic

How your configuration merges with a preset is key:

• Replaced: Top-level options like content, darkMode, prefix, and separator in your project’s config will completely replace the ones from the preset.
• theme: Defining a theme key (e.g., theme.colors) in your project replaces the same key from the preset. To add to the preset’s theme, use theme.extend.
• theme.extend: This object is merged deeply. Both your project’s and the preset’s extend values will be combined.
• plugins: The plugins arrays are concatenated. You get all plugins from the preset plus any you add in your project. You cannot disable a preset’s plugin from your config.
• presets Array: If you list multiple presets, they are applied in order. The last preset in the array has the highest precedence.

Disabling the Default Tailwind Configuration

If you want to build a design system entirely from scratch, without any of Tailwind’s default theme values, you can provide an empty presets array. This effectively removes Tailwind’s base configuration.

tailwind.config.js

// WARNING: This removes all default colors, spacing, fonts, etc.
// You must define your entire theme from the ground up.

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [],
  theme: {
    colors: {
      'primary': '#ff0000',
    },
    // ... you must define everything you need
  },
};

A common pattern is to create a comprehensive base preset that itself disables the defaults, and then use that preset across all your projects to ensure they are built only with your design system’s tokens.