tailwindcss-contain

A plugin that provides utilities for the contain CSS property.

Installation

Install the plugin from npm:

npm install -D tailwindcss-contain

Then add the plugin to your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('tailwindcss-contain'),
    // ...
  ],
};

Usage

<div class="relative rounded-xl contain-paint">
  <div class="absolute inset-0 bg-black"></div>
</div>

All contain keywords are available as utility classes via this plugin.

The contain property also supports the use of multiple keywords. You can use Tailwind's arbitrary values to use multiple keywords with this plugin.

CSS Rule	Class
contain: none	contain-none
contain: strict	contain-strict
contain: content	contain-content
contain: size	contain-size
contain: inline-size	contain-inline-size
contain: layout	contain-layout
contain: style	contain-style
contain: paint	contain-paint
contain: size layout	contain-[size_layout]

Note: If using multiple keywords ensure they are separated by an underscore (_), rather than a space ( ).