Установите Tailwind CSS с помощью Astro

Настройка Tailwind CSS в проекте Astro.

Создайте свой проект

Начните с создания нового проекта Astro, если у вас его еще нет. Наиболее распространенный подход — использовать create astro.

Terminal

npm create astro@latest my-projectcd my-project

Установите Tailwind CSS

Установите @tailwindcss/vite и его зависимости через npm.

Terminal

npm install tailwindcss @tailwindcss/vite

Настройте плагин Vite

Добавьте плагин @tailwindcss/vite к плагинам Vite в файле конфигурации Astro.

astro.config.mjs

// @ts-checkimport { defineConfig } from "astro/config";import tailwindcss from "@tailwindcss/vite";// https://astro.build/configexport default defineConfig({  vite: {    plugins: [tailwindcss()],  },});

Импортируйте Tailwind CSS

Создайте файл ./src/styles/global.css и добавьте @import для Tailwind CSS.

global.css

@import "tailwindcss";

Начните процесс сборки

Запустите процесс сборки с помощью npm run dev.

Terminal

npm run dev

Начните использовать Tailwind в своем проекте

Начните использовать классы утилиты Tailwind для стилизации своего контента, не забыв при этом импортировать недавно созданный файл CSS.

index.astro

---import "../styles/global.css";---<h1 class="text-3xl font-bold underline">  Hello world!</h1>