Урок 01. Старый vs Новый: BEM и Tailwind v3 → v4
⚡ Кратко
Против BEM: утилиты убирают слой имён и мёртвый CSS, но делают разметку
многословнее. Против Tailwind v3: в v4 нет tailwind.config.js и
трёх директив @tailwind — вместо них один @import "tailwindcss"
и настройка прямо в CSS.
Семантические классы (BEM) → утилиты
❌ Было: имя + правило в отдельном файле
<div class="alert alert--warning">
<span class="alert__icon">⚠️</span>
<p class="alert__text">Срок действия ключа истекает</p>
</div>.alert { display: flex; gap: .75rem; padding: 1rem; border-radius: .5rem; }
.alert--warning { background: #fef3c7; color: #92400e; }
.alert__icon { flex: none; }
.alert__text { font-size: .875rem; margin: 0; }Чтобы понять, как выглядит блок, нужно открыть второй файл. Чтобы удалить блок — нужно быть уверенным, что классы больше нигде не используются.
✅ Стало: оформление видно прямо в разметке
Срок действия ключа истекает
<div class="flex gap-3 rounded-lg bg-amber-100 p-4 text-amber-900">
<span class="flex-none">⚠️</span>
<p class="m-0 text-sm">Срок действия ключа истекает</p>
</div>Удаление блока удаляет и его стили — по определению. Правка видна там же, где вы её делаете, без переключения между файлами.
Tailwind v3 → v4: что изменилось
❌ v3: конфигурация в JavaScript
// tailwind.config.js — отдельный файл конфигурации
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: { extend: { colors: { brand: "#4f46e5" } } },
}/* src/input.css — три директивы */
@tailwind base;
@tailwind components;
@tailwind utilities;✅ v4: конфигурация в CSS
/* src/input.css — всё в одном месте */
@import "tailwindcss";
@theme {
--color-brand: oklch(0.51 0.26 277);
}Файл tailwind.config.js больше не нужен: тема описывается
CSS-переменными в блоке @theme, а файлы для сканирования Tailwind
находит сам (при необходимости их указывают директивой @source).
| Что | Tailwind v3 | Tailwind v4 |
|---|---|---|
| Подключение | три @tailwind | @import "tailwindcss" |
| Конфигурация | tailwind.config.js | @theme в CSS |
| Список файлов | поле content | автоопределение + @source |
| Цвета темы | RGB/HEX | OKLCH, шире охват экрана |
| Сборка в Vite | через PostCSS | плагин @tailwindcss/vite |