Instalasi Vue 3 dengan TailwindCSS

Jika belum install vue-cli saya sarankan diinstall terlebih dahulu menggunakan command.

yarn global add @vue/cli
# atau
npm install -g @vue/cli

setelah itu kita mulai install boilerplate(semacam template) vue

vue create example-vue

Nanti akan ada beberapa opsi, kalian tinggal baca2 saja lalu pencet enter. (kalau kalian bingung gatau mau milih apaan, tinggal pilih pilihan yang tulisannya default ajah)

setelah itu install tailwind

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Jalankan command berikut maka akan muncul file bernama tailwind.config.js dan postcss.config.css

npx tailwindcss init -p

Buka file tailwind.config.js dan ganti degan

  module.exports = {
    purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

Setelah itu buat file bernama index.css di folder src dan tambahkan 3 line berikut ke file css tersebut

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

Kaitkan file index.css dengan main.js

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

createApp(App).mount('#app')

Sumber:
https://tailwindcss.com/docs/installation#installing-tailwind-css-as-a-post-css-plugin