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

Что такое Tailwind CSS?

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

Оно работает на основе конфигурационного файла. tailwind.config.js Предоставляется высокий уровень настраиваемости. В этом файле вы можете определить дизайнерскую систему своего проекта, включая палитру цветов, шрифты, пропорции между элементами интерфейса, точки разрыва (breakpoints) и т. д. Сам фреймворк очень легкий в использовании; благодаря встроенной функции PurgeCSS (с версии 3.0 называемой “Content Scan”) все неиспользуемые CSS-классы автоматически удаляются во время процесса сборки кода, в результате чего размер готового файла оказывается очень маленьким.

Основные понятия и базовый синтаксис

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

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

Правила именования утилитарных классов

Имена классов в Tailwind обычно напрямую соответствуют определённым CSS-атрибутам. Например,.text-center соответствующий text-align: center;，.font-bold соответствующий font-weight: 700;Для атрибутов, значения которых могут изменяться (например, маржи (margin), внутренние маржи (padding), ширина (width) и т. д.), имена классов будут содержать цифру, соответствующую определённому соотношению размеров, заданному в конфигурационном файле. Например,.mt-4 Это означает, что верхний отступ составляет 1 единицу размера текста (rem). Если в используемых параметрах 1 единица равна 0,25 единицы размера текста (rem), то 4 единицы равны 1 единице размера текста (rem)..w-1/2 Это означает, что ширина составляет 50%.

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

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

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

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

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

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

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

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

Реактивный дизайн является одной из сильных сторон фреймворка Tailwind. С помощью добавления специальных префиксов к именам классов можно легко реализовать адаптивное отображение контента на разных устройствах. Например,md:text-center Это означает, что на экранах среднего и более крупного размера текст будет отображаться в центре. Система разделения экранов на разные размеры (sm, md, lg, xl, 2xl), используемая по умолчанию, также может быть изменена в конфигурационном файле.

Варианты состояния и псевдоклассы

Tailwind CSS поддерживает различные варианты состояний элементов с помощью префиксов (например, hover, focus, active и др.). Благодаря этому добавление стилей к интерактивным элементам становится чрезвычайно простым. Например,hover:bg-blue-600 При наведении курсора мыши цвет фона изменяется на синий (#600). Вы также можете комбинировать различные варианты этого эффекта. focus:hover:border-2。

<button class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-300">
  点击我
</button>

Выше приведенный код определяет кнопку с базовым синим фоном, белым текстом, внутренним отступом и заостренными углами. При наведении курсора мыши цвет фона изменяется на темнее; когда кнопка получает фокус, по ее контуру появляется синяя линия.

Настройка проекта и его пользовательские настройки

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

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

Подробное описание основного конфигурационного файла

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

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{html,js,jsx,ts,tsx,vue}'],
  theme: {
    extend: {
      colors: {
        'brand-primary': '#1d4ed8',
        'brand-secondary': '#7c3aed',
      },
      fontFamily: {
        'sans': ['Inter var', 'system-ui', 'sans-serif'],
      },
      spacing: {
        '128': '32rem',
      }
    },
  },
  plugins: [],
}

В приведённой выше конфигурации мы расширили параметры темы, добавили два цвета бренда, определили новый набор шрифтов и установили пользовательский значение параметра интервала между элементами интерфейса. 128После этого вы сможете использовать это имя в названиях классов. .text-brand-primary или .h-128 Всё готово.

Использование плагинов для расширения функционала

Экосистема Tailwind предлагает множество официальных и общественных плагинов, которые позволяют добавлять дополнительные полезные классы, компоненты или варианты использования функционала. Например, среди официальных плагинов… @tailwindcss/forms Были предоставлены более качественные стандартные стили для элементов формы.@tailwindcss/typography Было предоставлено… .prose Класс, предназначенный для быстрого улучшения внешнего вида неуправляемого HTML-контента (например, растянутого текста, полученного из системы управления контентом).

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

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

Посетите Bluehost

Установка и использование плагинов очень просты. Сначала необходимо установить их с помощью npm, а затем настроить их в конфигурационном файле. plugins Просто добавьте его в массив.

// tailwind.config.js
module.exports = {
  // ...
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
  ],
}

Практика: Создание реагирующей на размер экрана навигационной панели

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

Структура HTML и базовые стили

Во-первых, мы создаем базовую HTML-структуру навигационной панели и применяем к ней некоторые стилевые классы.

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

