рис. начало/связанные со знаниями/Создание сайтов/Содержание Подробности

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

2 минуты чтения
2026-03-19
2,677
Я получаю комиссионные, когда вы совершаете покупки по ссылкам ниже, без дополнительных затрат для вас.

Что такое Tailwind CSS?

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

Основная философия этого подхода заключается в принципе “Функциональность превыше всего” (Utility-First). Это означает, что вам не нужно писать множество пользовательских имен классов и правил стилей в файле CSS; вместо этого вы можете использовать предоставленные фреймворком семантически ясные инструментальные классы для формирования стилей. Например, чтобы создать кнопку с внутренним отступом, синим фоном и белым текстом, вам достаточно написать следующее в HTML: <button class="px-4 py-2 bg-blue-500 text-white">按钮</button>Этот подход значительно ускоряет процесс создания прототипов и разработки продуктов, при этом обеспечивает предсказуемость и согласованность внешнего вида элементов интерфейса.

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

Существует два основных способа интеграции Tailwind CSS в ваш проект: использование CDN для быстрого получения доступа к стилистическим правилам или применение инструментов построения кода (например, PostCSS) при разработке полноценных проектов. Для обучения и создания прототипов способ с использованием CDN является наиболее удобным.

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

Быстрое внедрение с использованием CDN (Content Delivery Network).

Самый простой способ — это напрямую внести изменения в HTML-файл. <head> Некоторые Play CDN-скрипты включают в себя элементы стиля Tailwind CSS. Это подходит для демонстраций, прототипов или простых статических страниц.

Помощник по созданию сайтов WordPress.com
Помощник по созданию сайтов WordPress.com
Доступность 99,999% + межрегиональное аварийное восстановление, поддержка 24/7, бесплатный сайт AI Build при покупке пакета для блога
Бесплатное доменное имя на один год
Посетите помощник создателя сайта WordPress.com →
Помощник по созданию сайтов UltaHost
Помощник по созданию сайтов UltaHost
900+ бесплатных настраиваемых шаблонов, которые позволят вам оптимизировать ваш сайт для поисковой выдачи.
Предложение 40%
Посетите помощник по созданию сайтов UltaHost → 
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <h1 class="text-3xl font-bold text-center text-gray-800 mt-8">
    Здравствуйте, Tailwind CSS!
  </h1>
</body>
</html>

Обратите внимание: Play CDN в основном предназначен для использования в разработческой среде, и его использование в производственной среде не рекомендуется официально. Для производственных проектов следует применять процесс сборки, описанный ниже.

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

Это рекомендуемый способ использования в производственной среде; он позволяет без проблем интегрироваться с современными фронтенд-инструментами, такими как Vite, Webpack, Next.js и другими. Сначала необходимо инициализировать проект с помощью npm или yarn и установить все необходимые зависимости.

npm init -y
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Эта команда сгенерирует… tailwind.config.js Конфигурационный файл. Далее вам необходимо создать файл CSS (например,…) src/input.cssИ используйте… @tailwind Инструкции для включения всех уровней библиотеки Tailwind.

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

Наконец, настройте свой инструмент сборки (например, Vite) для работы с PostCSS, или используйте прямо инструмент Tailwind CLI для сборки проекта и отслеживания изменений в CSS-файлах.npx tailwindcss -i ./src/input.css -o ./dist/output.css --watchТаким образом, вы сможете создавать ссылки в HTML на генерированные элементы или данные. output.css Я начал использовать все инструментальные классы, доступные в этом файле.

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

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

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

Расстояния между элементами, верстка и цвета

Использование классов для задания расстояний p-{size}(на внутренних полях),m-{size}Формат марж (margin)… {size} Может быть числом (например, 0, 1, 2, 4, 8… — соответствующие значениям в единицах rem) или значением “auto”. Например:p-4 Это означает внутренний отступ, равный 1 единице размера текста (1rem).mt-2 Означает верхний отступ в размере 0,5 рема.

Категория «Верстка» включает в себя такие параметры, как размер шрифта, его жирность, а также способы выравнивания текста.text-{size} Управление размером шрифта (например,…) text-xl, text-2xl），font-{weight} Контроль веса символов (например…) font-normal, font-bold）。

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

