Введение в Tailwind CSS и практическое руководство по созданию современных адаптивных веб-сайтов.

В наше время, когда стремятся к согласованности процессов разработки и дизайна,Tailwind CSS Оно выделяется своей уникальной философией, приоритетом практичности (Utility-First). Это не UI-фреймворк, предлагающий готовые кнопки или компоненты в виде карточек, а CSS-фреймворк, предоставляющий набор мелких, атомарных имен классов, которые позволяют создавать любой дизайн непосредственно в HTML-коде путем комбинирования этих классов. Таким образом, исчезает необходимость постоянно переключаться между файлами CSS и HTML, а также необходимость долго думать над именованием пользовательских компонентов. Всё происходит просто и наглядно. text-lg font-bold text-blue-600 С такими классами вы можете быстро настроить стиль элементов интерфейса, при этом сохраняя минимальный размер CSS-файла.

Основные понятия и установка/настройка.

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

Философия приоритета практичности

Tailwind CSS Суть этого подхода заключается в приоритете практичности. Это означает, что фреймворк предоставляет множество классов, предназначенных для выполнения конкретных задач; каждый из этих классов отвечает только за один небольшой и четко определенный аспект стилизации интерфейса. Например,margin-top: 1rem; Этот стиль соответствует имени класса. mt-4，font-weight: 700; соответствующий font-boldС помощью комбинирования этих атомных классов вы можете напрямую “определять” сложные компоненты в HTML, не нуждаясь в написании пользовательского CSS.

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

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

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

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

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

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

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

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

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

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

Инициализация и установка проекта.

монтаж Tailwind CSS Наиболее распространенным способом установки пакетов является использование инструментов npm или yarn. Ниже приведены шаги установки пакета с помощью npm в новом проекте:

# 1. 初始化项目（如果尚未初始化）
npm init -y

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

# 3. 生成配置文件
npx tailwindcss init

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

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

В конце концов, вам потребуется настроить процесс сборки, чтобы обрабатывать эти файлы. Если вы используете современные инструменты, такие как Vite, Next.js или Laravel Mix, они обычно включают в себя поддержку PostCSS. Вам просто нужно убедиться, что все настройки выполнены правильно. postcss.config.js Файл содержит… tailwindcss Вот и всё.

Базовые утилитарные классы и реактивный дизайн (Basic Utility Classes and Responsive Design)

Овладеть Tailwind CSS Ключ к успешному использованию этого инструмента заключается в знакомстве с его обширной системой наймения имен для практических классов (utility classes) и в применении встроенных инструментов для создания реактивного дизайна (responsive design).

Рекомендуемое чтение Полное руководство по созданию веб-сайта: от нуля до запуска, реализация современного и эффективного процесса создания веб-сайта.。

Обзор распространенных инструментальных библиотек

Tailwind CSS Имена классов обладают высокой степенью правиломерности и обычно следуют шаблону “атрибут-модификатор-значение”. Ниже приведены некоторые из наиболее распространенных категорий:
Планировка:flex, grid, block, hidden, p-4 (Внутренний отступ), m-2 (Маржа).
Верстка:text-xl, font-semibold, text-center, text-gray-800。
Цвет и фон:bg-blue-500, text-white, border-gray-300。
– Взаимодействие и состояние:hover:bg-blue-700, focus:ring-2, disabled:opacity-50。

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

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

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

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

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

Посетите Bluehost

<div class="flex flex-col md:flex-row">
  <div class="p-4 md:w-1/2 bg-gray-100">Контент слева</div>
  <div class="p-4 md:w-1/2 bg-gray-200">Контент справа</div>
</div>

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

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

Глубокая настройка по индивидуальным требованиям

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

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1992d4',
      },
      spacing: {
        '128': '32rem',
      }
    },
  },
  plugins: [],
}

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

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

Извлечение инструкций компонентов и функций

Хотя и рекомендуется непосредственно комбинировать полезные классы в HTML, для случаев, когда в проекте повторяются сложные фрагменты компонентов,Tailwind Предоставлено. @apply Эти инструкции позволяют извлекать и абстрагировать соответствующие классы из кода CSS.

