Menambahkan Tailwind di koding HTML lamamu

Punya proyek lama yang masih pakai HTML dan CSS biasa, tapi sekarang kamu sudah belajar Tailwind CSS dan ingin mencampurnya ke dalam kode lama itu?
Mungkin kamu tidak mau membangun ulang semuanya dari awal, atau takut kalau Tailwind nanti bentrok dengan class CSS yang sudah ada.

Kabar baiknya — kamu bisa menambahkan Tailwind ke proyek HTML lama dengan aman, bahkan bisa memakai prefix khusus supaya tidak berbenturan dengan style lama.

Di artikel ini, kita akan bahas cara paling mudah untuk menggunakan Tailwind di HTML biasa tanpa mengganggu kode yang sudah ada. Yuk mulai!

1. Menambahan CDN untuk Tailwind

<script src="https://cdn.tailwindcss.com"></script>

2. Menambahan Tailwind config

<script>
  tailwind.config = {
    prefix: 'tw-',    // prefix untuk Tailwindmu
  }
</script>

3. Penggunaan dalam class

<div class="tw-bg-blue-500 tw-text-white tw-p-4 tw-rounded-lg">
  Hello Tailwind World!
</div>

Menggabungkan Tailwind CSS ke dalam proyek HTML lama ternyata tidak serumit yang dibayangkan. Dengan bantuan prefix, kamu bisa menikmati kenyamanan utility class Tailwind tanpa khawatir merusak style yang sudah ada. Jadi, kamu tetap bisa mempertahankan kode lama sambil perlahan meningkatkan tampilan dan struktur dengan cara yang lebih modern.

Semoga panduan ini membantu kamu memulai transisi tersebut dengan lebih mudah.
Kalau kamu punya pertanyaan atau ingin topik lanjutan seperti komponen UI dasar dengan Tailwind, feel free untuk mampir lagi. Selamat ngoding dan terus bereksperimen!