Руководство по Tailwind CSS: полное практическое руководство от начального до продвинутого уровня.

Что такое Tailwind CSS?

Tailwind CSS — это ориентированный на функциональность CSS-фреймворк, предоставляющий набор низкоуровневых одноцелевых CSS-классов, которые можно комбинировать непосредственно в HTML (или JSX, шаблонах Vue и т. д.), чтобы быстро создавать настраиваемые пользовательские интерфейсы. В отличие от фреймворков, таких как Bootstrap, которые предоставляют готовые компоненты (например, кнопки, карточки), Tailwind CSS не предоставляет никаких готовых компонентов, а вместо этого предоставляет набор базовых инструментов, необходимых для создания любого дизайна.

Этот подход, приоритет которого отдается практичности, означает, что разработчикам больше не нужно писать собственный CSS для компонентов, а также не приходится часто переключаться между HTML- и CSS-файлами. Достаточно просто применять набор определенных правил непосредственно в HTML-коде. text-blue-600、p-4、bg-gray-100 Достаточно просто указать класс, чтобы настроить цвет текста, внутренние отступы и цвет фона. Это значительно повышает эффективность разработки, обеспечивает тесную связь между стилем и структурой и уменьшает размер и сложность файлов CSS.

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

Как начать использовать Tailwind CSS?

Существует несколько способов интеграции Tailwind CSS в ваш проект. Наиболее рекомендуемый способ — установить его в качестве плагина PostCSS, что позволит максимально использовать возможности оптимизации Tailwind.

Установите с помощью npm или yarn.

Во-первых, инициализируем проект с помощью менеджера пакетов и устанавливаем Tailwind CSS и его зависимости. Основная команда для установки выглядит следующим образом: tailwindcss、postcss и autoprefixer。

npm install -D tailwindcss postcss autoprefixer

После установки выполните следующую команду, чтобы создать конфигурационные файлы для Tailwind CSS и PostCSS. Выполните команду: npx tailwindcss init -p Они будут созданы одновременно. tailwind.config.js и postcss.config.js Документ.

npx tailwindcss init -p

Настройка пути к шаблону

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

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx,vue}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Инструкции по импорту стилей

В вашем основном CSS-файле (например,…) src/styles.css или src/index.cssВ этом примере используется @tailwind Инструкции для внедрения основных стилей библиотеки Tailwind.

/* src/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Затем импортируйте этот CSS-файл в файл входа вашего проекта. После выполнения вышеуказанных действий вы сможете начать использовать утилитарные классы Tailwind в HTML-коде.

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

Названия классов в Tailwind CSS являются очень семантичными и предсказуемыми, они следуют простой схеме именования: свойство-значение (или свойство-точка-значение).

Макет и расстояния между элементами

Это самая часто используемая группа классов. Например,flex Используется для настройки макета гибких блоков.p-4 Выразите это. padding: 1rem. Использование полей m-*, используйте внутренние отступы p-*Цифры обычно соответствуют системе пропорционально уменьшенных интервалов (например: 0, 1, 2, 4, 6).

<div class="flex justify-between items-center p-4">
  <div class="ml-2">\nСлева</div>
  <div class="mr-2">\nСправа</div>
</div>

Цвет и фон

Вы можете легко настроить цвет текста, цвет фона и цвет рамки. Система цветов предоставляет широкую палитру цветов, таких как text-blue-500、bg-gray-100、border-red-300Чем больше число, тем цвет обычно темнее (например,blue-100 Оно очень мелкое.blue-900 Это очень глубоко.

отзывчивый дизайн

Тейлвинд использует стратегию, ориентированную на мобильные устройства. Все утилитарные классы по умолчанию предназначены для мобильных устройств. Чтобы добавить стили для больших экранов, необходимо добавить префикс точки останова перед названием класса, например < md:、lg:Это делает создание адаптивного интерфейса чрезвычайно простым.

<div class="text-base md:text-lg lg:text-xl">
  Этот текст отображается в базовом размере на мобильных устройствах, увеличивается на планшетах и становится ещё больше на настольных компьютерах.
</div>

Состояния, такие как зависание, фокус и т. д.

Добавив префикс состояния, можно настроить стиль для разных состояний элемента. Например,hover:bg-blue-600 Цвет фона будет меняться при наведении на него курсора мыши.focus:ring-2 Будет добавлена округлая рамка, когда элемент получит фокус.

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  悬停有效果的按钮
</button>

Продвинутые навыки и настройки под себя.

После того, как вы освоите основы, вы сможете в полной мере раскрыть потенциал Tailwind с помощью некоторых продвинутых методов и настроек.

Извлечение классов компонентов

Несмотря на то, что приоритет практичности является ключевой концепцией, вы можете использовать её, чтобы избежать повторения длинных списков классов в HTML-коде. @apply Инструкция по извлечению и повторному использованию часто используемых комбинаций стилей в CSS для создания собственных “класс-компонентов”.

/* 在你的 CSS 文件中 */
.btn-primary {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-700;
}

