Instalasi Tailwind CSS pada NextJS dengan Menambahkan Prefix
Pengertian
Tailwind CSS adalah sebuah framework CSS yang dirancang untuk mempercepat pengembangan web dengan menyediakan utility classes yang dapat digunakan langsung dalam HTML. Berbeda dengan pendekatan tradisional di mana kita harus menulis class CSS khusus untuk setiap elemen dalam proyek.
Instalasi
Ada dua cara untuk melakukan instalasi Tailwind CSS, diantaranya dengan menggunakan CDN dengan memasukkan link CDN dari Tailwind, atau dengan menggunakan CLI. Dalam project NextJS, kita dapat menggunakan metode CLI untuk melakukan instalasi Tailwind CSS.
Tutorial ini mengasumsikan anda belum membuat project NextJS.
Setelah anda membuka direktori untuk project Next JS, buka terminal dan ketikkan:
> npx create-next-app
Kemudian, anda diminta untuk mengisi detail project:
√ What is your project named? … my-app √ Would you like to use TypeScript? … No / Yes √ Would you like to use ESLint? … No / Yes
Selanjutnya anda akan ditanya apakah akan menggunakan Tailwind di dalam project, pilih opsi Yes
? Would you like to use Tailwind CSS? » No / Yes
Kemudian anda dapat melanjutkan pengisian detail project sesuai kebutuhan
√ Would you like to use src/ directory? … No / Yes
√ Would you like to use App Router? (recommended) … No / Yes
√ Would you like to customize the default import alias (@/*)? … No / Yes
Setelah instalasi selesai, selamat Tailwind CSS telah berhasil diinstall ke dalam project Next JS anda.
Konfigurasi Prefix
Prefix memungkinkan kita untuk menambahkan awalan custom untuk setiap class Tailwind. Ini sangat penting apabila project telah mengandung class dari framework lain atau class yang telah kita buat sendiri untuk menghindari konflik antar class.
Dalam artikel ini, kita akan mengkonfigurasi Tailwind dengan prefix tw-
Dalam direktori project anda, buka file tailwindcss.config.js
Di dalam file tailwind.config.js tambahkan prefix: “tw-” pada config object.
import type { Config } from "tailwindcss";
const config: Config = {
content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}",
],
prefix: "tw-"
}
Simpan perubahan, kemudian anda sudah dapat mulai menggunakan prefix pada setiap class Tailwind.
Kesimpulan
Sampai di sini kita telah mempelajari cara instalasi Tailwind CSS pada Next JS serta konfigurasi prefix untuk menghindari konflik dengan existing class. Instalasi Tailwind CSS pada Next JS sangat mudah dilakukan karena telah terintegrasi dengan create-next-app sehingga mempercepat proses development. Untuk informasi lebih lanjut, anda dapat mengakses dokumentasi Tailwind disini
Author: Dede Kurniawan