Tutorial Menggunakan TailwindCSS pada Project HTML

Tailwind merupakan framework css yang tidak mendefinisikan class name secara spesifik atau bisa disebut dengan low-level styling, bukan pre-built component seperti bootstrap, zurb foundation, atau framework css yang telah kita kenal sebelumnya. Jadi, ketika kita menggunakan tailwindcss berasa sedang bekerja dengan css secara langsung namun menggunakan class yang reusable.

Kelebihannya yaitu kita bisa melakukan desain website kita dengan lebih custom dan bebas, tidak perlu khawatir apakah framework css kita sudah menyediakan atau belum. Tetapi, kekurangannya yaitu kita harus membuat 'komponen' desain kita sendiri. Jadi, kita harus memiliki pemahaman dasar css yang cukup baik jika ingin menggunakan tailwindcss ini.

Laravel

Mungkin sebagian besar dari kita mengetahui tailwindcss ini karena kedekatannya dengan environment laravel. Sejak tailwindcss rilis, laravel 7.x di fresh installationnya telah membawa bundling tailwind sebagai css di scaffold authentication. Di laravel 8, jetstream secara default juga menggunakan tailwind.

Jadi memang tailwind ini sangat dekat dengan environment laravel.

Tanpa Laravel

Jika kita ingin menggunakan tailwindcss di project Laravel, langkah yang harus dilakukan cukup mudah. Namun, jika kita ingin menggunakan di project HTML biasa, perlu sedikit lebih banyak konfigurasi yang harus dilakukan.

Install npm atau yarn

Pastikan di komputer atau laptop kita telah terinstall salah satu package manager dari nodejs, bisa npm ataupun yarn. Jika belum, kita bisa merujuk ke official website dari nodejs ataupun yarn untuk langkah-langkah instalasinya. Di tutorial ini saya menggunakan npm.

Inisialisasi Project

Buat folder atau direktori untuk projek kita, lalu pergi ke folder tersebut dan ketikkan

npm init

Kemudian tekan enter, akan muncul beberapa pertanyaan. Sesuaikan dengan apa yang kita inginkan.

Jika sudah, file package.json akan tercreate dengan isian kurang lebih seperti ini

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "The project description will appear here.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "yourname@email.com",
  "license": "MIT"
}

Install Package

Langkah selanjutnya yaitu, kita harus menginstall beberapa package termasuk tailwindcss ini dengan npm.

npm install -D tailwindcss@latest tailwindcss-cli@latest postcss@latest autoprefixer@latest

Konfigurasi

Tunggu proses instalasi tersebut hingga selesai, jika sudah selanjutnya kita harus menambahkan tailwind sebagai plugins dari postcss.

Buat file `postcss.config.js` di root folder project kita dan tambahkan kode berikut ini

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    }
}

Lalu, kita buat file konfigurasi untuk tailwind. Jalankan perintah berikut ini cmd (command prompt) atau terminal kita.

npx tailwindcss init

Perintah tersebut akan membuat file `tailwind.config.js` dengan isinya sepert ini.

module.exports = {
    purge: [],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [],
}

Kita perlu menambahkan semua direktori dan ekstensi file html kita di bagian `purge` agar tailwindcss membuang (purge) classname yang tidak digunakan di file html kita.

...
    purge: [
        './*.html',
    ]
...

Langkah selanjutnya yaitu, buat file source css untuk import tailwind. Misalkan kita letakkan di `src/tailwind.css` dan masukkan kode seperti ini.

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

Selanjutnya, kita harus mengedit file package.json kita untuk keperluan build development dan production dari tailwindcss. Tambahkan script seperti ini di bagian `scripts`.

...
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "npx tailwindcss-cli@latest build ./src/tailwind.css -o ./css/tailwind.css",
    "prod": "NODE_ENV=production npx tailwindcss-cli@latest build ./src/tailwind.css -o ./css/tailwind.css"
  },
...

Dengan menambahkan kode tersebut kita hanya perlu menjalankan perintah `npm run dev` dan `npm run prod`

• npm run dev : berfungsi untuk build source tailwind menjadi classname yang bisa dibaca oleh browser
• npm run prod : sama seperti npm run dev namun bedanya yaitu tailwind akan membuang (purge) class name yang tidak digunakan di file html kita.

Mulai Styling

Langkah untuk instalasi dan konfigurasi tailwindcss sudah selesai, selanjutnya kita bisa mulai menggunakan tailwindcss ini di project kita. Namun, sebelum itu kita harus menjalan perintah

npm run dev

Tunggu hingga proses selesai, dan file css/tailwind.css akan terbuat secara otomatis dan di sinilah semua class name dari src/tailwind.css akan dihasilkan, file yang dihasilkan mungkin akan cukup besar yaitu sekitar 3,8 Mb, namun jangan khawatir, file tersebut akan mengecil jika kita di mode production dengan menjalankan perintah `npm run prod`.

Selanjutnya, kita bisa menggunakan file css/tailwind.css di project html kita. Misalkan kita membuat file index.html seperti ini, untuk membuat tiga lingkaran berjajar

https://gist.github.com/ibnuhalimm/79ad891527d7757a12aeccf5b793a093

Lalu, jika kita di production mode atau ingin membuang class name yang tidak digunakan di file tersebut, kita tinggal menjalankan perintah

npm run prod

Kesimpulan

Tailwindcss merupakan low-level styling css framework yang bisa kita gunakan dengan sangat fleksibel dalam membuat user-interface website.

Semoga bermanfaat, jangan lupa untuk melihat postingan saya yang lain. 

---

Happy coding!!!