Configuring Tailwind CSS Plugins

Tailwind CSS Plugins

Plugins extend Tailwind's functionality with additional utilities, components, or variants. They are added to the plugins array in your config.

Official Plugins

// tailwind.config.js
module.exports = {
  plugins: [
    require("@tailwindcss/typography"),
    require("@tailwindcss/forms"),
    require("@tailwindcss/container-queries"),
    require("@tailwindcss/aspect-ratio"),
  ],
};

@tailwindcss/typography

Adds the prose class for beautiful typographic defaults:

<article class="prose prose-lg dark:prose-invert">
  <h1>My Article</h1>
  <p>Content is styled beautifully by default.</p>
</article>

Customizable via your theme:

theme: {
  extend: {
    typography: {
      DEFAULT: {
        css: {
          color: "#333",
          a: { color: "#1a73e8" },
        },
      },
    },
  },
},

@tailwindcss/forms

Resets form element styles for consistent cross-browser styling:

<input type="text" class="rounded-md border-gray-300 focus:border-blue-500" />

Writing Custom Plugins

const plugin = require("tailwindcss/plugin");

module.exports = {
  plugins: [
    plugin(function({ addUtilities, theme }) {
      addUtilities({
        ".text-shadow": {
          textShadow: "0 2px 4px rgba(0,0,0,0.1)",
        },
        ".text-shadow-lg": {
          textShadow: "0 4px 8px rgba(0,0,0,0.2)",
        },
      });
    }),
  ],
};

Plugin Order

Plugins are applied in the order listed. If two plugins define the same utility, the later one wins.