4 min read
•Question 10 of 38mediumHow 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/typographycode.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)',
},
})
})
],
}