Cara Install Dan Setup Tailwind Css

Ibrahim Al Anshor On 12 August 2019

Tailwind CSS merupakan sebuah framework css yang memiliki utilitas komplit. Dimana kita bebas mengatur style maupun aktivitas dari elemen html.

Tailwind css juga sangatlah lengkap dalam utilitas cocok bagi kalian yang mencari framework yang lengkap.

Dalam tailwind kalian bebas untuk melakukan kustomisasi, karena tailwind memang dibuat untuk dikustomisasikan.

Dan kali ini saya akan menyajikan tutorial installasi dan setup tailwind css.

Langsung saja berikut tutorianya.

Install Tailwind

Langkah pertama yang harus kalian lakukan tentunya menginstall tailwind, anda dapat menggunakan npm atau yarn.

Tunggu hingga proses instalasi selesai.

Membuat file config

Setelah menginstall tailwind, sekarang saatnya kita membuat file config yang berfungsi untuk mengatur konfigurasi tema tailwind.

Silahkan jalankan kode dibawah ini.

Kode diatas akan membuat sebuah file bernama tailwind.config.js, yang isinya kira kira seperti ini.

Membuat file css.

Nah saatnya kita membuat file css Tailwind. Silahkan buat sebuah file. Beri nama style.scss. Lalu masukan kode dibawah ini ke dalam file tersebut.

Simpan. Dan lakukan konversi css ke sass dengan menjalankan kode berikut.

Maka akan muncul sebuah file output.css, yang berisi kode css dari tailwind.css.

File output.css siap digunakan dalam web anda.

Apa selanjutnya?

Silahkan buka situs resmi tailwind css untuk mempelajarinya. Atau bisa pantau blog ini untuk tutorial lebih lanjut mengenai tailwind.

Sekian…