Cara Memasang dan Menggunakan Tailwind CSS di Aplikasi Next.js
Table of content:
Jika Anda ingin menata aplikasi Anda dengan kerangka kerja yang cepat, fleksibel, dan andal, Tailwind CSS adalah pilihan yang bagus. Tailwind adalah framework CSS yang membantu Anda mendesain komponen web kustom. Anda dapat mendesain komponen tanpa harus bolak-balik antara file HTML dan CSS.
Tidak seperti Bootstrap, Tailwind tidak memiliki kelas yang ditentukan sebelumnya. Sebagai gantinya, Anda dapat menyesuaikan sendiri. Dengan Tailwind, Anda dapat membuat komponen kompleks dengan utilitas, fungsi, dan arahan primitif.
Pelajari cara menginstal dan menggunakan Tailwind untuk membuat antarmuka pengguna yang luar biasa di project Next.js Anda.
Instal Tailwind CSS di Next.js
Mulailah dengan menginstal Tailwind di aplikasi Next.js. Prosesnya mirip dengan menginstal Tailwind di aplikasi React, dengan sedikit perbedaan dalam proses konfigurasinya.
Baca Juga:
Pergi ke Instalasi Tailwind CSS halaman. Lalu pergi ke Panduan Kerangka bagian dan pilih Next.js. Bagian ini berisi semua petunjuk yang Anda perlukan untuk menyiapkan Tailwind di project Next.js Anda.
Untuk menginstal Tailwind melalui npm, pengelola paket JavaScript, jalankan dua perintah terminal ini:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -pPerintah-perintah ini membuat dua file konfigurasi bernama penarik angin.config.js Dan postcss.config.js di folder proyek root. File-file ini menunjukkan bahwa TailwindCSS berhasil diinstal. Anda juga dapat memasang Tailwind CSS melalui Tailwind CLI atau sebagai plugin PostCSS.
Konfigurasi Template
Setelah penginstalan, Anda harus mengonfigurasi jalur template yang disediakan dalam panduan penginstalan ke file konfigurasi aplikasi Anda. Tambahkan kode berikut ke file tailwind.config.js:
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx}",
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",“./src/**/*.{js,ts,jsx,tsx}”,
],
theme: {
extend: {},
},
plugins: [],
}
Tambahkan Arahan Tailwind ke Aplikasi
Selanjutnya, tambahkan arahan Tailwind berikut ke file CSS Aplikasi Anda. Ini adalah file bernama global.css. Anda harus menghapus konten file global.css dan menambahkan arahan Tailwind.
@tailwind base;@tailwind components;
@tailwind utilities;
Jalankan Proses Pembuatan
Sekarang, di terminal, jalankan alat CLI dengan perintah berikut:
npm run devPerintah ini memindai file template Anda untuk kelas dan membangun CSS Anda. Ini akan membuka port bagi Anda untuk melihat browser.
Sekarang, jika Anda menavigasi ke server di http://localhost:3000 Anda akan melihat aplikasi Anda. Anda akan melihat sedikit perubahan pada konten. Ini menunjukkan bahwa proses penginstalan berhasil, dan Tailwind CSS sudah aktif.
Gunakan Tailwind di Proyek
Selanjutnya, mari kita uji fitur Tailwind CSS dengan menerapkan kelas ke proyek Anda. Misalnya, Anda memiliki aplikasi dengan teks “Hello Tailwind”. Anda ingin memberikan warna merah dengan latar belakang biru muda.
Membuat Beranda.tsx file kemudian tambahkan kode berikut:
export default function Home() {
return (
<body className="bg-blue-300">
<h1 className='text-red-900'>Hello Tailwind CSS</h1>
</body>
);
} Sekarang, saat Anda menavigasi ke browser, Anda akan melihat teks berubah menjadi merah, dan latar belakangnya biru.
Anda dapat menjelajahi fitur Tailwind CSS lainnya untuk memberi gaya pada komponen lain aplikasi Anda. Pengubah bersyarat memungkinkan Anda membuat status reaktif seperti arahkan kursor dan fokus. Anda juga dapat menyesuaikan halaman Anda ke mode gelap dan terang sesuai dengan preferensi pengguna.
Keuntungan Menggunakan Tailwind CSS
Dibuat oleh Adam Wathan pada tahun 2017, Tailwind CSS berbeda dari library CSS lainnya dalam banyak hal. Ini memiliki nol run-time, membuatnya secepat kilat. Dan mudah dipasang. Tailwind memindai semua file HTML dan komponen JavaScript untuk nama kelas di aplikasi Anda. Ini kemudian menghasilkan gaya yang sesuai yang mendesain elemen.
Tailwind CSS memungkinkan Anda merancang komponen kompleks dari utilitas primitif. Anda dapat menggunakan kembali gaya di seluruh komponen dan menggunakan pengubah untuk mendesain UI yang responsif. Gunakan langkah-langkah di sini untuk mempelajari cara memasang dan menggunakan Tailwind CSS untuk menyesuaikan aplikasi yang cocok dengan merek Anda.
Artikel Terkait
