Практическое руководство по использованию Tailwind CSS: полный курс по созданию современных, реагирующих на различные устройства веб-страниц

Что такое Tailwind CSS? Это фреймворк CSS, в котором приоритет отдается практичности и удобству использования.

Tailwind CSS – это CSS-фреймворк, в котором приоритет отдается использованию функциональных классов. Его философия разработки принципиально отличается от таких традиционных фреймворков, как Bootstrap и Foundation. Традиционные фреймворки предлагают наборы готовых компонентов с определенным семантическим значением… .btn、.cardРазработчики создают пользовательские интерфейсы, комбинируя эти компонентные классы. Tailwind предоставляет большое количество удобных классов с точным назначением (utility classes), каждый из которых соответствует конкретному CSS-атрибуту.

Например, чтобы создать кнопку с внутренним отступом в 1рем, синим фоном и жирным белым текстом, в Tailwind достаточно просто добавить соответствующие классы к HTML-элементу. p-4 bg-blue-600 text-white font-boldКаждое имя класса выполняет определенную задачу по формированию стиля, подобно атому, который обладает уникальными свойствами и функциями.p-4 Настройка внутреннего отступа (padding).bg-blue-600 Установите цвет фона.text-white Настройка цвета текста.font-bold Настройка шрифтового веса. Преимущество этого подхода заключается в том, что вам не нужно отходить от HTML-файла для написания и обслуживания большого количества пользовательских CSS-шаблонов: все стили непосредственно задаются с помощью имен классов в шаблонах. Это значительно ускоряет процесс разработки и обеспечивает единообразие внешнего вида сайта.

Основная философия дизайна

Суть философии, ориентированной на практическую эффективность, заключается в принципах “сочетаемости” (способности элементов интерфейса комбинироваться между собой) и “ограничений” (жестких правил их использования). Предоставляя набор заранее установленных параметров дизайна (расстояния между элементами, цвета, размеры шрифтов), Tailwind обеспечивает единообразие в работе команды. Разработчикам больше не нужно самостоятельно решать, какие параметры след 16px тем не менее 18px Если вы спорите о внутреннем отступе (padding) элементов, достаточно обратиться к информации, предоставленной самой рамкой (framework). p-4 (1rem) или p-5 Выбор из вариантов размера текста (1.25rem) значительно снижает усталость от принятия решений и позволяет создавать стильный код, который легко обслуживать и предсказуем в своем поведении.

Рекомендуемое чтение Руководство по началу работы с Tailwind CSS: создание современных реагирующих веб-страниц с нуля。

Настройка среды и основные параметры конфигурации

Существует несколько способов начать использовать Tailwind CSS, но наиболее рекомендуемым является его установка с помощью официального PostCSS-плагина. Это позволяет максимально полностью воспользоваться всеми его возможностями, такими как режим JIT (импровизированная компиляция) и технология tree shaking (оптимизация кода).

Помощник по созданию сайтов WordPress.com

Доступность 99,999% + межрегиональное аварийное восстановление, поддержка 24/7, бесплатный сайт AI Build при покупке пакета для блога

Бесплатное доменное имя на один год

Посетите помощник создателя сайта WordPress.com →

Помощник по созданию сайтов UltaHost

900+ бесплатных настраиваемых шаблонов, которые позволят вам оптимизировать ваш сайт для поисковой выдачи.

Предложение 40%

Посетите помощник по созданию сайтов UltaHost →

Во-первых, используйте npm или yarn для инициализации проекта и установки библиотеки Tailwind CSS вместе со всеми необходимыми зависимостями. Основная команда установки выглядит так: npm install -D tailwindcss postcss autoprefixerЗатем выполните следующую команду: npx tailwindcss init Создайте конфигурационный файл. tailwind.config.js。

В tailwind.config.js В файле самым важным параметром конфигурации является… contentВам необходимо указать, какие файлы должен сканировать Tailwind, чтобы найти используемые классы. Это позволит удалить неиспользуемые стили во время производственной сборки и получить минимальный размер CSS-файла. Типичная конфигурация проекта на основе Vue или React выглядит следующим образом:

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

Далее необходимо создать основной CSS-файл (например, под названием `style.css`). src/index.css или src/styles/tailwind.css), а также добавьте инструкции Tailwind CSS:

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

Наконец, в конфигурации вашего инструмента сборки (например, Vite или Webpack) убедитесь, что настройки PostCSS выполнены правильно, и включите этот CSS-файл в исходный код проекта. После выполнения этих шагов вы сможете использовать удобные классы из библиотеки Tailwind в HTML-кодах или компонентах.

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

Основные полезные классы и реагирующий дизайн (Responsive Design)

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

Система размещения элементов и расстояний между ними

Классы, отвечающие за оформление пользовательского интерфейса (layout classes), такие как… flex, grid, block, inline-block Итд.; каждый элемент соответствует определённому CSS-атрибуту. Система расстояний между элементами основана на предустановленных значениях (по умолчанию). 0.25rem Масштаб умножений. Например,m-4 Выразите это. margin: 1rem，p-2 Выразите это. padding: 0.5remИспользование направлений t (верхняя часть),r (правильно),b (Нижняя часть),l (Слева)x (Горизонтально),y (Вертикальное положение) Необходимо указать, например: mt-8, px-4。

Реализация реактивного дизайна

Одной из самых сильных особенностей Tailwind Framework является его реактивный дизайн. В рамках этого фреймворка предустановлено пять точек разрыва (breakpoints), которые позволяют адаптировать внешний вид сайта под разные размеры экранов.sm (640 пикселей),md (768 пикселей),lg (1024 пикселей),xl (1280 пикселей),2xl Размер экрана составляет 1536 пикселей. Чтобы применить реактивные стили (стили, которые автоматически адаптируются к разным размерам экранов), достаточно добавить перед любым классом, используемым для оформления элементов интерфейса, соответствующий префикс. Стили начнут действовать с этого префикса и

