Apakah sebab kegagalan kategori Tailwind?

Question

Saya mula-mula mula menggunakan Tailwind dan pada masa ini hanya menggunakannya dengan JavaScript. Pada hari pertama, nama kelas semuanya berfungsi dengan baik, tetapi apabila saya membuka projek dalam VSCode pada hari berikutnya, hanya nama kelas Tailwind yang ditambahkan sebelum masih berfungsi. Jika saya cuba menambah lebih banyak nama kelas dan reka bentuk pada HTML saya, tiada apa yang berlaku.

Sebagai contoh, apabila saya menambah teks-3xl dalam teg h2, saiz fon teks tidak berubah. Selain itu, jika saya menambah warna baharu pada teks atau menambah warna latar belakang, ia tidak akan berkesan.

Pautkan ke semua kod dan fail saya dalam Github

<div class="flex flex-col md:w-1/2">
  <h2 class="teks-pusat teks-3xl font-bold md:text-left">Jejaki kemajuan keseluruhan syarikat</h1>
  <p class="text-center md:text-left mt-4 mb-6">Fahami cara tugas harian anda sesuai dengan penglihatan yang lebih luas. Jejaki kemajuan daripada tahap pencapaian kepada butiran terkecil. Jangan sekali-kali melupakan gambaran yang lebih besar lagi. </p>
</div>

Answer 1

Tailwind tidak termasuk semua kelas utiliti dalam fail CSS output. Sebaliknya, ia menghuraikan kelas yang anda gunakan dalam kod anda semasa proses binaan dan hanya menambah kelas tersebut pada fail output.

Jadi, jika anda menambah kelas pada kod anda, anda perlu menjalankan semula proses binaan, sama ada secara manual atau dengan memasukkan pilihan --watch dalam arahan bina. Contohnya:

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Nota: Ini juga sebabnya menambahkan kelas utiliti yang tidak digunakan sebelum ini dalam pemeriksa DOM alat pembangunan penyemak imbas tidak akan menjejaskan elemen halaman dengan serta-merta.