Cara Setup TailwindCss Dengan Menggunakan Vuejs - CRUDPRO
Home  ›  vuejs

Cara Setup TailwindCss Dengan Menggunakan Vuejs

Written By Thursday, June 22, 2023
Cara Setup TailwindCss Dengan Menggunakan Vuejs

Pertama, buat project vue dengan vitejs menggunakan perintah berikut:

npm create vite@latest
npm create vite@latest

## I use pnpm to reduce the disk space. you can choose which ever you like.
pnpm create vite

Ini akan menanyakan beberapa pertanyaan, jawab mereka dan pilih Vue, TypeScript karena saya menggunakannya di sini, tetapi Anda dapat memiliki opsi dan mengikuti perintah yang diberikannya pada akhirnya untuk menginstal dependensi.

direktori project Anda dibuka di terminal install tailwindcss dengan perintah ini:

npm install -D tailwindcss postcss autoprefixer

## then this command to generate tailwindcss tailwind.config.cjs
npx tailwindcss init -p

Kemudian ganti konten tailwind.config.cjs dengan ini

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Sekarang hapus konten style.css di root project Anda dengan ini:

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

langkah terakhir, menguji apakah tailwindcss berfungsi dengan baik

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

Dan semua harus bekerja dengan baik. jika punya Anda tidak berfungsi, beritahu saya di komentar dan saya akan menghubungi Anda sesegera mungkin.

Terima kasih sudah membaca, mudah-mudahan Anda menikmati dan belajar.