MBTI 테스트 사이트) TroubleShooting 1 : Tailwind CSS📇

밍갱·2025년 2월 25일

PROJECTS

목록 보기

13/20

1. 문제 발생🤯

01. tailwind CSS를 사용한 컴포넌트 디자인

이번 프로젝트에서는 styled-components가 아닌 심화주차에서 배운 Tailwind CSS로 UI 스타일링을 해야한다. 다행히 강의 내용과 발제 문서에 Tailwind CSS를 사용하는 방법에 대해 친절하게 설명되어있어, 그대로 따라해보았다.

Tailwind CSS 공식 문서에서 문법들을 확인하고 한번 적용해보았다. 따로 컴포넌트를 만들어서 import하고... 이름 바꿔서 넣어주고... prefix 넣어주고... 등등 복잡한 과정 없이도 간편하게 CSS를 적용할 수 있다니! 완전 럭키비키잖아🥹

럭키비키가 아니라 언럭키비키였네...🤬 신나서 적용 다 하고 확인해보니 CSS가 하나도 적용되지 않았다. 어디서부터 문제였을까...

2. 개념 정리🧐

01. Tailwind CSS란?

Tailwind CSS는 유틸리티 클래스 기반의 CSS 프레임워크로, class 속성을 통해 HTML에 직접 스타일을 적용한다. 즉, 추가적인 CSS 파일이나 코드가 필요 없다. Tailwind CSS는 불필요한 스타일이 제거되어 속도나 성능 측면에서 좋고, React의 JSX 문법과 함께 사용하기 편리하다. 또한, 기본설정을 커스터마이징할 수 있어, 프로젝트에 맞는 디자인 시스템을 구축할 수 있다.

*유틸리티 클래스란? : 주로 특정한 목적을 위해 메서드를 제공하는 클래스

02. tailwind CSS 설치방법

yarn add tailwindcss@3.3.5 postcss autoprefixer
npx tailwindcss init -p

npx를 실행하고 나서 tailwind.config.js파일과 postcss.config.js 파일이 생성되는지 확인해야한다. 그리고나서, tailwind.config.js, index.css를 아래와 같이 수정한다.

//tailwind.config.js

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

----------------------
//index.css
@tailwind base;
@tailwind components;
@tailwind utilities;

03. Tailwind CSS 적용방법

Tailwind css는 HTML 태그의 클래스 속성에 직접 적용하는 것이 기본적이다.

<div className="w-12 h-12 text-white bg-gray-800"></div>

크기
w-*,h-* : Tailwind에서 미리 정해준 값을 적용. 기본적으로 4px 단위로 증가한다.
w-1/2,h-full : 비율 설정
w-[10px],h-[2rem] : 단위 높이를 지정
text-lg, xl, 2xl... : 텍스트 크기
색상
text-{color name}-number : 텍스트 색상
bg-{color name}-number : 배경 색상

<div className="w-10 h-10 bg-indigo-100">
	<p className="text-sm text-indigo-800">테스트입니다</p>
</div>

반응형
sm:{...} : @media (min-width: 640px) { ... }
md:{...} : @media (min-width: 768px) { ... }
lg:{...} : @media (min-width: 1024px) { ... }
xl:{...} : @media (min-width: 1280px) { ... }
2xl:{...} : @media (min-width: 1536px) { ... }

<div className="w-screen flex flex-col md:flex-row md:justify-center pt-10">
//기본적으로 세로방향(flex-col)이지만, md(768px)이상부터 가로방향(md:flex-row)

hover(마우스오버) 이벤트
hover:{...} : 마우스를 올렸을 때 상태 변화

<button className="bg-indigo-100 text-white hover:bg-indigo-800">Click me!</button>

이 외의 속성들은 공식 문서에서 찾을 수 있다. 공식 문서를 꼭 확인하자.

04. VSCode 익스텐션 - Tailwind CSS IntelliSense

Tailwind CSS IntelliSense 확장 프로그램을 설치하면 유틸리티 클래스가 자동완성된다. 너무 편리하니, Tailwind CSS를 사용한다면 설치할 것을 권장한다!

Tailwind CSS 공식 문서
Tailwind CSS 참고 사이트 1
Tailwind CSS 참고 사이트 2

3. 해결 방안😇

01. chatGPT, 너 아웃!

튜터님께 도움을 요청하기 전에 혼자서 해결해보기 위해 chatGPT의 도움을 받았다. node_modules를 전부 삭제한 다음 다시 설치도 해보고, import가 제대로 되었는지, 오타는 없는지 꼼꼼히 확인했는데... 계속 되는 시도에도 CSS는 꿈쩍도 하지 않아서 chatGPT에게 거듭 물어보았고, 그 중 위의 방법대로 vite.config.js을 수정한 다음 계속해서 삭제-재설치를 반복해보았다. 그래도 요지부동이어서 결국 튜터님께 도움을 받기로...
튜터님께서도 Tailwind CSS 설정은 이상이 없는데, 속성이 적용 안되는 것에 의문을 가지셨다. 그래서 튜터님의 코드와 비교해보았더니 다른 점이 딱 1군데에 있었다. 바로 chatGPT가 수정하라고 알려준 vite.config.js 파일이었다. postcss 어쩌구저쩌구를 삭제해보고 다시 확인해보았다.

이게 왜 되지..? node_modules를 삭제하고 재설치하는 과정에서 이미 문제는 해결되었는데, vite.config.js 파일 설정 때문에 오히려 안되고 있었던 것이었다. 너만 믿고 있었는데 이렇게 배신을 하다니... chatGPT, 너 아웃.

01-1. Tailwind CSS는 못말려

드디어 Tailwind CSS가 정상적으로 적용이 되었다. 그럼 이제 세심한 디자인을 만져볼 차례다.

Home 중앙에 위치한 아이템의 height 값을 늘려주고 싶어서 h-150이란 값을 주고, 얼마나 커졌는지 확인해보았다.

응..? 왜 오히려 작아졌을까?😨 상식적으로 72보다 150이 큰데, 2배만큼 길어진 것도 아니고 오히려 작아졌다.

02. Tailwind CSS의 클래스 범위

Tailwind CSS는 클래스의 범위가 정해져있다. 높이 클래스는 h-0부터 h-96까지만 제공되고, 그 이상의 크기는 h-screen, h-full 유틸리티를 사용하거나 h-[100px]와 같이 직접 높이를 지정해야한다.
나의 경우에는 h-150이라는 값 자체가 존재하지 않기 때문에, 적용이 안된 것이었다. h-*은 기본적으로 4px 단위로 증가하기 때문에, 나는 대략 384px 정도 되도록 h-96으로 지정해주었다.