Instalasi Vue 3 dengan TailwindCSS
Roby Cigar
Posted on August 11, 2021
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
Posted on August 11, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.