Использование tailwindcss c Vue.js

TailwindCSS (официальный сайт) — это настраиваемый низкоуровневый CSS-фреймворк, который предоставляет все строительные блоки, необходимые для создания верстки без использование каких-либо дополнительных стилей.

Спонсор постаБесплатный архиватор WindowsRAR
Разработка российской компании iTVA WindowsRAR (Бесплатный архиватор WindowsRAR) удобная программа для работы с архивами.
WindowsRAR представляет собой многофункциональный архиватор поддерживающий все популярные форматы архивации — RAR 7z, ZIP, gz и др., с помощью которого вы сможете создавать и разархивировать архивы, а так же проверять файлы на наличие вирусов. Посредством программы можно установливать пароль. Разработчики оснастили пятнадцать стилей оформления интерфейса

В чем идея TailwindCSS? Большинство CSS-фреймворков предоставляют слишком много функционала верхнего уровня и слишком мало функционала нижнего уровня. Они поставляются со всевозможными предварительно разработанными компонентами, такими как кнопки, карточки и оповещения, которые очень сильно помогают вначале развивать проект и быстро двигаться вперед, но вызывают большие проблемы, когда приходит время кастомизировать проект в соответствие с индивидуальным дизайном.

Вместо продуманных заранее разработанных компонентов, TailwindCSS предоставляет низкоуровневые служебные классы, которые позволяют вам создавать полностью индивидуальные проекты. Под низкоуровневыми служебными классами подразумеваются такие классы как для примера, классы определения цвета фона .bg-blue, отступов .m-10, .mx-10, .my-10 или отображения блока .block .inline-block и т.д. Такие низкоуровневые классы объединенные функционалом в терминологии Tailwind называются утилитами.

Идеология Tailwind — утилиты прежде всего. Создание сложных компонентов делается из ограниченного набора примитивных утилит. Традиционно, когда вам нужно что-то стилизовать в сети, вы пишете что-то типа такого.

Пример взят из официальной документации Tailwind

<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h4>
    <p class="chat-notification-message">You have a new message!</p>
  </div>
</div>

<style>
  .chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification-logo-wrapper {
    flex-shrink: 0;
  }
  .chat-notification-logo {
    height: 3rem;
    width: 3rem;
  }
  .chat-notification-content {
    margin-left: 1.5rem;
    padding-top: 0.25rem;
  }
  .chat-notification-title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .chat-notification-message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
  }
</style>

Обратите внимание что HTML страница создается через определенные CSS классы, которые далее визуализируют верстку.

С Tailwind вы сразу стилизуете элементы, применяя уже существующие классы прямо в вашем HTML.

<div class="max-w-sm mx-auto flex p-6 bg-white rounded-lg shadow-xl">
  <div class="flex-shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="ml-6 pt-1">
    <h4 class="text-xl text-gray-900 leading-tight">ChitChat</h4>
    <p class="text-base text-gray-600 leading-normal">You have a new message!</p>
  </div>
</div>

