Это подробный урок по Tailwind CSS для начинающих. Мы подключим и настроим Tailwind, создадим стартер для веб-разработки с универсальной конфигурацией и научимся работать с light-dark режимами в проектах.
Полезные ресурсы урока:
- Tailwind-Starter (готовый результат): На Github
- Документация: tailwindcss.com
- Настройка окружения: WSL / Git Bash
- Настройка VS Code: Ознакомиться с уроком
- Обновление Tailwind CSS: Upgrade guide
Плагины для VS Code:
- Tailwind CSS IntelliSense
- Live Server
Разработка стартера Tailwind с поддержкой темной темы
Давайте настроим стартер для веб-разработки на Tailwind CSS с универсальной конфигурацией, переключением тем и стилизацией через CSS.
Требования
- Node.js (рекомендуется последняя LTS-версия).
- Редактор кода (например, VS Code).
Шаг 1: Инициализация проекта
Создайте папку проекта и инициализируйте проект:
mkdir tailwind-starter
cd tailwind-starter
npm init
package name: (tailwind-starter)
version: (1.0.0)
description: Startup Tailwind Template
entry point: (index.js)
test command:
git repository:
keywords:
author: WebDesign Master
license: (ISC)
Шаг 2: Установка Tailwind CSS
Установите Tailwind CSS:
npm i -D @tailwindcss/cliШаг 3: Настройка package.json
Обновите созданный в процессе инициализации package.json.
Установим скрипт для запуска и билда проекта в секции "scripts":
{
"name": "tailwind-starter",
"version": "1.0.0",
"description": "Startup Tailwind Template",
"main": "index.js",
"scripts": {
"dev": "npx tailwindcss -i ./input.css -o ./css/main.css --minify --watch",
"build": "npx tailwindcss -i ./input.css -o ./css/main.css --minify"
},
"author": "WebDesign Master",
"license": "ISC",
"devDependencies": {
"@tailwindcss/cli": "^4.0.16"
}
}
dev: Компилируетinput.cssвcss/main.cssс минификацией и отслеживанием изменений в реальном времени.build: Создает финальный минифицированный CSS-файл без отслеживания.
Шаг 4: Создание структуры проекта
Создайте следующую структуру:
├─ tailwind-starter/
├─ css/
│ └─ main.css (будет сгенерирован)
├─ js/
│ └─ app.js
├─ img/
│ ├─ example.jpg (добавьте свое изображение для OG-метатега)
│ └─ favicon.png (добавьте свое изображение)
├─ index.html
├─ input.css
└─ package.json
Поместите в папку img ваши изображения, например, favicon.png и example.jpg
Шаг 5: Настройка стилей
Создайте input.css со следующей конфигурацией Tailwind:
@import "tailwindcss";
@variant dark (&:where(.dark, .dark *));
@theme {
--color-accent: orange;
}
[data-mode].active {
@apply bg-accent text-amber-50;
}
@import "tailwindcss": Подключаем Tailwind CSS.@variant dark: Определяет поведение темной темы (применяется к элементам с классом.darkи их потомкам).@theme: Задает кастомные переменные (например,--color-accent).[data-mode].active: Стили для активного переключателя темы.
Шаг 6: Настройка HTML
Создайте index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tailwind Starter</title>
<meta name="description" content="Startup Tailwind Template">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="img/favicon.png">
<meta property="og:image" content="img/example.jpg">
<link rel="stylesheet" href="css/main.css">
<script src="js/app.js" defer></script>
</head>
<body class="dark:bg-slate-900">
<div class="text-center mt-5">
<div data-mode="light" class="dark:text-slate-200 cursor-pointer inline-block rounded-sm p-1.5">Light</div>
<div data-mode="dark" class="dark:text-slate-200 cursor-pointer inline-block rounded-sm p-1.5">Dark</div>
<div data-mode="auto" class="dark:text-slate-200 cursor-pointer inline-block rounded-sm p-1.5">Auto</div>
</div>
</body>
</html>
- Классы
dark:text-slate-200активируются в темной теме. - Атрибуты
data-modeиспользуются для переключения режимов.
Шаг 7: Настройка переключения тем
Создайте js/app.js:
// Custom Scripts
// Tailwind Theme Mode Switch with localStorage
const html = document.documentElement, mode = localStorage.getItem('mode') || 'auto'
const getPreferredMode = () => matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
const switchMode = mode => {
const newMode = mode === 'auto' ? getPreferredMode() : mode
html.style.colorScheme = mode === 'auto' ? 'light dark' : newMode
html.classList.remove('light', 'dark')
html.classList.add(`${newMode}`)
localStorage.setItem('mode', mode)
document.querySelectorAll('[data-mode]').forEach(el => el.classList.toggle('active', el.dataset.mode === mode))
}
matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
if (localStorage.getItem('mode') === 'auto') switchMode('auto')
})
document.addEventListener('click', e => e.target.dataset.mode && switchMode(e.target.dataset.mode))
switchMode(mode)
- Скрипт переключает классы
.lightили.darkна<html>в зависимости от выбора пользователя или системных настроек. - Класс
.activeподсвечивает активный пункт для текущего режима.
Шаг 8: Компиляция стилей
Запустите разработку:
npm run devTailwind скомпилируетinput.cssвmain.cssс минификацией и будет обновлять файл при изменениях.
Для финальной сборки:
npm run buildПроект готов к использованию и расширению: добавляйте новые стили и функциональность по мере необходимости.
Что нового в Tailwind CSS
Новая версия Tailwind была полностью переписана разработчиками с нуля и получила самые значительные обновления за всю историю развития фреймворка. Для начала давайте рассмотрим ключевые особенности и отличия от предыдущей версии, а потом перейдём к практической части урока, в которой установим, настроим Tailwind, рассмотрим, как работать с темной и светлой темой, создадим свой стартер для разработки интерфейсов на Tailwind и затронем другие важные моменты.
Итак, важные изменения в новой версии Tailwind.
1. Новый высокопроизводительный движок
Одним из главных обновлений Tailwind CSS стало повышение скорости сборки. Благодаря полной переработке движка, сборка CSS стала:
- В 5 раз быстрее для полного билда. Это критически важно для крупных проектов, где файлы стилей достигают значительных размеров.
- В 100 раз быстрее для инкрементальных изменений. Tailwind очень быстро обновляет стили при изменении файлов, что делает разработку более плавной и продуктивной.
Эти улучшения заметны даже на небольших проектах, а для крупных команд это станет настоящим спасением.
Пример: вы работаете с проектом, содержащим тысячи файлов HTML. Tailwind CSS теперь обрабатывает изменения за миллисекунды, что особенно полезно для проектов с процессами с непрерывной интеграцией.
2. Современные возможности CSS
Новый Tailwind активно использует современные возможности CSS, делая фреймворк мощнее и гибче. Рассмотрим ключевые из них:
2.1 Каскадные слои (cascade layers)
Эта функция позволяет более точно управлять порядком применения стилей и избавляет от необходимости излишнего использования специфичности.
@layer base {
body {
font-family: 'Inter', sans-serif;
}
}
@layer components {
.button {
background-color: #3490dc;
color: white;
}
}
Теперь стили становятся более предсказуемыми, что упрощает поддержку кода.
2.2 @property: пользовательские свойства
Tailwind добавляет поддержку регистрации пользовательских свойств, что делает возможным, например, анимацию сложных градиентов и упрощает их настройку.
@property --angle {
syntax: '<angle>';
inherits: false;
initial-value: 0deg;
}
.gradient {
--angle: 45deg;
background: linear-gradient(var(--angle), #ff7eb3, #ff758c);
}
2.3 Функция color-mix()
Эта функция упрощает создание промежуточных цветов, что полезно для динамического интерфейса.
.button {
background-color: color-mix(in srgb, #ff7eb3, #3490dc 50%);
}2.4 Логические свойства
Теперь логические свойства, такие как margin-inline, padding-block, поддерживаются напрямую.
.card {
padding-inline: 1rem;
margin-block: 2rem;
}3. CSS-first конфигурация
Одним из самых революционных изменений стала возможность настройки Tailwind CSS непосредственно через CSS файлы. Вместо JavaScript-конфигурации теперь используется директива @theme в самом CSS файле:
@import "tailwindcss";
@theme {
--font-primary: 'Roboto', sans-serif;
--color-primary: #3490dc;
--spacing-lg: 32px;
}Такой подход делает настройку более интуитивной и снижает сложность для разработчиков и дизайнеров.
4. Упрощенная установка и автоматическое обнаружение контента
Теперь для начала работы с Tailwind CSS достаточно минимальной настройки. Новая версия автоматически сканирует проект и обнаруживает файлы с шаблонами, избавляя от необходимости вручную прописывать пути в конфигурации.
Раньше в файле tailwind.config.js необходимо было вручную прописывать пути ко всем файлам проекта, чтобы Tailwind мог найти используемые классы. Например:
module.exports = {
content: [
"./src/**/*.{html,js,jsx,ts,tsx}", // Указываем пути ко всем шаблонам
"./components/**/*.{html,js}",
]
};Если вы забыли указать какой-то путь, классы из этих файлов просто не работали.
Теперь в новой версии Tailwind CSS система сама сканирует проект и автоматически находит файлы с шаблонами. То есть прописывать вручную ничего нигде не надо.
Это также включает автоматическое игнорирование ненужных файлов и папок, таких как node_modules. Кстати, файл .gitignore теперь также работает и для исключений файлов и папок в Tailwind.
Кроме того, Tailwind теперь учитывает содержимое файла .gitignore для настройки исключений файлов и папок из обработчика.
5. Улучшенная поддержка импорта
Больше не нужно устанавливать дополнительные плагины для поддержки импорта CSS. Tailwind теперь поддерживает это из коробки:
@import "components/buttons.css";
@import "utilities/grid.css";
6. Меньше модулей
Теперь ваша папка node_modules не такая монструозно раздутая и весит гораздо меньше.
7. Новая цветовая палитра P3
Tailwind CSS добавил поддержку цветовой палитры P3, которая предоставляет доступ к более ярким и насыщенным цветам для современных экранов с расширенным цветовым охватом.
.bg-p3 {
background-color: color(display-p3 0.8 0.1 0.6);
}Эта возможность открывает новые перспективы для дизайнеров, создающих интерфейсы для современных дисплеев.
8. Дополнительные плюшки
8.1 Собственный плагин Vite - тесная интеграция для максимальной производительности и минимальной конфигурации.
8.2 Переменные тем CSS - все токены вашего дизайна отображаются как нативные переменные CSS, чтобы вы могли получить к ним доступ из любого места.
8.3 Контейнерные запросы - первоклассные API для стилизации элементов в зависимости от размера контейнера, плагины не требуются.
8.4 Новые утилиты 3D трансформаций - преобразуйте элементы в 3D-пространстве прямо в вашем HTML.
8.5 Расширенные API градиентов - радиальные и конические градиенты, режимы интерполяции и многое другое.
8.6 Поддержка
@starting-style- новый вариант, который вы можете использовать для создания переходов входа и выхода без необходимости использования JavaScript.8.7
not-*вариант - стилизуйте элемент, только если он не соответствует другому варианту, пользовательскому селектору, медиа или запросу функции.8.8 Еще больше новых утилит и вариантов, включая поддержку
color-scheme,field-sizing, сложных теней,inertи многого другого.
Для существующих проектов разработчики опубликовали подробное руководство по обновлению и создали инструмент автоматического обновления, чтобы вы могли как можно быстрее и безболезненно перейти на последнюю версию.
