TailwindCSS

추가적인 CSS 코드 작성없이 단순히 HTML 요소의 class 속성에 설정해주는 것만으로도 스타일링이 가능한 CSS 프레임워크

사용법

Background color

.bg-{color}-{shade}

colors	shade
black, white
gray, red, orange, yellow, green, teal, indigo, blue, purple, pink	100 ~ 900

Text

Styling Text-Font

.font-{family}

Families
sans, serif, mono

Styling Text-Size

.text-{size}

Sizes	rem	Pixels
xs	0.75 rem	12px
sm	0.875 rem	14px
base	1 rem	16px
lg	1.125 rem	18px
xl	1.25 rem	20px
2xl	1.5 rem	24px
3xl	1.875 rem	30px
4xl	2.25 rem	36px
5xl	3 rem	48px
6xl	4 rem	64px

Styling Text-Align

.text-{align}

Aligments
left, center, right, justify

Styling Text-Color

Colors	Shades
black, white
gray, red, orange, yellow, green, teal, indigo, blue, purple, pink	100 - 900

Styling Text-Italics

.italic
.not-italic

Styling Text-Font Weight

.font-{weight}

Weights
thin, extra, light, lightnormal, medium, semibold, bold, extrabold, black

Styling Text-Letter Spacing

.tracking-{spacing}

Spacings
tighter, tight, normal,wide, wider, widest

Styling Text-Decorations

.underline
.overline
.no-underine
.line-through

Styling Text-Transform

.uppercase
.lowercase
.capitalize
.normal-case