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

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

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

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

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

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

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

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

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

Реактивный дизайн и точки прерывания (breakpoints)

Tailwind CSS Применяется стратегия адаптивного дизайна, ориентированная в первую очередь на мобильные устройства. Это означает, что универсальные классы без префиксов подходят для всех размеров экранов, в то время как классы с префиксами (например…) md:， lg:Этот инструмент используется для применения стилей в более крупных участках кода (то есть в областях, ограниченных определенными точками прерывания выполнения программы). Система точек прерывания по умолчанию очень интуитивно понятна в использовании.
- sm: 640 пикселей
- md: 768 пикселей
- lg: 1024 пикселя
- xl: 1280 пикселей
- 2xl: 1536 пикселей

Например.<div class="text-sm md:text-lg"> Это означает, что на мобильных устройствах текст отображается в меньшем размере, а на устройствах с экранами среднего размера и более текст становится больше. Такой подход к разработке сайтов делает создание реагирующих (адаптивных) дизайнов особенно простым и понятным.

Практические классы и дизайнерские маркеры

В Tailwind CSS В данном контексте классы представляют собой специальные метки (теги), используемые для организации структуры кода. Например: mt-4(margin-top: 1rem);px-6(Горизонтальный внутренний отступ: 1.5rem)bg-gradient-to-rФон с градиентом цвета (от лева к правому) – такие имена классов напрямую описывают стиль, который они применяют. Такая связь между именами классов и их функциями снижает нагрузку на память и облегчает общение в команде во время проверки кода и обсуждения дизайна: имена классов могут использоваться непосредственно в качестве средства коммуникации.

Как начать новый проект

\nБудет Tailwind CSS Существует два основных способа интеграции этого инструмента в ваш проект: с использованием его командной строки (CLI) или путем глубокой интеграции с инструментами построения сайтов (такими как Vite или Next.js).

Рекомендуемое чтение Как быстро создать современный реагирующий веб-сайт с использованием Tailwind CSS?。

Самый прямой способ — это установить программное обеспечение с помощью npm или yarn, а затем использовать встроенные инструменты командной строки (CLI) для работы с ним. Сначала необходимо инициализировать проект с помощью пакетного менеджера и установить все необходимые зависимости:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

В результате в корневом каталоге вашего проекта будут созданы два важных файла:tailwind.config.js и postcss.config.jsДалее вам необходимо создать основной CSS-файл (который обычно называется…). src/styles.css или src/input.css), и добавьте это в начало файла. Tailwind CSS Инструкции:

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

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

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

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

Посетите Bluehost

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

В конце концов, выполните команду в интерфейсе командной строки (CLI) для сборки CSS-файлов или интегрируйте этот процесс в команды вашего сервера разработки. Для среды разработки обычно используется следующая команда:npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch。

Интеграция с фронтенд-фреймворками

Если вы используете современные фреймворки для разработки веб-приложений, такие как Next.js, Vue или React, процесс интеграции происходит гораздо более плавно. Например, начиная с версии 13, Next.js включает в себя встроенные функции для работы с такими инструментами. Tailwind CSS Поддержка данной функции доступна при создании новых проектов – достаточно лишь выбрать соответствующий вариант. Что касается Vite, официально предоставлены подробные руководства по интеграции; обычно достаточно установить необходимые плагины и настроить их. postcss.config.js Можно быстро начать.

Практика: Создание реагирующего на размер экрана компонента-карточки

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

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

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

<!-- 基础卡片容器 -->
<div class="max-w-2xl mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-4xl my-8">
  <div class="md:flex">
    <!-- 图片区域 -->
    <div class="md:shrink-0">
      <img
        class="h-48 w-full object-cover md:h-full md:w-48"
        src="/img/card-image.jpg"
        alt="Иллюстрация для карточки"
      />
    </div>
    <!-- 内容区域 -->
    <div class="p-8">
      <!-- 标签 -->
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">
        Технический блог.
      </div>
      <!-- 标题 -->
      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">
        Как Tailwind CSS повышает эффективность вашего разработческого процесса
      </a>
      <!-- 描述 -->
      <p class="mt-2 text-slate-500">
        探索功能类优先的 CSS 框架如何通过可组合的实用类，让你无需离开 HTML 便能高速构建定制化设计。
        告别手动编写 CSS 的繁琐，拥抱高效一致的开发工作流。
      </p>
      <!-- 按钮 -->
      <div class="mt-4">
        <button class="px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
          Прочитать полный текст
        </button>
      </div>
    </div>
  </div>
