Полное руководство по использованию Tailwind CSS: практический курс от начала до мастерства

Что такое Tailwind CSS?

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

В отличие от традиционных фреймворков, таких как Bootstrap, которые предлагают заранее подготовленные компоненты (например, кнопки, карточки), Tailwind CSS сосредоточен на предоставлении базовых инструментальных классов, каждый из которых отвечает за выполнение конкретной функции. Например, вы можете использовать… text-center Чтобы текст был выровнен по центру, используйте соответствующие форматирующие элементы или команды. p-4 Чтобы настроить внутренний отступ (padding), можно воспользоваться соответствующими параметрами или инструментами. bg-blue-500 Давайте настроим синий фон. Такой подход к разработке CSS (атомизация стилей) обеспечивает огромную гибкость: вы можете комбинировать различные инструменты и классы, чтобы создавать любые уникальные компоненты, не ограничиваясь стандартными стилями фреймворка, и не беспокоиться о росте размеров файлов с CSS-кодом.

Основным файлом является конфигурационный файл. tailwind.config.jsС помощью этого файла вы можете полностью настроить свою систему дизайна: цвета, межпозиционные расстояния, шрифты, параметры разрывов текста и все другие элементы дизайна. Это позволит обеспечить высокую визуальную согласованность всего проекта.

Рекомендуемое чтение Полное руководство по использованию Tailwind CSS: от основ до мастерства практической атомизированной CSS-фреймворки。

Как установить и настроить

Установите пакет с помощью пакетного менеджера.

В большинстве современных фронтенд-проектов установка пакетов с помощью менеджера пакетов является наиболее распространенным и рекомендуемым способом. Это позволяет легко управлять зависимостями проекта и интегрировать их с инструментами построения кода. Для проектов, использующих npm, команду установки можно выполнить в корневом каталоге проекта. Основными пакетами, необходимыми для работы проекта, являются… tailwindcss。

npm install -D tailwindcss
npx tailwindcss init

Первая команда установит библиотеку Tailwind CSS в качестве зависимости для разработки в ваш проект. Вторая команда… npx tailwindcss init Тогда для вас будет создана стандартная конфигурационная файл. tailwind.config.jsЭтот файл является ядром системы Tailwind CSS; все пользовательские настройки и изменения начинаются именно с него.

Настройка процесса сборки (configuration of the build process)

После завершения установки вам необходимо настроить процесс сборки кода, чтобы система Tailwind могла обрабатывать ваши HTML-файлы и генерировать готовый CSS-код. Обычно это делается в вашем основном CSS-файле с помощью определенных настроек. @tailwind Вы получили инструкцию, которую необходимо выполнить. Создайте что-то с названием… (The instruction you received needs to be followed; create something with the name “…”.) src/input.css Файл (имя и путь могут быть заданы пользователем), в который необходимо добавить следующий контент:

@tailwind base;
@tailwind components;
@tailwind utilities;

Эти три инструкции соответствуют трем уровням работы с фреймворком Tailwind: базовым стилям, классам компонентов и инструментальным классам. Далее вам потребуется использовать инструмент для сборки кода (например, Vite, Webpack или PostCSS CLI) для обработки этого файла. Например, при использовании PostCSS CLI необходимо выполнить соответствующие команды для применения заданных правил стиля к вашему проекту. package.json Добавьте скрипт для сборки в соответствующий раздел кода, и убедитесь, что он существует. postcss.config.js Файл, который содержит… tailwindcss Плагины.

Оптимизация производственной среды

Для того чтобы CSS-файлы в производственной среде были максимально компактными, Tailwind использует технологию под названием “удаление неиспользуемых стилей” („Removing unused styles“). Для её применения вам необходимо… tailwind.config.js Документ был content В свойствах указываются пути к всех исходным файлам, содержащим имена классов Tailwind. Пример конфигурации приведен ниже:

Рекомендуемое чтение Глубокое изучение Tailwind CSS: Руководство от основных концепций до разработки практических проектов。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx,vue}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

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

Основные инструментальные классы и полезные приемы

Овладение принципами размещения элементов на экране и правильным распределением между ними (расстояниями между элементами)

Расположение элементов и их интервалы являются основой при создании пользовательских интерфейсов. Tailwind предоставляет полный набор инструментов, основанных на пропорциональной системе, для управления форматированием элементов и их взаимным расположением. Для задания типов элементов можно использовать… block、inline-block、flex、grid Для быстрого настройки режима отображения существуют соответствующие классы-инструменты: как для расположения элементов с использованием технологии Flexbox, так и для использования технологии Grid. justify-center、items-center、grid-cols-3 и т.д.

