1. 安装
  2. 使用 AdonisJS 安装 Tailwind CSS

安装

使用 AdonisJS 安装 Tailwind CSS

在 AdonisJS 项目中设置 Tailwind CSS。

01

创建你的项目

首先创建一个新的 AdonisJS 项目,如果你还没有设置项目。最常见的方法是使用Create AdonisJS

终端
npm init adonisjs@latest my-project -- --kit=web
cd my-project
02

安装 Tailwind CSS

通过 npm 安装 @tailwindcss/vite 及其对等依赖项。

终端
npm install tailwindcss @tailwindcss/vite
03

配置 Vite 插件

@tailwindcss/vite 插件添加到你的 Vite 配置中。

vite.config.ts
import { defineConfig } from 'vite'
import adonisjs from '@adonisjs/vite/client'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [
tailwindcss(),
adonisjs({
// …
}),
],
})
04

导入 Tailwind CSS

./resources/css/app.css 中添加 @import,导入 Tailwind CSS 的样式。此外,告诉 Tailwind CSS 扫描你的 resources/views 目录以查找实用工具类。

app.css
@import "tailwindcss";
@source "../views";
05

启动你的构建过程

使用 npm run dev 运行你的构建过程。

终端
npm run dev
06

开始在你的项目中使用 Tailwind

确保你的编译后的 CSS 已包含在 <head> 中,然后开始使用 Tailwind 的实用工具类来设置你的内容样式。

home.edge
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>
版权所有 © 2025 Tailwind Labs Inc.·商标政策