Цветовая система очень разнообразна; её возможности позволяют создавать множество красивых и эффектных визуальных решений. bg-{color}-{shade}(цвет фона),text-{color}-{shade}(Цвет текста),border-{color}-{shade}(Цвет рамки) и другие аналогичные свойства могут использоваться в соответствующих классах. Например,bg-blue-600 Означает синий фон средней насыщенности цвета.

Реализация реагирующего (адаптивного) дизайна

Tailwind использует систему разрывов (breakpoints), ориентированную в первую очередь на мобильные устройства. По умолчанию стили разработаны с учетом потребностей мобильных пользователей, а дополнительные стили для устройств с более большими экранами добавляются с использованием специальных префиксов. К префиксам для разрывов относятся:sm: (640 пикселей), md: (768 пикселей), lg: (1024 пикселей), xl: (1280 пикселей), 2xl: (1536 пикселей).

<div class="text-center md:text-left p-4">
  <p class="text-lg sm:text-xl lg:text-2xl">Этот текст отображается в центре экрана на мобильных устройствах, а на устройствах среднего и более крупного размера — с выравниванием по левому краю. Кроме того, размер шрифта увеличивается по мере увеличения размера экрана.</p>
</div>

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

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

Расширенные функции и настройки по пользовательскому выбору

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

Извлечение компонентов и использование директивы @apply

Хотя приоритет отдается практичным (утилитарным) классам, чтобы избежать необходимости повторного написания длинных списков одинаковых классов в HTML, Tailwind позволяет использовать определенные синтаксические конструкции для их группировки. @apply В CSS цель состоит в извлечении классов компонентов, которые можно использовать повторно.

Хостинг.com
Бесплатный SSL, Cloudflare CDN, WAF, 40+ глобальных серверных комнат на выбор, низкие задержки рядом с вами, сервисная поддержка 24/7/365, теперь вы можете сэкономить до 67%, поддержка сборки AI и SEO-оптимизации!
LOGO Посетите сайт hosting.com 
/* 在你的 CSS 文件中 */
.btn-primary {
  @apply px-4 py-2 bg-blue-600 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"Это позволяет сохранить практические требования к дизайну при одновременном повышении уровня повторного использования кода. Еще один более рекомендуемый подход – использование механизма компонентов в JavaScript-фреймворках (например, React, Vue) для организации стилей.

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

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

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{html,js,ts,jsx,tsx}'], // 指定 Tailwind 要扫描的文件，以进行 Tree Shaking
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1992d4',
      },
      spacing: {
        '128': '32rem',
      }
    },
  },
  plugins: [],
}

Путем расширения темы вы можете внедрить цвета, характерные для вашего бренда. bg-brand-blue или пользовательский заданный интервал между элементами w-128Кроме того, необходимо сохранять согласованность с параметрами стандартной системы. В 2026 году, по мере углубления требований к дизайну систем и модульному подходу, такая конфигурируемость станет особенно важной.

резюме

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

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

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

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

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

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

Можно ли использовать Tailwind CSS вместе с существующими библиотеками CSS или UI-компонентов?

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

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

Существует два основных способа. Во-первых, вы можете использовать метод, который включает… @tailwind В CSS-файле, связанном с этими инструкциями, вы можете добавлять собственные CSS-правила сразу после них – такие правила будут иметь более высокий приоритет. Кроме того, более рекомендуемым подходом является использование специальных блоков или структур, позволяющих организованно размещать и управ tailwind.config.js Документ был theme.extend Часть кода следует расширить, а не просто заменить. theme Таким образом, вы всегда сможете получить доступ ко всем значениям по умолчанию и обеспечите плавность процесса обновления системы.

Что дальше, что дальше?

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

Расширенное чтение и практические знания

Следующие статьи связаны с темой этой статьи и подходят для дальнейшего углубленного чтения. Зачастую лучше начать с той статьи, которая наиболее близка к вашей текущей проблеме, а затем постепенно переходить к другим темам.

Теги.