Эта статья была впервые опубликована на сайте devjavu.space
Tailwind — это первый CSS-фреймворк, предоставляющий разработчикам полный контроль над стилизацией веб-компонентов. В отличие от компонентных фреймворков или библиотек, Tailwind не ограничивает вас готовыми компонентами, которые можно настраивать с помощью реквизитов и опций. Tailwind позволяет создавать компоненты с нуля, используя классы утилит в их минимальной форме.
Вот это да! Но я бы предпочел, чтобы кто-то другой сделал эту работу, мне больше нравятся библиотеки компонентов. Ну, есть Headless UI — полностью нестилизованные компоненты пользовательского интерфейса, которые хорошо интегрируются с Tailwind CSS (это их слова, не мои).
С анонсом одного из компонентов Tailwind — Tailwind JIT, Tailwind стал еще лучше. Давайте посмотрим на практике, как использовать эту возможность.
В Tailwind мы обычно начинаем с настройки наших тем и вариантов в файле tailwind.config.js. Что-то вроде этого:
module.exports = {
theme: {
colors: {
gray: '#CFD8DC',
blue: '#2196F3',
red: '#EF5350',
pink: '#F48FB1',
},
fontFamily: {
sans: ['Graphik', 'sans-serif'],
serif: ['Merriweather', 'serif'],
},
extend: {
spacing: {
'128': '32rem',
'144': '36rem',
},
borderRadius: {
'4xl': '2rem',
}
}
},
variants: {
extend: {
borderColor: ['focus-visible'],
opacity: ['disabled'],
}
}
}
Раздел theme — это место, где мы настраиваем все, что связано с визуальным оформлением/системой дизайна нашего сайта. Здесь мы можем указать цветовую палитру, семейство шрифтов, размеры радиусов границ и т.п. Без настройки Tailwind поставляется с определенными значениями для всех этих свойств стиля, например, цвета.
Глядя на этот график, мы знаем, что можем настроить 10 оттенков цвета «Красный», однако проблема возникает, когда нам нужны, скажем, один или два дополнительных оттенка (ненасытные люди, да?). Конечно, конфигурационный файл Tailwind может помочь нам в этом:
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
red: {
350: '#E53935'
},
}
}
}
}
Мы не должны делать этого, если эти тени нужны только в одной или двух частях нашего приложения, и они не нужны для тематизации. Здесь на помощь приходят произвольные стили с JIT-компилятором Tailwind. С помощью произвольных стилей вы можете указать нужный вам гиперспецифический стиль для элементов без необходимости обновлять его в вашем конфигурационном файле… Да, Сэм, теперь вы можете избавиться от этих встроенных атрибутов стиля 👀.
Давайте проверим это на практике. Я раскручу проект Vue и установлю Tailwind, после чего мы настроим режим JIT. Обратите внимание, что вы можете сделать это с любым Javascript frontend фреймворком, с которым вы работаете. Tailwind не зависит от фреймворка.
Вот настройка Tailwind для Vue и без фреймворка:
vue create tailwind-ab-styles
Перейдите в каталог проекта:
cd tailwind-ab-styles
Установите и настройте Tailwind CSS. Вот краткое руководство по настройке Tailwind CSS в вашем проекте Vue:
Как установить Tailwind CSS в Vue 3 | DevjavuКак установить Tailwind CSS в Vue 3 | Devjavu
Упрощенное руководство, если вы так ненавидите документацию.
devjavu.space После настройки Tailwind вы можете включить JIT, обновив tailwind.config.js и изменив свойство «mode» на «JIT».
module.exports = {
mode: 'jit', // update this line
purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
...
};
Давайте запустим сервер Vue и посмотрим, как это выглядит.
yarn serve
При запуске сервера вы можете получить аналогичное предупреждение от бандлера о том, что JIT-движок в настоящее время находится в режиме предварительного просмотра.
Использование произвольных стилей
Я обновил файл App.vue до простой разметки с основными классами Tailwind.
<template>
<div class="justify-center flex bg-yellow-300 items-center h-screen">
<div class="text-4xl">
Hello 👋🏼
</div>
</div>
</template>
<script>
export default {
name: 'App',
};
</script>
Результат:
В приведенной выше разметке у нас есть текст «Hello» с обернутым вокруг него div класса «text-4l». Tailwind предоставляет 10 полезных классов «font-size», которые мы можем использовать, и их значения варьируются от 0.75rem до 8rem. Допустим, мы хотим, чтобы только этот текст был размером 9rem, с произвольными стилями, нам не нужно настраивать другой класс утилит для этого случая, вместо этого мы делаем следующее:
<div class="text-[9rem]">
Hello 👋🏼
</div>
И вот он, огромный текст размером 9rem. Это избавляет нас от необходимости засорять нашу разметку встроенными стилями.
Давайте добавим поле под текстом «hello» и зададим его ширину, высоту и цвет фона, используя произвольные значения.
<div class="w-[300px] h-[200px] bg-[#FFECB3] rounded-[20px] ml-[40px]"></div>
Мы также можем использовать это для вариантов экрана.
<div class="w-[300px] h-[200px] md:bg-[#FFECB3] rounded-[20px] ml-[40px] lg:ml-[-400px] lg:mb-[430px]"></div>
Это также работает для сеток и макетов, обратитесь к документации для расширенных приложений.
Ограничение
На момент написания статьи вы можете @применять только те классы, которые являются частью ядра, генерируются плагинами или определены в правиле @слоя. Вы не можете @применять произвольные CSS-классы, которые не определены в правиле @слоя. — docs
@apply — это директива, используемая для вставки существующего класса утилиты в ваш пользовательский CSS. На данный момент это единственное известное ограничение с произвольными значениями. Удачи вам в работе.
Будьте здоровы ☕️