Cara Menggunakan Tailwind v4 di Nuxt 3

Jika ingin menggunakan Tailwind di Nuxt, mungkin kalau kita google, akan diarahkan untuk install modul @nuxtjs/tailwindcss.

Tapi kalau kita lihat di package.json modul tersebut di Github, kita bisa lihat bahwa modul tersebut hanya mendukung Tailwind v3.

Lantas bagaimana kalau kita ingin menggunakan Tailwind v4 di Nuxt 3? Ternyata jawabannya cukup sederhana, kita cukup install Tailwind dengan Vite, seperti yang ada di dokumentasi Tailwind.

Berikut adalah langkah-langkahnya:

1. Install Nuxt 3

npm create nuxt test-nuxt-tailwind
cd test-nuxt-tailwind

2. Install Tailwind v4

npm install tailwindcss @tailwindcss/vite

3. Ubah file nuxt.config.ts menjadi seperti ini:

import tailwindcss from '@tailwindcss/vite';

export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  css: ['~/assets/css/main.css'],
  vite: {
    plugins: [tailwindcss()]
  }
});

4. Buat file ./assets/css/main.css dan isi dengan:

@import 'tailwindcss';

5. Ubah file ./app.vue menjadi seperti ini:

<template>
  <h1 class="text-3xl font-bold underline">Hello world!</h1>
</template>

6. Jalankan proses build

npm run dev