Tailwind CSS v4 и Astro — одна из самых популярных комбинаций в 2026 году. Tailwind полностью переработан в версии 4: CSS-based конфигурация вместо tailwind.config.js, нативные CSS-переменные, молниеносная сборка через Oxide engine. Этот гайд — полная инструкция по интеграции.
Что изменилось в Tailwind CSS v4
Tailwind v4 — это переосмысление инструмента с нуля:
- CSS-based конфигурация —
@themeв CSS вместоtailwind.config.js - Oxide engine — Rust-движок, в 5-10 раз быстрее v3
- Нативные CSS-переменные — все токены доступны как
var(--color-primary) - Container queries —
@containerиз коробки - Меньше плагинов — typography, forms включены нативно
Установка в Astro
В Astro 5+ Tailwind v4 интегрируется через Vite-плагин:
npm install tailwindcss @tailwindcss/vite// astro.config.mjs
import { defineConfig } from 'astro/config';
import tailwindcss from '@tailwindcss/vite';
export default defineConfig({
vite: {
plugins: [tailwindcss()],
},
});/* src/styles/global.css */
@import 'tailwindcss';---
// src/layouts/BaseLayout.astro
import '../styles/global.css';
---Готово! Tailwind v4 работает.
Конфигурация темы в CSS
В Tailwind v4 тема задаётся прямо в CSS:
/* src/styles/global.css */
@import 'tailwindcss';
@theme {
/* Цвета бренда */
--color-primary: oklch(55% 0.22 264);
--color-primary-dark: oklch(45% 0.22 264);
--color-primary-light: oklch(75% 0.18 264);
--color-surface: oklch(14% 0.01 264);
--color-surface-container: oklch(18% 0.015 264);
--color-on-surface: oklch(92% 0.01 264);
/* Типографика */
--font-sans: 'Inter', system-ui, sans-serif;
--font-display: 'Outfit', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
/* Радиусы */
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-xl: 28px;
/* Тени */
--shadow-glow: 0 0 30px oklch(55% 0.22 264 / 30%);
/* Анимации */
--animate-fade-in: fade-in 0.3s ease forwards;
--animate-slide-up: slide-up 0.4s ease forwards;
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slide-up {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: translateY(0);
}
}Использование в компонентах
---
// src/components/Hero.astro
---
<section class="bg-surface flex min-h-screen flex-col items-center justify-center px-6">
<div class="max-w-4xl text-center">
<h1 class="font-display text-on-surface text-6xl font-bold md:text-8xl">
Строим веб
<span class="text-primary">быстро</span>
</h1>
<p class="text-on-surface/70 mt-6 text-xl">
Astro + Tailwind CSS v4 = идеальный старт
</p>
<div class="mt-8 flex justify-center gap-4">
<a
href="/articles/"
class="bg-primary hover:bg-primary-dark rounded-lg px-6 py-3 font-semibold text-white transition-colors"
>
Читать статьи
</a>
</div>
</div>
</section>Dark Mode
Tailwind v4 поддерживает dark mode через медиа-запрос или класс:
/* Вариант 1: По системным настройкам (по умолчанию) */
@import 'tailwindcss';
/* Вариант 2: По классу body */
@import 'tailwindcss';
@variant dark (&:where(.dark, .dark *));<!-- Ручное переключение темы -->
<button id="theme-toggle">Тема</button>
<script>
const toggle = document.getElementById('theme-toggle');
toggle?.addEventListener('click', () => {
document.body.classList.toggle('dark');
localStorage.setItem(
'theme',
document.body.classList.contains('dark') ? 'dark' : 'light',
);
});
// Восстановить тему при загрузке
if (localStorage.getItem('theme') === 'dark') {
document.body.classList.add('dark');
}
</script>Кастомные утилиты через @utility
/* src/styles/global.css */
/* Переиспользуемые утилиты */
@utility btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
border-radius: var(--radius-md);
font-weight: 600;
transition: all 0.2s ease;
cursor: pointer;
}
@utility btn-primary {
background-color: var(--color-primary);
color: white;
&:hover {
background-color: var(--color-primary-dark);
}
}
@utility glow {
box-shadow: var(--shadow-glow);
}
@utility gradient-text {
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}Использование:
<a href="/articles/" class="btn btn-primary glow">Читать статьи</a>
<h1 class="gradient-text">Заголовок</h1>OKLCH цвета
Tailwind v4 использует OKLCH для цветов — перцептуально равномерное цветовое пространство. Темные/светлые варианты выглядят гармонично.
Container Queries
@container позволяет стилизовать компонент на основе размера его контейнера, а не
viewport. Идеально для карточек в разных лэйаутах.
Typography plugin
Класс prose форматирует HTML-контент статей: отступы, шрифты, ссылки, блоки кода.
Работает нативно в Tailwind v4.
Typography для статей
Для стилизации MDX-контента:
/* В Tailwind v4 typography встроена */
@import 'tailwindcss';
@plugin '@tailwindcss/typography';---
const { Content } = await render(article);
---
<article class="prose prose-invert prose-headings:font-display max-w-none">
<Content />
</article>Оптимизация для продакшна
Tailwind v4 автоматически удаляет все неиспользуемые классы при сборке. Дополнительных настроек не нужно — Oxide engine отслеживает все файлы автоматически.
npm run build
# Итоговый CSS обычно 15-40 KB (gzip: 5-12 KB)Частые вопросы
Как использовать классы Tailwind внутри JSX Preact-островов?
Без изменений — Tailwind v4 сканирует все .tsx, .jsx файлы автоматически.
Можно ли использовать Tailwind v3 и v4 одновременно? Нет. Миграция с v3 на v4 — в официальной документации Tailwind.
Tailwind v4 медленнее работает в dev-режиме? Наоборот — Oxide engine значительно быстрее благодаря Rust под капотом.
Итог
Tailwind CSS v4 + Astro — мощная связка. CSS-based конфигурация, нативные переменные и Oxide engine делают разработку быстрой и приятной. Подключение занимает 2 минуты, а результат — согласованная дизайн-система без единого лишнего CSS-правила в продакшне.
