Tailwind Commands 치트 시트

Tailwind CSS는 마크업에서 직접 어떤 디자인이든 구축하기 위해 구성할 수 있는 클래스로 구성된 유틸리티 우선 CSS 프레임워크입니다.

특징:

유틸리티 우선:

Tailwind CSS는 CSS를 작성하지 않고도 사용자 정의 디자인을 구축할 수 있도록 하위 수준 유틸리티 클래스를 제공하는 유틸리티 우선 CSS 프레임워크입니다. 이 접근 방식을 사용하면 사용자 정의 CSS를 한 줄도 작성하지 않고도 완전한 사용자 정의 구성 요소 디자인을 구현할 수 있습니다. "클래스 이름을 만드는 데 에너지를 낭비하지 않습니다".

콘텐츠 삭제:

제작 환경에서 사용할 최종 CSS 파일에서 사용하지 않는 CSS 클래스를 제거하는 과정입니다. 최종 CSS 크기가 작아지고 유지 관리가 용이해지며 향상된 성능을 보여주는 최적화 과정입니다.

명령:

밑줄:

underline 
underline-offset-<size>
decoration-<color>-<shade> //color for underline
decoration-<thickness> // size of underline
decoration-<style> // wavy, double

텍스트 스타일링

text-<color>-<shade> //color of text
text-opacity-<shade> //opacity of text
text-<size> //size of text
text-<alignment> //alignment of text

배경색상

bg-<color>-<shade>

경계 반경

rounded-<size> 

글꼴 스타일링

font-<style> //mono, serif, sans
font-bold
font-thin

이탤릭체:

italic

시계

요소 숨기기:

hidden

표시(숨기기 반대):

block

패딩

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 */

여백

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 */

플렉스박스

flex
flex-<direction> // row or column

콘텐츠 정당화

justify-<option>

항목 정렬

items-<option> //start,end,center

반응형 디자인

sm  /* Small devices */
md  /* Medium devices */
lg  /* Large devices */
xl  /* Extra large devices */

크기

h-<size>
w-<size>

테두리

border
border-<size>
border-<color>

호버 상태

hover:<utility>

위 내용은 Tailwind Commands 치트 시트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!