Package Exports

@qpokychuk/tailwind-button-plugin
@qpokychuk/tailwind-button-plugin/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@qpokychuk/tailwind-button-plugin) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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>

Screenshot_1

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

Управляйте вариантом кнопки с помощью утилит 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>

Screenshot_2

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

Управляйте размером кнопки с помощью утилит 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>

Screenshot_6

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

Управляйте закруглением кнопки с помощью утилит 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>

Screenshot_4

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

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

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

Screenshot_5

Настройка вашей темы

По умолчанию плагин предоставляет размеры кнопок, вы можете их расширить

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

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