Instalasi Tailwind CSS di Nuxt JS SSR dengan Laravel

Setelah sebelumnya kita berhasil menyelesaikan instalasi project Nuxt JS, sekarang kita akan melanjutkan ke tahap berikutnya, yaitu menambahkan Tailwind CSS ke dalam project kita.

Tailwind CSS akan kita gunakan sebagai utility-first CSS framework untuk mempercantik tampilan antarmuka aplikasi. Dengan mengintegrasikan Tailwind, kita bisa menulis class-class yang lebih terstruktur dan efisien untuk membangun UI yang responsif dan modern.

Untuk memulainya, silakan jalankan perintah berikut di terminal project Nuxt:

npm install tailwindcss @tailwindcss/vite

Proses installasi ini selesai ditandai dengan adanya dependencies baru didalam file package.json.

Konfigurasi nuxt.config.ts

Setelah Tailwind CSS berhasil kita instal, langkah selanjutnya adalah melakukan konfigurasi agar Tailwind bisa dikenali dan digunakan dalam project Nuxt kita.

Silakan buka file nuxt.config.ts, lalu ubah isinya menjadi seperti berikut:

import tailwindcss from "@tailwindcss/vite";

export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: false },
  css: ['~/assets/css/main.css'],
  vite: {
    plugins: [
      tailwindcss(),
    ],
  },
  runtimeConfig: {
    public: {
      apiBase: "http://127.0.0.1:8000/api",
    },
  },
});

Mari kita bahas sedikit isi konfigurasinya:

• import tailwindcss from "@tailwindcss/vite" Baris ini bertugas untuk mengimpor plugin Tailwind agar bisa digunakan sebagai plugin Vite. Karena Nuxt menggunakan Vite sebagai bundler, maka ini menjadi cara yang efisien untuk mengintegrasikan Tailwind.
• css: ['~/assets/css/main.css'] Di sini kita menyebutkan file CSS utama kita yang nanti akan digunakan sebagai entry point untuk Tailwind. File main.css ini nantinya akan berisi direktif Tailwind seperti @tailwind base, @tailwind components, dan @tailwind utilities.
• vite.plugins: [tailwindcss()] Ini adalah tempat di mana plugin Tailwind dimasukkan ke dalam sistem build. Dengan ini, Vite akan memproses dan mengaktifkan seluruh fitur Tailwind saat development maupun production.
• runtimeConfig Bagian ini bersifat opsional, tapi penting untuk komunikasi antara Nuxt dan Laravel (sebagai backend API). Di sini kita menentukan URL base dari API yang akan kita gunakan.

Konfigurasi File Main CSS

Setelah kita melakukan konfigurasi di nuxt.config.ts, sekarang saatnya menyiapkan file CSS utama yang akan digunakan Nuxt untuk memuat semua utilitas dari Tailwind CSS.

1. Buat Folder assets/css

Pertama, silakan buat folder baru bernama assets di root project Nuxt teman-teman (jika folder ini belum ada). Kemudian, di dalam folder assets, buat lagi folder bernama css.

Jadi, struktur foldernya akan menjadi seperti ini:

nuxt-laravel/
├── assets/
│   └── css/

2. Buat File main.css

Setelah folder css selesai dibuat, sekarang tambahkan sebuah file baru bernama main.css di dalam folder tersebut. Maka struktur lengkapnya akan tampak seperti ini:

nuxt-laravel/
├── assets/
│   └── css/
│       └── main.css

3. Isi File main.css

Selanjutnya, kita akan mengisi file main.css yang sudah kita buat sebelumnya. Di dalam file ini, kita perlu menuliskan instruksi agar Tailwind CSS bisa dimuat ke dalam project.

Silakan isi file main.css dengan baris berikut:

@import "tailwindcss";

Baris ini berfungsi untuk mengimpor semua fitur utama Tailwind CSS, mulai dari style dasar hingga utility classes yang siap pakai. Ini adalah cara cepat dan praktis untuk mulai menggunakan Tailwind dalam aplikasi kita.

Catatan: Jika teman-teman ingin konfigurasi yang lebih eksplisit dan fleksibel, teman-teman juga bisa menggunakan pendekatan lain seperti:

@tailwind base;
@tailwind components;
@tailwind utilities;

Tapi untuk saat ini, pendekatan @import "tailwindcss"; sudah cukup untuk setup dasar.

Sampai di tahap ini, kita sudah berhasil menginstal dan mengintegrasikan Tailwind CSS ke dalam project Nuxt JS kita. Artinya, sekarang teman-teman sudah bisa mulai menggunakan berbagai class Tailwind seperti bg-blue-500, text-center, p-4, dan sebagainya untuk membangun tampilan antarmuka aplikasi teman-teman.