tailwind css

- react에 tailwindcss적용하기

1. 프로젝트 생성

2. tailwindcss vite버전 설치

npm install tailwindcss @tailwindcss/vite

3. vite.config.ts에 플러그인 추가

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

4. css파일(index.css나 App.css) 에 tailwindcss 가져오기

@import "tailwindcss";

5. cdn이나 빌드된 css파일 html로 첨부하기

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

6. 자동완성기능은 vscode에 Tailwind CSS IntelliSense를 설치한다.

참고: https://tailwindcss.com/docs/installation/using-vite

모든 기능을 알아보는게 아닌 핵심 기능만을 정리할 것이다.

---

- max-w-{...xs|lg|xl|2xl|3xl...}

최상위 요소에 넣어야 하는 클래스이다. 최대 가로 길이를 제한한다. 텍스트나 이미지가 화면 끝에서 끝까지 늘어지면 가독성이 매우 떨어지기 때문에 넣는다. mx-auto를 함께 넣어 가운데 정렬을 한다. 안넣는다면 화면 왼쪽에 사이트가 붙는다.

 

- Grid (2차원 레이아웃)

핵심 클래스

부모 요소 클래스	설명
grid	컨테이너를 grid 환경으로 설정한다
gap-{n}	아이템 사이의 간격을 정한다
grid-cols-{n}	열의 개수를 정한다 (1~12개)
justify-items-end	(좌우정렬) 아이템들을 칸의 끝에 놓는다
justify-items-center	(좌우정렬) 아이템들을 칸의 가운데에 놓는다
justify-items-stretch	(좌우정렬) 아이템들을 칸에 꽉차게 놓는다
content-center	(상하정렬) 아이템들을 칸의 가운데에 놓는다
content-end	(상하정렬) 아이템들을 칸의 끝에 놓는다
content-between	(상하정렬) 아이템들을 최대한 떨어뜨려놓는다
content-stretch	(상하정렬) 아이템들을 칸에 꽉차게 놓는다
place-content-start	아이템들을 왼쪽 위에 놓는다
place-content-end	아이템들을 오른쪽 아래 놓는다
place-content-between	아이템들을 최대한 떨어뜨려놓는다
place-content-stretch	아이템들을 꽉차게 놓는다
place-items-end	아이템을 칸 오른쪽 아래 놓는다
place-items-center	아이템을 칸 가운데 놓는다
place-items-stretch	아이템을 칸에 꽉차게 놓는다

자식 요소 클래스	설명
col-span-{n}	여러 칸을 차지하게 한다
col-start-{n}	n번째 칸에서 시작하게 한다
col-end-{n}	n-1번째 칸을 마지막으로 한다
justify-self-start	(좌우정렬) 칸 시작에 놓인다. 부모의 justify-items-{}를 무시한다
justify-self-center	(좌우정렬) 칸 가운데에 놓인다. 부모의 justify-items-{}를 무시한다
justify-self-end	(좌우정렬) 칸 끝에 놓인다. 부모의 justify-items-{}를 무시한다
justify-self-stretch	(좌우정렬) 칸에 꽉차게 놓인다. 부모의 justify-items-{}를 무시한다
place-self-start place-self-center place-self-end place-self-stretch	아이템을 칸에 (왼쪽위|가운데|오른쪽아래|꽉차게) 놓는다. 부모의 place-items-{}를 무시한다.

 

- flex (1차원 레이아웃)

핵심 클래스

부모 요소 클래스	설명
flex	컨테이너를 flex 환경으로 설정한다.
gap-{n}	아이템 사이의 간격을 정한다
flex-col	자식 요소들이 세로 방향으로 나란히 배치된다.
flex-row	자식 요소들이 가로 방향으로 나란히 배치된다. 기본 상태이다.
flex-wrap	자식 요소들이 가로 방향으로 나란히 배치된다. 가로 길이가 부족하면 자동으로 줄바꿈이 된다.
justify-center	(좌우정렬) 자식 요소들을 가운데에 모은다
justify-end	(좌우정렬) 자식 요소들을 끝에 모은다
justify-between	(좌우정렬) 자식 요소들을 최대한 떨어뜨려놓는다
justify-around	(좌우정렬) 자식 요소들을 적당히 떨어뜨려놓는다
items-start	(상하정렬) 아이템들을 위에 놓는다.
items-center	(상하정렬) 아이템들을 가운데 놓는다.
items-end	(상하정렬) 아이템들을 아래에 놓는다.

