개요
기존 프로젝트가 마무리되어, 새로운 프로젝트를 시작하려고 한다.
이번 프로젝트에선 기존과 다르게 색다른 시도를 해볼 생각인데,
단순히 react만을 사용하는 것이 아닌, typescript와 tailwind css를 접목하는 것이다.
실무에서 두 개가 자주 등장하기에, 프로젝트를 통해 사용 방식을 익혀두려고 한다.
tailwind css?
이번 게시글에선 tailwind css 사용법에 대해 정리해보려 한다.
tailwind css는 CSS를 따로 작성할 필요 없이, HTML/JSX에서 바로 디자인을 적용하는 방식이다.
/* 기존 CSS */
.button {
background-color: blue;
color: white;
padding: 10px 20px;
border-radius: 5px;
}// tailwind css 적용
<button class="bg-blue-500 text-white px-4 py-2 rounded">클릭하세요</button>
RN 프로젝트를 위주로 진행했던 나는 별도의 css 파일을 작성하는 것에 불편함이 있었고, 해당 방식을 채택하게 되었다.
tailwind css 설치하기
1. 먼저, 터미널에서 다음 명령어를 통해 tailwind css를 설치한다.
npm install -D tailwindcss postcss autoprefixer
2. 다음, Tailwind의 기본 설정 파일을 만들기 위해 다음 명령어를 추가적으로 입력한다.
npx tailwindcss init -p실행하면 아래 두 개의 파일이 프로젝트 루트 폴더에 생성된다.
tailwind.config.js→ Tailwind 설정 파일postcss.config.js→ PostCSS 설정 파일
3. tailwind.config.js 파일을 열어서 다음과 같이 수정한다.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}"
],
theme: {
extend: {},
},
plugins: [],
};- content 배열에 JSX/TSX 파일이 있는 src/ 폴더를 포함한다.
4. index.css 파일을 열어서 Tailwind 관련 내용을 추가한다.
@tailwind base;
@tailwind components;
@tailwind utilities;위 과정을 통해 프로젝트에 tailwind css를 적용할 수 있는 기반을 마련하였다.
이제 본격적으로 tailwind css를 사용하여 디자인을 진행해보자.
tailwind css 사용해보기
tailwind css는 jsx에서 바로 스타일을 적용할 수 있다.
간단한 예시로, 이렇게 작성된 css를 tailwind 방식으로 변경해보자.
.container {
display: flex;
height: 100vh;
background-color: #333;
}<div className="flex items-center justify-center bg-gray-90">위와 같이 변경하면 동일한 효과를 확인할 수 있다!
아래는 tailwind에서 기본적으로 제공하는 사이즈 표준을 정리한 표이다.
[ 화면 배치 관련 ]
1. 화면 크기 관련 클래스 정리
| Tailwind 클래스 | CSS 대응값 | 설명 |
|---|---|---|
h-screen | height: 100vh; | 전체 화면 높이 |
h-full | height: 100%; | 부모 요소 기준 100% 높이 |
h-96 | height: 24rem; | 24rem(384px) |
min-h-screen | min-height: 100vh; | 최소 높이 100vh |
max-h-64 | max-height: 16rem; | 최대 높이 16rem |
sm:h-80 | @media (min-width: 640px) { height: 20rem; } | 반응형 높이 |
2. Flex 관련 클래스 정리
| 속성 | 설명 |
|---|---|
flex | Flexbox 활성화 |
flex-row | 가로 정렬 (기본값) |
flex-col | 세로 정렬 |
items-center | 세로 중앙 정렬 |
justify-center | 가로 중앙 정렬 |
justify-between | 양쪽 정렬 |
3. 여백 관련 클래스 정리
| 속성 | 설명 |
|---|---|
m-4 | 바깥쪽 여백 (margin) |
p-6 | 안쪽 여백 (padding) |
mx-4 | 좌우 마진 |
my-4 | 상하 마진 |
px-2 | 좌우 패딩 |
py-2 | 상하 패딩 |
4. 사이즈 관련 클래스 정리
| Tailwind 클래스 | CSS 값 | 픽셀(px) 변환 |
|---|---|---|
w-1 | width: 0.25rem; | 4px |
w-4 | width: 1rem; | 16px |
w-8 | width: 2rem; | 32px |
w-16 | width: 4rem; | 64px |
w-32 | width: 8rem; | 128px |
w-64 | width: 16rem; | 256px |
w-96 | width: 24rem; | 384px |
[ 폰트 관련 ]
1. 폰트 크기 관련 클래스 정리
| 크기 | 클래스 | px 값 (기본) | rem 값 |
|---|---|---|---|
| xs | text-xs | 12px | 0.75rem |
| sm | text-sm | 14px | 0.875rem |
| base (기본) | text-base | 16px | 1rem |
| lg | text-lg | 18px | 1.125rem |
| xl | text-xl | 20px | 1.25rem |
| 2xl | text-2xl | 24px | 1.5rem |
| 3xl | text-3xl | 30px | 1.875rem |
| 4xl | text-4xl | 36px | 2.25rem |
| 5xl | text-5xl | 48px | 3rem |
| 6xl | text-6xl | 60px | 3.75rem |
| 7xl | text-7xl | 72px | 4.5rem |
| 8xl | text-8xl | 96px | 6rem |
| 9xl | text-9xl | 128px | 8rem |
2. 폰트 굵 관련 클래스 정리
| Tailwind 클래스 | 굵기 (weight) | 설명 |
|---|---|---|
font-thin | 100 | 가장 얇은 글씨 |
font-extralight | 200 | 매우 얇은 글씨 |
font-light | 300 | 얇은 글씨 |
font-normal | 400 | 기본 글씨 (일반적인 굵기) |
font-medium | 500 | 약간 두꺼운 글씨 |
font-semibold | 600 | 굵은 글씨 |
font-bold | 700 | 더 굵은 글씨 |
font-extrabold | 800 | 매우 굵은 글씨 |
font-black | 900 | 가장 굵은 글씨 |
이처럼 tailwind는 사용자를 위해 다양한 css 틀을 제공하고 있으니, 잘 활용하면 제작이 더욱 쉬워질 것 같다.
물론 아직 익숙치 않아서 찾아보는데 시간이 더 쓰이는 것은 비밀
