Tailwind

Сравнение с CSS

• CSS (привычно, но громоздко):

  HTML

  <div class="wrapper">...</div>

  CSS

  .wrapper {
  	padding: 1rem;
  	border-radius: 0.5rem;
  	background-color: rgba(0, 0, 0, 0.2);
  }

• Tailwind (быстро и компактно):

  HTML

  <div class="p-4 rounded-md bg-black/20">...</div>

Что это, Tailwind?

На официальном сайте Tailwind мы видим такое вступление:

Как он работает?

Авторы Tailwind не врут. Вместо создания собственных стилей, ты используешь готовые классы, а также можешь использовать и произвольные классы для тонкой настройки (об этом в следующих статьях). Tailwind следует атомарному подходу, согласно которому каждый HTML элемент стилизуется индивидуально.

Что конкретно предлагает Tailwind:

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

• Не нужно пыхтеть над именами классов. Как назвать элемент-пустышку, может, container или wrapper? А может лучше container-box-wrapper? Ой, я изменил название класса в разметке, но забыл поменять его в файле CSS и теперь мне нужно искать его среди 400 строк стилей. Такой бред. С Tailwind стиль указывается на самом HTML элементе с помощью классов.

  HTML

  <!-- padding: 1rem; -->
  <!-- border-radius: 0.5rem; -->
  <!-- background-color: rgba(0, 0, 0, 0.2); -->
  <div class="p-4 rounded-md bg-black/20">...</div>

  Как видно, классы используются, словно инлайн стили, сравни сам:

  HTML

  <div class="p-4 rounded-md bg-black/20"></div>
  <div style="padding: 1rem; border-radius: 0.5rem; background-color: rgba(0, 0, 0, 0.2);"></div>

• Настраивать можно абсолютно любое CSS свойство, даже медиа-запросы для мобилок. Это возможно благодаря сборщику Tailwind, который преобразует текст класса в CSS по шаблону {свойство}-{значение}, например mt-4 - это класс, который применяет margin-top: 1rem;.

• Можно редактировать конфигурацию в файле tailwind.config.ts, чтобы добавлять собственные классы, варианты, размеры, цвета и др, если стандартные знаечния не подходят твоему проекту. Может, дизайнер использует кастомную цветовую палитру или размеры экрана.

• Есть обратная совместимость с CSS. Нужно всего лишь использовать директиву @apply ...:

  CSS

  .wrapper {
  	@apply p-4 rounded-md bg-black/20;
  }

  Писать Tailwind в CSS ты будешь в тех случаях, когда нет возможности редактировать элемент в разметке или уже существует класс, к которому ты просто хочешь применить стиль. Частый случай, это чужие компоненты из библиотек. Самый яркий пример такой библиотеки - highlight-js:

  CSS

  .keyword {
  	@apply text-rose-500;
  }

Где можно его использовать?

• В любом проекте без исключения.

А теперь исключения:

• Приложения с устоявшимся дизайном и стилями. Однако, Tailwind можно внедрить в любой момент и писать стили в новых файлах.
• Если команда не готова к переходу на утилитарный CSS. Тут, к сожалению, ничего не поделаешь.

Классы

Подробнее о синтаксисе.

Как я говорил ранее, все классы Tailwind имеют следующую структуру: {свойство}-{значение}. Например:

• bg-blue-500 - синий фон.
• py-4 - отступ сверху и снизу 1 rem.
• text-center - выравнивание текста по центру.

Также есть варианты. Они имеют структуру {условие}:{свойство}. Например:

• md:bg-blue-500 - это медиа-запрос. Когда экран становится больше md (стандартное значение 768px), нужно применить синий фон.

Использование

Установка

Обычно она такая (полная установка на сайте Tailwind):

npm install -D tailwindcss
npx tailwindcss init

Можно установить скриптом (не рекомендуется):

<script src="https://cdn.tailwindcss.com"></script>

Если ты используешь Next, то Tailwind будет предустановлен (Vercel фанаты и спонсоры Tailwind).

Расширение для VSCode

Рекомендуется обязательно установить расширение Tailwind CSS IntelliSense для автодополнения классов в VSCode. Если класс применяет цвет, слева от него появится цветной квадратик, а при наведении на класс появится тултип с финальным CSS кодом. Расширение также будет подхватывать кастомные классы из конфига, который ты настраивал сам.

• Код расширения: bradlc.vscode-tailwindcss.
• Ссылка: marketplace.visualstudio.com

Важно знать

• Чтобы избегать повторения кода, используй UI фреймворк, например React. Это рекомендация самих разработчиков Tailwind.

  Например, преобразовывай массивы в разметку с помощью map :

  TypeScript JSX

  const buttons = ['like', 'subscribe', 'share']
  
  const buttons = (
  	<div>
  		{buttons.map((text, i) => (
  			<button className='bg-black text-white px-4 py-1 rounded-md hover:scale-105' key={i}>
  				{text}
  			</button>
  		))}
  	</div>
  )

  Или выноси стиль в отдельную переменную (решение так себе, но иногда удобно):

  TypeScript JSX

  const buttonClass = 'bg-black text-white px-4 py-1 rounded-md hover:scale-105'
  
  const buttons = (
  	<div>
  		<button className={buttonClass}>like</button>
  		<button className={buttonClass}>subscribe</button>
  		<button className={buttonClass}>share</button>
  	</div>
  )

• Tailwind, как определяют его сами разработчики, является сборочным инструментом, который сканирует, какие стили были задействованы в проекте, и на этапе сборки создает единый оптимизированный (100-200 кб) CSS файл.

Итог

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