Введение в Tailwind CSS: революция в CSS-фреймворках
(Могут быть недочеты потому что я только недавно интегрировал TailwindCss в MarkDown систему)
Tailwind CSS — это революционный utility-first CSS фреймворк, который принципиально меняет способ стилизации веб-приложений. В отличие от традиционных фреймворков, Tailwind не предоставляет готовых компонентов, а вместо этого даёт набор низкоуровневых утилитарных классов, которые можно комбинировать для создания уникального дизайна.
Tailwind CSS
Современный utility-first CSS фреймворк, ориентированный на продуктивность и гибкость.
- ✓ Низкоуровневые утилиты
- ✓ Just-In-Time компиляция
- ✓ Минимальный итоговый CSS
Почему Tailwind так популярен среди разработчиков?
Tailwind CSS приобрёл огромную популярность среди разработчиков по нескольким веским причинам:
- Скорость разработки — Tailwind позволяет стилизовать компоненты непосредственно в HTML, не переключаясь между файлами и не придумывая имена классов.
- Согласованность дизайна — Предопределённая система дизайна с шкалами размеров, цветов и отступов обеспечивает визуальную согласованность интерфейса.
- Легко настраивается — Tailwind полностью настраивается под потребности проекта через конфигурационный файл.
- Оптимизированный размер — Благодаря JIT-компиляции, финальный CSS содержит только используемые классы и имеет минимальный размер.
- Отзывчивый дизайн — Встроенные модификаторы для брейкпоинтов делают адаптивную верстку интуитивно понятной.
/* CSS */
.button {
background-color: #3b82f6;
color: white;
font-weight: bold;
padding: 0.5rem 1rem;
border-radius: 0.25rem;
}
.button:hover {
background-color: #1d4ed8;
}
/* HTML */
<button class="button">
Кнопка
</button>
/* Нет отдельного CSS файла *//* HTML с классами Tailwind */ <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"> Кнопка </button>
Фундаментальные концепции Tailwind CSS
Принцип Utility-First
Центральная идея Tailwind CSS — это подход "utility-first" (приоритет утилит). Вместо создания собственных абстрактных CSS-классов, Tailwind предлагает использовать маленькие утилитарные классы для построения компонентов непосредственно в HTML.
<!-- Вместо создания класса "card" -->
<div class="max-w-sm rounded overflow-hidden shadow-lg bg-white">
<img class="w-full" src="/img/card-image.jpg" alt="Изображение">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2">Заголовок карточки</div>
<p class="text-gray-700 text-base">
Здесь описание карточки, которое может занимать несколько строк.
</p>
</div>
</div>
Преимущества этого подхода:
- Не нужно придумывать имена классов — вам не нужно изобретать абстрактные именования вроде
.card-titleили.content-wrapper - CSS не разрастается — вы используете только те классы, которые нужны, и не создаете новые
- Вносить изменения безопасно — вы меняете стили конкретного элемента, не боясь побочных эффектов на других страницах
- Удобный рефакторинг — вы видите все стили прямо в HTML, без необходимости искать определения в CSS-файлах
Обратите внимание
Да, HTML может выглядеть "загруженным" из-за множества классов, но современные инструменты (VS Code + расширение Tailwind CSS IntelliSense) делают работу с ними удобной благодаря автодополнению и подсказкам.
Just-In-Time (JIT) компилятор
С версии 3.0 Tailwind CSS использует Just-In-Time компилятор, который радикально меняет процесс генерации CSS-файлов:
JIT-компилятор сканирует ваши шаблоны и JavaScript-файлы во время разработки и генерирует только те CSS-классы, которые вы фактически используете. Это имеет несколько важных преимуществ:
- Молниеносная разработка — изменения появляются мгновенно, без полной перестройки CSS
- Произвольные значения — вы можете использовать произвольные значения через квадратные скобки, например
text-[22px]илиmt-[17vh] - Неограниченная вложенность модификаторов — можно комбинировать несколько состояний, например
lg:dark:hover:bg-white - Минимальный финальный CSS — только используемые классы попадают в финальный CSS, обеспечивая минимальный размер файла
Система дизайн-токенов
Tailwind CSS предоставляет хорошо продуманную систему дизайн-токенов — набор предопределенных значений для цветов, размеров, отступов и других свойств, что обеспечивает согласованность дизайна.
Система цветов
Tailwind поставляется с тщательно подобранной палитрой цветов, каждый из которых доступен в разных оттенках (от 50 до 950):
Использование этой системы очень просто. Достаточно добавить нужный цвет и его интенсивность:
<div class="bg-blue-50">Очень светло-синий</div>
<div class="bg-blue-100">Светло-синий</div>
<div class="bg-blue-500">Средне-синий</div>
<div class="bg-blue-900">Тёмно-синий</div>
Расширенные возможности Tailwind CSS
Группировка и наследование стилей
Tailwind CSS предоставляет мощный механизм для группировки стилей и их наследования, который помогает избежать повторения классов и создавать более чистый HTML.
Модификатор group
Модификатор group позволяет стилизовать дочерние элементы на основе состояния родительского элемента. Это особенно полезно для создания интерактивных компонентов.
<div class="group border rounded-lg overflow-hidden hover:shadow-lg transition duration-300">
<div class="p-4">
<h3 class="text-lg font-bold group-hover:text-blue-600 transition duration-300">Заголовок карточки</h3>
<p class="text-gray-600 group-hover:text-black transition duration-300">Описание карточки с эффектом наведения.</p>
<button class="mt-3 px-4 py-2 bg-gray-200 group-hover:bg-blue-500 group-hover:text-white rounded transition duration-300">Подробнее</button>
</div>
</div>
Интерактивная карточка
При наведении на карточку меняется её внешний вид, включая цвет текста и кнопку.
Модификатор peer
Модификатор peer работает аналогично group, но позволяет стилизовать элементы на основе состояния их "соседей" (то есть, элементов, расположенных рядом).
<div class="relative">
<input type="text" class="peer border rounded px-4 py-2 w-full focus:border-blue-500 focus:outline-none" placeholder="Введите email">
<p class="mt-1 text-sm text-transparent peer-invalid:text-red-500">Пожалуйста, введите корректный email.</p>
</div>
Тёмная тема из коробки
Tailwind CSS предоставляет встроенную поддержку тёмного режима через модификатор dark:. Для его работы нужно включить соответствующую опцию в файле конфигурации.
Настройка тёмной темы
В файле tailwind.config.js можно настроить тёмную тему двумя способами:
// tailwind.config.js
module.exports = {
darkMode: 'media', // Автоматически на основе системных настроек
// ИЛИ
darkMode: 'class', // Ручное переключение с помощью класса 'dark'
// ...остальные настройки
}
Использование модификатора dark:
<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white p-6 rounded-lg shadow-md">
<h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Адаптивная карточка</h2>
<p class="text-gray-600 dark:text-gray-300">Этот текст будет хорошо читаться как в светлом, так и в тёмном режиме.</p>
<button class="mt-4 bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Подробнее
</button>
</div>
Светлая тема
Текст в светлом режиме.
Тёмная тема
Текст в тёмном режиме.
Переключение темы с помощью JavaScript
Если используется darkMode: 'class', необходимо добавить класс dark к элементу html для активации тёмной темы:
// Проверяем предпочтения пользователя
if (localStorage.theme === 'dark' ||
(!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark')
} else {
document.documentElement.classList.remove('dark')
}
// Функция для переключения темы
function toggleDarkMode() {
if (document.documentElement.classList.contains('dark')) {
document.documentElement.classList.remove('dark')
localStorage.theme = 'light'
} else {
document.documentElement.classList.add('dark')
localStorage.theme = 'dark'
}
}
Директивы @apply для компонентов
Директива @apply позволяет использовать утилитарные классы Tailwind внутри CSS, что особенно полезно при создании повторно используемых компонентов или при работе с глобальными стилями.
Базовое использование @apply
/* В вашем CSS файле */
.btn {
@apply py-2 px-4 font-bold rounded;
}
.btn-blue {
@apply bg-blue-500 text-white hover:bg-blue-700;
}
.card {
@apply bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition duration-300;
}
<!-- Использование в HTML -->
<button class="btn btn-blue">Кнопка</button>
<div class="card">
<h3 class="text-lg font-bold">Заголовок карточки</h3>
<p>Содержимое карточки</p>
</div>
Использование @apply в сочетании с другими CSS-функциями
/* Комбинирование @apply с CSS переменными и calc() */
.custom-element {
@apply bg-blue-500 text-white rounded;
width: calc(100% - var(--sidebar-width));
margin-left: var(--sidebar-width);
}
/* Использование @apply с медиа-запросами */
@media (max-width: 768px) {
.responsive-card {
@apply p-4 rounded-md shadow-sm;
}
}
/* Использование с модификаторами состояний */
.interactive-button {
@apply bg-blue-500 text-white py-2 px-4 rounded;
&:hover {
@apply bg-blue-600 shadow-md;
}
&:active {
@apply bg-blue-700;
}
&:focus {
@apply outline-none ring-2 ring-blue-500 ring-opacity-50;
}
}
Лучшие практики использования @apply
- Используйте для абстрагирования повторяющихся паттерновCSS
.input-field { @apply w-full border border-gray-300 rounded-md px-4 py-2 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500; } - Комбинируйте с CSS-переменными для гибкой настройкиCSS
:root { --primary: #3b82f6; --primary-dark: #1d4ed8; } .brand-button { @apply py-2 px-4 rounded font-medium; background-color: var(--primary); &:hover { background-color: var(--primary-dark); } } - Избегайте излишнего применения @apply
Вместо того, чтобы переносить всю вёрстку в CSS-файлы, выделяйте в компоненты только повторяющиеся шаблоны. Для уникальных элементов лучше использовать классы в HTML напрямую.
Установка и настройка Tailwind CSS
1. Установка с нуля
Начнем с установки Tailwind CSS в новый проект. Есть несколько способов установки, но здесь мы рассмотрим наиболее распространенный подход с использованием npm/yarn.
Шаг 1: Создание проекта
Создайте новую директорию для проекта и инициализируйте npm:
mkdir my-tailwind-project
cd my-tailwind-project
npm init -y
Шаг 2: Установка зависимостей
Установите Tailwind CSS, PostCSS и autoprefixer:
npm install -D tailwindcss postcss autoprefixer
Шаг 3: Инициализация Tailwind
Создайте конфигурационные файлы Tailwind:
npx tailwindcss init -p
Эта команда создаст два файла:
tailwind.config.js- основная конфигурация Tailwindpostcss.config.js- конфигурация PostCSS
Созданные файлы:
tailwind.config.js - конфигурация TailwindCSSpostcss.config.js - конфигурация PostCSS2. Настройка конфигурации
После инициализации необходимо настроить Tailwind для вашего проекта. Основные настройки выполняются в файле tailwind.config.js.
Базовая конфигурация
По умолчанию созданный файл конфигурации выглядит так:
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
}
Настройка путей к файлам контента
Важно указать пути к файлам, где будут использоваться классы Tailwind. Это необходимо для JIT-компилятора, чтобы он мог генерировать только используемые стили:
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{html,js,jsx,ts,tsx,vue}",
"./public/index.html",
],
theme: {
extend: {},
},
plugins: [],
}
Кастомизация темы
Tailwind позволяет настраивать различные аспекты темы, включая цвета, отступы, шрифты и другие параметры:
// tailwind.config.js
const colors = require('tailwindcss/colors')
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
theme: {
// Полная замена цветовой палитры
colors: {
transparent: 'transparent',
current: 'currentColor',
black: colors.black,
white: colors.white,
gray: colors.neutral,
primary: {
50: '#f0f9ff',
100: '#e0f2fe',
500: '#0ea5e9',
700: '#0369a1',
900: '#0c4a6e',
},
},
// Кастомные шрифты
fontFamily: {
sans: ['Inter var', 'sans-serif'],
mono: ['JetBrains Mono', 'monospace'],
},
// Расширение существующей темы
extend: {
spacing: {
'128': '32rem',
},
borderRadius: {
'xl': '1rem',
'2xl': '2rem',
},
animation: {
'bounce-slow': 'bounce 3s infinite',
},
},
},
plugins: [
// Собственные компоненты
require('./tailwind/buttons.js'),
require('./tailwind/forms.js'),
],
}
Добавление плагинов
Tailwind имеет экосистему плагинов, которые добавляют новую функциональность:
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{js,jsx}"],
theme: {
extend: {},
},
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/typography'),
require('@tailwindcss/aspect-ratio'),
],
}
Совет
Не забудьте установить плагины ниже перед их использованием:
npm install -D @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio
3. Включение в CSS
После настройки конфигурационных файлов необходимо создать CSS-файл и включить в него директивы Tailwind.
Создание основного CSS-файла
Создайте файл src/input.css (или выберите другое имя) и добавьте следующий код:
/* src/input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
/* Дополнительные пользовательские стили */яё
@layer components {
.btn {
@apply px-4 py-2 rounded font-semibold transition duration-200;
}
.btn-primary {
@apply bg-blue-500 text-white hover:bg-blue-600;
}
}
/* Глобальные стили */
@layer base {
h1 {
@apply text-2xl font-bold mb-4;
}
h2 {
@apply text-xl font-bold mb-3;
}
}
Директивы @tailwind подключают три основных слоя Tailwind:
base- базовые стили (сброс стилей)components- стили компонентовutilities- утилитарные классы
Сборка CSS
Добавьте скрипт в package.json для сборки CSS:
{
"scripts": {
"build:css": "tailwindcss -i ./src/input.css -o ./dist/output.css --minify",
"watch:css": "tailwindcss -i ./src/input.css -o ./dist/output.css --watch"
}
}
Запустите сборку:
# Однократная сборка
npm run build:css
# Режим разработки с отслеживанием изменений
npm run watch:css
Подключение CSS к HTML
Создайте файл public/index.html и подключите сгенерированный CSS:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS проект</title>
<link href="/dist/output.css" rel="stylesheet">
</head>
<body class="bg-gray-100 font-sans">
<div class="container mx-auto px-4 py-8">
<h1 class="text-3xl font-bold text-gray-800 mb-6">
Привет, Tailwind CSS!
</h1>
<button class="btn btn-primary">Нажми меня</button>
</div>
</body>
</html>
4. Интеграция с фреймворками
Tailwind CSS можно легко интегрировать с большинством современных JavaScript-фреймворков. Рассмотрим популярные варианты.
Nuxt 3
Для интеграции Tailwind с Nuxt 3 следуйте этим шагам:
- Установка модулей:
# Установка основного пакета Nuxt
npm init nuxt-app my-nuxt-project
# Переход в директорию проекта
cd my-nuxt-project
# Установка Tailwind и зависимостей
npm install -D tailwindcss postcss autoprefixer @nuxtjs/tailwindcss
- Настройка модуля в nuxt.config.ts:
// nuxt.config.ts
export default defineNuxtConfig({
modules: [
'@nuxtjs/tailwindcss'
],
tailwindcss: {
// опциональные настройки
configPath: '~/tailwind.config.js',
exposeConfig: false,
viewer: true, // просмотрщик компонентов в режиме разработки
}
})
- Создание конфигурации Tailwind:
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./components/**/*.{js,vue,ts}",
"./layouts/**/*.vue",
"./pages/**/*.vue",
"./plugins/**/*.{js,ts}",
"./nuxt.config.{js,ts}",
"./app.vue",
],
theme: {
extend: {},
},
plugins: [],
}
- Использование в компонентах Vue:
<!-- pages/index.vue -->
<template>
<div class="min-h-screen bg-gray-50">
<div class="container mx-auto px-4 py-16">
<h1 class="text-4xl font-bold text-gray-800 mb-8">
Nuxt 3 с Tailwind CSS
</h1>
<div class="bg-white rounded-lg shadow p-6">
<p class="text-gray-600">Это базовый компонент с Tailwind классами.</p>
</div>
</div>
</div>
</template>
React (Create React App)
Интеграция Tailwind с Create React App:
- Создание проекта React:
npx create-react-app my-react-tailwind
cd my-react-tailwind
- Установка Tailwind и настройка PostCSS:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
- Настройка конфигурации Tailwind:
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
- Включение Tailwind в CSS:
/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
- Импорт CSS в главном компоненте:
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
- Использование в компонентах:
// src/App.js
function App() {
return (
<div className="min-h-screen bg-gray-100 flex flex-col justify-center items-center">
<div className="max-w-md w-full bg-white rounded-lg shadow-lg p-6">
<h1 className="text-2xl font-bold text-gray-800 mb-4">
React + Tailwind CSS
</h1>
<button className="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded">
Нажми меня
</button>
</div>
</div>
);
}
export default App;
Vue 3
Интеграция Tailwind с Vue 3 (используя Vite):
- Создание проекта Vue с Vite:
npm init vite my-vue-tailwind -- --template vue
cd my-vue-tailwind
npm install
- Установка Tailwind и зависимостей:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
- Настройка конфигурации Tailwind:
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
- Включение Tailwind в CSS:
/* src/assets/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
- Импорт CSS в главном файле:
// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import './assets/index.css'
createApp(App).mount('#app')
- Использование в компонентах Vue:
<!-- src/App.vue -->
<template>
<div class="min-h-screen bg-gray-100 flex justify-center items-center">
<div class="max-w-md w-full bg-white rounded-lg shadow-lg p-6">
<h1 class="text-2xl font-bold text-gray-800 mb-4">
Vue 3 + Tailwind CSS
</h1>
<button class="bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-4 rounded">
Нажми меня
</button>
</div>
</div>
</template>
Совместимость с другими фреймворками
Tailwind CSS также хорошо работает с другими фреймворками, включая Angular, Svelte, и Next.js. Для каждого из них есть официальные руководства по интеграции на сайте документации Tailwind.
Заключение: Экосистема Tailwind CSS
В заключение, Tailwind CSS – это не просто библиотека утилитарных классов, а целая экосистема инструментов и подходов к веб-разработке, которая существенно ускоряет процесс создания красивых и функциональных интерфейсов.
Headless UI
Команда Tailwind также создала Headless UI – набор полностью доступных компонентов без стилизации, которые идеально интегрируются с Tailwind CSS.
Headless UI + Tailwind CSS
Идеальная комбинация для быстрого создания доступных интерфейсов
Что такое Headless UI?
- Доступные компоненты без стилей
- Поддержка React и Vue
- WAI-ARIA совместимость
- Управление с клавиатуры
Доступные компоненты
• Dialog (модальные окна)
• Dropdown
• Switch (тумблеры)
• Tabs (вкладки)
• Combobox (выпадающий список с поиском)
• Transition (анимации)
• Popover
Примеры использования Headless UI
Headless UI предоставляет только функциональность без стилей, позволяя вам полностью контролировать внешний вид компонентов с помощью Tailwind CSS.
Пример 1: Выпадающее меню с Headless UI (React)
import { Menu, Transition } from '@headlessui/react'
import { Fragment } from 'react'
export default function DropdownMenu() {
return (
<Menu as="div" className="relative inline-block text-left">
<div>
<Menu.Button className="inline-flex w-full justify-center rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500">
Опции
<svg
className="ml-2 -mr-1 h-5 w-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
</svg>
</Menu.Button>
</div>
<Transition
as={Fragment}
enter="transition ease-out duration-100"
enter-from="transform opacity-0 scale-95"
enter-to="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leave-from="transform opacity-100 scale-100"
leave-to="transform opacity-0 scale-95"
>
<Menu.Items className="absolute right-0 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
<div className="px-1 py-1">
<Menu.Item>
{({ active }) => (
<button
className={`${
active ? 'bg-blue-500 text-white' : 'text-gray-900'
} group flex w-full items-center rounded-md px-2 py-2 text-sm`}
>
Редактировать
</button>
)}
</Menu.Item>
<Menu.Item>
{({ active }) => (
<button
className={`${
active ? 'bg-blue-500 text-white' : 'text-gray-900'
} group flex w-full items-center rounded-md px-2 py-2 text-sm`}
>
Дублировать
</button>
)}
</Menu.Item>
</div>
</Menu.Items>
</Transition>
</Menu>
)
}
Пример 2: Модальное окно с Headless UI (Vue)
<script setup>
import { ref } from 'vue'
import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'
const isOpen = ref(false)
function closeModal() {
isOpen.value = false
}
function openModal() {
isOpen.value = true
}
</script>
<template>
<div>
<button
type="button"
@click="openModal"
class="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700"
>
Открыть диалог
</button>
</div>
<TransitionRoot appear :show="isOpen" as="template">
<Dialog as="div" @close="closeModal" class="relative z-10">
<TransitionChild
as="template"
enter="duration-300 ease-out"
enter-from="opacity-0"
enter-to="opacity-100"
leave="duration-200 ease-in"
leave-from="opacity-100"
leave-to="opacity-0"
>
<div class="fixed inset-0 bg-black bg-opacity-25" />
</TransitionChild>
<div class="fixed inset-0 overflow-y-auto">
<div class="flex min-h-full items-center justify-center p-4 text-center">
<TransitionChild
as="template"
enter="duration-300 ease-out"
enter-from="opacity-0 scale-95"
enter-to="opacity-100 scale-100"
leave="duration-200 ease-in"
leave-from="opacity-100 scale-100"
leave-to="opacity-0 scale-95"
>
<DialogPanel class="w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
<DialogTitle as="h3" class="text-lg font-medium leading-6 text-gray-900">
Заголовок модального окна
</DialogTitle>
<div class="mt-2">
<p class="text-sm text-gray-500">
Это модальное окно, созданное с помощью Headless UI и стилизованное через Tailwind CSS. Оно полностью доступно, поддерживает управление с клавиатуры и имеет анимированные переходы.
</p>
</div>
<div class="mt-4">
<button
type="button"
class="inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
@click="closeModal"
>
Закрыть
</button>
</div>
</DialogPanel>
</TransitionChild>
</div>
</div>
</Dialog>
</TransitionRoot>
</div>
Пример 3: Переключатель (Switch) с Headless UI
import { useState } from 'react'
import { Switch } from '@headlessui/react'
export default function Toggle() {
const [enabled, setEnabled] = useState(false)
return (
<div className="flex items-center space-x-4">
<Switch
checked={enabled}
onChange={setEnabled}
className={`${
enabled ? 'bg-blue-600' : 'bg-gray-200'
} relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2`}
>
<span className="sr-only">Включить уведомления</span>
<span
className={`${
enabled ? 'translate-x-6' : 'translate-x-1'
} inline-block h-4 w-4 transform rounded-full bg-white transition-transform`}
/>
</Switch>
<span className="text-sm font-medium text-gray-700">
{enabled ? 'Включено' : 'Выключено'}
</span>
</div>
)
}
Интеграция Headless UI с Tailwind CSS позволяет создавать доступные и интерактивные компоненты интерфейса, фокусируясь на функциональности, в то время как Tailwind обеспечивает гибкие возможности стилизации. Эта комбинация особенно полезна при создании сложных интерфейсов с высокими требованиями к доступности.
