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 :