Membuat Tema di Proyek Next.js dengan TailwindCSS

TailwindCSS, atau selanjutnya kita sebut Tailwind, menjadi topik hangat dalam pengembangan front-end. Tailwind memiliki teknik unik yang mengubah cara kita menggunakan CSS. Tailwind menggunakan teknik yang disebut utility-first yang berarti bahwa kita hanya perlu memodifikasi perubahan di kelas HTML daripada membuat atau memodifikasi file CSS.

Contoh penerapan utility-first pada Tailwind, sumber: https://tailwindcss.com

Tailwind tidak hanya mengubah cara kita menggunakan CSS, tetapi juga memudahkan untuk membangun tema yang dapat disesuaikan dan dukungan dark-mode yang merupakan topik dalam artikel ini.

Setup Tailwind di Proyek Next.js

1. Instalasi Tailwind

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

2. Tambahkan “./pages/**/*.{js,ts,jsx,tsx}” dan “./components/**/*.{js,ts,jsx,tsx}” ke dalam properti content pada file tailwind.config.js seperti gambar dibawah ini

3. Ganti seluruh isi dari file styles/globals.css dengan kode dibawah ini

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

Setelah proyek berhasil di-setup, ganti semua kode di file pages/index.js dengan kode di bawah ini

Jalankan dan buka localhost:3000 di browser, maka akan terlihat seperti gambar di bawah ini

Konfigurasi Tema

Kita akan menerapkan dua warna dibawah ini, primary adalah warna yang akan digunakan untuk warna latar belakang, dan label adalah warna yang digunakan untuk warna teks.

Untuk menambahkan warna-warna di atas ke dalam Tailwind, kita perlu mengubah file tailwind.config.js sebagai berikut:

Selanjutnya, untuk mengimplementasikan warna di atas, tambahkan nama tema yang sudah kita definisikan di atas ke dalam kelas HTML, di sini kita akan menambahkan bg-primary ke dalam class di tag div, dan text-label ke dalam class di tag h1.

Dan jika hasilnya sama dengan gambar di bawah ini berarti kita sudah berhasil mengimplementasikan tema di Tailwind, selamat!

Bonus: Implementasi Dark Theme

Catatan: Saya menggunakan sistem operasi macOS saat menguji proyek ini, di mana kita dapat dengan mudah mengubah mode warna OS melalui System Preferences > General. Untuk sistem operasi lain, silakan cari untuk cara-caranya.

Untuk mengimplementasikan dark theme, kita cukup mengubah properti primary dan label pada file tailwind.config.js sebagai berikut:

Terakhir, tambahkan dark:bg-primary-dark dan dark:text-label-dark ke dalam file pages/index.js sebagai berikut

Jalankan dan buka localhost:3000 di browser dan coba nyalakan dark mode, maka akan terlihat seperti gambar di bawah ini

Jika tampilan di atas muncul di browser Anda, selamat kita telah berhasil menerapkan dark theme di proyek Next.js menggunakan Tailwind!

Penutup

Dengan menggunakan Tailwind, kami dapat dengan mudah membuat dukungan mode gelap dan sangat dapat disesuaikan ke situs web hanya dengan beberapa konfigurasi kecil.

Sekian untuk artikel ini, jika suka dengan artikel ini, jangan lupa untuk clap dan bagikan artikel ini ke temanmu ya!

Sampai bertemu di artikel selanjutnya, semoga harimu menyenangkan!

Hyperjump is an open-source-first company providing engineering excellence service. We aim to build and commercialize open-source tools to help companies streamline, simplify, and secure the most important aspects of its modern DevOps practices.

Hyperjump