TailwindCSS 세팅 (3) - 자주 쓰는 CSS 정리

📌시작하며

프로젝트를 시작하고 Tailwind를 사용하다 보니 자꾸 똑같은 속성의 클래스명을 헷갈려서, 자주 쓰는 내용을 정리해보면 좋을 것 같아 포스팅을 작성한다.

이 글은 아래와 같이 이어집니다.

• TailwindCSS 세팅(1)
• TailwindCSS 세팅(2)
• TailwindCSS 세팅(3)
• TailwindCSS 세팅(4)

🅰️ font

속성	작성법
Font Size	text-[xs~9xl]
Font Weight	text-[thin~black]
Letter Spacing	tracking-[tighter~widest]
Line Height	leading-[3~10]
Text align	text-[left~end]
Text Overflow	truncate, text-ellipsis, text-clip

✒️border

속성	작성법
Border Radius	rounded-[md~full]
Border Width	border-[0~8 (2씩 증가)]
Border Color	border-[color]

📐Layout

속성	작성법
Aspect Ratio	aspect-[auto, squre, video]
Position	static, fixed, absolute, relatvie, sticky
Top / Right / Bottom / Left	inset-[number] / 방향-[number]
Visibility	visible, invisible, collapse
Z-Index	z-[number]
Overflow	overflow-[auto, hidden, scroll]
Display	block, inline-block, flex, grid, table

🎁Size

속성	작성법
Width / Height	w-[number] h-[number]
Min - Width / Height	min-w-[number], min-h-[number]
Max - Width / Height	max-w-[number], max-h-[number]

❤️Flex

속성	작성법
Flex Wrap	flex-wrap, flex-wrap-reverse, flex-nowrap
Flex Grow	grow, grow-0
Flex Shrink	shrink, shrink-0
Flex Basis	basis-[number]
Order	order-[number]
Justify Content	justify-[normal, start, end, between, center]
Justify Items	justify-items-[start, end, center]
Align Content	Content-[normal, start, end, between, center]
Align Items	items-[start, end, center]

🍀Grid

속성	작성법
Grid Template Columns	grid-cols-[number]
Grid Template Rows	grid-rows-[number]
Grid Column Start / End	col-auto col-span-[number] col-start-[number] col-end-[number]

💟Container

사이즈별 다른 속성 작성시 작은 것 부터 적용된다. 즉 small 사이즈 속성이 default가 되고 large 사이즈를 추가적으로 작성해야 하는 것이다. 예를들어 bg-slate-100 lg:bg-slate-500 로 작성하면 100이 default 값, lg일때 500값으로 덮어 씌운다.

Breakpoint	Properties
None	width: 100%;
sm (640px)	max-width: 640px;
md (768px)	max-width: 768px;
lg (1024px)	max-width: 1024px;
xl (1280px)	max-width: 1280px;
2xl (1536px)	max-width: 1536px;

📩마무리

tailwind의 class 자체가 직관적이기 때문에 지금은 헷갈려도, 계속 쓰다보면 바로바로 떠올릴 수 있을 것 같다! 🥰

🗂️참고 사이트

• https://tailwindcss.com/docs/installation