Install Tailwind CSS with AdonisJS

Setting up Tailwind CSS in an AdonisJS project.

Create your project

Start by creating a new AdonisJS project if you don’t have one set up already. The most common approach is to use Create AdonisJS.

Terminal

npm init adonisjs@latest my-project -- --kit=webcd my-project

Install Tailwind CSS

Install @tailwindcss/vite and its peer dependencies via npm.

Terminal

npm install tailwindcss @tailwindcss/vite

Configure Vite Plugin

Add the @tailwindcss/vite plugin to your Vite configuration.

vite.config.ts

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

Import Tailwind CSS

Add an @import to ./resources/css/app.css that imports Tailwind CSS's styles. Additionally, tell Tailwind CSS to scan your resources/views directory for utilities.

app.css

@import "tailwindcss";@source "../views";

Start your build process

Run your build process with npm run dev.

Terminal

npm run dev

Start using Tailwind in your project

Make sure your compiled CSS is included in the <head> then start using Tailwind’s utility classes to style your content.

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>

Tailwind CSS 中文网（本网站）的目标是为中文开发者提供准确、及时的 Tailwind CSS 中文文档

Tailwind CSS 中文文档由本网站维护人员共同翻译，采用 MIT 开源协议发布

本网站与 tailwindcss.com 及 Tailwind Labs Inc. 并无从属关系

Tailwind 商标由 Tailwind Labs Inc. 所有