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

특징:

유틸리티 우선:

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

콘텐츠 삭제:

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

명령:

밑줄:

underline 
underline-offset-
decoration-- //color for underline
decoration- // size of underline
decoration-

텍스트 스타일 지정

text-- //color of text
text-opacity- //opacity of text
text- //size of text
text- //alignment of text

배경 색상

bg--

테두리 반경

rounded-

글꼴 스타일링

font-

이탤릭체:

italic

시계

요소 숨기기:

hidden

표시(숨기기와 반대):

block

심

p-   /* All sides */
px-  /* Horizontal (left and right) */
py-  /* Vertical (top and bottom) */
pl-  /* Left */
pr-  /* Right */
pt-  /* Top */
pb-  /* Bottom */

여유

m-   /* All sides */
mx-  /* Horizontal (left and right) */
my-  /* Vertical (top and bottom) */
ml-  /* Left */
mr-  /* Right */
mt-  /* Top */
mb-  /* Bottom */

플렉스박스

flex
flex- // row or column

콘텐츠 정당화

justify-

항목 정렬

items- //start,end,center

반응형 디자인

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

크기

h-
w-

테두리

border
border-
border-

호버 상태

hover: