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.

ciri-ciri:

Utiliti-diutamakan:

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".

Pembersihan kandungan:

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.

Perintah:

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

Keterlihatan

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!