Система управления интервалами между элементами дизайна особенно мощна. Она использует единый коэффициент масштабирования (по умолчанию равный 0.25rem).p-4 Означает отступ (padding) в размере 1 единицы растяжимости (rem).m-2 Означает маржу в размере 0,5 рема (0,5 единицы отступа). Направление этого отступа также четко определено.pt-4 Это свойство стиля `padding-top`.mx-auto Речь идет об автоматическом задании значения маржи в горизонтальном направлении; это часто используется для центрирования блочных элементов. Систематическое применение этих классов позволяет обеспечить гармоничное и согласованное распределение пространства на всей странице.

Гибкое управление цветом и форматированием

В визуальном дизайне цвета и верстка играют ключевую роль. В Tailwind предусмотрен обширный и красивый палитр цветов, организованный с использованием цифровых градиентов. Например,text-gray-700 Для использования с текстом темно-серого цвета.bg-red-100 Для использования на светло-красном фоне.border-blue-300 Используется для создания светло-синего контурного цвета. Также вы можете… tailwind.config.js \n theme.extend Некоторые элементы можно легко изменить цветом или полностью заменить.

Что касается верстки, инструменты позволяют настроить все параметры: размер шрифта, его жирность, высоту строки, расстояние между буквами и многие другие.text-xl Означает использование очень крупного размера шрифта.font-bold Выделено жирным шрифтом.leading-relaxed Означает относительно большой размер строки (высоту строки). Реактивный дизайн также встроен в систему; для его использования достаточно добавить перед именем класса соответствующий префикс, например… md:text-lgЭтот стиль можно применить на устройствах с экранами среднего размера и более, что позволяет реализовать рабочий процесс, ориентированный на использование мобильных устройств.

Комбинирование и повторное использование стилей

По мере роста проекта повторное написание одних и тех же наборов инструментальных классов в HTML становится затяжным и сложным с точки зрения обслуживания. Tailwind предлагает несколько способов для повторного использования стилей. Самый простой из них — прямое комбинирование этих классов в HTML-коде. Однако для сложных компонентов рекомендуется использовать более сложные подходы к организации стилей. @apply Инструкция предназначена для извлечения общих стилей из вашего CSS-файла.

Рекомендуемое чтение Tailwind CSS Ultimate Guide: создание современных, профессиональных стилей для внешнего интерфейса с нуля。

.btn-primary {
  @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
}

Таким образом, вы сможете использовать это в HTML. class="btn-primary"Этот подход позволяет сохранить гибкость Tailwind, а также обеспечить повторное использование стилей (реусвоимость кода), характерную для CSS. Еще более мощным вариантом является использование систем компонентов таких JavaScript-фреймворков, как React или Vue, для инкапсулирования стилей и структуры пользовательского интерфейса.

Реактивный дизайн и интерактивные элементы пользовательского интерфейса

Реактивные точки переключения, ориентированные на мобильные устройства

Tailwind CSS использует стратегию адаптивного дизайна, ориентированную на использование устройств с мобильным интерфейсом. Это означает, что утилитные классы без префиксов действуют на всех размерах экранов, в то время как классы с префиксами (например…) md:, lg:Это положение вступит в силу с указанного точки остановки и далее. В рамках фрейма предустановлено пять точек остановки по умолчанию:sm (640 пикселей)md (768 пикселей)lg (1024 пикселей)xl (1280 пикселей) и 2xl (1536 пикселей).

Например, один… w-full md:w-1/2 lg:w-1/3 Контейнер занимает весь экран на мобильных устройствах, на планшетах (размерах md) его ширина сокращается вдвое, а на настольных компьютерах (размерах lg) — втрое. Вы можете… tailwind.config.js \n theme.screens Часть значений этих точек прерывания можно полностью настроить в соответствии с вашими дизайнерскими требованиями.

Обработка таких состояний, как фокус при наведении курсора мыши.

Современные веб-приложения требуют подробной и наглядной обратной связи от пользователей. Framework Tailwind предоставляет возможность использования различных вариантов отображения элементов интерфейса в зависимости от их текущего состояния, что позволяет легко настраивать их стиль. Для этого достаточно добавить соответствующий префикс перед классами, отвечающими за функциональность приложения. Например:hover:bg-gray-100 Фоновый цвет будет применен при наведении курсора мыши.focus:ring-2 При получении элементом фокуса на нем будет добавлен кольцевой контур.

