Plugins - Tailwind CSS (2022)

Overview

Plugins let you register new styles for Tailwind to inject into the user’s stylesheet using JavaScript instead of CSS.

To get started with your first plugin, import Tailwind’s plugin function from tailwindcss/plugin. Then inside your plugins array, call the imported plugin function with an anonymous function as the first argument.

tailwind.config.js

const plugin = require('tailwindcss/plugin')module.exports = { plugins: [ plugin(function({ addUtilities, addComponents, e, prefix, config }) { }), ]}

Plugin functions receive a single object argument that can be destructured into several helper functions:

  • addUtilities(), for registering new static utility styles
  • matchUtilities(), for registering new dynamic utility styles
  • addComponents(), for registering new static component styles
  • matchComponents(), for registering new dynamic component styles
  • addBase(), for registering new base styles
  • addVariant(), for registering custom variants
  • theme(), for looking up values in the user’s theme configuration
  • config(), for looking up values in the user’s Tailwind configuration
  • corePlugins(), for checking if a core plugin is enabled
  • e(), for manually escaping strings meant to be used in class names

Official plugins

We’ve developed a handful of official plugins for popular features that for one reason or another don’t belong in core yet.

Plugins can be added to your project by installing them via npm, then adding them to your tailwind.config.js file:

tailwind.config.js

module.exports = { plugins: [ require('@tailwindcss/typography'), require('@tailwindcss/forms'), require('@tailwindcss/line-clamp'), require('@tailwindcss/aspect-ratio'), ]}

Typography

The @tailwindcss/typography plugin adds a set of prose classes that can be used to quickly add sensible typographic styles to content blocks that come from sources like markdown or a CMS database.

<article class="prose lg:prose-xl"> <h1>Garlic bread with cheese: What the science tells us</h1> <p> For years parents have espoused the health benefits of eating garlic bread with cheese to their children, with the food earning such an iconic status in our culture that kids will often dress up as warm, cheesy loaf for Halloween. </p> <p> But a recent study shows that the celebrated appetizer may be linked to a series of rabies cases springing up around the country. </p> </article>

Learn more about the typography plugin →

Forms

The @tailwindcss/forms plugin adds an opinionated form reset layer that makes it easier to style form elements with utility classes.

<select class="px-4 py-3 rounded-full"> </select><input type="checkbox" class="rounded text-pink-500" />

Learn more about the forms plugin →

Line-clamp

The @tailwindcss/line-clamp plugin adds line-clamp-{lines} classes you can use to truncate text to a fixed number of lines.

<p class="line-clamp-3 md:line-clamp-none"> Et molestiae hic earum repellat aliquid est doloribus delectus. Enim illum odio porro ut omnis dolor debitis natus. Voluptas possimus deserunt sit delectus est saepe nihil. Qui voluptate possimus et quia. Eligendi voluptas voluptas dolor cum. Rerum est quos quos id ut molestiae fugit.</p>

Learn more about the line-clamp plugin →

Aspect ratio

The @tailwindcss/aspect-ratio plugin adds aspect-w-{n} and aspect-h-{n} classes that can be combined to give an element a fixed aspect ratio.

<div class="aspect-w-16 aspect-h-9"> <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>

Learn more about the aspect ratio plugin →

Adding utilities

The addUtilities and matchUtilities functions allow you to register new styles in Tailwind’s utilities layer.

Like with the utilities Tailwind includes by default, utilities added by a plugin will only be included in the generated CSS if they are actually being used in the project.

Static utilities

Use the addUtilities function to register simple static utilities that don’t support user-provided values:

Video: How to Create Your Own TailwindCSS Plugin

tailwind.config.js

const plugin = require('tailwindcss/plugin')module.exports = { plugins: [ plugin(function({ addUtilities }) { addUtilities({ '.content-auto': { 'content-visibility': 'auto', }, '.content-hidden': { 'content-visibility': 'hidden', }, '.content-visible': { 'content-visibility': 'visible', }, }) }) ]}

Learn more about to represent your styles in JavaScript in the CSS-in-JS syntax reference.

Dynamic utilities

Use the matchUtilities function to register utilities that map to values defined in the user’s theme configuration:

tailwind.config.js

const plugin = require('tailwindcss/plugin')module.exports = { theme: { tabSize: { 1: '1', 2: '2', 4: '4', 8: '8', } }, plugins: [ plugin(function({ matchUtilities, theme }) { matchUtilities( { tab: (value) => ({ tabSize: value }), }, { values: theme('tabSize') } ) }) ]}

Utilities defined this way also support arbitrary values, which means you can use values not present in the theme using square bracket notation:

<div class="tab-[13]"> </div>

Prefix and important

By default, plugin utilities automatically respect the user’s prefix and important preferences.

That means that given this Tailwind configuration:

…the example plugin above would generate the following CSS:

.tw-content-auto { content-visibility: auto !important;}.tw-content-hidden { content-visibility: hidden !important;}.tw-content-visible { content-visibility: visible !important;}

Using with modifiers

Any custom utilities added using addUtilities can automatically be used with modifiers:

<div class="content-auto lg:content-visible"> </div>

Learn more in the Hover, Focus, and Other States documentation.

Providing default values

Utility plugins can provide default values by including a configuration object as the second argument to the plugin function:

./plugins/tab-size.js

Video: Tailwind CSS v2.0 | Forms Plugin

const plugin = require('tailwindcss/plugin')module.exports = plugin(function({ matchUtilities, theme }) { matchUtilities( { tab: (value) => ({ tabSize: value }), }, { values: theme('tabSize') } )}, { theme: { tabSize: { 1: '1', 2: '2', 4: '4', 8: '8', } }})

These values behave just like the values in the default configuration, and can be overridden or extended by the end user.

Adding components

The addComponents function allows you to register new styles in Tailwind’s components layer.

Use it to add more opinionated, complex classes like buttons, form controls, alerts, etc; the sort of pre-built components you often see in other frameworks that you might need to override with utility classes.

To add new component styles from a plugin, call addComponents, passing in your styles using CSS-in-JS syntax:

tailwind.config.js

const plugin = require('tailwindcss/plugin')module.exports = { plugins: [ plugin(function({ addComponents }) { addComponents({ '.btn': { padding: '.5rem 1rem', borderRadius: '.25rem', fontWeight: '600', }, '.btn-blue': { backgroundColor: '#3490dc', color: '#fff', '&:hover': { backgroundColor: '#2779bd' }, }, '.btn-red': { backgroundColor: '#e3342f', color: '#fff', '&:hover': { backgroundColor: '#cc1f1a' }, }, }) }) ]}

Like with other component classes in Tailwind, component classes added by a plugin will only be included in the generated CSS if they are actually being used in the project.

Prefix and important

By default, component classes automatically respect the user’s prefix preference, but they are not affected by the user’s important preference.

That means that given this Tailwind configuration:

tailwind.config.js

module.exports = { prefix: 'tw-', important: true, }

…the example plugin above would generate the following CSS:

.tw-btn { padding: .5rem 1rem; border-radius: .25rem; font-weight: 600;}.tw-btn-blue { background-color: #3490dc; color: #fff;}.tw-btn-blue:hover { background-color: #2779bd;}.tw-btn-red { background-color: #e3342f; color: #fff;}.tw-btn-red:hover { background-color: #cc1f1a;}

Although there’s rarely a good reason to make component declarations important, if you really need to do it you can always add !important manually:

tailwind.config.js

const plugin = require('tailwindcss/plugin')module.exports = { plugins: [ plugin(function({ addComponents }) { addComponents({ '.btn': { padding: '.5rem 1rem !important', borderRadius: '.25rem !important', fontWeight: '600 !important', }, }) }) ]}

All classes in a selector will be prefixed by default, so if you add a more complex style like:

tailwind.config.js

const plugin = require('tailwindcss/plugin')module.exports = { prefix: 'tw-', plugins: [ plugin(function({ addComponents }) { const components = { '.navbar-inverse a.nav-link': { color: '#fff', } } addComponents(components) }) ]}
Video: VSCode Plugins for TailwindCSS Development

…the following CSS would be generated:

.tw-navbar-inverse a.tw-nav-link { color: #fff;}

Using with modifiers

Any component classes added using addComponents can automatically be used with modifiers:

<div class="btn md:btn-lg"> </div>

Learn more in the Hover, Focus, and Other States documentation.

Adding base styles

The addBase function allows you to register new styles in Tailwind’s base layer. Use it to add things like base typography styles, opinionated global resets, or @font-face rules.

To add new base styles from a plugin, call addBase, passing in your styles using CSS-in-JS syntax:

tailwind.config.js

const plugin = require('tailwindcss/plugin')module.exports = { plugins: [ plugin(function({ addBase, theme }) { addBase({ 'h1': { fontSize: theme('fontSize.2xl') }, 'h2': { fontSize: theme('fontSize.xl') }, 'h3': { fontSize: theme('fontSize.lg') }, }) }) ]}

Since base styles are meant to target bare selectors like div or h1, they do not respect the user’s prefix or important configuration.

Adding variants

The addVariant function allows you to register your own custom modifiers that can be used just like the built-in hover, focus, active, etc. variants.

To add a new variant, call the addVariant function, passing in the name of your custom variant, and a format string that represents how the selector should be modified.

tailwind.config.js

const plugin = require('tailwindcss/plugin')module.exports = { plugins: [ plugin(function({ addVariant }) { addVariant('optional', '&:optional') addVariant('hocus', ['&:hover', '&:focus']) addVariant('supports-grid', '@supports (display: grid)') }) ]}

The first argument is the modifier name that users will use in their HTML, so the above example would make it possible to write classes like these:

<form class="flex supports-grid:grid ..."> <input class="optional:border-gray-300 ..." /> <button class="bg-blue-500 hocus:bg-blue-600">...</button></form>

Extending the configuration

Plugins can merge their own set of configuration values into the user’s tailwind.config.js configuration by providing an object as the second argument to the plugin function:

./plugins/tab-size.js

Video: Styling Forms with Tailwind CSS

const plugin = require('tailwindcss/plugin')module.exports = plugin(function({ matchUtilities, theme }) { matchUtilities( { tab: (value) => ({ tabSize: value }), }, { values: theme('tabSize') } )}, { theme: { tabSize: { 1: '1', 2: '2', 4: '4', 8: '8', } }})

This can be useful for things like providing default theme values for the classes your plugin generates.

Exposing options

Sometimes it makes sense for a plugin to be configurable in a way that doesn’t really belong under theme, like perhaps you want users to be able to customize the class name your plugin uses.

For cases like this, you can use plugin.withOptions to define a plugin that can be invoked with a configuration object. This API is similar to the regular plugin API, except each argument should be a function that receives the user’s options and returns the value that you would have normally passed in using the regular API:

./plugins/markdown.js

const plugin = require('tailwindcss/plugin')module.exports = plugin.withOptions(function (options) { return function({ addComponents }) { const className = options.className ?? 'markdown' addComponents({ [`.${className}`]: { } }) }}, function (options) { return { theme: { markdown: { } }, }})

The user would invoke your plugin passing along their options when registering it in their plugins configuration:

tailwind.config.js

module.exports = { theme: { }, plugins: [ require('./plugins/markdown.js')({ className: 'wysiwyg' }) ],}

The user can also register plugins created this way normally without invoking them if they don’t need to pass in any custom options:

tailwind.config.js

module.exports = { theme: { }, plugins: [ require('./plugins/markdown.js') ],}

CSS-in-JS syntax

Tailwind’s plugin system expect CSS rules written as JavaScript objects, using the same sort of syntax you might recognize from CSS-in-JS libraries like Emotion, powered by postcss-js under-the-hood.

Consider this simple CSS rule:

.card { background-color: #fff; border-radius: .25rem; box-shadow: 0 2px 4px rgba(0,0,0,0.2);}

Translating this to a CSS-in-JS object would look like this:

addComponents({ '.card': { 'background-color': '#fff', 'border-radius': '.25rem', 'box-shadow': '0 2px 4px rgba(0,0,0,0.2)', }})

For convenience, property names can also be written in camelCase and will be automatically translated to dash-case:

addComponents({ '.card': { backgroundColor: '#fff', borderRadius: '.25rem', boxShadow: '0 2px 4px rgba(0,0,0,0.2)', }})

Nesting is also supported (powered by postcss-nested), using the same syntax you might be familiar with from Sass or Less:

addComponents({ '.card': { backgroundColor: '#fff', borderRadius: '.25rem', boxShadow: '0 2px 4px rgba(0,0,0,0.2)', '&:hover': { boxShadow: '0 10px 15px rgba(0,0,0,0.2)', }, '@media (min-width: 500px)': { borderRadius: '.5rem', } }})

Multiple rules can be defined in the same object:

Video: TailwindCSS - How To Write A Custom Plugin

addComponents({ '.btn': { padding: '.5rem 1rem', borderRadius: '.25rem', fontWeight: '600', }, '.btn-blue': { backgroundColor: '#3490dc', color: '#fff', '&:hover': { backgroundColor: '#2779bd' }, }, '.btn-red': { backgroundColor: '#e3342f', color: '#fff', '&:hover': { backgroundColor: '#cc1f1a' }, },})

…or as an array of objects in case you need to repeat the same key:

addComponents([ { '@media (min-width: 500px)': { } }, { '@media (min-width: 500px)': { } }, { '@media (min-width: 500px)': { } },])

FAQs

Can I use CSS with Tailwind?

With Tailwind's pre-built classes, you can design the layout directly in an HTML file. This makes it a very responsive, mobile-friendly CSS framework. Apart from that, Tailwind has proven to be a stable framework since its initial release.

Which is better CSS or Tailwind CSS?

Tailwind CSS is a utility-based framework based on CSS. It provides a catalog of CSS classes that makes the process of styling more convenient. Tailwind is not a UI Kit like Bootstrap, Foundation, or Bulma. It does not provide ready-made design blocks.

Is Tailwind CSS good for SEO?

First, it is important to understand that Tailwind CSS is a CSS pre-processor, meaning that it is used to generate CSS code from more basic code written in Tailwind's own language. This can be advantageous for SEO as it can help to clean up your code and make it more readable for search engines.

How do I use tailwind plugins?

How to Create Your Own TailwindCSS Plugin - YouTube

What is headless UI tailwind?

Headless UI is a set of completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS. it is also provide dropdown menu, lightbox, Switch (Toggle), Dialog (Modal), Popover, Radio Group, Transition, Tabs. So you can easily copy and paste code in you project.

Is Tailwind CSS better than bootstrap?

If your project requires a lot of front-end customization, doesn't follow a common layout, or if you're more seasoned with CSS, then Tailwind might be the better option. There's a lot more to Bootstrap and Tailwind.

Why you should not use Tailwind?

Tailwind Makes Your Code Difficult to Read. Other people who don't like Tailwind tend to start off by arguing that it makes your HTML look noisy and disgusting, and I'll do the same. Honestly, it's a valid argument if you care at all about your developer experience.

Is Tailwind CSS heavy?

The default Tailwind configuration comes with 36.4KB minified and g-zipped. Compared to Bootstrap at 22.1KB , Tailwind is 14.3KB heavier.

Is Bootstrap and Tailwind same?

Tailwind is different from frameworks like Bootstrap, Foundation, or Bulma in that it's not a UI kit. It doesn't have a default theme, and there are no build-in UI components. It comes with a menu of predesigned widgets to build your site with, but doesn't impose design decisions that are difficult to undo.

Why is Tailwind so popular?

It Enables Building Complex Responsive Layouts Freely: The Tailwind CSS framework uses a default mobile-first approach. The availability of utility classes makes it easier to build complex responsive layouts freely.

What is a PostCSS plugin?

PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more. PostCSS is used by industry leaders including Wikipedia, Twitter, Alibaba, and JetBrains.

Is Tailwind react library?

Material Tailwind is another UI components library that provides easy-to-use React components to use in your projects.

Is Tailwind a library?

Tailwind UI

With several hundred custom components, it's also one of the most complete libraries.

Is Tailwind CSS free?

Tailwind Starter Kit is a beautiful extension for TailwindCSS, which is Free and Open Source.

What is Headlessui?

A headless user interface component is a component that offers maximum visual flexibility by providing no interface. This might sound like providing a user interface pattern without providing a user interface.

What is CSS tailwind?

Tailwind CSS is basically a utility-first CSS framework for rapidly building custom user interfaces. It is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

Who is behind Tailwind CSS?

Tailwind CSS is an open-source CSS framework that was released in November 2017 by Adam Wathan (@adamwathan) and Steve Schoger (@steveschoger). Then, 2 years later, they launched Tailwind UI which generated over $2m in revenue.

Can I mix Bootstrap and Tailwind?

We can use both the CSS frameworks together but it is not recommended. Because few classes will contradict with each other like “container”, “clearfix”, etc. As we know that Bootstrap is a known CSS framework. Although the Tailwind CSS framework can also be used parallelly in comparison to Bootstrap.

What is the best CSS framework?

Top 10 Best CSS Frameworks for Front-End Developers in 2022
  • Tailwind CSS: Beginner-friendly, Easy CSS Framework.
  • Bootstrap: Popular and Easy-to-Use.
  • Foundation: Open-Source, Advanced UI Framework.
  • Bulma: Free and Modern CSS Frameworks.
  • UI Kit: Fast Front-End Framework.
  • Materialize: The Colorful CSS Framework.
May 30, 2022

Videos

1. Tailwind CSS Blocks Pack for Page Builder plugins
(Vladimir)
2. Tailwind CSS + plugins - Rebuilding YouTube
(Andre Madarang)
3. Sorting Tailwind CSS Classes Automatically with Prettier
(Tailwind Labs)
4. Styling Markdown and CMS Content with Tailwind CSS
(Tailwind Labs)
5. Learn How to Create Reusable TailwindCSS Components
(Ado Kukic)

You might also like

Latest Posts

Article information

Author: Tyson Zemlak

Last Updated: 05/19/2022

Views: 6335

Rating: 4.2 / 5 (43 voted)

Reviews: 90% of readers found this page helpful

Author information

Name: Tyson Zemlak

Birthday: 1992-03-17

Address: Apt. 662 96191 Quigley Dam, Kubview, MA 42013

Phone: +441678032891

Job: Community-Services Orchestrator

Hobby: Coffee roasting, Calligraphy, Metalworking, Fashion, Vehicle restoration, Shopping, Photography

Introduction: My name is Tyson Zemlak, I am a excited, light, sparkling, super, open, fair, magnificent person who loves writing and wants to share my knowledge and understanding with you.