</div>

Разбор и анализ кода

В этом примере мы использовали большое количество… Tailwind CSS Практические классы:
Макет и контейнеры:max-w-2xl и mx-auto Ограничьте максимальную ширину контрольной карты и выровняйте её по центру.md:max-w-4xl Снимите ограничения на устройствах с средним размером экрана.md:flex При использовании экранов среднего и более крупного размера внутренняя структура карточек должна формироваться с использованием горизонтального расположения элементов (Flexbox).
- 图片处理：h-48 w-full Фиксация высоты изображения на мобильных устройствах;md:h-full md:w-48 На настольной версии программы необходимо зафиксировать ширину изображения и убедиться, что оно заполняет весь высотный простор контейнера.object-cover Убедитесь, что изображение было правильно отрезано.
– Расстояния между элементами и форматирование текста:p-8 Установите достаточно большие внутренние отступы (падежи).mt-1， mt-2， mt-4 Используется для контроля вертикального расстояния между элементами, что позволяет создать четкую визуальную иерархию.text-lg， text-sm Управление размером шрифта.
– Цвета и интерактивность:text-indigo-500， bg-indigo-600 Используйте цвета из пользовательской палитры.hover:bg-indigo-700 и focus:ring-indigo-500 Для кнопок были добавлены стили для состояний наведения курсора (перехода в режим «перемычка») и фокуса; для этого не потребовалось написание никакого пользовательского CSS-кода.
– Визуальные эффекты:rounded-xl Добавить заостренные углы (круглые края).shadow-md Добавьте тень, чтобы вместе создать ощущение объема и современности у карточки.

Хостинг.com

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

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

Сочетая эти атомарные классы, мы быстро создали профессиональный, реагирующий на изменения размера экрана и полностью настроенный пользовательский интерфейс (UI-компонент). Весь процесс создания не включал в себя написания ни одной строки традиционного CSS-кода.

Расширенные советы и лучшие практики

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

.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. <button class="btn-primary">Однако имейте в виду, что чрезмерное использование может привести к нежелательным последствиям. @apply Возможно, придётся вернуться к использованию традиционного CSS, что приведёт к потере некоторых преимуществ, связанных с приоритетом использования определённых классов. Поэтому следует использовать такие подходы с осторожностью.

Во-вторых, полностью используйте возможности настроек. Подробно изучите и настройте все параметры системы. tailwind.config.js В этом файле определены специальные дизайнерские токены (Design Tokens), присущие данному проекту. Их можно использовать для уникализации элементов интерфейса или для обеспечения согласованности визуального стиля во всем приложении. theme.extend Необходимо добавлять новые значения, а не заменять существующие элементы темы. Таким образом можно сохранить исходную тему и в то же время расширить её функционал.

module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1992d4',
      },
      spacing: {
        '128': '32rem',
      }
    },
  },
}

После определения вы сможете использовать это так же, как… text-brand-blue и h-128 Такой класс значительно повышает удобство обслуживания и согласованность стилей (дизайна).

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

резюме

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

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

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

Каковы основные отличия между Tailwind CSS и Bootstrap?

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

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

Это довольно распространенное впечатление при первом знакомстве с таким подходом к организации стилей в HTML. Действительно, списки классов в HTML могут быть довольно длинными. Однако это имеет важные преимущества: все стили находятся в одном месте (в самом HTML-коде), что исключает необходимость постоянного перехода между HTML-файлом и CSS-файлами, устраняет проблемы, связанные с использованием не задействованных стилей, и обеспечивает единообразие дизайна благодаря четким правилам их применения. Многие разработчики считают, что такой способ управления стилями повышает читаемость и удобство их обслуживания. Для особенно сложных списков классов можно использовать дополнительные инструменты или методы для улучшения организации кода. @apply Необходимо осуществить разумную абстракцию инструкций или шаблонных компонентов (в React/Vue).

Как управлять темами и пользовательскими системами дизайна в проектах, использующих Tailwind CSS?

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

Является ли размер архива, сгенерированного в производственной среде Tailwind CSS, слишком большим?

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