Tailwindcss

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

mockup

글자 가운데 정렬하기 
<div class="max-w-7xl mx-auto border mt-4 text-center p-2">
</div>

H1 글자크기

H2 글자크기

H3 글자크기

H4 글자크기

H5 글자크기
H6 글자크기
<h1>H1 글자크기</h1>
<h2>H2 글자크기</h2>
<h3>H3 글자크기</h3>
<h4>H4 글자크기</h4>
<h5>H5 글자크기</h5>
<h6>H6 글자크기</h6>

<button class="px-3.5 py-2.5 text-white rounded-md bg-indigo-600 hover:bg-indigo-500">
    버튼 만들기
</button>

Flex

flex justify-start

박스
박스
박스

flex justify-center

박스
박스
박스

flex justify-end

박스
박스
박스

flex justify-between

박스
박스
박스

flex justify-around

박스
박스
박스

flex justify-evenly

박스
박스
박스

Flex 박스 위쪽, 중간, 아래에 정렬방법

flex items-start

박스 상단에 붙도록 정렬
박스
박스
박스

flex items-center

박스 중간에 정렬
박스
박스
박스

flex items-end

박스 바닥에 붙도록 정렬
박스
박스
박스

Flex 방향 설정

flex flex-row

01
02
03

flex flex-col

01
02
03

flex flex-row-reverse

01
02
03

flex flex-col-reverse

01
02
03

Flex에 포함된 item 컨트롤

크기조정하기

flex-initial (설정사이즈-반영, 늘어나지않음)
flex-auto (설정사이즈-반영, 늘어남)
flex-1 (설정사이즈-무시, 늘어나고줄어듬)
flex-none (고정된 크기)

flex-initial
flex-auto
flex-1
flex-none

더 간단하게 grow grow-0 으로 처리할 수 있다.

grow
w-32
grow-0

더 간단하게 shrink shrink-0 으로 처리할 수 있다.

shrink
shink-0
w-96

Grid

Grid item 정렬방법

grid justify-items-start

박스
박스
박스

grid justify-items-center

박스
박스
박스

grid justify-items-end

박스
박스
박스

grid grid-flow-col justify-items-stretch

박스
박스
박스

grid justify-stretch

위로 동일 작동..별 필요없는 듯
박스
박스
박스

Grid Table 만들기

grid-col-4 col-span-2 row-span-2 gap-2

colume
col-span-2
colume
row-span-2
colume
colume
colume
colume
colume

Font, Text 관련

font Size, Weight, Style

text-sm

text-base

text-lg

text-xl

text-2xl

text-3xl

text-4xl

text-5xl

text-6xl

text-7xl

text-8xl

text-9xl

font-light

font-normal

font-medium

font-semibold

font-bold

subpixel-antialiased

antialiased

italic

not-italic

1234567890

1st

0

12121 proportional-nums

121290909 tabular-nums (숫자의 동일한 너비)

글자간격

tracking-tight

Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim.

tracking-normal

Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim.

tracking-wide

Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim.

글자 라인간격

leading-none
Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim.

leading-tight
Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim.

leading-snug
Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim.

leading-normal
Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim.

leading-relaxed
Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim.

leading-loose
Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim.

Text Align

text-left
Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim.

text-center
Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim.

text-right
Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim.

text-justify
Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim.

text-start
Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim.

text-end
Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim.

Text 수직정렬

align-top, align-middle, align-bottom, align-bassline
align-text-top, align-text-bottom
align-sub, align-super

Text Color

text-slate-500

text-gray-500

text-zinc-500

text-neutral-500

text-stone-500

text-orange-500

text-rose-500

text-red-500

text-pink-500

text-amber-500

text-yellow-500

text-lime-500

text-green-500

text-teal-500

text-sky-500

text-blue-500

text-indigo-500

text-violet-500

text-fuchsia-500

underline

overline

line-through

no-underline

underline decoration-red-500 decoration-dotted decoration-4 underline-offset-4

normal-case

lowercase

uppercase

capitalize style

Container

columns-3

화면크기에 따라서 내용 정렬이 달라지게 할때 필요..

1. Well, let me tell you something, ...

2. Sure, go ahead, laugh...

3. Maybe we can live without...

4. Look. If you think this is...