setup tailwind v4 postcss
date
Feb 11, 2025
slug
setup-tailwind-v4-postcss
status
Published
tags
tailwind
css
summary
tutorial untuk menjalankan tailwind versi 4 di html
type
Post
untuk menjalankan tailwind versi 4 di html, ada bebearapa hal yang perlu di lakukan
Buat Foler
pertama buat foler dimana project yang akan kamu gunakan untuk menjalankan tailwind. Untuk emnyamakan persepsi, ikuti contoh stuktur proyek seperti gambar di bawah ini :

install dependensi
install dependensi kebutuhan, untuk ditutorial ini tambahkan postcss-cli, karena di dokumentasi tidak ada jadi saya tambahkan
Menambahkan postcss di config
baut file postcss.config.mjs dan amsukkan code di bawah ini
import tailwind css
buka file src/styles.css, dan amsukkan code ini
Update package.json
untuk menjalankan build proses tailwind adahal yang di tambahkan seperti contoh dibawah ini bagian scripts - dev
contoh lengkapnya seperti ini
Buat code html
jika masih bingung kamu bisa tonton di video ini
