Tailwind CSS adalah sebuah framework CSS yang bertujuan untuk mempercepat proses pengembangan tampilan (frontend development) pada website atau aplikasi web. Framework ini menggunakan konsep "utility-first" dimana setiap kelas CSSnya memiliki fungsinya masing-masing sehingga memudahkan pengguna dalam menentukan styling atau tampilan yang diinginkan.
Menggunakan Tailwind CSS pada ReactJS
Dalam Tailwind CSS, kita tidak perlu menulis CSS dari awal karena sudah tersedia berbagai kelas yang dapat digunakan untuk membuat layout, typography, border, padding, dan margin secara cepat. Framework ini juga memiliki fitur responsive yang memungkinkan kita untuk menyesuaikan tampilan website dengan ukuran layar yang berbeda-beda.
Menginstall Next JS sebagai framework ReactJS
npx create-next-app@latest my-project --typescript --eslint
cd my-project
Script tersebut akan menginstall sebuah framework bernama NextJS yang dimana merupakan sebuah framework untuk library ReactJS. Setelah berhasil terinstall maka jangan lupa untuk masuk ke folder yang sudah dibuat menggunakan command “cd”.
Menginstall Tailwind CSS
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Setelah masuk ke dalam folder NextJS, masukkan script di atas ke dalam terminal atau CMD dan tunggu hingga proses installasi Tailwind CSS selesai. Jika proses installasi selesai maka akan muncul beberapa file baru seperti tailwind.config.js
Melakukan konfigurasi Tailwind CSS
content: [
"./app/**/*.{js,ts,jsx,tsx}",
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
// Or if using `src` directory:
"./src/**/*.{js,ts,jsx,tsx}",
],
Script di atas bertujuan untuk melakukan konfigurasi template path yang artinya kita menentukan file apa saja yang akan menggunakan kelas-kelas Tailwind CSS pada folder NextJS. Sederhananya script tersebut berguna agar kita bisa menggunakan Tailwind CSS pada setial file yang ada dalam folder.
@tailwind base;
@tailwind components;
@tailwind utilities;
Kemudian kamu perlu untuk menambahkan beberapa script dari Tailwind CSS agar bisa berjalan pada file yang telah dibuat. Kamu tinggal melakukan copy script di atas dan paste script tersebut ke dalam file yang bernama “global.css” yang terletak pada folder “src”.
Mencoba Menggunakan Tailwind CSS
Setelah semua proses installasi selesai kita bisa langsung mencoba melakukan styling dengan Tailwind CSS. Untuk bisa melihat hasil perubahannya jangan lupa untuk melakukan run pada framework NextJS dengan script di bawah ini.
npm run dev
Setelah program berjalan kita perlu membuat sebuah komponen yang memiliki teks dengan ukuran “h1” kamu bisa mengikutin script berikut ini.
Setelah komponen telah selesai dibuat kita akan mengedit teks tersebut menggunakan Tailwind CSS dengan cara menambahkan “className” pada tag “h1” dan kita akan mengubah warna dan ketebalan dari teks tersebut.
Untuk menggunakan Tailwind CSS kita perlu menuliskan “className” pada setiap tag yang ingin kita berikan style Tailwind CSS, “className” berguna untuk menampung script dari Tailwind CSS yang akan merubah style dari tag yang akan diubah. Script ‘font-Bold text-red-500’ artinya kita merubah teks “Hello world” dengan tag “h1” dengan ketebalan bold dan dengan warna merah.
Kesimpulan
Salah satu kelebihan Tailwind CSS adalah mudahnya kustomisasi. Kita dapat menyesuaikan kelas-kelas yang tersedia dengan mengubah variabel atau menambahkan kelas sendiri. Selain itu, Tailwind CSS juga memiliki dokumentasi yang lengkap dan komunitas yang besar sehingga mudah untuk mencari solusi atau dukungan ketika mengalami kendala.
Dengan demikian, Tailwind CSS menjadi salah satu pilihan yang populer untuk meningkatkan efisiensi dan kualitas dalam pembuatan tampilan website atau aplikasi web. Untuk mempelajari Tailwind CSS kamu dapat mengikuti kelas gratis Tailwind CSS dari Build With Angga atau kamu bisa mempelajari styling pada Tailwind CSS lebih lanjut dan kamu juga bisa mempelajari dasar ReactJS agar bisa mengimplementasikan Tailwind CSS pada ReactJS
