예전에 내가 개발 배웠을때 (22년에 부트캠프 다녔으니) 까지만 해도 bootstrap을 많이 사용하고 tailwind css 를 많이 안 썼던 걸로 기억하는데
요즘은 tailwind css 가 거의 대세를 이루는 것 같다
(느낌상 채용공고에 부트스트랩 찾는 데 아무데도 없음)
그래서 함 쳐봤더니 진짜네
tailwind 사용법을 좀 익혀봐야겠다.
버전 문제
설치부터 한참 헤맸는데 그나마 windsurf 가 있어서 다행이었다;;;
그리고 얘가 기본 설정까지 다해줬는데도 npm run dev 하니까 오류가 뜨길래
뭐지... 했더니 너무 최신 버전을 설치하면 이런 문제가 발생한다고.
node_modules/tailwindcss": {
"version": "3.4.1",3.4.1 로 설치했더니 정상적으로 동작함.
근데 App.js 에서 쓰려고 하니까 안되는데
GPT
오류가 뜨는 이유는 Tailwind CSS가 제대로 설정되지 않았거나, App.js에서 Tailwind 스타일을 가져오지 않았기 때문일 가능성이 큽니다.
✅ Tailwind CSS 설정 및 적용 방법
1️⃣ Tailwind CSS 설치 (이미 완료)
보통 Tailwind는 아래 명령어로 설치합니다.
npm install -D tailwindcss postcss autoprefixer그리고 Tailwind 설정 파일을 생성합니다.
npx tailwindcss init -p이제 프로젝트 루트에 tailwind.config.js와 postcss.config.js 파일이 생성됩니다.
2️⃣ Tailwind CSS 설정 파일 수정
📌 파일: tailwind.config.js
이 파일을 열어서 content 항목을 수정합니다.
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./src/**/*.{js,jsx,ts,tsx}", // src 폴더 안의 모든 JS, JSX, TS, TSX 파일에서 Tailwind 적용 가능
],
theme: {
extend: {},
},
plugins: [],
};💡 content 배열에는 Tailwind가 적용될 파일들을 지정해야 합니다. ("./src/**/*.{js,jsx,ts,tsx}")
3️⃣ Tailwind CSS 기본 스타일 가져오기
📌 파일: src/index.css (없다면 생성)
아래와 같이 Tailwind의 기본 스타일을 추가합니다.
@tailwind base;
@tailwind components;
@tailwind utilities;💡 이 코드는 Tailwind의 기본 스타일을 포함시킵니다.
4️⃣ index.css를 App.js에서 불러오기
📌 파일: src/App.js
index.css를 App.js에서 불러와야 합니다.
import "./index.css";
function App() {
return (
<div className="text-center bg-blue-500 text-white p-5">
<h1 className="text-3xl font-bold">Hello Tailwind CSS!</h1>
</div>
);
}
export default App;5️⃣ 실행하기
이제 프로젝트를 실행하면 Tailwind CSS가 정상적으로 적용된 것을 볼 수 있습니다.
npm start🚀 추가 확인 사항
tailwind.config.js에content설정이 올바르게 되어 있는지 확인index.css에서@tailwind base; @tailwind components; @tailwind utilities;가 제대로 추가되었는지 확인App.js또는 다른 컴포넌트에서import "./index.css";가 되어 있는지 확인
뭐지? 설정은 다 맞게 돼있는데
왜 컴포넌트를 갖다 붙여넣으면 빨간줄이 뜨는걸까
나는 그냥 아무거나... 일단 넣어보고... 보면서 이것저것 만져보려고 했을 뿐데 순탄치가 않음
아ㅡㅡ
React에서는 HTML 속성 class 대신 className을 사용해야 합니다. 현재 코드에서는 class를 사용하고 있어서 ESLint가 경고를 표시하는 것입니다.
확실히 편하긴 하네,,,
게다가 이쁨
대충써봤음
규칙이 대체로
각 - 뒤에는 숫자가 들어감
(뭐마다 다른거같다 글자는 1~10같은데 패딩같은건 96까지 있음)container- 전체 그리드 rows 인듯
columns- 컬럼w- width
h- height
size- 이거 두개가 같을 때 (1:1) 한번에 설정하는 게 있네
x- 양옆 (left, right)
y- 위아래 (top, bottom)
text- 텍스트 컬러(color)
font- 폰트 속성 (여러가지 폰트속성 일괄, ex. font-bold )
indent- text-indent (텍스트 속성에서는 컬러 빼고는 다 뒤에이름만 쓰면 되는 듯)
decoration- text-decoration ... 등등등
rounded- 보더 radius -> full 이 있음 (50%)
bg- 배경 관련한거
이 뒤에 색깔쓰면 background-color
fixed 이런거 쓰면 Background Attachment
clip-border 이면 Background Clip 이런 식
border- 보더 관련 접두어
ring- 버튼 겉에있는 그림자 말하는듯???
p- 패딩 (py, px 이런 식으로 쓰는 듯)
m- 마진
l, r, t, b right left top bottom
transition- 트랜지션 (미리 세팅된 것들이 많음)
duration-
ease-in-out
animate- 애니메이션 (spin, pulse, bounce 등)
table- 표 (auto, fixed)
cursor- 커서 관련
등등등... 인듯!!
사용하면서 또 하나 배운것 :
CSS 사용하니까 당연하긴 한데,,,, 오랜만이라 좀 아리까리했던 것
동적으로 스타일을 주려고 하다보니 인라인으로 스타일을 넣었는데, 그러니까 hover 시 클래스를 줘도 안 먹는다.
다시한번 복습하는 계기가 됨. 인라인이 짱이라는걸....
GPT
🔍 문제의 원인: 인라인 스타일 vs Tailwind CSS의 우선순위(CSS Specificity)
🔴 문제: hover:bg-red가 적용되지 않는 이유
<button
className="p-10 rounded-3xl hover:bg-red"
style={{ backgroundColor: props.bgColor, color: props.color }}
>
버튼
</button>이 코드에서 Hover 효과가 적용되지 않는 이유는 CSS의 우선순위 때문이에요.
🔎 CSS 우선순위 정리
CSS에서 적용되는 스타일의 우선순위는 다음과 같아요 (우선순위 높은 순서대로 정렬):
1️⃣ 인라인 스타일 (예: style={{ backgroundColor: "#000" }}) ✅ (가장 강함!)
2️⃣ ID 선택자 (예: #my-button {})
3️⃣ 클래스, 가상 클래스, 속성 선택자 (예: .hover:bg-red {})
4️⃣ 태그 선택자 (예: button {})
5️⃣ 기본 스타일 (브라우저 기본값)
👉 지금 style={{ backgroundColor: props.bgColor }}를 적용했기 때문에, 이 값이 Tailwind의 hover:bg-red보다 강한 우선순위를 가짐!
👉 즉, Hover 시에도 style={{ backgroundColor: props.bgColor }}가 여전히 유지되기 때문에, Tailwind의 hover 효과가 덮어씌워지지 않음 😵
