🧩 Buttons Plugin for Tailwind CSS

Tailwind CSS плагин для создания настраиваемых кнопок с поддержкой темизации, вариантов, размеров, состояний и утилит.

Преимущества плагина

✅ Работает из коробки: всего один класс btn 🎨 Полная тема: цвета, размеры, варианты ⚙️ Конфигурация и кастомизация 🎯 Target-селекторы: hover/focus от родителей и peer 🛠️ Создан для Tailwind CSS, дружит с утилитами

🚀 Установка

Установите плагин через NPM:

npm install @qpokychuk/tailwind-button-plugin --save-dev

Добавьте его в ваш tailwind.config.js:

// tailwind.config.js
module.exports = {
  plugins: [
    require('@qpokychuk/tailwind-button-plugin'),
  ],
};

⚙️ Базовое использование

Примените базовый класс btn, затем добавьте дополнительные модификаторы для настройки внешнего вида:

<button class="btn">text here</button>

🎨 Цвет кнопки

Настройте цвет кнопки с помощью утилиты btn-{color} — где color соответствует вашей теме Tailwind:

<button class="btn btn-indigo">text here</button>
<button class="btn btn-blue">text here</button>
<button class="btn btn-red">text here</button>

Для произвольного значения цвета используйте квадратные скобки:

<button class="btn btn-[#B33771]">text here</button>

🧩 Варианты кнопок

Поддерживаются следующие варианты: fill | contur | light | text

<button class="btn">text here</button> <!-- По умолчанию: fill -->
<button class="btn btn-contur">text here</button>
<button class="btn btn-light">text here</button>
<button class="btn btn-text">text here</button>

💡 Также доступны: whitebg, icon — для специальных случаев.

📏 Размер кнопки

Выберите размер с помощью btn-{size}:

<button class="btn btn-xs">text here</button>
<button class="btn btn-sm">text here</button>
<button class="btn btn-base">text here</button> <!-- По умолчанию -->
<button class="btn btn-lg">text here</button>
<button class="btn btn-xl">text here</button>
<button class="btn btn-2xl">text here</button>

Кастомные размеры:

<button class="btn btn-[50px]">text here</button>

🛠️ Модификаторы

Используйте стандартные Tailwind модификаторы:

<button class="btn btn-sm md:btn-lg">
  Adaptive Button
</button>
<button class="btn btn-blue-300 dark:btn-blue-500">
  Support dark mode
</button>
<button class="btn btn-red hover:btn-green">
  Custom hover
</button>

🌀 Закругление

Используйте стандартные Tailwind-утилиты rounded:

<button class="btn rounded">text here</button>
<button class="btn rounded-xl">text here</button>
<button class="btn rounded-full">text here</button>

🌑 Тени

Применяйте стандартные Tailwind-утилиты shadow:

<button class="btn shadow-md hover:shadow-xl active:shadow-md">text here</button>

👨‍👧 Target-селекторы

Чтобы эффекты наведения, фокуса и клика работали при взаимодействии с родительским или соседним элементом:

<a class="absolute inset-0 flex btn-group">
  <button class="btn m-auto">text here</button>
</a>

<a class="absolute inset-0 flex btn-peer">text here</a>
...
<button class="btn m-auto">icon</button>

🛠 Расширение темы

Вы можете переопределить или расширить размеры кнопок:

// tailwind.config.js
module.exports = {
  theme: {
    btnSize: {
      xs: '28px',
      sm: '32px',
      base: '42px',
      lg: '48px',
      xl: '56px',
      ['2xl']: '64px',
    },
  },
};

🧪 Конфигурация плагина

Вы можете настроить поведение плагина, передав объект опций:

// tailwind.config.js
plugins: [
  require('@qpokychuk/tailwind-button-plugin')({
    className: 'btn',
    baseStyles: {},
    colorHoverOffset: 15,
    lightColorOpacity: 0.1,
    lightColorOpacityHover: 0.2,
    withFocusStyles: false,
    targetGroupSelector: '.btn-group',
    targetPeerSelector: '.btn-peer',
    hoverStyles: {
      background: 'var(--tw-btn-color-light)',
    },
    focusStyles: {
      zIndex: '2',
    },
    activeStyles: {
      transform: 'translateY(2px)',
    },
    disabledStyles: {
      opacity: '0.4',
      pointerEvents: 'none',
    },
  }),
]

| Параметр | Значение по умолчанию | Описание | |---------------------------|---------------------------------------|----------| | className | 'btn' | Базовый класс для кнопок | | baseStyles | {} | Базовые стили, которые переопределяют дефолтные | | colorHoverOffset | 15 | Смещение цвета при наведении (можно отрицательное) | | lightColorOpacity | 0.1 | Прозрачность цвета в варианте light | | lightColorOpacityHover | 0.2 | Прозрачность при hover в варианте light | | withFocusStyles | false | Добавлять ли стили при фокусе | | targetGroupSelector | '.btn-group' | Селектор для наследования состояний от родителя | | targetPeerSelector | '.btn-peer' | Селектор для наследования состояний от соседа | | hoverStyles | { background: 'var(--tw-btn-color-light)' } | Стили при hover | | focusStyles | { zIndex: '2' } | Стили при focus | | activeStyles | { transform: 'translateY(2px)' } | Стили при active | | disabledStyles | { opacity: '0.4', pointerEvents: 'none' } | Стили для disabled состояния |

🔗 Полезные ссылки

• NPM: @qpokychuk/tailwind-button-plugin
• Поддержать автора 💖