Modern Web Stack
Tailwind CSS

Tailwind CSS

Tailwind CSS adalah sebuah framework CSS yang sangat fleksibel dan dapat disesuaikan untuk membangun antarmuka pengguna (UI) modern secara cepat dan efisien. Framework ini memanfaatkan pendekatan utility-first, di mana kamu menggunakan kelas CSS kecil dan berfokus pada komposisi elemen untuk membangun desain yang kompleks.

Instalasi

  1. Instal tailwindcss melalui npm, dan buat file tailwind.config.js kamu.
npm install -D tailwindcss
npx tailwindcss init
  1. Tambahkan path ke semua file template kamu di file tailwind.config.js.
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
};
  1. Tambahkan direct @tailwind untuk setiap layer Tailwind ke file CSS utama kamu.
src/css/input.css
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. Jalankan tool CLI untuk memindai file template kamu untuk mencari class dan build CSS.
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Kamu juga dapat mempersingkatnya dengan membuat scripts pada file package.json.

package.json
"scripts": {
    "tw:run": "npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch",
    "tw:build": "npx tailwindcss -i ./src/input.css -o ./dist/output.css"
},

Kemudian jalankan di terminal:

npm run tw:run # menjalankan dengan mode watch
npm run tw:build # menjalankan build
  1. Tambahkan file CSS ../dist/output.css yang telah dikompilasi ke <head> dan mulailah menggunakan class-class utilitas Tailwind untuk style konten kamu.
src/index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="../dist/output.css" rel="stylesheet" />
  </head>
  <body>
    <h1 class="text-3xl font-bold underline">Hello world!</h1>
  </body>
</html>

Referensi: Get started with Tailwind CSS (opens in a new tab)

Konfigurasi Tambahan

Instal Ekstensi

Instal ekstensi Visual Studio Code Tailwind CSS IntelliSense, untuk mempermudah kamu dalam menggunakan Tailwind CSS.

tailwind-intellisense

Konfigurasi pada settings.json

Mengonfigurasi pada settings.json apabila ekstensi pada Tailwind CSS IntelliSense tidak terdeteksi atau berjalan. Dan menghilangkan warning pada file .css yang berisi,

  • @tailwind base;
  • @tailwind components;
  • @tailwind utilities;
settings.json
"tailwindCSS.includeLanguages": {
  "html": "html",
  "javascript": "javascript",
  "css": "css"
},
"editor.quickSuggestions": {
  "strings": true
},
"files.associations": {
  "*.css": "tailwindcss"
}
BabelVite