Buttons Plugin for Tailwind CSS

Предоставляет классы для создания кнопок, включая эффекты при наведении, фокусе, клике

Установка

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

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

Основа использования

Добавьте обязательный класс btn, затем добавьте дополнительные классы для настройки отображения

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

Установка цвета кнопки

Управляйте цветом кнопки с помощью утилит btn-{color} (color - цвета вашей темы).

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

Если вам нужно использовать одноразовое значение color, которое не имеет смысла включать в вашу тему, используйте квадратные скобки, чтобы сгенерировать свойство "на лету", используя любое произвольное значение.

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

Установка варианта кнопки

Управляйте вариантом кнопки с помощью утилит btn-{variant}. Доступны варианты: fill | contur | light | whitebg | text

<button class="btn ...">text here</button>
<button class="btn btn-fill ...">text here</button>
<button class="btn btn-contur ...">text here</button>
<button class="btn btn-light ...">text here</button>
<button class="btn btn-whitebg ...">text here</button>
<button class="btn btn-text ...">text here</button>

Установка размера кнопки

Управляйте размером кнопки с помощью утилит btn-{btnSize}.

<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>

Если вам нужно использовать одноразовое значение btnSize, которое не имеет смысла включать в вашу тему, используйте квадратные скобки, чтобы сгенерировать свойство "на лету", используя любое произвольное значение.

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

Установка закругления кнопки

Управляйте закруглением кнопки с помощью утилит rounded из tailwind.

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

Установка тени кнопки

Управляйте тенью кнопки с помощью утилит shadow из tailwind.

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

Target selector

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

<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
{
  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',
      disabledOpacity: 0.4,
      colorHoverOffset: 25,
      lightColorOpacity: 0.1,
      lightColorOpacityHover: 0.2,
      transition: '.2s ease',
      withFocusStyles: false,
      targetGroupSelector: '.btn-group',
      targetPeerSelector: '.btn-peer',
      activeStiles: {
        transform: 'translateY(2px)',
      }
    }),
  ],
}

Поддержать автора