What is Preset sharing across projects in Tailwind?

Tailwindmarkup~5 mins

Preset sharing across projects in Tailwind

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

Sharing presets lets you reuse the same Tailwind settings in many projects. It saves time and keeps your designs consistent.

You want all your websites to have the same colors and fonts.

You work on multiple projects and want to avoid repeating Tailwind setup.

You want to share custom Tailwind plugins or utilities across projects.

You want to update styles in one place and have all projects use the update.

Syntax

Tailwind

module.exports = {
  presets: [require('./path-to-shared-preset')],
  // other Tailwind config here
}

The presets array lets you include shared Tailwind configs.

You can use relative or package paths to load presets.

Examples

This example loads a preset from a folder above and adds a custom brand color.

Tailwind

module.exports = {
  presets: [require('../tailwind-preset')],
  theme: {
    extend: {
      colors: {
        brand: '#123456'
      }
    }
  }
}

This example uses a preset published as an npm package named my-shared-tailwind-preset.

Tailwind

module.exports = {
  presets: [require('my-shared-tailwind-preset')],
  plugins: []
}

Sample Program

This HTML uses a Tailwind build that includes a shared preset defining the brand color. The background and text colors come from that preset.

Tailwind

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Preset Sharing Example</title>
  <link href="./dist/output.css" rel="stylesheet">
</head>
<body class="bg-brand text-white p-6">
  <h1 class="text-3xl font-bold">Hello from shared preset!</h1>
  <p>This page uses a shared Tailwind preset for colors and fonts.</p>
</body>
</html>

OutputSuccess

Important Notes

Make sure the preset path is correct relative to your Tailwind config file.

Presets merge with your local config. Local settings override preset settings if they conflict.

Use presets to keep your design consistent and reduce repeated setup work.

Summary

Presets let you share Tailwind config across projects easily.

Use the presets array in tailwind.config.js to include shared settings.

Presets help keep your styles consistent and save setup time.