Tailwind CSS adalah kerangka kerja CSS utilitas pertama yang memungkinkan pengembang merancang komponen web khusus tanpa beralih ke file CSS. Dalam tutorial ini, Anda akan belajar cara menginstal Tailwind CSS di React dan bagaimana Anda dapat menggunakannya untuk membangun halaman React sederhana.

Mengapa Menggunakan Tailwind CSS?

Sudah ada banyak CSS kerangka kerja yang menyederhanakan cara pengembang mendesain halaman web. Jadi mengapa Anda harus menggunakan Tailwind CSS?

Kerangka kerja CSS seperti Bootstrap dan Foundation adalah kerangka kerja berpendirian, artinya mereka memberi pengembang komponen yang telah ditentukan sebelumnya yang memiliki gaya default. Ini membatasi penyesuaian dan kreativitas, dan Anda berakhir dengan situs web yang terlihat agak umum.

CSS Angin Belakang, bagaimanapun, adalah kerangka kerja utilitas-pertama yang memberi Anda kontrol kreatif untuk membuat komponen dinamis. Dan tidak seperti Bootstrap, Anda dapat dengan mudah menyesuaikan desain sesuka Anda.

Keuntungan lain menggunakan Tailwind CSS adalah Anda mendapatkan ukuran bundel CSS yang kecil karena menghapus semua CSS yang tidak digunakan selama proses pembuatan (yang berbeda dari Bootstrap, karena menyertakan semua file CSS di membangun).

Pelajari selengkapnya tentang perbedaan antara Tailwind CSS dan Bootstrap dari artikel kami tentang topik tersebut.

Kekurangan Menggunakan Tailwind CSS

Tailwind CSS memiliki kurva pembelajaran yang curam bahkan untuk developer berpengalaman. Perlu beberapa waktu untuk mempelajari cara menggunakan kelas utilitas sepenuhnya, dan Anda mungkin perlu sering merujuk ke dokumentasi. Namun, setelah terbiasa dengan kelasnya, Anda akan merasa lebih mudah dan lebih cepat dibandingkan dengan CSS biasa.

Sebagian besar pengembang suka mengikuti prinsip pemisahan kekhawatiran sehingga file CSS dan HTML ditulis dalam file yang berbeda. Dengan Tailwind CSS, Anda menulis CSS langsung di markup HTML—kelemahan bagi sebagian orang.

Bahkan dengan kekurangan ini, Tailwind CSS adalah kerangka kerja yang harus Anda pertimbangkan secara serius jika Anda sudah terbiasa dengan CSS dan ingin membuat desain lebih cepat.

Memulai: Buat Proyek Bereaksi

Jalankan perintah berikut di terminal ke scaffold a Reaksi aplikasi menggunakan buat-reaksi-aplikasi.

npx create-react-app react-tailwind

buat-reaksi-aplikasi menyediakan cara mudah untuk membuat aplikasi React tanpa mengonfigurasi alat build seperti webpack, babel, atau linter. Ini berarti Anda mendapatkan lingkungan React yang berfungsi dalam beberapa menit.

Perintah di atas membuat folder baru bernama reaksi-tailwind. Arahkan ke folder dan buka menggunakan editor teks pilihan Anda.

cd react-tailwind

Selanjutnya, instal Tailwind CSS dan konfigurasikan agar berfungsi dengan aplikasi React.

Gunakan Tailwind CSS di React

Instal Tailwind CSS dan dependensinya dengan perintah ini:

npm install tailwindcss postcss autoprefixer

PostCSS menggunakan plugin JavaScript untuk membuat CSS kompatibel dengan sebagian besar browser. Ini memeriksa browser tempat aplikasi berjalan dan menentukan polyfill yang diperlukan untuk membuat CSS Anda bekerja dengan mulus. Autoprefixer adalah plugin PostCSS yang menggunakan nilai dari caniuse.com untuk secara otomatis menambahkan awalan vendor ke aturan CSS.

Inisialisasi Tailwind CSS

Jalankan init angin belakang perintah untuk menghasilkan file konfigurasi default Tailwind CSS.

npx tailwindcss init

Ini menciptakan tailwind.config.js di folder root yang menyimpan semua file konfigurasi Tailwind dan berisi yang berikut:

modul.ekspor = {
 isi: [],
 tema: {
 memperpanjang: {},
 },
 plugin: [],
}

Konfigurasikan Jalur Template

Anda perlu memberi tahu Tailwind CSS file yang harus diperiksa untuk melihat kelas CSS apa yang digunakan. Hal ini memungkinkan Tailwind untuk mengidentifikasi dan menghapus kelas yang tidak digunakan sehingga mengurangi ukuran CSS yang dihasilkan.

