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 :
notion image

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
Video preview
 

© yhotie 2024 - 2025