Кроме того, hover и focusКроме того… active、disabled、group-hover(Изменение стиля вложенных элементов при наведении курсора на родительский элемент) и т. д. Что касается элементов формы, то существуют дополнительные возможности… checked、required Эти варианты состояний могут свободно комбинироваться с другими инструментами, позволяя создавать интерактивные интерфейсы без необходимости написания ни одной строки пользовательского JavaScript-кода или сложных CSS-селекторов.

Использовать режим темного цвета

С распространением режима темного цвета на уровне операционных систем предоставление веб-сайтам темных тем стало стандартным требованием. В Tailwind CSS встроена поддержка режима темного цвета; вам достаточно лишь… tailwind.config.js Установите его на своём телефоне. darkMode: 'class'(Или 'media'Затем его можно будет использовать. dark: Варианты определения стилей в режиме темного цвета.

<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
  <!-- 内容 -->
</div>

Когда делается выбор… 'class' При разработке стратегий вам необходимо использовать JavaScript для работы с корневым элементом HTML-документа.Добавлять или удалять что-либо на (или с)… class="dark" Давайте сменим тему. Такой способ позволяет полностью контролировать процесс смены тем, что делает всё очень гибким.

резюме

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

Часто задаваемые вопросы

В чем основные отличия между Tailwind CSS и Bootstrap?

Tailwind CSS – это “безголовый” фреймворк с классами для стилизации, который не предоставляет заранее разработанных компонентов (например, кнопок, навигационных панелей). Он содержит лишь базовые CSS-классы, позволяющие создавать собственный дизайн в полной свободе. Bootstrap, напротив, представляет собой библиотеку готовых компонентов с определенным внешним видом; их можно использовать в неизменном виде или настроить в соответствии с потребностями проекта. Tailwind более гибок и подходит для проектов, требующих высокой степени индивидуализации дизайна; Bootstrap, в свою очередь, позволяет быстро создать интерфейсы с единым стилем без дополнительной настройки.

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

Это действительно одна из распространенных проблем на ранних этапах работы разработчиков. Однако на практике эту проблему можно легко решить с помощью правильной компонентной архитектуры. В фреймворках вроде React и Vue длинные списки классов можно разместить внутри отдельных компонентов. Кроме того, использование… @apply Извлечение повторяющихся комбинаций стилей из CSS также является официально рекомендуемым подходом. Такие методы обеспечивают лучшую читаемость кода HTML и сохраняют преимущества атомизации, характерные для фреймворка Tailwind. Более того, поскольку логика стилей расположена непосредственно в элементах HTML, в крупных проектах гораздо проще отслеживать и изменять стили, чем в обширных CSS-файлах.

Как настроить цвета и интервалы элементов пользовательского интерфейса?

Все пользовательские настройки находятся в корневом каталоге проекта. tailwind.config.js Действия были завершены в файле. Вы можете… theme.extend Для расширения стандартной темы можно добавить новые значения в объект. theme В объекте прямо заменяются существующие значения. Например, для добавления цвета бренда можно настроить его следующим образом:theme: { extend: { colors: { brand: '#0fa9e6', } } }После этого вы сможете использовать его. bg-brand、text-brand Такие элементы, как имена классов, а также все параметры дизайна (расстояния между элементами, шрифты, точки прерывания выполнения кода и т. д.), могут быть настроены в аналогичном способе.

Будут ли CSS-файлы, сгенерированные с помощью Tailwind, очень большими по размеру?

В режиме разработки CSS-файлы Tailwind могут быть довольно большими (около нескольких МБ) из-за необходимости включения всех возможных инструментальных классов. Однако это не является проблемой, поскольку CSS-файл, используемый в производственной среде, проходит процесс оптимизации под названием “удаление неиспользуемых стилей”. Правильная настройка этого процесса позволяет снизить размер финального CSS-файла. tailwind.config.js В китайском языке content При использовании инструмента Tailwind для сборки кода сканируются ваши шаблонные файлы, и пакуются только те библиотеки и классы, которые действительно используются в коде. В результате готовая версия CSS имеет очень малый размер — обычно от нескольких килобайт до нескольких десятков килобайт. Это делает Tailwind конкурентоспособным по сравнению с другими фреймворками CSS.