Di dalam tailwind.config.js, tambahkan jalur templat di bawah kunci konten.

modul.ekspor = {
 isi: [
 "./src/**/*.{js, jsx, ts, tsx}",
 ],
 tema: {
 memperpanjang: {},
 },
 plugin: [],
}

Suntikkan Tailwind CSS ke React

Langkah selanjutnya adalah memasukkan Tailwind CSS dalam aplikasi menggunakan @tailwind arahan.

Hapus semua yang ada di index.css dan tambahkan berikut ini untuk mengimpor gaya dasar, komponen, dan utilitas.

@dasar angin belakang;
komponen @tailwind;
Utilitas @tailwind;

Akhirnya, pastikan index.css diimpor dalam index.js dan Tailwind CSS akan siap digunakan.

Menggunakan Tailwind CSS untuk Memberi Gaya pada Komponen Bereaksi

Anda akan membuat halaman web sederhana di bawah dan menatanya menggunakan kelas utilitas Tailwind.

Halaman ini berisi dua bagian utama: a bilah navigasi, dan bagian pahlawan (yang memiliki judul dan tombol).

Untuk mengilustrasikan bagaimana Tailwind CSS mempermudah penulisan CSS, cobalah menata halaman web menggunakan CSS biasa dan Tailwind CSS.

Mulailah dengan memodifikasi aplikasi.js dalam src folder untuk menghapus kode yang tidak perlu.

impor './App.css'
fungsi Aplikasi() {
 kembali (



 );
}
ekspor Aplikasi default;

Selanjutnya, tambahkan konten halaman web ke aplikasi.js.

impor "./App.css";
fungsi Aplikasi() {
 kembali (







 Tailwind CSS membuat penataan komponen React lebih mudah!



Memulai






 );
}

Untuk menggunakan CSS biasa, tambahkan CSS ke App.css.

navigasi {
 tampilan: fleksibel;
 justify-content: ruang-antara;
 bantalan: 16px 36px;
 warna: #000;
 bayangan kotak: 0px 2px 5px 0px rgba (168, 168, 168, 0,75);
}
.logo {
 ukuran font: 18px;
 font-berat: tebal;
}
ul {
 gaya daftar: tidak ada;
 tampilan: inline-flex;
}
ul li {
 margin-kiri: 16px;
 kursor: penunjuk;
}
.pahlawan {
 tampilan: fleksibel;
 arah fleksibel: kolom;
 align-item: tengah;
 margin-atas: 64px;
}
h1 {
 ukuran font: 36px;
 perataan teks: tengah;
}
.btn {
 warna latar: #000000;
 warna: #ff;
 bantalan: 10 piksel;
 lebar: fit-konten;
 margin-atas: 36px;
}

Dengan Tailwind CSS, Anda tidak perlu menulis aturan CSS untuk setiap kelas. Sebagai gantinya, Anda menggunakan kelas utilitas. Ini adalah kelas yang dicakup untuk satu properti CSS. Misalnya, jika Anda ingin membuat tombol dengan latar belakang hitam dan warna teks putih, Anda perlu menggunakan tombol bg-hitam dan teks-putih kelas utilitas.

aplikasi.js harus terlihat seperti ini.

fungsi Aplikasi() {
 kembali (







 Tailwind CSS membuat penataan komponen React lebih mudah!




 Memulai







 );
}

Anda tidak perlu mengimpor App.css karena gaya yang dihasilkan oleh Tailwind CSS disimpan di index.css yang Anda impor index.js lebih awal.

Dibandingkan dengan CSS biasa, pendekatan ini menghasilkan lebih sedikit kode yang mudah dimengerti.

Kode dalam Gaya Dengan Tailwind CSS

Dalam artikel ini, Anda mempelajari tentang Tailwind CSS, kelebihan, kekurangannya, dan bagaimana Anda dapat menggunakan kelas utilitasnya dalam aplikasi React. Selain kelas, Tailwind CSS juga menawarkan fitur tambahan lainnya termasuk kemampuan untuk membuat tata letak yang responsif dan komponen yang dapat digunakan kembali.

Namun, seperti yang kami sebutkan sebelumnya, Tailwind jauh dari satu-satunya kerangka kerja CSS yang ada di pasaran. Mana yang akan Anda gunakan untuk proyek Anda selanjutnya?

CSS Tailwind vs. Bootstrap: Kerangka Mana yang Lebih Baik?

Saat memilih kerangka kerja CSS, penting untuk menemukan kerangka kerja yang memenuhi kebutuhan Anda.

Baca Selanjutnya

Tentang Penulis