Tailwind CSS - Presets

---

Tailwind CSS Presets allows you to create your own reusable configuration presets.

When you add your own configuration to tailwind.config.js, it combines with the default configuration. Your changes override or add to the default settings.

The presets option lets you use a different base configuration, making it easy to reuse custom settings across multiple projects.

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [
    require('@acmecorp/tailwind-base')
  ],
  // ...
}

Creating a preset

Presets are the same as the custom settings you put in your tailwind.config.js file.

// Example preset
module.exports = {
    theme: {
    colors: {
        blue: {
        light: '#85d7ff',
        DEFAULT: '#1fb6ff',
        dark: '#009eeb',
        },
        pink: {
        light: '#ff7ce5',
        DEFAULT: '#ff49db',
        dark: '#ff16d1',
        },
        gray: {
        darkest: '#1f2d3d',
        dark: '#3c4858',
        DEFAULT: '#c0ccda',
        light: '#e0e6ed',
        lightest: '#f9fafc',
        }
    },
    fontFamily: {
        sans: ['Graphik', 'sans-serif'],
    },
    extend: {
        flexGrow: {
        2: '2',
        3: '3',
        },
        zIndex: {
        60: '60',
        70: '70',
        80: '80',
        90: '90',
        100: '100',
        },
    }
    },
    plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
    ],
}

To use a preset, add it to your project's tailwind.config.js file under the "presets" section.

/** @type {import('tailwindcss').Config} */
module.exports = {
    presets: [
    require('./my-preset.js')
    ],
    // Customizations specific to this project would go here
    theme: {
    extend: {
        minHeight: {
        48: '12rem',
        }
    }
    },
}

Presets normally add to Tailwind's defaults. To start fresh, add an empty "presets" key to override defaults.

// Example preset
module.exports = {
    presets: [],
    theme: {
    // ...
    },
    plugins: [
    // ...
    ],
}

Merging logic in-depth

The project-specific configurations (in tailwind.config.js) combine with presets, just like they combine with default settings.

The following options in tailwind.config.js simply replace the same option if present in a preset:

• content
• darkMode
• prefix
• important
• variantOrder
• separator
• safelist

The remaining options are combined in a way that makes sense for each one, explained in more detail below.

Theme

When combining theme settings, tailwind.config.js replaces preset settings. But extend settings are combined from all sources and added on top.

Presets

Presets can be nested, meaning a preset can contain another preset, and so on.

Plugins

Preset plugins combine with project plugins. This means you can't disable a plugin added by a preset. If you want to disable a preset plugin, remove it from the preset and add it to individual projects instead.

Core plugins

The corePlugins option behaves differently depending on whether you configure it as an object or as an array.

module.exports = {
    // ...
    corePlugins: {
        float: false,
    },
    }

/** @type {import('tailwindcss').Config} */
module.exports = {
    presets: [
    require('./my-preset.js'),
    ],
    // This configuration will be merged
    corePlugins: {
    cursor: false
    }
}

If you configure corePlugins as an array, it replaces any corePlugins configuration provided by your configured preset(s).

module.exports = {
    // ...
    corePlugins: {
        float: false,
    },
    }

/** @type {import('tailwindcss').Config} */
module.exports = {
    presets: [
    require('./example-preset.js'),
    ],
    // This will replace the configuration in the preset
    corePlugins: ['float', 'padding', 'margin']
}

Extending multiple presets

Presets is an array that holds multiple customizations, making it easy to reuse and combine them.

/** @type {import('tailwindcss').Config} */
module.exports = {
    presets: [
    require('@acmecorp/tailwind-colors'),
    require('@acmecorp/tailwind-fonts'),
    require('@acmecorp/tailwind-spacing'),
    ]
}

When multiple presets overlap, the last one applied takes priority.

For example, if both of these configurations provided a custom color palette (and were not using extend), the color palette from configuration-b would be used:

/** @type {import('tailwindcss').Config} */
module.exports = {
    presets: [
    require('@acmecorp/configuration-a'),
    require('@acmecorp/configuration-b'),
    ]
}

Disabling the default configuration

Disable Defaults To start from scratch, set presets to an empty array. This will remove all of Tailwind's default settings, including colors, fonts, and spacing.

/** @type {import('tailwindcss').Config} */
module.exports = {
    presets: [],
    // ...
}

You can also Create a standalone design system within a preset.

module.exports = {
    presets: [],
    // ...
    }

/** @type {import('tailwindcss').Config} */
module.exports = {
    presets: [
    require('./my-preset.js')
    ],
    // ...
}