Tailwind

---

🎨 Tailwind란?

정의

Tailwind CSS는 미리 정의된 유틸리티 클래스를 조합해서 스타일을 만드는 CSS 프레임워크다.

클래스를 직접 조합해 UI를 빠르게 만들 수 있고, 별도 CSS를 많이 작성하지 않아도 된다.

🧩 특징

• 유틸리티 클래스 기반으로 스타일을 작성한다.
• 컴포넌트 단위로 빠르게 화면을 만들기 좋다.
• CSS 파일을 크게 늘리지 않아도 된다.
• 반응형, hover, focus 같은 상태 스타일을 클래스만으로 다룰 수 있다.

🛠️ 설치와 설정

npm install tailwindcss postcss autoprefixer

npx tailwindcss init

tailwind.config.js에서 사용 범위를 설정한다.

module.exports = {
  content: ["./src/**/*.{js,jsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

src/index.css에 Tailwind 지시어를 넣는다.

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

🧪 사용 예시

function App() {
  return (
    <h1 className="text-2xl font-thin text-amber-500">
      Vite + React
    </h1>
  );
}

🧱 자주 보는 클래스

• text-* : 글자 크기나 색상
• font-* : 글꼴 두께
• p-*, m-* : 여백
• flex, grid : 레이아웃
• rounded-* : 모서리 둥글기
• hover:* : 마우스 오버 상태

⚖️ 장점과 단점

장점

• 빠르게 UI를 만들 수 있다.
• 클래스명 고민이 줄어든다.
• 반응형 스타일을 만들기 쉽다.

단점

• 클래스가 길어질 수 있다.
• HTML/JSX가 다소 복잡해 보일 수 있다.
• 팀에서 규칙 없이 쓰면 가독성이 떨어질 수 있다.

📌 정리

• Tailwind는 유틸리티 클래스로 스타일을 조합하는 방식이다.
• React 컴포넌트와 함께 쓰면 빠르게 UI를 만들 수 있다.
• React-style-component와 같이 보면 스타일링 방식 차이를 이해하기 좋다.

---

연결문서

• React-style-component
• React-Component
• React-JSX
• vite