Cara instalasi Tailwindcss pada react js

Hallo teman-teman semuanya kembali lagi bersama dengan saya, di blog kita bersama, kali ini kita akan membahas bagaimana cara instalasi tailwindcss pada react js.

Bagi sebagian teman-teman ada yang belum mengerti apa itu tailwindcss, berikut penjelasan singkat mengenai tailwindcss 

Tailwindcss merupakan salah satu css framework yang menawarkan konsep baru dengan konsep utility first, yang dimana kita tidak perlu lagi memikirkan panjang nama kelas untuk komponen htmlnya. untuk lebih jelasnya silhkan kunjungi link berikut ini https://tailwindcss.com/

nahh sekarang teman-teman sudah memahami apa itu tailwindcss, selanjutnya kita akan melakukan instalasi tailwindcss pada projek react js kita, simak langkah-langkah berikut ini :

Sebelum mengikuti Langkah-langkah dibawah ini sebaiknya teman-teman pastikan tools-tools dibawah ini sudah terpasang di komputer teman-teman semuanya :

1. Visual Studio Code

2. node js

jika tools-tools diatas sudah tersedia silahkan ikuti langkah-langkah dibawah ini : 

1. Langkah I. Installasi React Js

sebelum kita menginstall tailwindcss di folder projek react js kita, pastinya kita harus menginstall react js nya terlebih dahulu, silahkan buka terminal atau CMD teman-teman semuanya lalu jalankan perintah berikut ini :

$ npx create-react-app projek-pertama

selanjutnya tunggu proses instalasi react js sampai selesai, jika proses instalasi sudah selesai maka tampilannya akan seperti berikut ini 

2. Langkah II. Instalasi Tailwindcss

selanjutnya kita akan menginstall tailwindcss ke dalam projek react js yang baru saja kita install, silahkan teman-teman kembali ke terminal atau CMD teman-teman semuanya dan masuk terlebih dahulu ke folder projek react js kita, untuk masuk ke folder react js silahkan jalan perintah berikut ini di terminal teman-teman semuanya 

$ cd projek-pertama

selanjutnya silahkan jalankan perintah dibawah ini untuk melakukan instalasi tailwindcss 

Instalasi tailwindcss

$ npm install -D tailwindcss postcss autoprefixer

Inisialisasi Tailwindcss

$ npx tailwindcss init -p 

3. Langkah III. Konfigurasi Tailwindcss

selanjutnya kita akan melakukan konfigurasi Tailwindcss yang baru saja kita install ke dalam projek react js kita, silahkan teman-teman semuanya membuka visual studio code dengan kembali ke terminal atau CMD dan jalankan perintah berikut ini :

$ code . 

jika anda menjalankan perintah diatas maka tampilan visual studio code teman-teman akan seperti gambar berikut ini :

selanjutnya untuk konfigurasi pertama, klik file tailwind.config.js dan silahkan copy dan paste source dibawah ini ke dalamnya  dan jangan lupa di simpan dengan ctrl + s

module.exports = {

content: ["./src/**/*.{js,jsx,ts,tsx}"],

theme: {

extend: {},

},

plugins: [],

};

sehingga tampilannya akan seperti gambar dibawah ini :

selanjutnya untuk konfigurasi yang kedua, silahkan masuk ke file /src/index.css dan silahkan copy dan paste source code dibawah ini ke dalam file tersebut  dan jangan lupa simpan dengan ctrl + s :

@tailwind base;

@tailwind components;

@tailwind utilities;

sehingga tampilanya akan seperti pada gambar berikut ini :

4. Langkah IV. Testing Tailwindcss 

jika teman-teman sudah sampai pada langkah ke-4 maka selanjutnya kita akan melakukan testing apakah tailwindcss sudah berjalan di projek react js kita, silahkan masuk ke dalam file /src/App.js , copy dan paste source code dibawah ini ke dalam nya :

import logo from "./logo.svg";

import "./App.css";

function App() {

return (

<div>

<h1 className="text-center font-bold text-green-600 underline">

Projek Pertamaku Menggunakan Tailwindcss

</h1>

</div>

);

}

export default App;

sehingga tampilannya akan seperti gambar dibawah ini :

5. Langkah V. Menjalankan Projek React JS

selanjutnya kita akan menjalankan projek react js kita, silahkan teman-teman kembali ke terminal dan CMD teman-teman semuanya, lalu jalankan perintah berikut ini :

$ npm start

jika teman-teman menjalankan perintah diatas maka secara otomatis browser teman-tema akan terbuka secara otomatis dan tampilany akan seperti pada gambar berikut ini :

Sekian tutorial cara instalasi tailwindcss pada react js, semoga tutorial ini dapat membantu teman-teman semuanya, jika ada pertanyaan silahkan tinggalkan di kolom komentar,

sekian dan terimakasih.....