Install TailwindCSS di Nuxt3 dengan Mudah

Nuxt3 di release dengan beberapa fitur terbaru yang berbeda dari versi sebelumnya, beberapa fitur diantaranya;

Baca juga : Cara Mudah Menggunakan TailwindCSS

• New CLI - nuxi

• Nuxt Nitro

• Native TypeScript support

• Multiple rendering modes (SSR, CSR, SSG)

• Mendukung Vue3

• Bundling with both Vite and Webpack 5
  

Info selengkapnya tentang Nuxt3

Jika anda ingin langsung menggunakan file nuxt3 yang sudah saya install tailwindcss kamu bisa klik link ini

Mebuat Project Baru Nuxt3

Buat project baru nuxt dengan CLI baru nuxt dengan commands di bawah ini;

npx nuxi init nuxt3tailwind // sesuaikan dengan nama apps yang akan kamu buat

tunggu hingga proses download dan install selesai.

kemudian masuk ke dalam folder 'nuxt3tailwind' atau bisa menggunakan perintah

cd nuxt3tailwind

Install dependencies yang di butuhkan, anda bisa menggunakan salah satu commands di bawah ini;

yarn install
atau
npm install

Kemudian jalankan servernya , jika anda install menggunakan 'npm install' lebih baik start servernya menggunakan 'npm run dev' atau misalnya anda menggunakan 'yarn' anda bisa menggunakan 'yarn dev'.

server akan berjalan pada port 3000 jadi anda bisa mengaksesnya dengan http://localhost:3000 atau menggunakan http://ipaddress:3000 .

Install TailwindCSS kedalam project Nuxt3

Perhatikan bahwa Nuxt 3 masih dalam versi beta, yang berarti bahwa segala sesuatunya cenderung berubah. Teknik untuk membuat Tailwind bekerja dapat berubah sehingga instruksi yang akan saya jelaskan di bawah ini didasarkan pada apa yang sedang bekerja pada saat menulis posting ini.

install tailwind menggunakan terminal, jalankan commands di bawah ini.

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

enter dan tunggu hinggal selesai. kemudian buat file konfigurasi Tailwind dengan command di bawah ini;

npx tailwindcss init

enter dan perhatikan di dalam root project anda, akan membuat file tailwind.config.js

kemudian buat file css dengan jalur letak seperti ini 'assets/css/tailwind.css' kemudian isi file dengan text seperti di bawah ini;

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

buka file nuxt.config.ts dan edit menjadi seperti di bawah agar 'assets/css/tailwind.css' dapat ditemukan.

import { defineNuxtConfig } from "nuxt3";

export default defineNuxtConfig({
  css: ["~/assets/css/tailwind.css"],
  build: {
    postcss: {
      postcssOptions: {
        plugins: {
          tailwindcss: {},
          autoprefixer: {},
        },
      },
    },
  },
});

Menurut arahan ini , disarankan untuk mengimpor Tailwind di dalam App.vue file daripada menggunakan cssprop seperti yang kita lakukan pada cuplikan di atas.

Jadi sebagai alternatif, Anda dapat membuka App.vuefile Anda , membuat <script>tag untuk mengimpor file CSS Anda seperti:

<script lang="ts" setup>
import './assets/css/tailwind.css'
</script>

oke selanjutnya anda sudah bisa menggunakan class yang di miliki tailwindcss untuk membuat tampilan menjadi lebih cantik .

Untuk menggunakan fress project nuxt3 paired tailwindcss anda bisa mendownloadnya di github saya .

Terimakasih.