자식 요소 클래스	설명
flex-1	필요한만큼 요소가 늘어나거나 줄어든다. grow와 shrink를 둘다 적용한 것이다. 이 요소들이 여러개라면 모두 같은 높이와 길이를 가진다.
flex-auto	공간이 남는다면 요소가 늘어난다. 기본크기보다 작아지지 않는다.
grow	공간이 남는다면 요소가 늘어난다. 기본크기보다 작아지지 않는다.
shrink-0	공간이 부족해도 요소가 줄어들지 않는다. grow옆에 줄어들지 말아야 할 요소가 있다면 사용
self-start	(상하정렬) 위에 놓인다. 부모의 items-{}를 무시한다
self-center	(상하정렬) 가운데 놓인다. 부모의 items-{}를 무시한다
self-end	(상하정렬) 아래에 놓인다. 부모의 items-{}를 무시한다
self-stretch	(상하정렬) 꽉차게 놓인다. 부모의 items-{}를 무시한다

 

grid를 사용할지 flex를 사용할지는 어떻게 정하는가?

화면이 커짐에 따라 칸의 개수가 변한다면 grid를 써야한다.

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
  <div>카드 1</div>
  <div>카드 2</div>
  <div>카드 3</div>
  <div>카드 4</div>
</div>

콘텐츠 크기가 유연하다면 flex를 쓰는 것이 좋다.

<div class="flex flex-wrap gap-4">
  <div class="flex-1 min-w-[200px]">유연한 박스 1</div>
  <div class="flex-1 min-w-[200px]">유연한 박스 2</div>
</div>

 

- spacing (padding, margin)

p-{n}으로 패딩을 준다. 상하만 패딩을 주고 싶다면 py-{n}, 좌우만 패딩을 주고 싶다면 px-{n}을 주면 된다.

상하좌우 따로 패딩을 주고 싶다면 pt-{n}, pb-{n}, pl-{n}, pr-{n}으로 주면 된다.

margin도 패딩과 같은 패턴이다. m-{n}, my-{n}, mx-{n}, mt-{n}, mb-{n}, ml-{n}, mr-{n}으로 주면 된다.

 

- typography

text-{xs|sm|base|lg|xl|2xl|...|8xl|9xl} 로 텍스트 크기를 조절한다.

text-{color}-{n}으로 텍스트 색깔을 조절한다.

text-{left|center|right}으로 텍스트를 정렬한다.

font-{thin|extralight|light|normal|medium|semibold|bold|extrabold|black}로 폰트 굵기를 조절한다.

tracking-{tighter|tight|normal|wide|wider|widest}로 글자 사이 간격을 조절한다.

line-clamp-{n}으로 글이n줄까지만 보이게 한다. 

underline|overline|line-through|no-underline으로 텍스트를 장식한다.

 

- whitespace

div나 p태그 내부에 띄어쓰기, 탭, 엔터 같은 것들이 어떻게 화면에 표현될지 정하는 것.

클래스	설명
whitespace-normal	모든 whitespace를 띄어쓰기 한칸로 표현된다. 디폴트
whitespace-nowrap	한줄로 모든게 표현된다.
whitespace-pre	모든 whitespace가 표현된다. 한줄이 길다면 줄바꿈을 하지 않는다.
whitespace-pre-line	엔터는 표현되지만 띄어쓰기들은 한칸으로 표현된다. 자동 줄바꿈.
whitespace-pre-wrap	모든 whitespace가 표현된다. 자동 줄바꿈. 줄이 바뀌면 whitespace가 없어짐.
whitespace-break-spaces	모든 whitespace가 표현된다. 자동 줄바꿈. 줄이 바뀌어도 whitespace가 표현.

 

- variants

앞에 붙여서 특정 상황일 때 클래스를 적용할 수 있다.

가로길이에 따른 variants - sm: md: lg: xl: 2xl:

테마에 따른 variants - dark: 

---

참고: https://v3.tailwindcss.com/docs/flex