공식 사이트

화면크기 (반응형)

• sm: 640px 이상의 화면
• md: 768px 이상의 화면
• lg: 1024px 이상의 화면
• xl: 1280px 이상의 화면
• 2xl: 1536px 이상의 화면

반응형 할땐 모바일 먼저 작업하는 것이 좋음!!

margin

my-숫자 : y축 (margin Top, margin Bottom) margin 한번에 설정

Font Weight

font-thin	font-weight: 100;
font-extralight	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;

Font Size

text-xs	font-size: 0.75rem; /* 12px */
line-height: 1rem; /* 16px */
text-sm	font-size: 0.875rem; /* 14px */
line-height: 1.25rem; /* 20px */
text-base	font-size: 1rem; /* 16px */
line-height: 1.5rem; /* 24px */
text-lg	font-size: 1.125rem; /* 18px */
line-height: 1.75rem; /* 28px */
text-xl	font-size: 1.25rem; /* 20px */
line-height: 1.75rem; /* 28px */
text-2xl	font-size: 1.5rem; /* 24px */
line-height: 2rem; /* 32px */
text-3xl	font-size: 1.875rem; /* 30px */
line-height: 2.25rem; /* 36px */
text-4xl	font-size: 2.25rem; /* 36px */
line-height: 2.5rem; /* 40px */
text-5xl	font-size: 3rem; /* 48px */
line-height: 1;
text-6xl	font-size: 3.75rem; /* 60px */
line-height: 1;
text-7xl	font-size: 4.5rem; /* 72px */
line-height: 1;
text-8xl	font-size: 6rem; /* 96px */
line-height: 1;
text-9xl	font-size: 8rem; /* 128px */
line-height: 1;

Line Height

leading-숫자

leading-3	line-height: .75rem; /* 12px */
leading-4	line-height: 1rem; /* 16px */
leading-5	line-height: 1.25rem; /* 20px */
leading-6	line-height: 1.5rem; /* 24px */
leading-7	line-height: 1.75rem; /* 28px */
leading-8	line-height: 2rem; /* 32px */
leading-9	line-height: 2.25rem; /* 36px */
leading-10	line-height: 2.5rem; /* 40px */
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-color

text-[#색상코드] 폰트 컬러 색상을 임의로 선택하기
text-white 흰색

Flex Direction

flex-row	flex-direction: row;
flex-row-reverse	flex-direction: row-reverse;
flex-col	flex-direction: column;
flex-col-reverse	flex-direction: column-reverse;

Justify Content

justify-normal	justify-content: normal;
justify-start	justify-content: flex-start;
justify-end	justify-content: flex-end;
justify-center	justify-content: center;
justify-between	justify-content: space-between;
justify-around	justify-content: space-around;
justify-evenly	justify-content: space-evenly;
justify-stretch	justify-content: stretch;

Align Items

items-start	align-items: flex-start;
items-end	align-items: flex-end;
items-center	align-items: center;
items-baseline	align-items: baseline;
items-stretch	align-items: stretch;

Background Color

bg-black	background-color: rgb(0 0 0);
bg-white	background-color: rgb(255 255 255);
bg-slate-50	background-color: rgb(248 250 252);
bg-slate-100	background-color: rgb(241 245 249);

Display

block	display: block;
inline-block	display: inline-block;
inline	display: inline;
flex	display: flex;
inline-flex	display: inline-flex;
table	display: table;
inline-table	display: inline-table;
table-caption	display: table-caption;
table-cell	display: table-cell;
table-column	display: table-column;
table-column-group	display: table-column-group;
table-footer-group	display: table-footer-group;
table-header-group	display: table-header-group;
table-row-group	display: table-row-group;
table-row	display: table-row;
flow-root	display: flow-root;
grid	display: grid;
inline-grid	display: inline-grid;
contents	display: contents;
list-item	display: list-item;
hidden	display: none;

List Style Type

list-none	list-style-type: none;
list-disc	list-style-type: disc;
list-decimal	list-style-type: decimal;

List Style 추가하고 싶을 때

/// tailwind.config.js 파일 추가

module.exports = {
  theme: {
    listStyleType: {
      none: 'none',
      disc: 'disc',
      decimal: 'decimal',
      square: 'square',
      roman: 'upper-roman',
    }
  }
}

기타

엔터 넓은 화면에서 없애고 싶을 때

<br className="lg:hidden" />

커서 포인터 표시하기

cursor-pointer

border가 적용이 안될 때

프로젝트에서 Preflight를 비활성화한 경우 테두리가 실제로 적용되도록 하려면 유틸리티 중 하나를 사용할 때마다 테두리 스타일 유틸리티를 포함해야 함.

<div class="border-4 border-indigo-500 ...">
<div class="border-4 border-solid border-indigo-500 ...">
  <!-- ... -->
</div>

화면 전체로 크게 주기

w-screen : 100vh랑 똑같음. 높이는 앞에 h로 바꿔주기