[React] styling : Tailwind

박하늘·2025년 2월 22일

React

목록 보기

8/15

✨ Tailwind 란?

가장 대표적인 Utility-First CSS 프레임워크
이미 작성된 CSS 코드를 클래스명으로 조합하여 스타일을 직접 구성하는 방식을 사용

⚙️ 기본 설치 및 설정

🖇️ [ 사이트_참고 ]
https://tailwindcss.com/docs/installation/using-vite

[설치]
1️⃣ Tailwind CSS 설치

npm install tailwindcss @tailwindcss/vite

2️⃣ vite.config.js 설정

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite' // ✨ 이 부분 추가

export default defineConfig({
  plugins: [tailwindcss()], // ✨ 이 부분 추가
})

🔽 [수정 전]
🔽 [수정 후]

👉🏻 노란 상자 부분 추가 해주기

3️⃣ index.css에 Tailwind CSS 불러오기

📁 index.css

@import "tailwindcss";

위 내용 추가로 import 해주기

‼️ 추가 설치 내용

[오류 메시지] - Unknown at rule @tailwind

(1) Extension 설치

PostCSS Language Support
Tailwind CSS IntelliSense → tailwind 클래스명 자동 완성 기능

(2) Setting 값 변경

VS Code의 설정 ( ⚙️ - 톱니바퀴 모양) → setting
→ file associations 검색 → *.css 항목 tailwindcss 로 설정

[ 기본 사용 ]

*️⃣ 공식 사이트 참고

https://tailwindcss.com/

1️⃣ 원하는 스타일속성 검색하여 사용

(1) 아래 빨간 상자 부분에 검색어 입력

(2) 해당 속성 검색 하였을 때 ...
(왼쪽: 실제 tailwind 사용 class) / (오른쪽: css 원본 style 속성값) 참고하여 왼쪽 class 명으로 사용

(2-1) 내가 사용하고자 하는 값이 없다면 아래 사진 처럼 커스텀 class 입력 가능
📍 예시 : 원하는 속성 및 속성값 = width: 155px → w-[155px]

2️⃣ 예제

[ CSS ]

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind 없이 버튼 스타일링</title>
  <style>
    .btn {
      background-color: #3b82f6; /* Tailwind bg-blue-500 */
      color: white; /* Tailwind text-white */
      font-weight: bold; /* Tailwind font-bold */
      padding: 8px 16px; /* Tailwind py-2 px-4 */
      border-radius: 4px; /* Tailwind rounded */
      border: none;
      cursor: pointer;
      transition: background-color 0.2s; /* Hover 효과 부드럽게 */
    }

    .btn:hover {
      background-color: #1e40af; /* Tailwind hover:bg-blue-700 */
    }
  </style>
</head>
<body>
  <button class="btn">클릭하세요</button>
</body>
</html>

[ tailwind ]

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  클릭하세요
</button>

🚨 사용 주의 및 추가 사항

first-child 적용 예시 💡
[CSS] 예시
```
div p:first-child {
 color: #ef4444; /* Tailwind text-red-500 */
}
```
[tailwind] 예시
```
<div class="space-y-4">
<p class="first:text-red-500">첫 번째 문단입니다.</p>
<p>두 번째 문단입니다.</p>
<p>세 번째 문단입니다.</p>
</div>
```
🔮 만약 <p\> 전체에 다 적용되기를 원할 경우에는, <p class="text-red-500"\> 세개 다 일일이 적용 시켜야 함,
<p class="first:text-red-500"\> 이 코드를 두 번째 문단 <p\> 태그에 달았다면 적용되지 않음 first 가 맞는 경우에만 적용된다.
전역 CSS 속성 파일 ... 💡
: 파일의 깔끔한 관리를 위하여 전역 속성이 들어있는 CSS 파일을 지우고 싶다면, 해당 전역 속성을 복사하여 html 파일에 넣어주기

📁 [ 전역속성 포함된 index.css ]
: 코드 복사 !!

📁 [ index.html ]
: 복사한 코드 붙여넣기
특정 태그 스타일 💡
tailwindcss h2 태그 특정 태그(h2 등)에 대한 스타일을 직접 제공하지 않기 때문에 따로 지정