Install Tailwind CSS di Project PHP Framework Laravel

Berkenalan dengan TailwindCSS The Utility-first Framework

Tak kenal maka tak paham, tak paham maka tak cinta 🥰, TailwindCSS berbeda dengan framework bootstrap yang mungkin penggunaan nya class nya cukup singkat misalnya kita ingin membuat Button jika menggunakan bootstrap kita hanya butuh menuliskan class "btn btn-primary" hal ini akan berbeda jika kita menggunakan framework CSS Tailwind kita akan menuliskan class "px-4 py-2 bg-blue-500 rounded" .

Penulisan class untuk button pada framework css Bootstrap

<button class="btn btn-primary">Bootstrap</button>

Penulisan class untuk button pada framework css TailwindCSS

<button class="px-4 py-2 bg-blue-500 rounded">TailwindCSS</button> 

setelah melihat perbedaan penulisan class antara Bootstrap dengan TailwindCSS awalnya saya merasa jadi ribet, tapi setelah mengenalnya jadi nyaman 😍.

Karena TailwindCSS menurutsaya Utility-first Framework bukan UI Kit seperti framework lainya maka kita perlu membangun sendiri komponen agar lebih fleksible sesuai dengan ke inginan kita tanpa perlu edit CSS terlalu banyak.

Melakukan Instalasi Tailwind CSS pada Laravel 7.

Project Laravel 7 Fresh Install

Siapkan project Laravel 7,Laravel 7 dapat di install dengan perintah berikut ini.

composer create-project --prefer-dist laravel/laravel:^7.0 blog

Melakukan Instalasi Package di Laravel 7 menggunakan NPM

Pastikan di laptop kamu sudah terinstall NodeJS jika belum lakukan instalasi NodeJs terlebih dahulu. Setelah kita melakukan Fresh Install Laravel 7, kita harus menjalankan perintah untuk instalasi package.

npm install

kemudian enter dan tunggu hingga proses selesai. Perintah npm install akan melakukan perubahan pada file "package.json".

Install TailwindCSS Menggunakan NPM.

Setelah mengetikan perintah "npm install", kita harus melekukan npm install untuk package tailwindcss. Yang perlu di perhatikan dalam setiap tahap ini kita butuh akses internet, karena package akan di ambil dari source online.

Jalankan perintah di bawah ini di directory root project laravel 7.

npm install tailwindcss -s

tunggu proses hingga selesai, bisa sambil di minum dulu kopinya.

Membuat File tailwind.config.js menggunakan npx

Setelah proses install tailwindcss selesai dan kamu sudah minum kopi 😊, ketik dan jalankan perintah di bawah ini untuk membuat dile tailwind.config.js

npx taildwind init

"npx taildwind init" akan melakukan generate file tailwind.config.js dan berisi code seperti di bawah ini.

module.exports = {
   theme: {
   extend: {}
},
   variants: {},
   plugins: []
}

file ini berguna nanti jika kita ingin melakukan custom pada class yang ada di defaultnya tailwindcss, jika tidak akan melakukan custom class pada framework tailwindcss makan langka ini bersifat "OPSIONAL" menurut saya.

Menambahkan Tailwind pada file SASS di project Laravel 7 kita.

setelah beberapa langkah yang kita lakukan di atas agar tailwindcss terpasang dengan baik di project laravel 7 kita, kita harus merubah file app.sass pada "blog/resource/sass/app.sass" dengan code di bawah ini.

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

Melakukan Konfigurasi Laravel Mix

pada root directori project kita ada file dengan nama webpack.mix.js, pada file webpack.mix.js ini harus kita rubah dengan code seperti di bawah ini.

const mix = require('laravel-mix');
const tailwind = require('tailwindcss');
mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .options({
        processCssUrls: false,
        postCss: [ tailwind('tailwind.config.js')],
});

dengan adanya file webpack.mix.js dan code di atas akan berguna untuk melakukan build terhadap file .sass

memBuild File Sass menggunakan Laravel Mix

Pada tahap ini kita akan melakukan build file sass tailwind css dengan menjalankan perintah "npm run dev" di root directori project kita.

npm run dev

setelah proses Build selesai, sampai disini framework Laravel 7 kita menggunakan TailwindCSS sudah bisa untuk mulai di gunakan.

Uji Coba Laravel 7 TailwindCSS.

cara meudah untuk memastikan apakah project kita sudah siap menggunakan TailwindCSS bisa dengan merubah file "resources/views/welcome.blade.php" dengan cara menggantikan code yang ada di dalam file tersebut dengan code di bawah ini.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <link rel="stylesheet" href="{{ asset('css/app.css') }}">
   <title>Laravel - Tailwind CSS</title>
</head>
<body>
   <div class="w-full h-screen bg-red-500">
      <h1 class="text-lg text-white">Hallo Tailwind CSS</h1>
   </div>
</body>
</html>

jika kamu menggunakan "php artisan serve" silahkan akses localhost:8000, tapi jika kamu menggunakan laragon bisa akses blog.test dan jika tampilan menggunakan backgorund berwarna merah dan tulisan "Hallo Tailwind CSS" berwarna putih itu artinya project Laravel 7 kamu sudah menggunakan "Utility-first Framework" tailwindCss.

Penutup!

mungkin article ini belum cukup membuat mu jatuh cinta dengan Utility-first Framework TailwindCSS, untuk tahap selanjutnya kamu bisa membaca documentasi dengan akses ke link https://tailwindcss.com/ dan mempelajari beberapa tips dan kemudahan menggunakan TailwindCSS.

Semoga article ini bermanfaat .