Функции и Директивы
Справочник по пользовательским функциям и директивам, которые Tailwind предоставляет Вашему CSS.
@tailwind
@apply
Это полезно, когда вы находите в своем HTML-коде общий служебный шаблон, который хотите извлечь в новый компонент.
Если вам нужен детальный контроль над порядком применения классов, используйте несколько операторов @apply :
Вы также можете смешивать объявления @apply с обычными объявлениями CSS:
Обратите внимание, что если вы используете Sass/SCSS, вам нужно использовать функцию интерполяции Sass, чтобы это работало:
@layer
Заключение любого пользовательского CSS в директиву @layer также указывает Tailwind учитывать эти стили для очистки при очистке этого слоя. Прочтите нашу документацию по оптимизации для продакшена для получения более подробной информации.
@variants
Это сгенерирует следующий CSS:
Важно отметить, что варианты создаются в том порядке, в котором вы их указываете.
Поэтому, если вы хотите, чтобы утилиты фокусировки имели приоритет, например, над утилитами зависания, убедитесь, что фокус появляется после наведения в списке:
В правиле @variants поддерживает все значения, которые поддерживаются в разделе variants Вашего файла конфигурации, а также любые пользовательские варианты, добавленные через плагины.
@responsive
Вы можете сгенерировать отзывчивые варианты Ваших собственных классов, заключив их определения в директиву @responsive :
Используя контрольные точки по умолчанию, это сгенерирует следующие классы:
Адаптивные варианты будут добавлены к существующим медиа-запросам Tailwind в конце Вашей таблицы стилей. Это гарантирует, что классы с отзывчивым префиксом всегда побеждают неотзывчивые классы, нацеленные на одно и то же свойство CSS.
@screen
Директива @screen позволяет вам создавать медиа-запросы, которые ссылаются на Ваши контрольные точки по имени, вместо того, чтобы дублировать их значения в Вашем собственном CSS.
Например, предположим, что у вас есть контрольная точка sm на 640px и вам нужно написать некоторый собственный CSS, который ссылается на эту контрольную точку.
Вместо того, чтобы писать необработанный медиа-запрос, который дублирует это значение следующим образом:
…вы можете использовать директиву @screen и ссылаться на контрольную точку по имени:
screen()
theme()
Используйте функцию theme() для доступа к Вашим значениям конфигурации Tailwind, используя точечную нотацию.
Если вам нужно получить доступ к значению, содержащему точку (например, к значению 2.5 в шкале интервалов), вы можете использовать запись в квадратных скобках:
Поскольку Tailwind использует синтаксис вложенных объектов для определения своей цветовой палитры по умолчанию, обязательно используйте точечную нотацию для доступа к вложенным цветам.
Не используйте синтаксис тире при доступе к вложенным значениям цвета
Используйте точечную нотацию для доступа к вложенным значениям цвета
Начало работы с Tailwind CSS
Изучите Tailwind способом, который лучше всего соответствует вашему стилю обучения.
Неофициальный перевод официальной документации Tailwind CSS.
Чтение документации
Узнайте, как настроить Tailwind в своем проекте.
Попробовать в браузере
Постройте что-нибудь с Tailwind на нашей игровой площадке.
Смотреть скринкасты
Узнайте больше о Tailwind прямо от команды на нашем канале.
Tailwind UI
Красивые компоненты пользовательского интерфейса, от создателей Tailwind CSS.
Что нового в Tailwind
Последние обновления
Tailwind CSS v2.2
За последние несколько недель мы получили массу удовольствия, добавляя новые интересные функции в Tailwind. Кажется, сейчас подходящее время для выпуска релиза, так что вот он — Tailwind CSS v2.2! Мы встроили новый высокопроизводительный инструмент CLI, добавили поддержку псевдоэлементов до и после, представили новые варианты селектора родственников, возможность стилизовать выделенный текст и многое другое.
Tailwind CSS v2.1
Мы только что выпустили Tailwind CSS v2.1, в котором новый движок JIT стал ядром, добавлена поддержка первоклассных фильтров CSS и многое другое!
Как раз вовремя: Следующее поколение Tailwind CSS
Приветствуем Джеймса Макдональда в Tailwind Labs
Много лет назад я получил сообщение от Стива, в котором говорилось что-то вроде: «Делясь ли я когда-нибудь с вами профилем этого парня на Dribbble? Я всегда следил за ним, это одна из моих самых любимых работ, которые я когда-либо находил». Этим человеком был Джеймс Макдональд, и сегодня мы в полном восторге от того, чтобы рассказать, что Джеймс присоединяется к нашей команде на постоянной основе.
«Tailwind CSS: С нуля до продакшена» на YouTube
Сегодня мы рады выпустить новую серию видеороликов Tailwind CSS: С нуля до продакшена, которая научит вас всему, что вам нужно знать, чтобы начать работу с Tailwind CSS v2.0 с нуля.
Приветствуем Дэвида Лура в Tailwind Labs
Мы начали работать с Дэвидом Луром прошлым летом на индивидуальной основе, чтобы помочь нам разработать версию пользовательского интерфейса Tailwind для Figma (почти готовую!), А также использовать его опыт в области специальных возможностей при создании шаблонов пользовательского интерфейса Tailwind, гарантируя, что мы следуем передовой опыт и разметка, которые будут работать для всех, независимо от того, какие инструменты они используют для просмотра веб-страниц. Сегодня мы рады сообщить, что Дэвид присоединился к нашей команде на постоянной основе!
Многострочное усечение с помощью @tailwindcss/line-clamp
Представьте, что вы создаете красивый дизайн, который вы или кто-то из вашей команды тщательно создали в Figma. Вы прибили все разные макеты в каждой контрольной точке, отточили пробелы и типографику, а фотография, которую вы используете, действительно оживляет дизайн.
Tailwind CSS v2.0
Сегодня мы наконец-то выпускаем Tailwind CSS v2.0, включая совершенно новую цветовую палитру, поддержку темного режима и многое другое!
Принять участие
Чат Telegram
Обсуждайте Tailwind CSS в чате телеграм.
Обсуждения GitHub
Свяжитесь с членами сообщества Tailwind CSS.
Discord
Присоединяйтесь к нашей группе Discord, чтобы общаться с другими пользователями Tailwind.
Следите за новостями и обновлениями в аккаунте Tailwind Twitter.
YouTube
Смотрите скринкасты и обучающие видео о Tailwind.
Что такое Tailwind CSS и как внедрить его на сайт или в React-приложение?
Jul 30, 2020 · 10 min read
CSS может стать вашим лучшим другом или злейшим врагом. Несмотря на то, что он невероятно гибкий, а результаты его применения порой кажутся магией, без должного внимания он может выйти из-под контроля, как и любой другой код.
Как же Taiwind CSS помогает в управлении стилями?
Что такое Tailwind?
Tailwind CSS — это “utility-first” (“полезность прежде всего”) CSS-фреймворк, предлагающий обширный каталог классов и инструментов для облегчения стилизации сайта или приложения.
Основная идея состоит в том, что пр и разработке проекта вам не нужно иметь дело с таблицами стилей и беспокоиться о том, как переопределить тот каскад из 10 селекторов, который вот уже 2 года преследует ваше приложение.
Чем Tailwind так хорош?
О преимуществах Tailwind можно рассказывать ещё очень долго, мы же в этом руководстве сосредоточимся на основах. Поехали!
Часть 1: Подключение Tailwind CSS к статичной HTML-странице
Начнём с подключения Tailwind CSS напрямую к статичной HTML-странице. Думаю, что, уделяя основное внимание Tailwind, а не приложению, мы сможем лучше понять, что именно происходит с фреймворком.
Шаг 1: Создание новой страницы
Просто создайте новый HTML-файл. Выбор контента для него остаётся за вами. Я использую для этого fillerama.io, чтобы контент выглядел повеселее.
Чтобы упростить себе задачу, можете воспользоваться моим файлом.
Шаг 2: Подключение Tailwind CSS через CDN
Чтобы получить полнофункциональную версию Tailwind, обычно рекомендуется подключение через npm. Мы же сейчас пока просто пытаемся понять, как он работает, поэтому давайте добавим ссылку на CDN в блок нашего документа.
Первое, что бросается в глаза после сохранения изменений и обновления страницы — все стили сбросились!
Это ожидаемо. У Tailwind есть предустановленные стили для обеспечения кроссбраузерности. Они состоят из популярного normalize.css и надстроек над ним.
Но нам ведь необходимо узнать, как использовать Tailwind вместе с нашими собственными стилями.
Шаг 3: Использование Tailwind CSS для добавления стилей на страницу
Теперь, когда Tailwind установлен, у нас появилась возможность использовать его огромную библиотеку утилитарных классов — с их помощью мы вновь стилизуем страницу.
Давайте начнём с добавления margin ко всем нашим параграфам (
Наименование класса строится по шаблону, который вы увидите и в остальных утилитарных классах: в данном случае m означает margin, применяемый по оси y ( y), со значением 5 (Tailwind использует rem — стало быть, значение равно 5rem).
Вот что здесь происходит:
Теперь займёмся списками. Сначала добавим классы ненумерованному списку (
- ):
Вот что мы сделали:
Вот и всё — мы стилизовали списки.
И наконец настало время сделать наш контент более читабельным — установим ему максимальную ширину и отцентрируем. Для этого к тегу добавим следующее:
Итак, наша страница готова.
Шаг 4: Добавление кнопки и других компонентов
Добавим кнопку в наш статичный пример.
Особенность Tailwind в том, что в нём заведомо нет готовых классов для компонентов: предполагается, что разработчики, скорее всего, будут переопределять их под свои потребности. Это значит, что нам нужно создавать собственные компоненты с помощью утилитарных классов.
Для начала добавим новую кнопку. Вставьте фрагмент кода, показанный ниже, в любое место на странице. Я вставлю его после тега первого параграфа (
Вы можете заметить, что, как и другие элементы, кнопка не стилизована, однако если на неё кликнуть, она среагирует. Давайте зададим кнопке соответствующий внешний вид — добавим следующие классы:
Вот что здесь происходит:
Теперь у нас есть кнопка.
Вы можете применять эту методологию к любому другому компоненту, который захотите создать. И, хотя всё это выполняется вручную, скоро мы выясним, как упростить этот процесс при разработке более динамичных проектов, например тех, что созданы на React.
Часть 2: Подключение Tailwind CSS к React-приложению
Для большей реалистичности подключим Tailwind CSS к приложению, созданному с помощью Create React App.
Для начала давайте рассмотрим этапы, которые вам нужно будет пройти, чтобы подключить Tailwind к вашему проекту с установкой Create React App. Затем мы воспользуемся контентом из последнего примера, чтобы воссоздать его уже на React.
Шаг 1: Создание нового React-приложения
Я не собираюсь слишком подробно останавливаться на этом шаге. Суть в том, что мы запустим новое React-приложение при помощи Create React App.
Перед тем как начать, можете ознакомиться с инструкциями в официальной документации React.
После запуска сервера разработки вы должны увидеть приложение.
Теперь мы можем перенести в него весь наш старый контент. Для этого скопируйте всё содержимое тега из статичного примера и вставьте в обёртку
Заменим все атрибуты class=» из скопированного контента на className=» для соответствия атрибутам React.
И напоследок поменяем className App в обёртке
Сохранив изменения и перезагрузив сервер, вы обнаружите, что страница выглядит хорошо. Но это впечатление обманчиво.
У React есть собственные базовые стили, и, хоть страница и выглядит нормально, мы всё ещё не используем на ней Tailwind. Так давайте же установим его!
Шаг 2: Подключение Tailwind CSS к React-приложению
Чтобы подключить Tailwind к приложению, нужно пройти несколько этапов. Убедитесь, что проходите их все — только так удастся создать нужную конфигурацию.
Для начала добавим зависимости:
Согласно документации Tailwind, нам нужно иметь возможность обрабатывать стили, чтобы они были должным образом добавлены в поток. Поэтому выше мы сделали следующее:
Также добавим две зависимости для разработки, чтобы облегчить себе работу с кодом:
Теперь давайте зададим конфигурацию для postcss. Для этого создайте в корне проекта файл с именем postcss.config.js и скопируйте в него следующее:
Этот код добавит плагины Tailwindcss и Autoprefixer в конфигурацию postcss.
Нам необходимо сделать конфигурацию частью процессов прослушивания и сборки. В файле package.json добавьте следующие два определения к свойству scripts :
Также включите в скрипты start и build команды:
Конфигурация готова. Теперь давайте попробуем вернуть наши стили к тому состоянию, в каком мы оставили их в статичном примере.
Замените всё содержимое файла App.css на следующее:
Этот код импортирует базовые стили, компоненты и утилитарные классы Tailwind, чтобы он работал так, как от него и ожидается.
Теперь самое время вернуться к серверу разработки. Если он уже запущен, перезапустите его, чтобы применились все изменения в конфигурации.
Страница должна выглядеть точно так же, как она выглядела в статичном примере.
Rapidly build modern websites without ever leaving your HTML.
Staff Engineer, Algolia
“Best practices” don’t actually work.
I’ve written a few thousand words on why traditional “semantic class names” are the reason CSS is hard to maintain, but the truth is you’re never going to believe me until you actually try it. If you can suppress the urge to retch long enough to give it a chance, I really think you’ll wonder how you ever worked with CSS any other way.
I feel like an idiot for not using Tailwind CSS until now.
If I had to recommend a way of getting into programming today, it would be HTML + CSS with Tailwind CSS.
I have no design skills and with Tailwind I can actually make good looking websites with ease and it’s everything I ever wanted in a CSS framework.
I started using @tailwindcss. I instantly fell in love with their responsive modifiers, thorough documentation, and how easy it was customizing color palettes.
Loved it the very moment I used it.
I came into my job wondering why the last dev would ever implement Tailwind into our projects, within days I was a Tailwind convert and use it for all of my personal projects.
Okay, I’m officially *all* in on the @tailwindcss hype train. Never thought building websites could be so ridiculously fast and flexible.
Have been working with CSS for over ten years and Tailwind just makes my life easier. It is still CSS and you use flex, grid, etc. but just quicker to write and maintain.
Okay, @tailwindcss just clicked for me and now I feel like a #!@%&$% idiot.
I’ve been using @tailwindcss the past few months and it’s amazing. I already used some utility classes before, but going utility-first. this is the way.
After finally getting to use @tailwindcss on a real client project in the last two weeks I never want to write CSS by hand again. I was a skeptic, but the hype is real.
I didn’t think I was going to like @tailwindcss. spent a day using it for a POC, love it! I wish this had been around when we started our company design system, seriously considering a complete rebuild
@tailwindcss looked unpleasant at first, but now I’m hooked on it.
Constraint-based
An API for your design system.
Utility classes help you work within the constraints of a system instead of littering your stylesheets with arbitrary values. They make it easy to be consistent with color choices, spacing, typography, shadows, and everything else that makes up a well-engineered design system.
Width
Build anything
Build whatever you want, seriously.
Because Tailwind is so low-level, it never encourages you to design the same site twice. Even with the same color palette and sizing scale, it’s easy to build the same component with a completely different look in the next project.
Performance
It’s tiny in production.
Tailwind automatically removes all unused CSS when building for production, which means your final CSS bundle is the smallest it could possibly be. In fact, most Tailwind projects ship less than 10kB of CSS to the client.
Mobile-first
Wrestling with a bunch of complex media queries in your CSS sucks, so Tailwind lets you build responsive designs right in your HTML instead.
Throw a screen size in front of literally any utility class and watch it magically apply at a specific breakpoint.
Beach House in Collingwood
Hosted by Kevin Francis
State variants
Hover and focus states? We got ’em.
Projects
Component-driven
Worried about duplication? Don’t be.
If you’re repeating the same utilities over and over and over again, all you have to do is extract them into a component or template partial and boom — you’ve got a single source of truth so you can make changes in one place.
Hank’s Juiciest Beef Burger
Southern Fried Chicken Sandwich
Lily’s Healthy Beef Burger
Not into component frameworks and like to keep it old school? Use Tailwind’s @apply directive to extract repeated utility patterns into custom CSS classes just by copying and pasting the list of class names.
Weekly one-on-one
styles.css
index.html
Dark mode
Now with Dark Mode.
Don’t want to be one of those websites that blinds people when they open it on their phone at 2am? Enable dark mode in your configuration file then throw dark: in front of any color utility to apply it when dark mode is active. Works for background colors, text colors, border colors, and even gradients.
Scaling CSS at Heroku with Utility Classes
Customization
Extend it, tweak it, change it.
Tailwind includes an expertly crafted set of defaults out-of-the-box, but literally everything can be customized — from the color palette to the spacing scale to the box shadows to the mouse cursor.
Use the tailwind.config.js file to craft your own design system, then let Tailwind transform it into your own custom CSS framework.
Typography
Color
Modern features
Cutting-edge is our comfort zone.
Tailwind is unapologetically modern, and takes advantage of all the latest and greatest CSS features to make the developer experience as enjoyable as possible.
Взгляд на Tailwind CSS
В этом году я видел много шумихи вокруг популярного фреймворка CSS, Tailwind CSS. И подумал, что поделюсь некоторыми мыслями и опасениями по поводу этого фреймворка UI. Я приобрёл небольшой опыт написания CSS с подходом utility-first (полезность прежде всего), когда начал свою карьеру в разработке интерфейсов, несколько лет назад.
К старту курса о Frontend-разработке делимся статьёй, автор которой решил, возможно, несколько изменить то, как воспринимается Tailwind, рассказать как о положительных, так и об отрицательных сторонах фреймворка, особенно в контексте работы с мультиязычными сайтами.
Вещи, которые я считаю интересными
Вам не нужно закрывать файл с HTML
Основной заголовок на официальном сайте Tailwind гласит:
Быстрое создание современных веб-сайтов, даже не покидая HTML.
Я согласен, что писать код в одном месте может быть быстрее, чем переключаться между разными файлами. Однако оставить в стороне свой HTML для меня не проблема. Это может помочь переключить контекст между разметкой и стилями. Разделение файлов HTML и CSS может помочь мне лучше сосредоточиться на выполнении поставленной задачи. Однако, когда разметка и стили смешиваются, когда вы работаете над сложным, многоязычным, отзывчивым сайтом и пользовательским интерфейсом с темами, всё может пойти наперекосяк.
Когда я работаю с Tailwind, это похоже на то, как если бы я держал две ручки: одну для набросков, а другую для раскрашивания. Одновременное написание разметки и CSS напоминает мне эти две ручки.
Tailwind сильно отличается тем, что у цветной ручки есть ограничения или сдерживающие факторы. Другими словами, можно раскрашивать только предустановленными цветами. По мне так лучше сосредоточиться на написании доступной, семантической разметки, а затем отдельно работать со стилизацией.
Проектные ограничения
В дизайн-системе мы обычно определяем цвет, интервал, размер и другие свойства. Работа разработчика сильно упрощается, когда есть пределы тому, что он может сделать. Tailwind накладывает хорошие ограничения. Идея определения пользовательских конфигурационных файлов очень полезна.
Именование классов CSS
О названиях классов CSS думать не нужно и это может ускорить реализацию макетов в вебе. Я нахожу это полезным в случае, когда ваш босс пишет вам, что есть срочный лендинг, который должен быть сделан сегодня, и у вас только 3 часа, чтобы написать его. Tailwind может помочь быстро достичь результата.
Однако, если вы придерживаетесь разделения разметки и стилей, разработка займёт гораздо больше времени. Ещё одно полезное применение Tailwind — это соревнование или хакатон. Самое главное на таких событиях — сделать работу и что-то получить за неё. Никому не будет дела до того, как вы написали CSS, верно?
То, с чем я не согласен
Tailwind — не фреймворк utility-first
Подзаголовок на их веб-сайте сообщает, что CSS Tailwind:
Прежде всего утилитарный CSS-фреймворк, содержит такие классы, как.
Из увиденного я сделал вывод, что Tailwind — это только утилитарный (utility-only) фреймворк. Может быть, название «только утилитарный» повлияет на то, как его воспримут новички? Я редко вижу какой-то сайт, использующий Tailwind и применяющий концепцию utility-first.
Длинный список классов может запутать
Обратите внимание на то, что я знаю о методе @apply. Рассмотрим пример из документации Tailwind:
Это поле ввода с 17 классами CSS. Что проще: читать классы один за одним горизонтально или сканировать их сверху вниз? Вот так поле будет выглядеть стиль этого поля в файле CSS:
Я могу прочитать и понять, какие стили содержит это поле ввода, гораздо быстрее, чем в ситуации, когда сканирую HTML. Возможно, существуют плагины для редакторов кода, которые автоматически форматируют HTML-классы так, чтобы каждый из них располагался отдельно [на отдельной строке], но в DevTools браузера этого нет.
Я знаю о методе @apply, но каждый раз, когда я думаю о нём, я прихожу к выводу, что он противоречит основной концепции Tailwind. Вот тот же пример (поле ввода):
Посмотрите на длину списка классов. Если в Tailwind в приоритете полезность, то почему в официальной документации Tailwind или в Tailwind UI мы редко видим @apply? Опять же, я вижу Tailwind как только утилитарный фреймворк.
Всегда нужно давать имена элементам
В дизайн-системе трудно обсуждать конкретный компонент, не договорившись о его названии. Причина вот в чём: вы не отправите своему коллеге сообщение вроде такого:
Привет, есть новости о “bg-white w-full py-3 px-4”?
На самом деле фраза будет такой:
Есть новости о дизайне поляризованной карты?
В конце дня вам нужно будет сесть и подумать об уникальном, выразительном названии для каждого компонента проекта, который вы пытаетесь разработать. Это применимо, конечно, к ситуации, когда вы хотите масштабировать и поддерживать проект в течение длительного времени. Некоторое время назад я шутил с другом вот о чём: что, если мы отложим «традиционное именование» в сторону и будем называть себя не традиционными именами, а как в коде ниже:
Код выше — бессмыслица. Гораздо лучше такой код:
Некоторые классы запутывают
Когда я только начинал использовать Tailwind, мне нужно было добавить класс, который отвечает за свойство align-items: center. Моей первой мыслью было воспользоваться align-center, но это не сработало.
Я посмотрел в документацию и впал в замешательство. Класс items-center добавит CSS-свойство align-items: center, где класс align-middle будет содержать vertical-align: middle. Чтобы запомнить их, требуется немного мышечной памяти.
Опытные веб-разработчики могут легко адаптироваться к этому, и это не будет для них большой проблемой. Но самое интересное — для новичка в CSS. Изучение Tailwind без уверенного знания CSS может привести к недопониманию в будущем. Например, если разработчик начал свою карьеру только с Tailwind, то, когда его попросят написать CSS с нуля, он не сможет этого сделать. Я не говорю, что это невозможно, но это потребует времени и усилий.
Tailwind затрудняет настройку дизайна в браузере
Я занимаюсь как дизайном, так и frontend-разработкой, поэтому редактирование в браузере с помощью DevTools для меня крайне важно. С Tailwind работа в DevTools может стать сложнее. Скажем, например, я хочу изменить отступы для компонента. Когда я изменяю значение класса py-3, это влияет на каждый использующий его элемент страницы.
Это означает, что разработка в браузере неэффективна. Недавно команда Tailwind выпустила компилятор JIT (just in time), удаляющий неиспользуемый CSS. Это мешает всей идее дизайна в браузере.
Я набрал back и получил длинный список всех доступных классов CSS. При JIT-компиляции таких подсказок не будет.
Tailwind неудобен для многоязычных сайтов
Чтобы вы больше понимали, добавлю: я работаю над веб-сайтами, которые должны работать как на английском (с направлением слева направо, LTR), так и на арабском (с направлением справа налево, RTL). Рассмотрим такой код:
В отдельном файле CSS для RTL стиль будет выглядеть так:
В приведённом выше примере padding следует развернуть в зависимости от направления страницы (слева направо или справа налево). Для этого уже есть плагины, но они решают проблему только с внешней стороны. Первый найденный мной делает следующее:
Для меня это не очень хорошее решение. Второй найденный плагин немного отличался от первого:
Такой код может очень быстро выйти из-под контроля. Исследуя один веб-сайт, я заметил более 30 классов CSS.
Это пример того, как Taillwind может выйти из-под контроля, особенно у новичков. Тридцать классов для компонента кнопки — это слишком много. В таком случае я лучше поработаю со встроенными (inline) стилями.
Чтобы помочь в создании многоязычного веб-сайта, сейчас я использую Bi-App Sass. Вот пример:
Код скомпилируется в два разных файла CSS. Файл ltr:
Подробнее о стилизации RTL читайте в этом руководстве от вашего покорного слуги.
Я не всегда работаю с шаблонами
Одна из проблем Tailwind заключается в том, что, если у вас есть список карточек и вы хотите изменить определённый набор классов, вам придётся вручную просматривать их в редакторе кода. Это не будет проблемой, если вы используете в своём продукте частичные файлы CSS (partial) или компоненты. Вы можете один раз написать HTML, и любое изменение будет отражено везде, где используется этот компонент.
Это не всегда так. Я работаю над простыми страницами index.html, где усилия в разделении на части или компоненты себя не оправдывают. В этом случае работа с Tailwind и редактирование CSS могут стать процессом, чреватым ошибками, поскольку вы даже не можете использовать функцию «Найти и заменить»: она может пропустить некоторые другие элементы на странице.
Tailwind делает веб-сайты похожими
Команда Tailwind создала набор продуманных компонентов под названием Tailwind UI, которые легко настраиваются и готовы к использованию в вашем проекте.
Внешний вид и функциональность компонентов приятные, и мне это нравится. Хотя есть проблемы, если сайт использует Tailwind UI, есть большая вероятность, что я предскажу использовать его.
Обычно, когда вы работаете с Tailwind UI, это означает, что у вас нет времени на создание индивидуального дизайна, поэтому вам нужно что-то, что можно быстро запустить, верно? И это — хороший вариант применения, за исключением одной детали: применение Tailwind приведёт к тому, что многие сайты будут выглядеть похожими друг на друга, подобно тому, что было много лет назад с Bootstrap.
Некоторые свойства или особенности CSS использовать невозможно
К примеру, не включено свойство clip-path, и я полностью понимаю причину. Предположим, мы хотим включить его как компонент. Где мы должны написать код? Здесь:
Либо примерно так включить его в конфигурацию Tailwind:
Или же сделать следующее:
Заключительные мысли
Может ли Tailwind оборачивать CSS в свои классы во время компиляции?
Представьте себе, что Tailwind появляется только во время компиляции. То есть вы пишете обычный CSS с именованием и всё такое, а умный компилятор преобразует ваш CSS в утилитарные классы. Это было бы воплощением мечты.
Утилитарные классы — мощный инструмент, если не перестараться
В своих текущих проектах я использую комбинацию утилитарных классов и обычного CSS. Для меня это идеальное сочетание. Я не теряю возможности утилитарных классов и в то же время использую их, не загромождая HTML.
Фронтенд довольно часто выбирают как «точку входа» в IT. Но фронтенд это не только внешнее оформление сайтов, но и работа с базами данных, а также внешними API. Фронтенд требует системной, комплексной подготовки. Если вам или вашим знакомым интересно это направление разработки — можете присмотреться к нашему курсу о Frontend-разработке, где мы касаемся не только вышеупомянутых тем, но и разработки отзывчивых сайтов при помощи flexbox, работаем с методологией БЭМ и затрагиваем другие аспекты фронтенда.
Узнайте, как прокачаться и в других специальностях или освоить их с нуля: