Tailwind CSS 4 — что нового?

Tailwind CSS 4 представляет собой самое масштабное обновление фреймворка за всю его историю. Команда Tailwind Labs полностью переписала движок, внедрила нативную поддержку CSS-переменных и упростила конфигурацию. Разбираемся, что изменилось и как это повлияет на вашу разработку.

Новый движок Oxide на Rust

Главное изменение в Tailwind CSS 4 — полная переработка ядра фреймворка. Новый движок Oxide, написанный на Rust, обеспечивает невероятный прирост производительности:

• До 5× быстрее компиляция CSS
• Мгновенная пересборка в режиме разработки (часто < 10ms)
• Меньшее потребление памяти при работе с большими проектами

Переход на Rust позволил не только ускорить работу, но и заложить фундамент для будущих возможностей, которые были бы невозможны с JavaScript-движком.

Конфигурация через CSS

Одно из самых революционных изменений — отказ от JavaScript-конфигурации в пользу нативного CSS. Теперь вместо tailwind.config.js вы настраиваете фреймворк прямо в CSS-файле:

Раньше (Tailwind v3):

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: "#7e102e",
      },
      spacing: {
        128: "32rem",
      },
    },
  },
};

Теперь (Tailwind v4):

@import "tailwindcss";
 
@theme {
  --color-brand: #7e102e;
  --spacing-128: 32rem;
  --font-sans: Inter, system-ui, sans-serif;
}

Преимущества нового подхода:

• Меньше файлов — всё в одном месте
• Нативный CSS — работает с любыми инструментами
• Лучше для производительности — не нужно парсить JS
• Проще для новичков — привычный CSS-синтаксис

Нативные CSS-переменные

Tailwind 4 генерирует настоящие CSS-переменные вместо статических значений. Это открывает массу возможностей:

/* Tailwind 4 генерирует */
.bg-brand {
  background-color: var(--color-brand);
}
 
.text-brand {
  color: var(--color-brand);
}

Динамические темы из коробки

Теперь переключение тем стало тривиальной задачей:

@theme {
  --color-primary: #3b82f6;
  --color-background: white;
}
 
@media (prefers-color-scheme: dark) {
  @theme {
    --color-primary: #60a5fa;
    --color-background: #1a1a1a;
  }
}
 
/* Или через data-атрибуты */
[data-theme="dark"] {
  @theme {
    --color-primary: #60a5fa;
    --color-background: #1a1a1a;
  }
}

Динамические значения в рантайме

CSS-переменные позволяют изменять стили динамически через JavaScript:

// Меняем цвет бренда на лету
document.documentElement.style.setProperty("--color-brand", "#ff0000");

Упрощенная структура проекта

В Tailwind 4 значительно упростилась инициализация проекта:

# Установка
npm install tailwindcss@next
 
# Всё, что нужно в CSS
@import "tailwindcss";
 
@theme {
  /* Ваши настройки */
}

Больше не нужно:

• ✅ postcss.config.js (встроенная поддержка)
• ✅ tailwind.config.js (конфигурация в CSS)
• ✅ Отдельные плагины для базовых функций

Улучшения в утилитах

Автоматические контейнерные запросы

Встроенная поддержка container queries без плагинов:

<div class="@container">
  <div class="@md:text-lg @lg:text-xl">
    Размер шрифта зависит от размера контейнера, а не viewport
  </div>
</div>

Новые цветовые функции

Поддержка современных CSS-функций:

@theme {
  --color-primary: oklch(0.5 0.2 250);
  --color-accent: color-mix(in oklch, var(--color-primary) 80%, white);
}

<div class="bg-primary/50">
  <!-- Прозрачность работает с любыми цветовыми пространствами -->
</div>

Улучшенные градиенты

Более интуитивный синтаксис для градиентов:

<div class="bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500">
  Красивый градиент
</div>

Миграция с Tailwind 3

Tailwind Labs предоставляют инструмент автоматической миграции:

npx @tailwindcss/upgrade

Основные изменения при миграции:

1. Обновление конфигурации

// Старый tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: "#7e102e",
      },
    },
  },
};

Превращается в:

/* styles/globals.css */
@theme {
  --color-primary: #7e102e;
}

2. Изменения в синтаксисе

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

• flex-shrink-0 → shrink-0
• flex-grow → grow
• decoration-clone → box-decoration-clone

3. Удаленные классы

Некоторые редко используемые утилиты удалены:

<!-- Было -->
<div class="blur-sm filter">...</div>
 
<!-- Стало -->
<div class="blur-sm">...</div>

Производительность на практике

Реальные метрики с production-проектов:

Совместимость с экосистемой

Tailwind 4 работает с популярными фреймворками:

Next.js

// next.config.js
module.exports = {
  experimental: {
    optimizeCss: true, // Используется Oxide
  },
};

Vite

// vite.config.js
import tailwindcss from "@tailwindcss/vite";
 
export default {
  plugins: [tailwindcss()],
};

Astro, Remix, SvelteKit

Встроенная поддержка через PostCSS или нативные плагины для каждого фреймворка.

Что это значит для ваших проектов

Преимущества перехода на v4:

1. Значительный прирост скорости разработки за счёт мгновенной пересборки
2. Упрощенная настройка без необходимости разбираться в JavaScript-конфигах
3. Нативные темы работают быстрее и проще в поддержке
4. Меньше зависимостей — многие плагины теперь встроены
5. Будущее фреймворка — Oxide позволит добавлять функции, невозможные в JS

Когда стоит мигрировать:

• ✅ Новые проекты — начинайте сразу с v4
• ✅ Активная разработка — миграция окупится ускорением
• ⚠️ Legacy проекты — можно подождать стабильного релиза
• ⚠️ Сложные кастомные плагины — проверьте совместимость

Заключение

Tailwind CSS 4 — это не просто апдейт, а переосмысление того, как должен работать utility-first фреймворк. Переход на Rust, нативные CSS-переменные и упрощенная конфигурация делают его быстрее, проще и мощнее.

Ключевые выводы:

• Oxide-движок обеспечивает беспрецедентную скорость
• Конфигурация через CSS проще и естественнее
• CSS-переменные открывают новые возможности для тем
• Миграция с v3 автоматизирована и безболезненна
• Производительность улучшилась в разы

Если вы используете Tailwind в своих проектах, v4 заслуживает вашего внимания. Начните с нового pet-проекта, чтобы оценить все преимущества, а затем планируйте миграцию основных приложений.

Используете Tailwind в проектах? Поделитесь опытом миграции на v4 или задайте вопросы — напишите мне.