Затем в HTML достаточно просто использовать… class="btn-primary" Вот и всё.

Индивидуальная система дизайна.

Все значения по умолчанию в Tailwind можно настроить. Их можно изменить, внеся соответствующие изменения. tailwind.config.js Вы можете настроить цвета, шрифты, интервалы, размеры и разрывы в документе так, чтобы он полностью соответствовал вашему бренду или дизайн-концепции.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1992d4',
      },
      spacing: {
        '72': '18rem',
        '84': '21rem',
      }
    },
  },
}

После определения вы сможете использовать это. text-brand-blue или p-84 Вот такой пользовательский класс.

Использование режима JIT

Начиная с Tailwind CSS v2.1+, была введена система Just-in-Time (JIT). Она динамически генерирует необходимый CSS код при написании шаблонов, вместо того чтобы заранее создавать огромный файл CSS, содержащий все возможные классы. Это значительно повышает производительность и позволяет реализовывать такие функции, которые не были доступны в традиционном режиме, например, произвольные варианты значений.

Чтобы включить режим JIT, достаточно просто выполнить следующие действия: tailwind.config.js Установите его на своём телефоне. mode: 'jit'。

// tailwind.config.js
module.exports = {
  mode: 'jit',
  // ... 其他配置
}

После активации вы даже сможете использовать такие инструменты, как w-[200px] или top-[-10px] Такие типы произвольных значений обеспечивают большую гибкость при разработке.

резюме

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

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

Может ли Tailwind CSS привести к увеличению размера HTML-кода?

Действительно, использование Tailwind CSS добавляет множество классов к HTML-элементам, что может сделать HTML-код несколько запутанным.

Однако эта “раздутость” является структурированной и предсказуемой, она фактически переносит сложность стиля из CSS в более удобный для управления HTML. Что еще более важно, это то, что путем конфигурации content В процессе сборки производственные инструменты удаляют все неиспользуемые CSS-классы, и в результате получаемый CSS-файл обычно намного меньше, чем традиционный CSS, написанный вручную или с использованием библиотеки компонентов. Таким образом, это дает преимущество с точки зрения производительности.

Как переопределить или изменить стандартные стили Tailwind CSS?

Вы можете переопределить стандартные стили различными способами. Наиболее рекомендуемым методом является… tailwind.config.js Документ был theme.extend Части можно расширить, чтобы добавить новые значения, не влияя на исходную систему. Если вы хотите полностью заменить какой-либо тематический ключ (например, цвет), просто сделайте это напрямую в theme Следует переопределить его. Кроме того, перед практическими занятиями необходимо использовать !important Модификаторы (например, !text-red-500Также можно добиться переопределения стилей, используя более специфичные селекторы CSS.

С какими фронтенд-фреймворками подходит использование Tailwind CSS?

Tailwind CSS отлично интегрируется практически со всеми современными фреймворками для front-end. Он поддерживает такие фреймворки, как React, Vue, Angular, Svelte и другие. Вам просто нужно убедиться, что вы правильно используете имена классов в шаблонах фреймворка или JSX, а также настроить PostCSS и Tailwind в процессе сборки. Многие фреймворки (например, Next.js, Vite) даже предоставляют официальные примеры интеграции Tailwind CSS или плагины, что значительно упрощает процесс интеграции.

Для использования Tailwind CSS необходимо отказаться от написания CSS вручную?

Это совершенно не обязательно. Tailwind CSS не заменяет ручное написание CSS, а дополняет его. Вы по-прежнему можете создавать в проекте свои собственные файлы CSS. Tailwind @apply Эта инструкция позволяет повторно использовать классы инструментов в настраиваемом CSS. Ручное написание CSS по-прежнему необходимо в случаях, когда стили очень специфичны и не могут быть реализованы с помощью классов-утилит, или когда требуются сложные функции CSS, такие как анимация по ключевым кадрам. Tailwind просто предоставляет более эффективный способ обработки общих потребностей в стилях для проектов, содержащих 90% и более стилей.