Instalar Tailwind CSS con AdonisJS

Configuración de Tailwind CSS en un proyecto AdonisJS.

Crear tu proyecto

Comienza creando un nuevo proyecto AdonisJS si aún no tienes uno configurado. El enfoque más común es utilizar Create AdonisJS.

Terminal

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

Instalar Tailwind CSS

Instala @tailwindcss/vite y sus dependencias directas a través de npm.

Terminal

npm install tailwindcss @tailwindcss/vite

Configurar el plugin de Vite

Añade el plugin @tailwindcss/vite a tu configuración de 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({      // …    }),  ],})

Importar Tailwind CSS

Añade un @import a ./resources/css/app.css que importe los estilos de Tailwind CSS. Además, indícale a Tailwind CSS que escanee tu directorio resources/views en busca de utilidades.

app.css

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

Iniciar tu proceso de compilación

Ejecuta tu proceso de compilación con npm run dev.

Terminal

npm run dev

Comenzar a usar Tailwind en tu proyecto

Asegúrate de que tu CSS compilado esté incluido en el <head> y luego comienza a usar las clases de utilidad de Tailwind para dar estilo a tu contenido.

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>