使用 AdonisJS 安装 Tailwind CSS
在 AdonisJS 项目中设置 Tailwind CSS。
创建项目
如果还没有 AdonisJS 项目，先创建一个。最常见的做法是使用 Create AdonisJS。
Terminal
shellnpm init adonisjs@latest my-project -- --kit=web
cd my-project安装 Tailwind CSS
通过 npm 安装 @tailwindcss/vite 及其对等依赖。
Terminal
shellnpm install tailwindcss @tailwindcss/vite配置 Vite 插件
将 @tailwindcss/vite 插件加入 Vite 配置。
vite.config.ts
tsimport { defineConfig } from 'vite'
import adonisjs from '@adonisjs/vite/client'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [
tailwindcss(),
adonisjs({
// …
}),
],
})导入 Tailwind CSS
在 ./resources/css/app.css 中添加 @import 以导入 Tailwind CSS 的样式。另外，让 Tailwind CSS 扫描 resources/views 目录以查找工具类。
app.css
css@import "tailwindcss";
@source "../views";启动构建
使用 npm run dev 运行构建流程。
在项目中使用 Tailwind
确保已编译的 CSS 包含在 <head> 中，然后使用 Tailwind 的工具类为内容添加样式。
home.edge
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">
<!-- prettier-ignore -->
Hello world!
</h1>
</body>
</html>