Rumah > Artikel > hujung hadapan web > Helaian Penipuan Perintah Tailwind
Tailwind CSS ialah rangka kerja CSS yang mengutamakan utiliti padat dengan kelas yang boleh digubah untuk membina sebarang reka bentuk, terus dalam markup anda.
Tailwind css ialah rangka kerja css yang mengutamakan utiliti yang menyediakan kelas utiliti peringkat rendah untuk membina reka bentuk tersuai tanpa menulis css. Pendekatan ini membolehkan kami melaksanakan reka bentuk komponen tersuai sepenuhnya tanpa menulis satu baris CSS tersuai. "Anda tidak membuang tenaga mencipta nama kelas".
Ia ialah proses mengalih keluar kelas CSS yang tidak digunakan daripada fail CSS akhir yang akan digunakan dalam persekitaran pengeluaran. Ini ialah proses pengoptimuman di mana saiz CSS akhir lebih kecil, lebih mudah diselenggara dan menunjukkan prestasi yang lebih baik.
Garis bawah:
underline underline-offset-<size> decoration-<color>-<shade> //color for underline decoration-<thickness> // size of underline decoration-<style> // wavy, double
Penggayaan Teks
text-<color>-<shade> //color of text text-opacity-<shade> //opacity of text text-<size> //size of text text-<alignment> //alignment of text
Warna Latar Belakang
bg-<color>-<shade>
Jejari Sempadan
rounded-<size>
Penggayaan Fon
font-<style> //mono, serif, sans font-bold font-thin
Italik:
italic
Sembunyikan elemen:
hidden
Paparan (Bertentangan untuk disembunyikan):
block
Padding
p-<size> /* All sides */ px-<size> /* Horizontal (left and right) */ py-<size> /* Vertical (top and bottom) */ pl-<size> /* Left */ pr-<size> /* Right */ pt-<size> /* Top */ pb-<size> /* Bottom */
Margin
m-<size> /* All sides */ mx-<size> /* Horizontal (left and right) */ my-<size> /* Vertical (top and bottom) */ ml-<size> /* Left */ mr-<size> /* Right */ mt-<size> /* Top */ mb-<size> /* Bottom */
Flexbox
flex flex-<direction> // row or column
Wajarkan Kandungan
justify-<option>
Sejajarkan Item
items-<option> //start,end,center
Reka Bentuk Responsif
sm /* Small devices */ md /* Medium devices */ lg /* Large devices */ xl /* Extra large devices */
Saiz
h-<size> w-<size>
Sempadan
border border-<size> border-<color>
Negeri Tuding
hover:<utility>
Atas ialah kandungan terperinci Helaian Penipuan Perintah Tailwind. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!