Tutorial CRUD Laravel 8 dengan Tailwind CSS #3: Installasi Tailwind CSS


Fika Ridaul Maulayya
Full-Stack Web Developer, Content Creator and CO-Founder Santri Koding. I share everything i know with Articles, Screencasts and E-Books at SantriKoding.com

Halo teman-teman semuanya, di artikel sebelumnya kita telah belajar bersama-sama bagaimana cara membuat dan menjalankan migration di dalam project Laravel, sekarang kita lanjutkan belajar untuk proses installasi Tailwind CSS di dalam project Laravel.

Apa itu Tailwind CSS ?

Tailwind CSS merupakan CSS framework yang bersifat utility-first, yang mana bisa digunakan untuk membangun tampilan antar muka sebuah website menjadi lebih cepat.

Jika menurut website resminya kurang lebih seperti berikut ini :

A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

Dan pada artikel kali ini, kita semua akan belajar bagaimana cara menginstall dan mengintegrasikan Tailwind CSS di dalam project Laravel yang sedang kita buat.

Langkah 1 - Installasi Tailwind CSS

Sekarang, kita lanjutkan untuk proses installasi Tailwind CSS di dalam project Laravel. Pertama, silahkan jalankan perintah berikut ini :

npm install

Setelah itu, kita lanjutkan untuk menginstall Tailwind menggunakan NPM. Silahkan jalankan perintah berikut ini :

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Silahkan tunggu beebrapa saat sampai proses installasinya selesai.

Langkah 2 - Buat Konfig File

Setalah berhasil menginstall Tailwind CSS, sekarang kita lanjutkan membuat file konfig untuk Tailwind CSS, silahkan jalankan perintah berikut ini :

npx tailwindcss init

Jika berhasil, maka teman-teman akan melihat file baru di dalam folder root project dengan nama tailwind.config.js.

Langkah 3 - Konfigurasi Tailwind CSS dengan Laravel MIX

Laravel Mix digunakan untuk proses compile seluruh file-file css dan js yang ada di dalam project Laravel, ini akan kita manfaatkan untuk proses compile Tailwind CSS agar menjadi lebih kecil ukurannya saat di production.

Silahkan buka file webpack.mix.js kemudian ubah kode-nya menjadi seperti berikut ini :

// webpack.mix.js
mix.js("resources/js/app.js", "public/js")
   .postCss("resources/css/app.css", "public/css", [
     require("tailwindcss"),
]);

Langkah 4 - Menambahkan Tailwind di file CSS

Sekarang, kita akan menambahkan Tailwind CSS di dalam file CSS yang ada di project Laravel, silahkan buka file /resources/css/app.css kemudian tambahkan kode berikut ini :

@tailwind base;
@tailwind components;
@tailwind utilities;

Langkah 5 - Compile dengan Laravel MIX

Setelah semua langkah-langkah di atas selesai, sekarang kita lanjutkan untuk proses compile Tailwind CSS menggunakan Laravel MIX.

Silahkan jalankan perintah berikut ini :

npm run dev

Jika berhasil, maka kita akan mendapatkan 2 file hasil compile, yaitu di :

  • public/css/app.css
  • public/js/app.js

Langkah 6 - Cara Menggunakan Tailwind CSS

Karena kita sudah berhasil melakukan compile dari file CSS dan JS, maka untuk menggunakan atau memanggil-nya kita cukup seperti berikut ini :

  <!doctype html>
  <html lang="en">
  <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link href="{{ asset('css/app.css') }}" rel="stylesheet">
  </head>
  <body>
  
  	<script src="{{ asset('js/app.js') }}"></script>
  </body>
  </html>

Sampai disini pembahasan bagaimana cara installasi dan konfigurasi Tailwind CSS di dalam project Laravel, di artikel selanjutnya kita semua akan belajar bagaimana cara menampilkan data dari database.

Terima Kasih


INFO :


Fika Ridaul Maulayya
Full-Stack Web Developer, Content Creator and CO-Founder Santri Koding. I share everything i know with Articles, Screencasts and E-Books at SantriKoding.com

Suka dengan tulisan di SantriKoding? Kamu bisa memberikan dukungan dengan berdonasi atau bagikan konten ini di sosial media. Terima kasih atas dukungan Anda!

KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami

KOMENTAR