Tailwind Preset vs Plugin

tailwind, tailwindcss, comparison, selfnote


Image by Devon Breen from Pixabay


Tailwind provides Presets and Plugins to customize Tailwind CSS ("TW" hereafter).

The difference is hard to grasp from descriptions.

Creating your own reusable configuration presets.


Extending Tailwind with reusable third-party plugins.


Note that both promotes "re-usability". A bit confusing because of the recursive definition of presets.

What are they?

Here is the gist.

  • Presets: A base configuration to override
  • Plugins: A JavaScript code to create custom styles

When to use?

  • Presets: To provide common configurations across projects for consistent Look & Feel
  • Plugins: To create styles requiring manual copy/paste

Why choose one over the other?

Presets is more of an abstraction and
they can contain plugins, while the reverse is not true.



You'd normally create a custom TW configuration options such as base, components, utilities ("styles" hereafter). As mentioned above, Presets can add plugins.

As it's still a TW configuration, you can either override or extend styles.

The following preset will

  1. override spacing
  2. while extending z-index (TW provides z-index from 10 to 50 incremented by 10).
  3. TW's official typography and text truncation plugins


1module.exports = {2  theme: {3    spacing: {4      sm: "8px",5      md: "12px",6      lg: "16px",7      xl: "24px",8    },9    extend: {10      zIndex: {11        60: "60",12        70: "70",13        80: "80",14        90: "90",15        100: "100",16      },17    },18  },19  plugins: [require("@tailwindcss/typography"), require("@tailwindcss/line-clamp")],20};

You can see that the Preset provides a base configuration and can include plugins.

Check out Creating a preset for an official example.


Better to refer you to official Plugin documentation for examples (it's flexible.)

Image by Devon Breen from Pixabay