style

Tailwindcss 사용법

css, style, tailwindcss
Views: 959

시작하기

저번 포스트에서 Tailwindcss의 초기 설정을 완료햇습니다.
다음으로 사용법을 알마 보도록 하겠습니다.

Tailwindcss는 정말로 사용하기 쉽습니다.
부트스트랩을 사용해보신 분은 익숙하실겁니다. 클래스에 이름을 넣어 주기만 하면 끝! 정말 간편합니다.
부트스트랩의 경우 기본 스타일이 정해져 있지만, tailwind의 경우 css를 축약형태로 클래스에 입력하면 바로 적용되는 방식입니다.
쉽게 말해서 tailwind는 커스터마이징에 용이합니다.

Tailwindcss 특징

기본 단위는 rem입니다.
반응형에 최적화 되어 있습니다.
transition, transform은 현재 구현이 되어있지 않습니다
이부분의 경우 jsx inline style로 구현을 하거나 styled-components 혹은 css/scss로 구현을 할 수 있습니다.

사용하기

간단한 사용법을 알아보겠습니다.
사용법은 정말로 간단합니다.

1
<div className="w-10 h-4 rounded-full bg-gray-500 text-white">TailWindcss</div>

수치 입력

margin, padding, font-size등의 수치 입력 스타일의 경우

1
2
3
4
5
6
7
8
9
10
ml /*margin-left;*/
mx /*margin-left margin-right;*/
my /*margin-top margin-bottom;*/
pl /*padding-left;*/
px /*padding-left padding-right;*/
py /*padding-top padding-bottom;*/
w /*width;*/
max-w /*max-width;*/
h /*height;*/
max-h /*max-height;*/

적용 스타일이름 - 수치형식으로 클래스를 작성하면 됩니다.
예를 들면 ml-2 pr-3 text-lg 

1
2
3
auto /*auto;*/
full /*100%;*/
screen /*100vh or 100vw;*/

클래스

사용 빈수가 많은 클래스에 대해 간단히 알아 보겠습니다.

Display

1
2
3
4
5
6
7
8
9
block /*display: block;*/
inline-block /*display: inline-block;*/
inline /*display: inline;*/
flex /*display: flex;*/
inline-flex /*display: inline-flex;*/
table /*display: table;*/
table-row /*display: table-row;*/
table-cell /*display: table-cell;*/
hidden /*display: none;*/

Position

1
2
3
4
5
static /*position: static;*/
fixed  /*position: fixed;*/
absolute  /*position: absolute;*/
relative  /*position: relative;*/
sticky  /*position: sticky;*/

Top / Right / Bottom / Left

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
inset-0
/*
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
*/ 
 
inset-y-0
/*
  top: 0;
  bottom: 0;
*/

inset-x-0
/*
  right: 0;
  left: 0;
*/ 
/* ... */
top-0 /*top: 0;*/ 
right-0 /*right: 0;*/ 
bottom-0 /*bottom: 0;*/ 
left-0 /*left: 0;*/ 
/* ... */

Text Transform

1
2
3
4
uppercase /*text-transform: uppercase;*/
lowercase /*text-transform: lowercase;*/
capitalize /*text-transform: capitalize;*/
normal-case /*text-transform: none;*/

z-index

1
2
3
4
5
6
7
z-0	    /*z-index: 0;*/
z-10	/*z-index: 10;*/
z-20	/*z-index: 20;*/
z-30	/*z-index: 30;*/
z-40	/*z-index: 40;*/
z-50	/*z-index: 50;*/
z-auto	/*z-index: auto;*/

Font-size

1
2
3
4
5
6
7
8
9
10
text-xs 	/*font-size: .75rem;*/
text-sm 	/*font-size: .875rem;*/
text-base 	/*font-size: 1rem;*/
text-lg 	/*font-size: 1.125rem;*/
text-xl 	/*font-size: 1.25rem;*/
text-2xl 	/*font-size: 1.5rem;*/
text-3xl 	/*font-size: 1.875rem;*/
text-4xl 	/*font-size: 2.25rem;*/
text-5xl 	/*font-size: 3rem;*/
text-6xl 	/*font-size: 4rem;*/

Line-height

1
2
3
4
5
6
leading-none	/*line-height: 1;*/
leading-tight	/*line-height: 1.25;*/
leading-snug	/*line-height: 1.375;*/
leading-normal	/*line-height: 1.5;*/
leading-relaxed	/*line-height: 1.625;*/
leading-loose	/*line-height: 2;*/

Font-weight

1
2
3
4
5
6
7
8
9
font-hairline	/*font-weight: 100;*/
font-thin	/*font-weight: 200;*/
font-light	/*font-weight: 300;*/
font-normal	/*font-weight: 400;*/
font-medium	/*font-weight: 500;*/
font-semibold	/*font-weight: 600;*/
font-bold	/*font-weight: 700;*/
font-extrabold	/*font-weight: 800;*/
font-black	/*font-weight: 900;*/

Background-color

