리액트 공부하기 - 스타일링 파트3. Tailwind CSS

 테일윈드 CSS란?

클래스 이름으로 스타일을 바로 적용하는 유틸리티 퍼스트(Utility-first) CSS 프레임워크야.

클래스명으로 !

 

기존에 코드를 다 쳐야하는 불편함이 테일윈드를 쓰면 완화 된다.

 

쉽게 말하면,
css 파일 따로 안 쓰고, html(또는 리액트 컴포넌트) 안에 바로 클래스 이름만 써서 스타일링 하는 방식이야.

예를 들어

<button className="bg-blue-500 text-white px-4 py-2 rounded">
  버튼
</button>

이렇게 쓰면

• bg-blue-500 → 배경 파란색
• text-white → 글자 흰색
• px-4 py-2 → 좌우 패딩 4, 위아래 패딩 2
• rounded → 둥근 테두리

이걸 CSS 없이 바로 적용해주는 거지.

---

👩🏻‍💻설치 방법

초기 설정할 게 다소 많다.

공식 사이트에서 보고 따라서 설치 하면 됨.

프레임워크에서, 우린 vite 사용하니까 vite로

vite에서 react 선택. 이제 하라는 대로 따라 하면 됩니다!

 

 

 

 

---

🧚‍♀️ Vite + React + Tailwind CSS 설치 & 적용 가이드

📖 프로젝트 생성

터미널에서 아래 명령어로 Vite + React 프로젝트를 생성해줍니다.

npm create vite@latest my-project -- --template react

설치가 끝나면 폴더로 이동해서 의존성 설치!

cd my-project
npm install

---

📖 Tailwind CSS 설치

Tailwind CSS와 필요한 패키지들을 설치해줍니다.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

tailwindcss init -p 명령어는 tailwind.config.js와 postcss.config.js 파일을 동시에 만들어줘요.

---

📖 Tailwind 설정

tailwind.config.js 파일을 열고, content 경로를 아래처럼 수정해줍니다.

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

---

📖 CSS 파일에 Tailwind 추가

src 폴더에 index.css 파일을 만들고 아래 내용을 입력합니다.

@tailwind base;
@tailwind components;
@tailwind utilities;

그리고 main.jsx 파일에서 이 CSS를 임포트해줍니다.

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css' // 여기!

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

---

📖 JSX에서 Tailwind 사용하기

이제 App.jsx 파일을 열어서 Tailwind 유틸리티 클래스를 마음껏 써보세요.

function App() {
  return (
    <div className="p-6 bg-gray-100 min-h-screen flex items-center justify-center">
      <h1 className="text-4xl font-bold text-blue-600 underline">
        Hello Tailwind!
      </h1>
    </div>
  )
}

export default App;

---

📖 개발 서버 실행

마지막으로 아래 명령어로 개발 서버를 실행합니다.

npm run dev

 

---

 

---

 

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

 

테일윈드 공식 홈페이지 사이트

 

 

Tailwind CSS CheatSheet for Beginners and Not Only

조교님이 추천해주신 사이트 : 속성을 빠르게 찾고 싶을 때.

 

---

기본 문법 예시

클래스 이름으로 바로 스타일을 조합해서 사용해.

🧚‍♀️ 레이아웃

• flex → flexbox
• items-center → 수직 정렬
• justify-center → 수평 정렬
• gap-4 → 간격 1rem (4 = 1rem)

🧚‍♀️ 크기

• w-64 → width: 16rem
• h-10 → height: 2.5rem

🧚‍♀️ 여백

• p-4 → padding: 1rem
• m-2 → margin: 0.5rem

🧚‍♀️ 색상

• bg-red-500 → 배경 빨강
• text-gray-700 → 글자색 회색

🧚‍♀️ 기타

• rounded-lg → 둥근 테두리
• shadow-md → 그림자
• hover:bg-blue-700 → hover 시 배경색 변경

---

 

공부하다 궁금했던 점. 클래스를 변경해버리면, 어떻게 엔진이 구조를 파악하는거지 ?

예를 들어 이 div가 어느 div인지 어떻게 구별을해 ?

 