/* 在你的 CSS 文件中 */
.btn-primary {
  @apply py-2 px-4 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” Вот и всё. Кроме того…@layer Инструкции (например…) @layer components, utilitiesЭто может помочь вам организовать пользовательские стили в соответствующих “уровнях” (layers), обеспечив правильный порядок их загрузки и оптимизацию работы системы.

Хостинг.com

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

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

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

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

Создание HTML-структуры

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

<header class="bg-white shadow-md">
  <nav class="container mx-auto px-4 py-3 flex justify-between items-center">
    <!-- Logo -->
    <a href="#" class="text-xl font-bold text-gray-800">Мой бренд</a>

<!-- 桌面端导航链接 -->
    <div class="hidden md:flex space-x-6">
      <a href="#" class="text-gray-600 hover:text-blue-600">рис. начало</a>
      <a href="#" class="text-gray-600 hover:text-blue-600">предложения</a>
      <a href="#" class="text-gray-600 hover:text-blue-600">О нас</a>
      <a href="#" class="text-gray-600 hover:text-blue-600">Связаться</a>
    </div>

<!-- 移动端菜单按钮 -->
    <button id="menuBtn" class="md:hidden text-gray-600 hover:text-gray-900">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
      </svg>
    </button>
  </nav>

<!-- 移动端下拉菜单 -->
  <div id="mobileMenu" class="md:hidden hidden px-4 pb-4">
    <a href="#" class="block py-2 text-gray-600 hover:text-blue-600">рис. начало</a>
    <a href="#" class="block py-2 text-gray-600 hover:text-blue-600">предложения</a>
    <a href="#" class="block py-2 text-gray-600 hover:text-blue-600">О нас</a>
    <a href="#" class="block py-2 text-gray-600 hover:text-blue-600">Связаться</a>
  </div>
</header>

Добавить логику взаимодействия и обработки пользовательских действий.

Мы используем простой JavaScript для управления отображением и скрытием меню на мобильных устройствах, а также классы от библиотеки Tailwind для изменения их внешнего вида (состояния).

// 在HTML文件末尾的<script>标签中，或单独的JS文件中
const menuBtn = document.getElementById('menuBtn');
const mobileMenu = document.getElementById('mobileMenu');

menuBtn.addEventListener('click', () => {
  // 切换‘hidden’类来显示/隐藏菜单
  mobileMenu.classList.toggle('hidden');
});

С помощью приведённого кода мы создали полнофункциональную реагирующую на размеры экрана навигационную панель: на настольных устройствах…md На экранах размером 768 пикселей и более отображаются горизонтальные навигационные ссылки; на мобильных устройствах ссылки скрыты, вместо них появляется кнопка гамбургер-меню. При нажатии на эту кнопку открывается вертикальное меню. Все стили и реактивное поведение элементов интерфейса реализов Tailwind CSS Практические классы уже готовы к использованию; не требуется написать ни одной строки пользовательского CSS-кода.

резюме

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

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

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

Нет, в производственной среде это невозможно.Tailwind CSS Для сжатия CSS-файлов используется технология PurgeCSS (в настоящее время называемая “Content Scanning”). Эта технология анализирует файлы вашего проекта (HTML, JS-код, компоненты на основе Vue/React и т. д.) и включает в финальный CSS-файл только те стили, которые действительно используются в вашем коде. В результате размер готовой версии CSS-файла составляет всего несколько килобайт, что делает его очень компактным.

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

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

Можно ли использовать Tailwind CSS вместе с существующими библиотеками пользовательского интерфейса (например, Bootstrap)?

Как правило, не рекомендуется использовать оба инструмента одновременно, поскольку их концепции и системы стилей могут противоречить друг другу, что приводит к перекрытию имен классов и проблемам с их специфичностью, увеличивая сложность проекта. Лучше всего выбрать один из них в качестве основной системы стилей для проекта. Если всё же необходимо использовать оба инструмента, можно попробовать это сделать с помощью настройок. tailwind.config.js В китайском языке prefix К классам, связанным с фреймворком Tailwind, необходимо добавить общий префикс, чтобы избежать конфликтов в именах.

Как настроить цвета или расстояния между элементами в системе дизайна?

Все пользовательские настройки уже сохранены. tailwind.config.js Документ был theme Часть работы уже выполнена. Вы можете продолжить. theme.extend Возможно добавление новых значений для расширения стандартной темы, а также её прямое замещение. theme.colors или theme.spacing Для полного замены значений по умолчанию используйте соответствующие ключи-значения. После изменения конфигурационного файла инструмент по сборке снова сгенерирует необходимые утилитарные классы.