15. Плагины

Tailwind CSS: Плагины

Иллюстрация к уроку

Плагины расширяют возможности Tailwind — добавляют новые утилиты, компоненты и базовые стили. Tailwind Team поддерживает несколько официальных плагинов, и огромная экосистема предлагает сторонние.

Официальные плагины

@tailwindcss/forms

Нормализует стили элементов форм — убирает браузерные различия:

npm install @tailwindcss/forms

module.exports = {
  plugins: [
    require('@tailwindcss/forms'),
  ],
}

Два варианта настройки:

// Стратегия base (глобальные стили — по умолчанию)
require('@tailwindcss/forms')

// Стратегия class (только через классы)
require('@tailwindcss/forms')({ strategy: 'class' })
// Тогда нужно добавлять form-input, form-select и т.д.

@tailwindcss/typography

Красивая типографика для длинных текстов (блоги, документация):

npm install @tailwindcss/typography

plugins: [require('@tailwindcss/typography')]

<!-- Применяем класс prose -->
<article class="prose prose-lg max-w-none dark:prose-invert">
  <h1>Заголовок статьи</h1>
  <p>Красиво отформатированный текст...</p>
  <ul>
    <li>Список</li>
  </ul>
  <code>inline код</code>
  <pre><code>блок кода</code></pre>
</article>

<!-- Модификаторы prose -->
<article class="prose prose-sm">Маленький текст</article>
<article class="prose prose-xl">Большой текст</article>
<article class="prose prose-blue">Синие акценты</article>
<article class="prose prose-invert">Тёмная тема</article>

@tailwindcss/aspect-ratio

Соотношение сторон для изображений и видео:

npm install @tailwindcss/aspect-ratio

<div class="aspect-w-16 aspect-h-9">
  <iframe src="https://youtube.com/..."></iframe>
</div>

<!-- В Tailwind v3+ есть встроенный aspect-ratio -->
<div class="aspect-video">16:9</div>
<div class="aspect-square">1:1</div>
<div class="aspect-[4/3]">4:3</div>

@tailwindcss/container-queries

Container Queries — стили на основе размера родительского контейнера (не вьюпорта):

npm install @tailwindcss/container-queries

<div class="@container">
  <!-- @sm — когда контейнер ≥ 384px (не вьюпорт!) -->
  <div class="grid grid-cols-1 @sm:grid-cols-2 @lg:grid-cols-3 gap-4">
    <div>Карточка</div>
  </div>
</div>

Популярные сторонние плагины

tailwind-merge (twMerge)

Решает проблему конфликтующих классов при условном применении:

npm install tailwind-merge

import { twMerge } from 'tailwind-merge'

// Без twMerge — конфликт классов
const classes = `px-4 py-2 ${isLarge ? 'px-8' : ''}` // px-4 и px-8 оба применяются!

// С twMerge — правильно сливает
twMerge('px-4 py-2', isLarge ? 'px-8' : '') // Только px-8 (последний побеждает)

// Типичное использование в компонентах
function Button({ className, ...props }) {
  return (
    <button
      className={twMerge(
        'px-4 py-2 bg-blue-600 text-white rounded-lg',
        className
      )}
      {...props}
    />
  )
}

clsx + tailwind-merge (комбо)

npm install clsx tailwind-merge

import { clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'

// Объединённая функция cn() — стандарт в shadcn/ui
function cn(...inputs) {
  return twMerge(clsx(inputs))
}

// Использование
cn('px-4 py-2', isActive && 'bg-blue-600', className)

daisyUI

Готовые компоненты поверх Tailwind:

npm install daisyui

plugins: [require('daisyui')]

<!-- Кнопки daisyUI -->
<button class="btn btn-primary">Кнопка</button>
<button class="btn btn-ghost">Ghost</button>

<!-- Карточка -->
<div class="card w-96 bg-base-100 shadow-xl">
  <div class="card-body">
    <h2 class="card-title">Заголовок</h2>
    <p>Контент</p>
  </div>
</div>

<!-- Темы (30+ встроенных) -->
<html data-theme="dark">
<html data-theme="cupcake">

Создание своего плагина

const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addUtilities, addComponents, theme }) {
      // Добавляем новые утилиты
      addUtilities({
        '.text-shadow': {
          textShadow: '0 2px 4px rgba(0,0,0,0.1)',
        },
        '.text-shadow-lg': {
          textShadow: '0 4px 8px rgba(0,0,0,0.2)',
        },
      })

      // Добавляем компоненты
      addComponents({
        '.btn-brand': {
          padding: `${theme('spacing.2')} ${theme('spacing.4')}`,
          backgroundColor: theme('colors.violet.600'),
          color: 'white',
          borderRadius: theme('borderRadius.lg'),
          fontWeight: theme('fontWeight.semibold'),
          '&:hover': {
            backgroundColor: theme('colors.violet.700'),
          },
        },
      })
    }),
  ],
}