Cara menggunakan framework Tailwind CSS

Apa itu Tailwind CSS ?

Tailwind CSS adalah suatu framework css yang menggunakan model "utility-first" yang didalam nya terdapat banyak class, dan sebuah framework yang dapat membuat kita dengan cepat membangun website yang modern tanpa meninggalkan file HTML bahkan tidak perlu menyentuh file css.

Instalasi & Konfigurasi

Menggunakan CLI (Command Line Interface)
Menggunakan PostCSS

Menggunakan CDN

<script src="https://cdn.tailwindcss.com"></script>

Kita akan menginstal menggunakan CLI

1. Pertama, kita harus menginstal NPM (Node Package Module) dan NodeJS

Download

2. Jika kita sudah menginstal Node.JS maka akan otomatis terinstal juga NPM nya, mari kita cek dengan mengetikkan

npm -v

node -v

3. Selanjutnya buka Visual Studio Code, buat folder project baru, buka terminal atau CTRL + `

npm install -D tailwindcss

4. Kemudian ketikkan

npx tailwindcss init

5. Akan terbentuk file dan folder baru

6. Selanjutnya buat folder baru dengan nama "src" yang didalamnya terdapat file "input.css"

src/

└── input.css

src/ └── input.css src/ └── input.css

7. Buka kembali terminal ketikkan perintah

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

8. Akan terbentuk folder baru dengan nama dist yang didalamnya terdapat file output.css, file ini yang nantinya akan kita koneksikan pada file index.html