Catatan Install Tailwindcss pada Microservice Flask

1. Install Tailwindcss

Ketik perintah berikut untuk instalasi tailwindcss pada terminal/cmd kamu. Untuk direktorinya bebas sih mau dimanapun aja

npm install -D tailwindcss

2. Buat File Konfigurasi Tailwindcssmu di Dalam Project

Pindah ke dalam direktori project flask. Misalkan project flasknya bernama my_projects maka masuk ke dalam direktori my_projects terlebih dahulu dan ketik perintah dibawah untuk membuat file konfigurasi tailwindnya.

npx tailwindcss init

3. Buka File Konfigurasi Tailwind

Kamu akan mendapatkan file dengan nama tailwind.config.js. Buka file tersebut dan tambahkan path file html dan js.

    
        module.exports = {
            content: [
                "./templates/*.html", 
                "./static/js/*.js"
            ],
            theme: {
                extend: {},
            },
            plugins: [],
        }
    

4. Tambahkan Tailwind directives ke CSS Utama

Buat file baru dengan nama input.css pada direktori static/css. Kemudian di dalam file tersebut tambahkan script berikut

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

5. Build TailwindCSS

Ketikkan perintah berikut untuk build CSS Tailwind. Setelah mendapat file baru kamu bisa import di project flasknya seperti biasa

npx tailwindcss -i ./static/css/input.css -o ./static/css/output.css --watch