Tailwind v4

В Tailwind 4.0 планируется внести ряд серьезных изменений, включая новый плагин Vite, который повысит точность и производительность.

Помимо плагина Vite, в v4 будут внесены некоторые значительные изменения, в первую очередь переработка tailwind.config.mjs. Планируется продолжать поддерживать использование существующих конфигураций, но направить пользователей на использование начального файла .css в качестве файла конфигурации.

Настройка

Установите официальный плагин Vite от Tailwind
- npm
- pnpm
- yarn
npm install --save-dev tailwindcss@next @tailwindcss/vite@Next

pnpm add -D tailwindcss@next @tailwindcss/vite@next

yarn add --dev tailwindcss@next @tailwindcss/vite@next

Добавьте плагин в конфигурацию Astro и включите Lightning CSS

import { defineConfig } from 'astro/config'
import tailwindcss from '@tailwindcss/vite'

// https://astro.build/config
export default defineConfig({
  vite: {
    plugins: [tailwindcss()],
  },
})

Импортируйте CSS-файл, который импортирует Tailwind в ваши компоненты .astro.

Вместо того чтобы интеграция Tailwind в Astro импортировала для вас стандартный файл .css, вам придется сделать это самостоятельно. Либо импортируйте этот файл .css в общий макет, либо в отдельные компоненты/страницы .astro, в которых вы хотите использовать Tailwind.
src/styles/tailwind.css
```
@import 'tailwindcss';
```
src/layouts/Layout.astro
```
---
import "../styles/tailwind.css";
---
<!doctype html>
<html lang="en">
  <head>
    
  </head>
  <body>
    <article class="max-w-2xl">
      <slot />
    </article>
  </body>
</html>
```