✓ 테일윈드에서는 "클래스 이름"이 역할이 아님

원래 우리가 class="header", class="footer" 이런 식으로 구조나 역할을 구분해왔잖아?
근데 테일윈드에서는 클래스가 디자인(스타일)을 담당해.

예를 들어

<div class="bg-blue-500 p-4 rounded">
  Hello
</div>

여기서 class는 이 div가 어떤 스타일인지만 알려주고,
‘이게 헤더인지, 카드인지, 버튼인지’ 같은 정보는 안 줘.

✓그럼 어떻게 구분하지?

 1. HTML 구조로 구분

결국 HTML 트리 구조에서 구분하게 돼. 리액트로 짜면

<header className="bg-gray-800 p-4 text-white">헤더</header>
<main className="p-8">본문</main>
<footer className="bg-gray-900 p-4 text-white">푸터</footer>

요렇게 태그랑 구조로 구분하는 거야.

👉 역할은 태그나 컴포넌트 이름으로
👉 스타일은 테일윈드 클래스로

이렇게 나누는 거지.

---

 2. 컴포넌트화

리액트 쓴다면

const Header = () => (
  <header className="bg-gray-800 p-4 text-white">헤더</header>
)

컴포넌트 이름으로 Header, MainContent, Footer 처럼 구조와 역할을 구분해주니까 괜찮아.

---

 3. 필요하면 className으로 역할 추가

진짜 꼭 구분해야 할 상황이면 이렇게 써도 돼

<div className="card bg-white p-4 rounded shadow">
  내용
</div>

그리고 CSS에

.card {
  /* 특별한 상황에서만 사용하는 스타일 */
}

혹은 JS에서 .card로 선택해서 처리할 수도 있어.

근데 사실 테일윈드에서는 이걸 자주 안 쓰고, 컴포넌트화로 해결하는 게 정석이야.

---

✓ 정리

테일윈드는 클래스명으로 구조를 구분하는 게 아니고,
구조는 코드 구조(컴포넌트/태그)로 구분해.
클래스는 오직 스타일 담당!

만약 리액트 없이 순수 HTML에서만 테일윈드를 쓴다면,
HTML의 구조만 잘 짜주면 문제 없어.
리액트에선 컴포넌트 단위로 딱딱 나누니까 더 깔끔해.

 

---

 단점: 재사용성 문제?

테일윈드는 SCSS 믹스인이나 스타일드 컴포넌트처럼
“반복되는 스타일 블록을 하나로 묶는 기능”이 기본적으로는 없다.

대신 다음 방법으로 재사용을 한다.

✎ 방법 1: @apply 사용하기 (CSS에서)

index.css나 새 css 파일에

.btn {
  @apply bg-blue-500 text-white px-4 py-2 rounded;
}

이렇게 선언해두고
리액트에서

<button className="btn">버튼</button>

하면 가능하다

✎방법 2: 리액트에서 컴포넌트화

const Button = ({ text }) => (
  <button className="bg-blue-500 text-white px-4 py-2 rounded">
    {text}
  </button>
)

버튼 스타일을 고정하고, 안에 내용만 바꾸는 식.

 

---

테일윈드 쓸 때 감 잡는 팁

아직 감이 안 온다면 딱 이 정도만 기억하고 써보면 좋아

✓ 색상

• bg-, text-
• 예) bg-blue-500, text-white

✓ 여백

• p-, m-
• 예) p-4, mt-2, px-8

✓레이아웃

• flex, items-center, justify-between
• 예) flex items-center justify-between

✓ 크기

• w-, h-
• 예) w-64, h-10

✓ 테두리, 그림자

• rounded, shadow-md

→ 이것만 익숙해져도 80%는 커버 가능

---

추천 연습법

처음엔 이렇게 하면 감이 확 잡힐 거야
→ 평소 자주 쓰는 UI를 테일윈드로 복사해보기
예) 네이버 헤더, 인스타그램 프로필 카드
→디자인 없이 wireframe 느낌으로 만들어보기
레이아웃 위주로 flex, p-, bg-만으로 조립해보는 거

 

---

출처 : 챗지피티, 오즈코딩스쿨 학습자료