Sign in Subscribe

3 Langkah Mudah Install Tailwind CSS Di React JS

Sebelumnya, kita sudah Membuat CRUD React JS menggunakan pure css, nah kali ini kita akan mengimplementasikan Tailwind CSS di projek ini.

Sebelum masuk ke praktek ada baiknya kita tau dulu apa itu Tailwind CSS.

Apa Itu Tailwind CSS ?

Tailwind CSS merupakan sebuah framework CSS yang dirancang untuk mempermudah pengembangan tampilan web dengan cara yang lebih cepat dan mudah. Framework ini menggunakan konsep "utility-first," yang berarti lebih memprioritaskan penggunaan class utilitas kecil untuk menggambarkan tampilan elemen daripada menulis gaya CSS khusus untuk setiap elemen.

Begini contoh pengunaan Tailwind css :

<html>
    <body>
        <h1 class="text-3xl font-bold underline">
            Hello World!
        </h1>
    </body>
</html>
Class yang dipakai berguna memberi style ukuran teks 3xl, huruf tebal, dan baris bawah

Cara Install Tailwind CSS

Untuk Penginstallan Tailwind CSS kita harus memiliki NPM atau Yarn, Kita juga bisa menggunakan CND, tapi di tutorial ini kita akan menggunakan NPM:

Kamu Bisa menggunakan Command :

npm install -D tailwindcss : Untuk Menginstall Tailwind CSS

npx tailwindcss init  : Untuk Membuat tailwind.config.jsfile.

Langkah 1: Install Dan Set Up Tailwind CSS

Silahkan buka terminal dan arafkan ke folder project Manga Listing, lalu ketikkan command sebagai berikut:

npm install -D tailwindcss
npx tailwindcss init

Setelah itu, buka file tailwind.config.js dan lalu atur konfigurasinya dengan menambahkan kode berikut:

Close

Silahkan Login/Sign Up

😞 Discord eklusif buat member asinkron.com

Jangan khawatir silahkan Daftar GRATIS 😎

*Link discord akan dikirim ke email yang anda gunakan untuk mendaftar.