В приведенном выше примере мы использовали ((https://tailwindcss.com/docs/):

• Утилиты flexbox и padding) (.flex, .flex-shrink-0 и .p-6) для контроля общего макета карты (card)
• Утилиты max-width и margin (.max-w-sm и .mx-auto) для ограничения ширины карты и ее центрирования по горизонтали
• Утилиты background-color, border-radius и box-shadow (.bg-white, .roundnded-lg и .shadow-xl) для стилизации внешнего вида карты
• Утилиты width и height (.w-12 и .h-12) для размера изображения логотипа
• Утилиты margin и padding (.ml-6 и .pt-1) для размещения текста карты
• Утилиты font-size, text-color и line-height (.text-xl, .text-grey-900, .leading-tight и т. д.) для стилизации текста карты

Таким образом мы реализовали полностью индивидуальный дизайн компонентов, без написания строк дополнительного пользовательского CSS.

Если вы видите все это в первый раз, вы можете подумать: «Какой кошмар. Это все жуткое зверство, какой ужасный беспорядок!» и вы будете правы, это отчасти уродливо. На самом деле, почти невозможно думать, что это хорошая идея, когда вы видите такую верстку впервые — Но вы должны попробовать это самостоятельно на практике!

Как только вы действительно что-то создадите таким образом, вы быстро заметите некоторые важные преимущества такого подхода:

• Вы не тратите энергию и время, изобретая имена классов. Больше не нужно добавлять глупые имена классов, такие как sidebar-inner-wrapper, просто чтобы что-то стилизовать, и больше не нужно мучиться с выдумыванием идеальных абстрактных именем для чего-то, что на самом деле просто гибкий контейнер. Это так же способствует унификации при переходе от одного проекта к другому.
• Ваш CSS файл перестает неограниченно расти. Используя традиционный подход, ваши CSS-файлы увеличиваются при каждом добавлении новой функции. С утилитами все можно использовать повторно, поэтому вам редко нужно писать новый CSS.
• Вносить изменения становиться более безопаснее. CSS является глобальным, и вы никогда не знаете, что вы нарушаете, когда вносите изменения в существующие глобальные классы. В вашем HTML всегда можно использовать только локальные классы, поэтому их можно изменять, не беспокоясь о том, что что-то еще сломается.

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

Почему бы просто не использовать встроенные стили?

Распространенной реакцией на такой подход является вопрос: «Разве это не тоже самое как использовать встроенные стили через атрибут style?» и в некотором смысле это так — вы применяете стили непосредственно к элементам вместо того, чтобы назначать им имя класса, а затем стилизовать этот класс.

Но использование служебных классов имеет несколько важных преимуществ перед встроенными стилями:

• Проектирование с ограничениями. Используя встроенные стили style, возможно использовать неограниченное количество значений CSS (что реально создает хаус). С помощью утилит вы выбираете стили из предопределенной системы проектирования, что значительно упрощает создание визуально согласованных интерфейсов. Так же становиться возможным глобальное переопределение значение.
• Адаптивный дизайн. Вы не можете использовать медиа-запросы (@media) во встроенных стилях, но вы можете использовать адаптивные утилиты Tailwind для простого создания полностью адаптивных интерфейсов.
• Псевдо-классы. Встроенные стили не могут нацеливаться на состояния, такие как наведение (:hover) или фокусировка (:focus), но варианты псевдоклассов Tailwind упрощают стилизацию этих состояний с помощью служебных классов.

Проблемы с поддержкой

Наибольшая проблема с удобством обслуживания при использовании подхода «сначала утилита» — это управление часто повторяющимися комбинациями утилит. Например при стилизации кнопки. Это легко решается путем извлечения компонентов, либо как частичные шаблоны/компоненты JavaScript, либо с помощью функции @apply Tailwind для создания абстракций вокруг общих шаблонов утилит.

<!-- Стандартное использование утилит при стилизации кнопки -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Button
</button>

<!-- Использование Tailwind @apply -->
<button class="btn btn-blue">
  Button
</button>

<style>
  .btn {
    @apply font-bold py-2 px-4 rounded;
  }
  .btn-blue {
    @apply bg-blue-500 text-white;
  }
  .btn-blue:hover {
    @apply bg-blue-700;
  }
</style>

Кроме того, поддержка CSS-проекта, ориентированного на утилиту, оказывается намного проще, чем поддержка большой кодовой базы CSS, просто потому, что HTML намного проще поддерживать, чем CSS. Крупные компании, такие как GitHub, Heroku, Kickstarter, Twitch, Segment и другие, используют этот подход с большим успехом.

Далее я расскажу как внедрить tailwind в проект на Vue.js

Установка tailwind

vue create testapp

Выберем все опции по умолчанию. Далее установим в проект tailwindcss командой

npm install tailwindcss --save

Создадим новую директорию css в src/assets/ и в ней создадим новый файл tailwind.css со следующим содержанием:

@tailwind base;

@tailwind components;

@tailwind utilities;

Далее добавим этот файл в src/main.js

import Vue from 'vue'
import App from './App.vue'
import './assets/css/tailwind.css'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

Далее нужно создать Tailwind конфиг файл. Он нужен для настройки Tailwind, и его можно сгенерировать, используя утилиту Tailwind CLI, устанавливаемую при установке пакета tailwind через npm. Для этого в терминале нужно набрать команду:

npx tailwind init

После этого в корне проекта должен создаться файл tailwind.config.js со следующим содержимым:

module.exports = {
  theme: {
    extend: {}
  },
  variants: {},
  plugins: []
}

В этом файле можно настроить элементы используемой темы, переменные и плагины. Подробнее о использование этого файла можно почитать в официальной документации (https://tailwindcss.com/docs/configuration).

На github есть очень большой список плагинов и других полезных ресурсов для Tailwind https://github.com/aniftyco/awesome-tailwindcss

Далее добавим Tailwind в качестве плагина PostCSS в цепочку сборки. Для этого в корне проекта создадим новый файл src/postcss.config.js

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

Еще один очень важный момент на который нужно обратить внимание. На официальном сайте Tailwind есть сводная таблица размером различных css фреймворков (https://tailwindcss.com/docs/controlling-file-size).

Framework	Original Size	Minified	Gzip	Brotli
Tailwind	783.5kb	603.3kb	78.0kb	22.6kb
Bootstrap	187.8kb	152.1kb	22.7kb	16.7kb
Bulma	224.2kb	189.9kb	24.9kb	19.1kb
Foundation	154.1kb	119.2kb	15.9kb	12.9kb
Tachyons	111.7kb	71.8kb	13.4kb	7.5kb
Semantic UI	809.4kb	613.8kb	100.6kb	77.8kb
Materialize	175.0kb	138.5kb	21.1kb	17.1kb

Из нее видно, что Tailwind определенно выглядит тяжелым (хотя, если вы используете Brotli вместо gzip, это все еще очень разумно). Это обусловлено тем что по умолчанию в него входят очень большое количество классов (цветов, размеров, отступов для каждого размера и т.п.). Все это изобилие классов вряд ли будут используются в вашем текущем проекте. Поэтому есть ряд стратегий, которые вы можете использовать, чтобы значительно уменьшить размер файла Tailwind по умолчанию. Один из самый простых способов которые предлагает официальная документация это использовать Purgecss (https://www.purgecss.com/) (инструмент для удаления неиспользуемого CSS). Purgecss можно подключить как плагин PostCSS во время сборки. Для этого вначале установим Purgecss командой:

npm install @fullhuman/postcss-purgecss --save-dev

И далее внесем следующие изменения в postcss.config.js:

// postcss.config.js
const purgecss = require('@fullhuman/postcss-purgecss')({

  // Specify the paths to all of the template files in your project 
  content: [
    './src/**/*.html',
    './src/**/*.vue',
  ],

  // Include any special characters you're using in this regular expression
  defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
})

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    ...process.env.NODE_ENV === 'production'
      ? [purgecss]
      : []
  ]
}

Обратите внимание, что в этом примере мы включаем только Purgecss в продакшине. Официальная документация рекомендуем настраивать Purgecss таким образом, чтобы во время разработки иметь каждый класс доступным, что бы вам не нужно было бы ждать перестройки каждый раз, когда вы меняете какой-то HTML.

Хочу дать еще один совет. Если вы используется в свой работе VSCode то для Tailwind, есть очень полезный плагин https://github.com/bradlc/vscode-tailwindcss Который позволяет получать подсказки по всем классам во время работы:

Так же позволяет видеть CSS свойства при наведении на имена классов:

На этом все. Настройка закончена, можно приступать к созданию проекта с Tailwind 🙂

Заключение

Существует огромное количество различных фреймворков CSS, популярных и не очень. Но нет и не может существовать универсального CSS фреймворка которых можно использовать под любую задачу. Tailwind реально может быть очень полезен как для быстрой разработки прототипа любого проекта так и в повседневной работе js программиста. Надеюсь своей статью заинтересовать вас этим фреймворком и у вас найдется немного времени обратить на него внимание.