Install Tailwind CSS with Astro

Setting up Tailwind CSS in an Astro project.

Create your project

Start by creating a new Astro project if you don't have one set up already. The most common approach is to use create astro.

Terminal

npm create astro@latest my-projectcd my-project

安装 Tailwind CSS

安装 @tailwindcss/vite 和其依赖项。

Terminal

npm install tailwindcss @tailwindcss/vite

配置 Vite 插件

在您的 Astro 配置文件中添加 @tailwindcss/vite 插件。

astro.config.mjs

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

Import Tailwind CSS

Create a ./src/styles/global.css file and add an @import for Tailwind CSS.

global.css

@import "tailwindcss";

Start your build process

Run your build process with npm run dev.

Terminal

npm run dev

Start using Tailwind in your project

Start using Tailwind's utility classes to style your content while making sure to import the newly created CSS file.

index.astro

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