Belajar Tailwind

Apa itu Tailwind?

Tailwind merupakan framework css seperti bootstrap namun lebih mengutamakan utility yang dikemas melalui class. Dan anda tidak harus membuat css external jika anda menggunakan tailwind. Anda bisa melihat dokumentasi resmi tailwind di sini.

Install Tailwind

1. Melalui CDN

Installasi tailwind bisa melalui CDN seperti yang bisa lakukan pada bootstrap. Caranya tinggal masuk ke website Tailwind dengan CDN lalu copy bagian script nya dan paste ke head html kita. SELAMAT TAILWIND BERHASIL ANDA INSTALL.

2. Melalui CLI

Installasi ini sangat disarankan ketika website anda sudah masuk ke tahap production dan siap direlease. Sehingga website anda tidak perlu melakukan request ke server tailwind. Tahapan menginstall tailwind menggunakan CLI sangat mudah, berikut tahapan yang bisa anda ikuti :

1. Install Node JS

Silahkan anda install node js terlebih dahulu. Karena nanti akan dibutuhkan ketika kita menginstall tailwind. Download disini. Selanjutnya tinggal lakukan installasi seperti biasa. Untuk mengecek apakah sudah terinstall atau belum, anda bisa masuk ke CMD lalu ketikan perintah node -v dan cek juga npm nya dengan cara npm -v. Jika tidak muncul seperti gambar di bawah anda bisa pergi ke sini node

2. Install Tailwind dengan CLI

Jika node dan npm sudah terpasang, sekarang silahkan pergi ke sini. Lalu anda ketikan perintah npm init. Jika sudah lalu lanjut ketikan perintah npm install -D tailwindcss. Jika sudah anda ketikan pertinah npx tailwindcss init. Jika semua berhasil maka di file explorer anda akan muncul folder dan file tambahan seperti ini. Selamat tailwind berhasil anda install namun belum bisa digunakan. success

3. Setup Tailwind

Agar anda bisa menggunakan tailwind ada beberapa konfigurasi yang harus anda lakukan. Pertama anda buat folder baru berupa src/css. Lalu buat file baru di folder tersebut dan masukan script berikut @tailwind base; @tailwind components; @tailwind utilities. Setalah itu buat folder assets/css Sehingga susunan folder akan berubah seperti ini css input

1. File package.json

Silahkan buka file package.json dan ubah di bagian script seperti berikut. Lalu jalankan perintah npm run dev. Dan akan terbentuk file baru di folder asset/css berupa style.css. package output

2. File tailwind.config.js

Silahkan buka file tailwind.config.js lalu lakukan perubahan seperti pada gambar beirkut config

3. Installasi berhasil

Selamat tailwind berhasil anda install sekarang anda bisa menggunakan utilities dari tailwind. Oh ya saat menjalankan perintah npm run dev ushakan terminal jangan di close supaya tailwind bisa melakukan perubahan secara realtime. Dan untuk file index.html bagian css externalnya anda arahkan ke assets/css/style.css. berhasil

Custom Utility

Pada tailwind kita bisa memodifikasi atau melakukan gruping terhadap utility yang kita tulis. Saya akan melakukan grouping pada utlitiy ketika membuat cover. Dan lihat perbedaannya before after Sangat terlihat jelas pada class section jadi lebih singkat penulisannya. Cara melakukan grouping sangat mudah anda hanya perlu ke file input.css dan lakukan perubahan seperti ini. proses