Adding Plugins in Tailwind CSS

Tailwind CSS plugins let you extend its functionality by adding extra utilities, components, or variants. Plugins can be official Tailwind plugins or third-party/community ones.

How to Add Plugins

1. Install the plugin via npm/yarn

Example:

npm install @tailwindcss/forms

2. Require the plugin in your tailwind.config.js

module.exports = {  theme: {    extend: {},  },  plugins: [    require('@tailwindcss/forms'),  ],}

Popular Official Plugins

Example: Using the Forms Plugin

// tailwind.config.jsmodule.exports = {  theme: {    extend: {},  },  plugins: [    require('@tailwindcss/forms'),  ],}

<form>  <input type="text" placeholder="Name" class="form-input" />  <select class="form-select">    <option>Option 1</option>  </select></form>

Writing Your Own Plugins

You can also write custom plugins to add utilities or components:

const plugin = require('tailwindcss/plugin')module.exports = {  plugins: [    plugin(function({ addUtilities }) {      const newUtilities = {        '.skew-10deg': {          transform: 'skewY(-10deg)',        },        '.skew-15deg': {          transform: 'skewY(-15deg)',        },      }      addUtilities(newUtilities)    })  ],}

Summary

• Install plugin via npm/yarn.

• Add require('plugin-name') in plugins array of tailwind.config.js.

• Use plugin utilities/classes in your markup.

• Optionally write your own plugins using Tailwind’s plugin API.

Need help adding a specific plugin or creating a custom one? Just ask!