Cara Install tailwindcss Di Visual Studio Code

Pertama Buka Visual Studio Kode

Lalu Buka Terminal Lalu Ketik npm create vite@latest ./ -- --template react

Akan Muncul Gambar Sebagai Berikut 

Lalu Ketik Perintah Npm Install Maka Akan Terlihat Seperti Gambar Berikut

Keluar Dari Server Lalu

Selanjutnya Ketik npm install -D tailwindcss postcss autoprefixer

Lalu Klik npx tailwindcss init -p

Karna Saat Klik Klik npx tailwindcss init -p Terjadi Eror Seperti Berikut :

Itu Karna Tailwind css sudah rilis untuk versi 4. Secara default install library tailwind akan menginstal library tersebut. Jadi binary tailwindcss sudah tidak digunakan lagi.

Berikut cara memperbaikinya supaya sesuai dengan yang ada di video. Pertama uninstall dulu tailwind v4 dan dependensinya.

npm uninstall @tailwindcss/cli @tailwindcss/postcss @tailwindcss/vite postcss

Setelah itu install tailwind v3 Dengan Mengetik Perintah 

npm install --save-dev tailwindcss@3

Maka Silahkan Kembali Ketikkan npx tailwindcss init -p lalu enter Maka bisa dilihat hasilnya sebagai berikut :

Lalu Jalankan Server Dengan Mengetik run npm Dev Di Folder Frontend

Masukkan Kode Ini

/** @type {import('tailwindcss').Config} */

export default {

  content: [

    "./index.html",

    "./src/**/*.{js,ts,jsx,tsx}",

  ],

  theme: {

    extend: {},

  },

  plugins: [],

}

Ke File Tailwind.config.js

Dan File Ini 

@tailwind base;

@tailwind components;

@tailwind utilities;

Ke File Index.css

Dan File Ini

import { BrowserRouter } from "react-router-dom";

const App = () => {

  return (

    <div>

      <h1 className='tex-3xl font-bold underline'>Hello World</h1>

    </div>

  )

}

export default App

Ke App.jsx Oh Ya Anda Harus Mengetik Kata rafce di editor nya kata rafce ini muncul kalo anda sudah menginstall ekstensi ES7 React snippets extension di vs studio anda, jika belum ada anda harus menginstalnya terlebih dahulu

setelah itu anda pergi ke npm run dev dan klik alamat localhostnya biasanya seperti ini http://localhost:5173/ lalu pergi kebrowser dan ketik localhostnya maka akan muncul dibrowser anda Hello World seperti tampilan berikut ini

Nah Selamat Anda Sudah Bisa Menginstall tailwindcss Di Visual Studio Code