🧩 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',
    },
  }),
]

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

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