1
2
3
4
bg-transparent	/*background-color: transparent;*/	
bg-black	/*background-color: #000;*/	
bg-white	/*background-color: #fff;*/	
bg-gray-100	/*background-color: #f7fafc;*/

Border style

1
2
3
4
5
border-solid	/*border-style: solid;*/
border-dashed	/*border-style: dashed;*/
border-dotted	/*border-style: dotted;*/
border-double	/*border-style: double;*/
border-none	/*border-style: none;*/

Border color

1
2
3
4
border-transparent	/*border-color: transparent;*/
border-black	/*border-color: #000;*/
border-white	/*border-color: #fff;*/
border-gray-100	/*border-color: #f7fafc*/

Border size

1
2
3
4
5
6
7
8
9
10
border	/*border-width: 1px;*/
border-0	/*border-width: 0;*/
border-2	/*border-width: 2px;*/
border-4	/*border-width: 4px;*/
border-8	/*border-width: 8px;*/
/* ... */
border-t	/*border-top-width: 1px;*/
border-r	/*border-right-width: 1px;*/
border-b	/*border-bottom-width: 1px;*/
border-l	/*border-left-width: 1px;*/

Border radius

1
2
3
4
5
6
7
8
9
10
11
12
13
rounded-none	/*border-radius: 0;*/
rounded-sm	/*border-radius: .125rem;*/
rounded	/*border-radius: .25rem;*/
rounded-lg	/*border-radius: .5rem;*/
rounded-full	/*border-radius: 9999px;*/
rounded-tl-none	/*border-top-left-radius: 0;*/
rounded-tr-none	/*border-top-right-radius: 0;*/
rounded-br-none	/*border-bottom-right-radius: 0;*/
rounded-bl-none	/*border-bottom-left-radius: 0;*/
rounded-tl-full	/*border-top-left-radius: 9999px;*/
rounded-tr-full	/*border-top-right-radius: 9999px;*/
rounded-br-full	/*border-bottom-right-radius: 9999px;*/
rounded-bl-full	/*border-bottom-left-radius: 9999px;*/

Width / Height

width와 height은 사용법이 같습니다.
w를 h으로 바꿔 사용합니다.
예를 들면 h-1 height:0.25rem 입니다.

1
2
3
4
5
6
7
8
9
10
11
12
w-0	/*width: 0;*/
w-1	/*width: 0.25rem;*/
/* ... */
w-auto	/*width: auto;*/
w-px	/*width: 1px;*/
w-1/2	/*width: 50%;*/
w-1/3	/*width: 33.333333%;*/
/* ... */
w-10/12	/*width: 83.333333%;*/
w-11/12	/*width: 91.666667%;*/
w-full	/*width: 100%;*/
w-screen	/*width: 100vw;*/

Padding / Margin

패딩 과 마진은 사용법이 같습니다.
p를 m으로 바꿔 사용합니다.
예를 들면 m-1 margin:0.25rem 입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
p-0	/*padding: 0;*/
p-1	/*padding: 0.25rem;*/
/* ... */
p-px	/*padding: 1px;*/
py-0
/*
padding-top: 0;
padding-bottom: 0;
*/
py-1
/*
padding-top: 0.25rem;
padding-bottom: 0.25rem;
*/
/* ... */
py-px
/*
padding-top: 1px;
padding-bottom: 1px;
*/
px-0
/*
padding-right: 0;
padding-left: 0;
*/
px-1
/*
padding-right: 0.25rem;
padding-left: 0.25rem;
*/
/* ... */
px-px
/*
padding-right: 1px;
padding-left: 1px;
*/
pt-0	/*padding-top: 0;*/
pt-1	/*padding-top: 0.25rem;*/
/* ... */
pt-px	/*padding-top: 1px;*/
pr-0	/*padding-right: 0;*/
pr-1	/*padding-right: 0.25rem;*/
/* ... */
pr-px	/*padding-right: 1px;*/
pb-0	/*padding-bottom: 0;*/
pb-1	/*padding-bottom: 0.25rem;*/
/* ... */
pb-px	/*padding-bottom: 1px;*/
pl-0	/*padding-left: 0;*/
pl-1	/*padding-left: 0.25rem;*/
/* ... */
pl-px	/*padding-left: 1px;*/

Cursor

1
2
3
4
5
6
7
cursor-auto	/*cursor: auto;*/
cursor-default	/*cursor: default;*/
cursor-pointer	/*cursor: pointer;*/
cursor-wait	/*cursor: wait;*/
cursor-text	/*cursor: text;*/
cursor-move	/*cursor: move;*/
cursor-not-allowed	/*cursor: not-allowed;*/

Opacity

1
2
3
4
5
opacity-100	/*opacity: 1;*/
opacity-75	/*opacity: .75;*/
opacity-50	/*opacity: .5;*/
opacity-25	/*opacity: .25;*/
opacity-0	/*opacity: 0;*/

좀 더 자세한 내용은 친절하게 document에 작성되어있습니다.

Share