Конструктор сайтов Bluehost

Предлагает инструмент для создания сайтов с искусственным интеллектом, круглосуточную поддержку в чате и по телефону, бесплатное доменное имя на 1 год, бесплатную CDN, 99,99% uptime SLA

Посетите Bluehost

Например, следующий код создает элемент, который имеет полноэкранное отображение при заданной ширине по умолчанию, а на экранах среднего размера и более изменяет свою ширину в соответствии с шириной контейнера и выравнивается по центру:

<div class="w-full md:max-w-2xl md:mx-auto p-4">
  <!-- 内容 -->
</div>

Этот подход, ориентированный на мобильные устройства, предполагает сначала разработку стилей для маленьких экранов (без использования префиксов для классов), а затем… md:、lg: Использование таких префиксов позволяет перекрыть или дополнить стили, предназначенные для более крупных экранов, что делает создание сложных реагирующих интерфейсов чрезвычайно простым и понятным.

Расширенные функции: подсветка при наведении курсора, фокусировка элементов и настройка пользовательских параметров

Помимо базовых функций адаптивности, Tailwind CSS также позволяет использовать варианты (Variants) для задания стилей элементов в зависимости от их состояния (например, при наведении курсора, при фокусировке, при активации элемента и т. д.).

Рекомендуемое чтение Введение в Tailwind CSS и практическое руководство: создание современного адаптивного веб-сайта с нуля.。

Варианты состояния (State Variants)

Вы можете просто добавить префикс, обозначающий текущее состояние, перед именем класса, чтобы применить соответствующий стиль. Например,hover:bg-blue-700 При наведении курсора мыши будет применено более темное синее фоновое изображение.focus:ring-2 focus:ring-blue-500 При получении элементом фокуса на нем появляется синий кольцевой контур, что значительно повышает его доступность. Среди других распространенных вариантов реализации такого эффекта можно отметить… active:, disabled:, group-hover:(Действует при наведении курсора на родительский элемент.) и т. д.

Пользовательские темы и плагины

Хотя Tailwind предлагает множество стандартных дизайнерских элементов и шаблонов, вы можете полностью их адаптировать под свои потребности. tailwind.config.js Документ был theme.extend В некоторых случаях вы можете добавлять, изменять или удалять значения связанных с темой параметров.

Хостинг.com

Бесплатный SSL, Cloudflare CDN, WAF, 40+ глобальных серверных комнат на выбор, низкие задержки рядом с вами, сервисная поддержка 24/7/365, теперь вы можете сэкономить до 67%, поддержка сборки AI и SEO-оптимизации!

Посетите сайт hosting.com

Например, чтобы добавить цвет бренда и более большой размер между элементами:

module.exports = {
  theme: {
    extend: {
      colors: {
        'brand': '#3a86ff',
      },
      spacing: {
        '128': '32rem',
      }
    },
  },
}

После этого вы сможете использовать это. bg-brand и w-128 Вот такие классы. Кроме того, у Tailwind есть активная экосистема плагинов, с помощью которых можно добавлять новые полезные функции. Например, существуют официально предоставляемые плагины для расширения возможностей системы. @tailwindcss/forms Плагины позволяют лучше улучшить внешний вид элементов форм.

резюме

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

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

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

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

В командных проектах может ли использование множества классовых имен в HTML вызвать беспорядок в коде?

Это действительно распространенная проблема. Практика показывает, что с помощью правильного форматирования текста (включая использование плагина Prettier для автоматической форматизации) списки имен классов могут оставаться читаемыми. Что еще важнее, так это то, что такая “беспорядочность” носит локальный и целенаправленный характер; она избавляет от проблем, связанных с разделением определений стилей и их применения в традиционном CSS (а именно от необходимости “перескакивания” между различными частями кода и возможных конфликтов между глобальными стилями). Многие команды считают, что такая явная, локальная “беспорядочность” легче поддается обслуживанию, чем скрытая, глобальная “упорядоченность”.

Подходит ли Tailwind для использования вместе с библиотеками компонентов (например, React, Vue)?

Очень подходит – даже можно сказать, что это идеальное решение. В компонентах React или Vue вы можете объединить набор классов из библиотеки Tailwind в один универсальный стильный компонент, который можно использовать повторно. Например, компонент кнопки может включать в себя все необходимые классы из библиотеки Tailwind и предоставлять пользователю простой интерфейс в виде проприетаров. Таким образом вы получаете преимущества быстрого прототипирования благодаря библиотеке Tailwind, а также сохраняете уровень абстракции и возможность повторного использования компонентов. Кроме того, благодаря режиму JIT (Just-In-Time компиляции) библиотека Tailwind корректно обрабатывает динамически сформированные имена классов.

Как переопределить стиль внешнего вида компонентов, разработанных сторонними разработчиками?

При использовании библиотек сторонних пользовательских интерфейсных компонентов с собственными стилями полезные классы Tailwind благодаря своей высокой специфичности обычно позволяют легко переопределить встроенные стили или стандартные классы компонентов. Вам достаточно просто добавить свои собственные классы Tailwind к этим компонентам. Если же специфичность классов Tailwind оказывается недостаточной, можно воспользоваться другими механизмами, предоставляемыми библиотекой для настройки стилей. !important Модификаторы добавляются после имени класса. !Например, bg-red-500!Однако это следует использовать только в крайнем случае и с осторожностью. Лучше всего попробовать настроить или заменить данный сторонний компонент напрямую.