A utility-first CSS framework for rapidly building custom user interfaces.

---

Documentation

For full documentation, visit tailwindcss.com.

Plugin Development

Tailwind CSS can be extended with custom plugins to add your own utilities, components, and variants.

Creating a Plugin

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addUtilities, addComponents, theme, e }) {
      // Add custom utilities
      addUtilities({
        '.content-auto': {
          'content-visibility': 'auto',
        },
        '.content-hidden': {
          'content-visibility': 'hidden',
        },
      })

      // Add custom components
      addComponents({
        '.btn': {
          padding: '.5rem 1rem',
          borderRadius: '.25rem',
          fontWeight: '600',
        },
      })
    })
  ]
}

Plugin Features

• Add Utilities: Create custom utility classes
• Add Components: Define reusable component styles
• Add Variants: Extend with custom responsive, state, or theme variants
• Extend Theme: Add custom colors, spacing, or other design tokens
• JavaScript API: Full access to Tailwind's configuration and utilities

Official Plugins

• @tailwindcss/typography - Beautiful typographic defaults
• @tailwindcss/forms - Form styling with better defaults
• @tailwindcss/aspect-ratio - Aspect ratio utilities
• @tailwindcss/container-queries - Container query support

Learn More

For detailed plugin development guides, visit the plugin documentation.

Community

For help, discussion about best practices, or feature ideas:

Discuss Tailwind CSS on GitHub

Contributing

If you're interested in contributing to Tailwind CSS, please read our contributing docs before submitting a pull request.