DEV Community

Roby Cigar
Roby Cigar

Posted on • Updated on

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
Enter fullscreen mode Exit fullscreen mode

setelah itu kita mulai install boilerplate(semacam template) vue

vue create example-vue
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

npx tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode

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: [],
  }
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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')
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)