В добрый путь, Tailwind CSS
Хорошая новость в том, что времена, когда страницы выглядели так:
… давно прошли, отчасти благодаря фреймворкам CSS.
Но, как и многие другие люди, вы можете спросить, что я могу использовать, что еще не является мейнстримом? Есть ли лучшее, более современное решение? Нет ли чего-то, что вообще не связано с Google или Twitter?
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Tailwind CSS, новый перспективный фреймворк, который делает себе имя с 2017 года. Согласно данным State of CSS — Tailwind получил высшую оценку удовлетворенности и интереса со стороны пользователей из более чем 100 стран как в 2019, так и в 2020 году.
Tailwind предоставляет набор предварительно созданных служебных классов, позволяя разработчикам напрямую стилизовать элементы HTML без необходимости создавать классы CSS или вообще писать какой-либо CSS.
Это позволяет Tailwind сиять своей простотой, гибкостью и доступными параметрами настройки. В отличие от Material и Bootstrap, которые предоставляют отдельные предварительно созданные элементы (и которые требуют существенной настройки и синтаксиса), Tailwind обеспечивает беспроблемный доступ к простой и быстрой стилизации CSS с помощью служебных классов.
Если у вас когда-либо была идея для фронтенд-проекта, вы сразу переходили к кодированию и хотели сразу же воплотить свой воображаемый пользовательский интерфейс, Tailwind позволит вам быстро стилизовать его, прежде чем вдохновение покинет вас, просто использовав служебных классы Tailwind в своей разметке.
В этой статье мы обсудим, как работает Tailwind, а также о преимуществах и недостатках его использования. Мы рассмотрим базовую настройку и рабочий процесс Tailwind. Затем мы рассмотрим реализацию Tailwind с SASS или стилизованными компонентами, а также сборку для повышения отзывчивости приложения.
Как работает Tailwind?
Содержание статьи:
Утилитарные классы
Tailwind — это утилитарный CSS-фреймворк. Утилитарный класс — это повторно используемый класс CSS, который стилизует элемент для определенной цели.
Предположим, мы ожидаем, что нескольким элементам потребуется синий цвет фона. Чтобы создать утилитарный класс для этого, мы создадим класс CSS с именем bg-blue и зададим ему стиль background-color: blue. Теперь мы можем разместить наш служебный класс bg-blue на многочисленных элементах HTML, где фон должен быть синим.
Tailwind, по сути, предоставляет огромную коллекцию предварительно созданных служебных классов, поэтому вам не нужно создавать их самостоятельно. Он полагается на наложение этих классов на элементы HTML, чтобы полностью стилизовать элемент.
Используя Tailwind, возможно, вам никогда не понадобится писать CSS. Вместо этого вы просто добавляете служебные классы. Например, чтобы легко создать кнопку с закругленными углами, мягкой тенью и центрированным белым текстом, вы просто добавляете в свой элемент следующие служебные классы:
<button className=”bg-blue-300 rounded-md shadow-md text-center p-8 text-white”> Button </button> // NOTE: The examples in this blog will be referencing React components, hence the usage of “className”.
| 12345 | <button className=”bg-blue-300 rounded-md shadow-md text-center p-8 text-white”> Button</button> // NOTE: The examples in this blog will be referencing React components, hence the usage of “className”. |
Это все, что вам нужно сделать, чтобы получить стилизованную кнопку, которая выглядит следующим образом:
Tailwind предоставляет сотни, если не тысячи служебных классов, каждый из которых имеет определенные стили. Существует класс по имени .text-center с одним свойством CSS text-align:center, другой с именем .p-8, который имеет padding:2rem, и так далее. Так работает Tailwind.
Преимущества и недостатки
Плюсы
Наиболее очевидным преимуществом использования служебных классов Tailwind является то, что служебные классы позволяет разработчику создавать свою разметку и стилизовать ее одновременно без необходимости создания классов CSS (или написания какого-либо CSS!). Разработчику, использующему Tailwind, никогда не придется отказываться от кода HTML или JSX при создании представлений и компонентов.
Это может быть особенно полезно, если вам когда-либо нужно было собрать быструю демонстрацию или MVP или просто создать пользовательский интерфейс, чтобы лучше визуализировать свой проект.
Огромное преимущество, предоставляемое по умолчанию, заключается в том, что Tailwind автоматически удаляет весь неиспользуемый CSS из пакета, отправленного в браузер. Во время сборки Tailwind удалит все неиспользуемые классы CSS, создав минимальный пакет CSS, который может предоставить ваш код, в среднем менее 10 КБ . Это может значительно сократить время загрузки страницы.
В качестве фреймворка стилизации, Tailwind, возможно, менее своевольный, чем другие фреймворки, такие как Bootstrap и Material. Очень часто при использовании других фреймворков разработчики обнаруживают, что переписывают CSS, предоставляемый фреймворком, чтобы полностью удовлетворить свои потребности.
Минусы
Начальная кривая обучения Tailwind может быть непривлекательной, поскольку вы неизбежно будете возвращаться к его документации, чтобы узнать правильное имя служебного класса. Что-то столь же традиционное, как установка padding-top:1rem, с Tailwind будет pt-4. Вначале это могло потенциально перевесить все преимущества Tailwind в отношении скорости.
Однако, как только вы познакомитесь с Tailwind, я гарантирую, что имена служебных классов будут такими же простыми, как запоминание самих атрибутов CSS.
Хотя Tailwind относительно малоизвестен, предварительно созданные служебные классы по-прежнему имеют заданные значения. Например, text-red-300 это служебный класс для цвета текста с предустановленными значениями, в частности, для красного цвета: rgba(252, 165, 165, 1). К счастью, все эти значения по умолчанию можно изменить в файле tailwind.config.js в соответствии с вашими потребностями.
По умолчанию Tailwind не предоставляет никаких стилизованных компонентов из коробки. Все компоненты, представленные в такой библиотеке, как Bootstrap (например, общая навигация, кнопки, заголовки), необходимо реализовать с нуля.
Внедрение Tailwind и рабочий процесс
Для начала вам нужно установить Tailwind с использованием npm. Чтобы получить последнюю версию и ее зависимости, запустите:
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
| 1 | npm install -D tailwindcss@latest postcss@latest autoprefixer@latest |
Если вы собираетесь делать собственные настройки, запустите:
npx tailwindcss init
| 1 | npx tailwindcss init |
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
… чтобы создать файл tailwind.config.js. Этот файл позволяет настраивать стили, которые мы обсудим в следующем разделе.
Чтобы внедрить функциональность Tailwind, вам понадобится файл CSS, который включает следующие строки:
CSS /* ./your-css-folder/styles.css*/ @tailwind base; @tailwind components; @tailwind utilities;
| 12345 | /* ./your-css-folder/styles.css*/ @tailwind base;@tailwind components;@tailwind utilities; |
Теперь вы можете перейти к кодированию. Следует помнить о цели и дорожной карте вашего проекта. Если вам просто нужно что-то наладить и работать с приближающимся дедлайном, вам подойдет базовая реализация Tailwind.
Если вы собираетесь провести рефакторинг и, возможно, даже удалить Tailwind в будущем, обязательно соедините свой код Tailwind с файлами SASS или Styled Component. Помните об этих деталях, чтобы сделать кодовую базу более чистой.
Конфигурация Tailwind
Скорее всего, вы собираетесь настраивать свои служебные классы Tailwind, потому что давайте будем честными, служебная библиотека Tailwind включает не все. Например, для любой пользовательской анимации, кроме пульса или отскока, потребуется конфигурация. Чтобы настроить ее, обязательно запустите:
npx tailwindcss init
| 1 | npx tailwindcss init |
Это создаст минимальный файл настроек tailwind.config.js в корне проекта. Здесь вы можете установить все, что вам может понадобиться, что не включено по умолчанию в Tailwind, например, пользовательские шрифты, анимацию, определенные брейкпоинты или настроить предварительно созданные служебные классы Tailwind. Любые пользовательские стили здесь будут иметь приоритет над существующими классами Tailwind.
JavaScript //tailwind.config.jsmodule.exports = { purge: [“./src/**/*.{js,jsx,ts,tsx}”, “./public/index.html”], darkMode: false, // or ‘media’ or ‘class’ theme: { extend: { fontFamily: { sans: [ “AvenirLTPro-Heavy”, “AvenirLTPro-Light”, “AvenirLTPro-Black”, ], body: [“AvenirLTPro-Medium”], light: [“AvenirLTPro-Light”], }, screens: { xs: “320px”, sx: “420px”, }, colors: { blue: { lighter: “#3064b1”, light: “#CAE0FE”, DEFAULT: “#0E71FB”, dark: “#082959”, }, gray: { lightest: “#F7FAFC”, lighter: “#EBEFF5”, light: “#E6EAF0”, DEFAULT: “#D7DBE0”, dark: “#6E6E6E”, darkest: “#333333”, }, }, animation: { slideIn: “slideIn 200ms ease-in-out 1”, }, keyframes: { slideIn: { “0%”: { transform: “translateX(-100vw)” }, “100%”: { transform: “translateX(0)” }, }, },
| 12345678910111213141516171819202122232425262728293031323334353637383940414243 | //tailwind.config.jsmodule.exports = { purge: [“./src/**/*.{js,jsx,ts,tsx}”, “./public/index.html”], darkMode: false, // or ‘media’ or ‘class’ theme: { extend: { fontFamily: { sans: [ “AvenirLTPro-Heavy”, “AvenirLTPro-Light”, “AvenirLTPro-Black”, ], body: [“AvenirLTPro-Medium”], light: [“AvenirLTPro-Light”], }, screens: { xs: “320px”, sx: “420px”, }, colors: { blue: { lighter: “#3064b1”, light: “#CAE0FE”, DEFAULT: “#0E71FB”, dark: “#082959”, }, gray: { lightest: “#F7FAFC”, lighter: “#EBEFF5”, light: “#E6EAF0”, DEFAULT: “#D7DBE0”, dark: “#6E6E6E”, darkest: “#333333”, }, }, animation: { slideIn: “slideIn 200ms ease-in-out 1”, }, keyframes: { slideIn: { “0%”: { transform: “translateX(-100vw)” }, “100%”: { transform: “translateX(0)” }, }, }, |
Tailwind с другими пакетами стилизации
Очевидная проблема с Tailwind — это громоздкие имена классов, которые в конечном итоге загромождают ваш HTML или JSX. Если мы посмотрим на предыдущий пример для кнопки, полный список применяемых классов будет bg-blue-300 rounded-md shadow-md text-center. Если бы мы хотели добавить больше стилей, нам понадобилось бы еще больше служебных классов, что сделало бы нашу строку еще длиннее.
И если бы каждый элемент выглядел так, разметку становилось бы читать все труднее и труднее.
JavaScript const Name = () => { return ( <div className=”flex flex-col md:flex-row overflow-ellipsis overflow-hidden”> <div className=”p-1 w-11r md:w-20r md:p-2 lg:w-29r inline-block text-gray-darkest font-sans flex items-center”> <h3 className=”text-xs md:text-base overflow-ellipsis overflow-hidden xs:truncate md:overflow-clip md:whitespace-normal md:overflow-visible max-h-10″> {name} </h3> </div> <div className=”p-1 w-5r md:w-8r inline-block flex items-center justify-center”> <p className=”text-xs md:text-base”> {date ? formatDate(date) : “Unspecified”} </p> </div> </div> ); };
| 12345678910111213141516 | const Name = () => { return ( <div className=”flex flex-col md:flex-row overflow-ellipsis overflow-hidden”> <div className=”p-1 w-11r md:w-20r md:p-2 lg:w-29r inline-block text-gray-darkest font-sans flex items-center”> <h3 className=”text-xs md:text-base overflow-ellipsis overflow-hidden xs:truncate md:overflow-clip md:whitespace-normal md:overflow-visible max-h-10″> {name} </h3> </div> <div className=”p-1 w-5r md:w-8r inline-block flex items-center justify-center”> <p className=”text-xs md:text-base”> {date ? formatDate(date) : “Unspecified”} </p> </div> </div> );}; |
Возможные решения этой проблемы включают сочетание Tailwind с SASS или стилизованными компонентами.
SASS с использованием @apply
Обычная практика с Tailwind — комбинировать его использование с SASS / SCSS. Я считаю полезным правило ограничить количество служебных классов любого HTML-элемента до 5 или 6. Если элемент требует дальнейшей стилизации, вы можете использовать @apply для стилизации класса SASS с помощью служебных классов Tailwind, например:
CSS .card-body { p { @apply px-4 pb-4 text-lg pt-0 font-helvetica-neue text-center text-white } }
| 12345 | .card-body { p { @apply px-4 pb-4 text-lg pt-0 font-helvetica-neue text-center text-white }} |
Затем, вы можете установить этот класс там, где вам нужно.
Cтилизация компонентов с использованием tw.macro
Чтобы использовать Tailwind вместе со стилизованными компонентами, нам понадобятся некоторые дополнительные зависимости, а именно tailwind.macro и babel-plugin-macros. Комбинация этих двух параметров позволит Babel читать утилиты Tailwind.
Как только это будет сделано, вы можете начать настраивать className в своих стилизованных компонентах.
JavaScript import styled from “styled-components”; import tw from “tailwind.macro”;const AppStyles = styled.div.attrs({ className: “w-full h-screen flex flex-col items-center justify-center” })` h1 { ${tw`font-sans text-6xl text-teal-500`} } p { ${tw`text-lg text-gray-700`} } ul { ${tw`inline-flex mx-5`} } `;
| 1234567891011121314 | import styled from “styled-components”;import tw from “tailwind.macro”;const AppStyles = styled.div.attrs({ className: “w-full h-screen flex flex-col items-center justify-center”})` h1 { ${tw`font-sans text-6xl text-teal-500`} } p { ${tw`text-lg text-gray-700`} } ul { ${tw`inline-flex mx-5`} }`; |
Создание отзывчивости
Медиа-запросы
Одним из приятных преимуществ использования Tailwind является простота адаптивного стиля. По умолчанию Tailwind ориентирован на мобильные устройства с точки зрения скорости реагирования. Другими словами, брейкпоинты под капотом определяются с помощью min-width.
<button className=”bg-blue-300 rounded-md shadow-md text-center p-8 text-white text-sm md:text-md md:p-10 lg:text-lg”> Button </button>
| 123 | <button className=”bg-blue-300 rounded-md shadow-md text-center p-8 text-white text-sm md:text-md md:p-10 lg:text-lg”> Button</button> |
В этом примере font-size и padding изменятся при достижении брейкпоинта md, а font-size будет увеличиваться еще больше при достижении брейкпоинта lg. Чтобы узнать точные размеры для таких размеров, как md или lg, вам нужно будет обратиться к документации Tailwind для конкретных атрибутов. Что касается брейкпоинтов, то sm равно 640px, md равно 768px и lg равно 1024px по умолчанию. Все это можно настроить, в файле tailwind.config.js. Например, если вы хотите передать md равно 800px, вы можете изменить это в tailwind.config.js.
JavaScript // tailwind.config.js module.exports = { theme: { screens: { ‘sm’: ‘640px’, // => @media (min-width: 640px) {…} ‘md’: ‘800px’, // => @media (min-width: 800px) {…} ‘lg’: ‘1024px’, // => @media (min-width: 1024px) {…} ‘xl’: ‘1280px’, // => @media (min-width: 1280px) {…} ‘2xl’: ‘1536px’, // => @media (min-width: 1536px) {…} } } }
| 123456789101112131415161718192021 | // tailwind.config.jsmodule.exports = { theme: { screens: { ‘sm’: ‘640px’, // => @media (min-width: 640px) {…} ‘md’: ‘800px’, // => @media (min-width: 800px) {…} ‘lg’: ‘1024px’, // => @media (min-width: 1024px) {…} ‘xl’: ‘1280px’, // => @media (min-width: 1280px) {…} ‘2xl’: ‘1536px’, // => @media (min-width: 1536px) {…} } }} |
Заключение
Tailwind упрощает веб-стилизацию. Он не требует большого количества шаблонов для начала работы и, конечно же, не предлагает предварительно стилизованных компонентов кнопок или элементов формы, которые вам, возможно, придется переделывать.
Tailwind просто предоставляет разработчикам эффективный и быстрый метод стилизации, чтобы они могли сразу приступить к работе. Это может особенно пригодиться, когда вы хотите быстро добавить немного стиля в начальные и личные проекты, а также его можно масштабировать для более крупных проектов.
Автор: Eric SK. Cheung
Источник: webformyself.com