#1 Data Analytics Program in India
₹2,499₹1,499Enroll Now
4 min read
Question 10 of 38medium

How to use Tailwind CSS Plugins?

Adding functionality with plugins.

What You'll Learn

  • Official plugins
  • Installing plugins
  • Creating custom plugins

Official Plugins

$ terminalBash
npm install @tailwindcss/forms @tailwindcss/typography
code.jsJavaScript
// tailwind.config.js
module.exports = {
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/container-queries'),
  ],
}

Typography Plugin

index.htmlHTML
<article class="prose lg:prose-xl">
  <!-- Styled markdown content -->
  <h1>Title</h1>
  <p>Beautiful typography...</p>
</article>

Custom Plugin

code.jsJavaScript
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addUtilities }) {
      addUtilities({
        '.text-shadow': {
          'text-shadow': '2px 2px 4px rgba(0,0,0,0.1)',
        },
      })
    })
  ],
}