Install TailwindCSS di Vue 3

1. Pertama install tailwind dengan dependensi-nya dengan perintah berikut.

npm install -D tailwindcss postcss autoprefixer

2.Lalu buat file confignya dengan perintah berikut

npx tailwindcss init -p

3.Lalu lakukan config tailwind sebagai berikut di file tailwind.config.js
Ubah

content: [],

Menjadi

content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],

4.Buatlah sebuah file src/assets/css/tailwind.css lalu isikan sebagai berikut

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

5.Import tailwind.css di file main.js dengan code berikut

import '@/assets/css/tailwind.css'; 

6.Buka file App.vue dan ubah semua isinya dengan code berikut

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

<script>

export default {
  name: 'App',
}
</script>

7.Jalankan perintah berikut

npm run serve

8.Lalu buka di browser, maka hasilnya seperti berikut