Apa Itu Tailwind CSS? Panduan Bahasa Mudah untuk Pembina App

Tailwind CSS ialah alat untuk menggayakan laman web. Daripada menulis peraturan gaya yang berasingan dalam fail sendiri, anda memberi setiap elemen nama kelas pendek yang sedia dibuat — bg-white untuk latar belakang putih, p-4 untuk ruang dalaman, text-lg untuk teks yang lebih besar, rounded-xl untuk sudut membulat — dan Tailwind menghasilkan CSS yang diperlukan oleh pelayar. Ia percuma, sumber terbuka dan antara cara paling biasa untuk menggayakan app web moden.

Mengapa Tailwind penting apabila anda membina dengan AI

Jika anda membina app web dengan pembina app AI, ada kemungkinan besar app anda digayakan dengan Tailwind. Mythex, sebagai contoh, memulakan projek baharu dengan Vite + React + TypeScript + Tailwind melainkan anda meminta sesuatu yang lain (cara teknologi dipilih).

Ia penting untuk anda dalam tiga cara:

• Perubahan reka bentuk adalah murah. Oleh kerana gaya berada betul-betul di sebelah setiap butang, kad dan tajuk, AI boleh menukar "jadikan kad kurang sesak" dengan menyunting beberapa nama kelas di satu tempat.
• Anda boleh membacanya. Kelas Tailwind hampir kepada bahasa Inggeris biasa. text-center font-bold text-2xl tidak sukar untuk difahami, walaupun anda tidak pernah menulis kod.
• Rupanya kekal konsisten. Tailwind datang dengan skala tetap bagi saiz, jarak dan warna. Ini mengelakkan app daripada berakhir dengan 14 kelabu yang sedikit berbeza.

Analogi harian

Bayangkan cat dan membina rumah.

CSS biasa seperti mencampur cat sendiri untuk setiap dinding. Anda mempunyai kebebasan penuh, tetapi selepas beberapa lama ruang tamu menjadi "putih hangat", lorong menjadi "putih yang lebih hangat sedikit" dan tiada siapa ingat sebabnya.

Tailwind seperti carta warna kedai cat serta set pelekat berlabel. Setiap dinding mendapat pelekat — "putih, matt, 2 lapisan" — dan carta itu hanya menawarkan set warna terpilih. Anda kehilangan sedikit kebebasan, tetapi semua orang di tapak kerja tahu tepat rupa setiap dinding hanya dengan membaca pelekatnya.

Cara Tailwind berfungsi

Sebuah halaman web dibina daripada HTML (kandungan dan struktur) serta CSS (rupa). Biasanya, CSS berada dalam fail berasingan dengan peraturan seperti ini:

.card {
  background: white;
  padding: 1rem;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

Dengan Tailwind, anda tidak perlu menulis peraturan itu dan meletakkan kelas utiliti terus pada elemen:

<div class="bg-white p-4 rounded-xl shadow-sm">
  Tempahan anda telah disahkan
</div>

Setiap kelas melakukan satu tugas kecil. Apabila app dibina, Tailwind mengimbas fail anda, mencari kelas yang benar-benar digunakan dan menjana CSS hanya untuk kelas tersebut. Itu memastikan lembaran gaya akhir kekal kecil.

Tailwind versi 4, versi utama semasa, disediakan dengan konfigurasi yang sangat sedikit: anda memasangnya, menambah pluginnya pada alat binaan anda dan meletakkan @import "tailwindcss"; di bahagian atas fail CSS anda. Penyesuaian seperti warna jenama dan fon ditakrifkan dalam CSS sebagai token reka bentuk, bukan dalam fail konfigurasi JavaScript yang besar seperti yang diperlukan oleh versi lama. Jika anda membaca tutorial lama yang menyebut tailwind.config.js, itulah sebabnya.

Contoh kerja: kad harga

Katakan anda meminta pembina AI anda untuk halaman harga dan mahu kad "Pro" menonjol. Kod untuk kad itu mungkin kelihatan seperti ini (dalam komponen React, class ditulis sebagai className):

<div className="rounded-2xl border border-gray-200 p-6">
  <h3 className="text-lg font-semibold">Pro</h3>
  <p className="mt-2 text-4xl font-bold">$25</p>
  <button className="mt-6 w-full rounded-lg bg-gray-900 px-4 py-2 text-white">
    Mula percubaan
  </button>
</div>

Baca dari kiri ke kanan:

Jika anda meminta "jadikan kad Pro menonjol dengan sempadan biru dan bayang halus", AI mungkin menukar border-gray-200 kepada border-2 border-blue-600 dan menambah shadow-lg. Itulah keseluruhan perubahannya.

Reka bentuk responsif dan mod gelap

Tailwind mempunyai awalan pendek untuk saiz skrin dan keadaan:

• md:grid-cols-3 — tiga lajur pada skrin sederhana dan ke atas; pada telefon, lajur tunggal lalai digunakan. Tailwind ialah mobile-first: kelas tanpa awalan terpakai di semua tempat, dan awalan menambah perubahan untuk skrin yang lebih besar.
• hover:bg-gray-700 — butang yang lebih gelap apabila tetikus berada di atasnya.
• dark:bg-gray-900 — latar belakang berbeza apabila mod gelap dihidupkan.

Sebab itulah meminta reka letak mesra mudah alih atau mod gelap biasanya cepat dalam projek Tailwind.

Istilah utama

Salah faham yang biasa

• "Tailwind ialah reka bentuk." Bukan. Tailwind memberi anda blok binaan, bukan rupa. Dua laman Tailwind boleh kelihatan sama sekali berbeza. Rupa "app AI" generik datang daripada nilai lalai, bukan daripada Tailwind itu sendiri — berikan pembina anda arahan sebenar. Lihat cara mereka bentuk app yang menarik dengan AI.
• "Ia sama seperti gaya sebaris." Tidak tepat. Kelas datang daripada skala yang dikongsi, menyokong hover, mod gelap dan breakpoint, dan ditukar kepada CSS biasa semasa pembinaan.
• "Tailwind menjadikan halaman berat." Pembinaan hanya menyertakan kelas yang anda gunakan, jadi CSS yang dihantar kepada pelawat biasanya kecil.
• "Senarai kelas yang panjang bermakna kod yang kucar-kacir." Ia kelihatan sibuk pada mulanya, tetapi semua tentang rupa sesuatu elemen berada di satu tempat. Corak yang berulang biasanya dikumpulkan dalam komponen, seperti satu komponen Button.
• "Jika saya guna Tailwind, saya tidak boleh guna CSS tersuai." Anda masih boleh menulis CSS biasa bila-bila masa anda perlukannya.

Apa yang perlu diminta daripada pembina AI anda

• "Takrifkan warna dan fon jenama kami sekali sebagai token tema, dan gunakannya di mana-mana dan bukannya warna yang dikodkan keras."
• "Pastikan setiap kad, butang dan input menggunakan jejari sudut dan jarak yang sama."
• "Semak reka letak pada lebar telefon dan betulkan apa-apa yang melimpah atau terlalu kecil untuk disentuh."
• "Tambah mod gelap menggunakan varian dark: Tailwind dan pastikan kontras teks kekal mudah dibaca."
• "Kumpulkan gaya butang yang berulang ke dalam satu komponen Button yang boleh digunakan semula."
• "Terangkan kelas Tailwind pada bahagian ini dalam bahasa Inggeris biasa."

Tailwind dalam Mythex

Projek Mythex baharu menggunakan Tailwind secara lalai bersama React dan TypeScript, jadi anda boleh meminta perubahan visual dengan perkataan biasa dan melihatnya dalam Pratonton langsung. Jika anda lebih suka melihat kod, editor kod menunjukkan setiap kelas (baca sahaja pada Free, boleh disunting pada Pro). Jika anda lebih suka CSS biasa atau persediaan yang berbeza, nyatakannya dalam arahan pertama anda — dokumentasi menerangkan cara tindanan dipilih.

Soalan lazim