Что такое 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: это Bootstrap завтрашнего дня?
Дата публикации: 2019-05-20
От автора: наверное, вам пока мало что известно о Tailwind CSS. Мы переживаем ренессанс удивительных веб-платформ и адаптивного дизайна. Адаптивные пользовательские интерфейсы в основном реализуются с помощью таких библиотек, как Bootstrap, Foundation, Bulma или старых добрых медиа-запросов.
Мы с легкостью использовали эти наборы пользовательского интерфейса для реализации директив, чтобы добиться точного пользовательского интерфейса и надлежащего отклика при меньшем количестве кода. Но главный вопрос в том, действительно ли мы делали все правильно?
Что если бы был способ построения адаптивного пользовательского интерфейса, не ограничиваясь правилами какого-либо комплекта пользовательского интерфейса? Есть ли способ добиться адаптивности и при этом сохранить дизайн пользовательского интерфейса? Что ж, давайте узнаем.
Что такое Tailwind CSS?
В соответствии с официальной документацией, Tailwind CSS — это CSS-фреймворк утилит для быстрого создания пользовательских интерфейсов. Мне нравится думать, что это крутой способ определения встроенных стилей и создания потрясающего интерфейса без написания ни единой строки собственного CSS.
На мой взгляд, одна вещь, которую большинство разработчиков могут найти непривлекательной в Tailwind CSS, это то, что ваша разметка выглядит намного более загруженной, чем вы могли бы желать. Tailwind — не первая CSS-библиотека утилит, но она наиболее популярна на данный момент.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
С чего начать
Хотя CDN является хорошим способом импорта стилей в проекте, многие функции Tailwind CSS недоступны при использовании сборок CDN. Чтобы в полной мере воспользоваться возможностями Tailwind, установите Tailwind через npm.
1. Установите Tailwind через npm
Tailwind доступена на npm и может быть установлен с использованием npm или Yarn.
2. Создайте файл конфигурации Tailwind
Tailwind настроена почти полностью на простом JavaScript. Для этого вам нужно сгенерировать конфигурационный файл Tailwind для проекта. Рекомендуется создать файл tailwind.js в корне проекта. Утилита CLI помогает легко с этим справиться.
Если вы опытный пользователь Tailwind, которому не нужны комментарии в файле конфигурации, вы можете использовать флаг —no-comments при создании файла конфигурации, чтобы удалить их. Для получения дополнительной информации о настройке, ознакомьтесь с официальной документацией.
Проблема с наборами пользовательского интерфейса
Прежде всего, давайте посмотрим, что мы делаем, и как мы можем улучшить работу по добавлению гибкости в среду. Затем мы рассмотрим, почему использование наборов пользовательского интерфейса, вероятно, не лучший выбор в свете новой информации.
Фреймворки, такие как Bootstrap, абстрагируют создание компонентов до такой степени, что заставляют разработчиков использовать только доступные шаблоны. То же самое касается других UI фреймворков на базе наборов.
Кто-то может поспорить, что переопределение фреймворка с помощью собственного CSS — это вариант, но если мы много переопределим, то есть ли смысл использовать фреймворк вообще? Мы включим библиотеку и все еще будем писать свой собственный код — это дополнительные файлы, о которых нужно беспокоиться, и мы даже не экономим время.
Еще одна проблема, которую я обнаружил с сайтами на Bootstrap, заключается в том, что они почти всегда выглядят одинаково, поэтому это препятствует возможность внедрять креатив в среду разработки. Это одно из преимуществ Tailwind CSS: его способность легко создавать сложные пользовательские интерфейсы, и при этом любые два сайта не будут выглядеть одинаково.
Что вообще означает «utility-first»?
Utility-first библиотека означает, что, в отличие от Bootstrap, Tailwind не предоставляет нам автоматически предварительно установленные компоненты. Скорее, он дает нам служебные классы, которые помогают стилизовать компонент определенным образом, и позволяет создавать собственные классы, используя эти служебные классы. Давайте объясним это на двух простых примерах.
Пример 1: Демо простой кнопки
Из приведенного выше примера мы видим, как легко реализовать компонент кнопки с помощью Tailwind CSS.
Пример 2: Демо простой карточки
Приведенный ниже код является простым примером карточки, созданной с помощью фреймворка Tailwind CSS — и, если вы знакомы с CSS, вы, возможно, уже сможете разобрать некоторые вещи, происходящие со стилем. Поначалу может быть немного сложно запомнить все это, но как только вы разберетесь с синтаксисом, все будет в порядке.
Фрагмент кода ниже содержит контейнер, у которого для больших экранов добавлена тень — с помощью класса shadow-lg, и белый фон, реализованный с помощью bg-white. Также можно заметить, что классы px-4 и py-1просто помогают заполнить отступы по осям X и Y для кнопки сообщения.
Взгляд на 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, работаем с методологией БЭМ и затрагиваем другие аспекты фронтенда.
Узнайте, как прокачаться и в других специальностях или освоить их с нуля: