Tutorial Menggunakan TailwindCSS pada Project HTML

Framework css yang sedang populer dan bisa menggantikan bootstrap.

Feb 23, 2021
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 menggunakan laravel yang belum menggunakan tailwind, instalasinya sangat mudah. Instalasinya via npm dan beberapa konfigurasi saja.

Tetapi apakah Anda ingin menggunakan tailwindcss ini di project yang bukan laravel atau di project html biasa? Tentu bisa. Mari kita mulai langkah-langkahnya.

 

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. Untuk instalasi di project kita dan ingin melakukan beberapa custom harus menggunakan npm.

 

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

---

Happy coding!!!

Bagikan :