Начнем с нуля: быстро создадим современный адаптивный веб-сайт с помощью Tailwind CSS.

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

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

Основные концепции и преимущества Tailwind CSS

Прежде чем начать глубокое изучение, важно понять… Tailwind CSS Философия дизайна этого продукта крайне важна. Ее основой является принцип “Практичность превыше всего” (Utility-First), что означает, что стиль формировается путем прямого применения в HTML множества небольших классов, каждый из которых выполняет одну конкретную функцию.

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

Парадигма, в которой приоритет отдается практической применимости.

Традиционный способ написания CSS предполагает создание семантических имен классов для каждого компонента. .btn-primaryЗатем стили этих классов определяются в отдельном CSS-файле. Tailwind CSS Тогда я рекомендую вам использовать такие инструменты напрямую. bg-blue-500 text-white font-bold py-2 px-4 rounded Такие комбинации классов используются для создания кнопок. Этот подход избавляет от необходимости постоянного переключения между HTML- и CSS-файлами, поскольку все стили наглядно представлены прямо в самом коде разметки.

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

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

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

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

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

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

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

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

Высокая степень настраиваемости

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

Встроенная поддержка реактивного дизайна

Адаптивный дизайн — это Tailwind CSS Сильная сторона этого инструмента заключается в использовании системы точек остановки, ориентированной на работу с мобильными устройствами. По умолчанию предусмотрено пять префиксов для точек остановки.sm:, md:, lg:, xl:, 2xl:Вам достаточно добавить эти префиксы перед именами практических (пользовательских) классов, чтобы легко задать стили, соответствующие различным размерам экранов.

<!-- 默认在移动端显示为块级元素，在中等屏幕及以上尺寸显示为行内块元素 -->
<div class="block md:inline-block">Реактивные элементы.</div>

Инициализация проекта и настройка среды

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

Быстрое запускание с помощью Tailwind CLI

Это самый быстрый способ начать работу. Сначала убедитесь, что на вашем компьютере установлен Node.js. Затем в каталоге проекта выполните следующие команды:

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

# 初始化 package.json 文件（如果不存在）
npm init -y

# 安装 Tailwind CSS
npm install -D tailwindcss

# 生成 tailwind.config.js 配置文件
npx tailwindcss init

Далее необходимо создать входный файл для CSS-кода, например: src/input.cssИ добавьте… Tailwind CSS Инструкции:

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

Затем выполните команду в интерфейсе командной строки (CLI), чтобы сгенерировать ваш CSS-файл.

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Эта команда будет осуществлять слежение (прослушивание) за входящими и исходящими данными. src/input.css Изменения в файлах отслеживаются в реальном времени, и компилированный CSS-код выводится сразу же. dist/output.cssНаконец, введите необходимый код в ваш HTML-файл. ./dist/output.css Вот и всё.

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

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

Посетите Bluehost

Интеграция с инструментами для разработки (на примере Vite)

Если вы используете современные инструменты для разработки фронтенда, такие как Vite, процесс интеграции происходит гораздо более плавно. После создания проекта на основе Vite необходимо его установить и настроить. Tailwind CSS：

# 创建 Vite 项目
npm create vite@latest my-project -- --template vanilla
cd my-project

# 安装 Tailwind CSS 及其依赖
npm install -D tailwindcss postcss autoprefixer

# 初始化配置文件
npx tailwindcss init -p

Это приведет к генерации… tailwind.config.js и postcss.config.js Два файла. Затем выполните изменения. tailwind.config.js Путь к файлу с конфигурационным данными:

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./*.html", "./src/**/*.{js,ts}"], // 根据你的项目结构调整
  theme: {
    extend: {},
  },
  plugins: [],
}

Затем, в вашем основном CSS-файле (например,…) src/style.cssВнедрить в (…) Tailwind CSS Инструкции выполнены. Теперь можно запустить программу. npm run devТогда вы сможете использовать это в своем проекте. Tailwind CSS Всё готово.

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

Создание реагирующих на размер экрана компонентов с использованием Tailwind CSS

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

Создание навигационной панели

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

Хостинг.com

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

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

<nav class="bg-gray-800 p-4">
  <div class="container mx-auto flex flex-wrap items-center justify-between">
    <!-- 品牌Logo -->
    <a href="#" class="text-white text-xl font-bold">Мой бренд</a>

<!-- 汉堡菜单按钮（移动端显示） -->
    <button class="md:hidden text-white focus:outline-none" id="menu-button">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewbox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
      </svg>
    </button>

<!-- 导航链接 -->
    <div class="hidden w-full md:flex md:w-auto md:items-center" id="menu">
      <ul class="flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0">
        <li><a href="#" class="block py-2 text-gray-300 hover:text-white">рис. начало</a></li>
        <li><a href="#" class="block py-2 text-gray-300 hover:text-white">О</a></li>
        <li><a href="#" class="block py-2 text-gray-300 hover:text-white">сервис</a></li>
        <li><a href="#" class="block py-2 text-gray-300 hover:text-white">Связаться</a></li>
      </ul>
    </div>
  </div>
</nav>