<nav class="bg-white shadow-lg">
  <div class="max-w-6xl mx-auto px-4">
    <div class="flex justify-between">
      <!-- 品牌 Logo -->
      <div class="flex space-x-7">
        <a href="#" class="flex items-center py-4">
          <span class="font-semibold text-gray-500 text-lg">Мой бренд</span>
        </a>
      </div>
      <!-- 桌面端导航链接 -->
      <div class="hidden md:flex items-center space-x-1">
        <a href="#" class="py-4 px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300">рис. начало</a>
        <a href="#" class="py-4 px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300">О</a>
        <a href="#" class="py-4 px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300">сервис</a>
        <a href="#" class="py-4 px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300">Связаться</a>
      </div>
      <!-- 移动端汉堡菜单按钮 -->
      <div class="md:hidden flex items-center">
        <button class="outline-none mobile-menu-button">
          <svg class="w-6 h-6 text-gray-500" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" stroke="currentColor">
            <path d="M4 6h16M4 12h16M4 18h16"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
  <!-- 移动端菜单 -->
  <div class="hidden mobile-menu">
    <ul>
      <li><a href="#" class="block text-sm px-2 py-4 text-white bg-green-500 font-semibold">рис. начало</a></li>
      <li><a href="#" class="block text-sm px-2 py-4 hover:bg-green-500 transition duration-300">О</a></li>
      <li><a href="#" class="block text-sm px-2 py-4 hover:bg-green-500 transition duration-300">сервис</a></li>
      <li><a href="#" class="block text-sm px-2 py-4 hover:bg-green-500 transition duration-300">Связаться</a></li>
    </ul>
  </div>
</nav>

Добавить интерактивные функции

В приведённом выше HTML-коде меню для мобильных устройств по умолчанию скрыто (не отображается).class=”hidden mobile-menu”Нам понадобится немного JavaScript для того, чтобы при нажатии на кнопку-гамбургер менять состояние меню (его отображение или скрытие). Обычно это делается с использованием классов, предоставляемых библиотекой Tailwind CSS.

// 简单的 JavaScript 交互
const btn = document.querySelector('.mobile-menu-button');
const menu = document.querySelector('.mobile-menu');

btn.addEventListener('click', () => {
  menu.classList.toggle('hidden');
});

Путем комбинированного использования flex, hidden, md:flex С помощью таких инструментов, предназначенных для создания реагирующего дизайна, а также классов, отвечающих за форматирование интервалов между элементами, цвета и эффекты при наведении курсора, мы быстро создали навигационную панель, которая одновременно выглядит красиво и обладает полным набором функций – и всё это без необходимости написания ни од

Хостинг.com

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

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

резюме

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

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

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

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

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

Tailwind CSS сам по себе является отличным инструментом для обеспечения единообразия в стиле веб-дизайна. Во-первых, все разработчики используют один и тот же набор правил и стилей, предоставляемых Tailwind CSS. Это позволяет избежать разногласий в подходах к форматированию элементов интерфейса и обеспечив tailwind.config.js Определенная система дизайна (цвета, расстояния между элементами, шрифты и т. д.) исключает возможность произвольного задания значений цветов или расстояний с самого начала разработки. Кроме того, поскольку стили напрямую записываются в HTML, а имена классов стандартизированы, проверка кода становится очень простой; легко выявить комбинации имен классов, не соответствующие установленным правилам. Многие команды также используют плагин Prettier для улучшения формата кода. prettier-plugin-tailwindcssОно может автоматически сортировать имена классов, что способствует дальнейшему унифицированию стиля кода.

Как обрабатывать сложные или повторяющиеся комбинации имен классов?

Для сложных комбинаций имён классов, повторяющихся в нескольких элементах, Tailwind рекомендует использовать следующие методы: 1. Изолировать компонент: если вы используете такие фреймворки для компонентов, как React, Vue, Svelte и т. д., самый естественный способ — упаковать элементы с этими стилями в повторно используемый компонент. 2. Использовать директиву @apply: в пользовательских CSS-файлах вы можете использовать . @apply Команда позволяет объединить набор классов, созданных с использованием фреймворка Tailwind CSS, в один новый CSS-класс. Этот подход удобен для случаев, когда речь идет о небольших, повторяющихся стилистических элементах, которые невозможно абстрагировать с помощью компонентов. Однако его следует использовать с осторожностью, чтобы не вернуться к привычке написания традиционного CSS-кода.

/* 在自定义 CSS 文件中 */
.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;
}

Может ли Tailwind CSS сосуществовать с существующими CSS-фреймворками, такими как Bootstrap?

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