<script>
  // 简单的 JavaScript 用于切换移动端菜单
  document.getElementById('menu-button').addEventListener('click', function() {
    const menu = document.getElementById('menu');
    menu.classList.toggle('hidden');
  });
</script>

В этом примере…md:hidden и md:flex Такие классы контролируют отображение и скрытие элементов в разных точках остановки (перекрестках выполнения программы).flex-col и md:flex-row Удалось определить направление размещения элементов на странице.

Создание компонента в виде карточки

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

<div class="max-w-sm rounded overflow-hidden shadow-lg bg-white mx-auto my-8">
  <!-- 响应式图片容器 -->
  <div class="w-full h-48 md:h-64 overflow-hidden">
    <img class="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
         src="https://picsum.photos/400/300"
         alt="Изображение для карточки">
  </div>
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2 text-gray-800">Заголовок карточки</div>
    <p class="text-gray-700 text-base">
      Это описание карты: на мобильных устройствах и настольных компьютерах её макет и размер шрифта автоматически адаптируются к условиям использования.
    </p>
  </div>
  <div class="px-6 pt-4 pb-6">
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">Метка #1</span>
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">Тег #2</span>
  </div>
</div>

Здесь был использован… h-48 md:h-64 Чтобы высота изображения изменялась в зависимости от размера экрана, необходимо использовать адаптивные технологии. Это может быть достигнуто с помощью следующих методов:hover:scale-105 и transition-transform Реализовано плавное увеличение изображения при наведении курсора мыши.

Продвинутые техники и оптимизация производственных процессов

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

Используйте @apply для удаления дубликатов классов.

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

В вашем CSS-файле (например,…) input.cssДобавьте следующее в текст:

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

Затем используйте это прямо в HTML-коде. class="btn-primary" Вот и всё.

Глубокая настройка конфигурационного файла

Откройте. tailwind.config.jsВы можете внести полный набор настроек по своему усмотрению. Например, вы можете расширить возможности по изменению цветов темы.

module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1992d4',
        'brand-green': '#0ca678',
      },
      spacing: {
        '128': '32rem',
      }
    },
  },
  plugins: [],
}

После определения вы сможете использовать это так же, как… bg-brand-blue и w-128 Вот такой новый класс.

Включение режима JIT (Just-In-Time компиляции) и использование производственной (релизной) версии программного обеспечения.

Начиная с версии 3.0,Tailwind CSS По умолчанию включен JIT-энжин (Just-In-Time). Он генерирует стили по мере необходимости во время написания шаблонов, что значительно ускоряет процесс разработки и снижает размер готового CSS-файла. Для производственной среды обязательно убедитесь, что это настроено в команде сборки. NODE_ENV=production，Tailwind CSS Будет автоматически выполняться процесс “Tree Shaking” (очистка кода от ненужных элементов), в результате которого будут удалены все неиспользуемые стили.

Настройка скриптов в файле `package.json`:

{
  "scripts": {
    "dev": "tailwindcss -i ./src/input.css -o ./dist/output.css --watch",
    "build": "NODE_ENV=production tailwindcss -i ./src/input.css -o ./dist/output.css --minify"
  }
}

быть в движении npm run build В результате будет получен файл CSS, который был сжат и оптимизирован.

резюме

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

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

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

Может ли Tailwind CSS привести к тому, что HTML будет выглядеть громоздким?

Это действительно распространенная проблема. Множество классов в HTML на первый взгляд могут показаться запутанными. Однако именно такая “загруженность” кода обеспечивает высочайшую гибкость и ускоряет процесс разработки. Вам больше не придется ломать голову над выбором имен классов, а также не нужно будет поддерживать огромные CSS-файлы, которые могут содержать множество ненужных стилей. Кроме того, вы можете использовать… @apply Инструкция предписывает объединять часто используемые утилитарные классы в отдельные компонентные классы, чтобы сохранить чистоту и организованность шаблонов.

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

Tailwind CSS Дизайн сам по себе поощряет использование дополнительных функций и настройок пользователем. Основной способ это достижения — через изменения (модификации) существующего кода или параметров системы. tailwind.config.js Конфигурационный файл. Вы можете… theme.extend Вы можете добавить новые значения для расширения стандартной темы, а также… theme Просто замените существующие значения ключей и значений на нужные, чтобы переопределить их по умолчанию. Для одноразового переопределения стилей вы можете использовать записи в виде квадратных скобок, чтобы задать произвольные значения. Например: top-[117px] или bg-[#1da1f2]。

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

Tailwind CSS Полностью совместим с практически всеми основными фронтенд-фреймворками и библиотеками. Будь то компонентные фреймворки вроде React, Vue, Angular, Svelte, или метафреймворки вроде Next.js, Nuxt.js, Gatsby – официальные документы содержат подробные руководства по интеграции. Благодаря своей классно-ориентированной архитектуре Tailwind идеально сочетается с компонентным подходом этих фреймворков; классы Tailwind можно использовать непосредственно в коде на языках JSX или в Vue-шаблонах.

В производственной среде будет ли конечный размер CSS-файла очень большим?

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