[TailwindCSS] 디자인 적용이 잘 안된 것 같다면??

TailwindCSS를 사용하기 위해 프로젝트에서 작업을 하다가 무언가가 이상하게 디자인이 적용이 안되어서 원인을 파악해보아야겠다고 생각했습니다.

따라서 이 글은 어떤 원인들이 있었고 어떻게 해결했는 지 기록해 둔 글입니다.

---

프로젝트 스펙

• Vite, React, TypeScript
• TailwindCSS
• yarn

---

원인

원인은 여러가지가 있던 것 같았습니다. 나열 해보자면 아래와 같았습니다.

1. 패키지 설치 시 tailwindcss만 설치한 점
2. typescript 프로젝트로 마이그레이션 하면서 tailwind.config.js를 .cjs로 변경한 것
3. tailwindcss를 어느 형식의 파일에 적용시킬 것인 지 명시하지 않은 것
4. index.css에 import문을 통해 tailwind를 선언한 것

그런가봐요

---

해결법

해결법은 의외로 간단했습니다. 아래에 과정을 적어두었습니다.

 

1. TailwindCSS 최신 버전으로 업데이트, PostCSS, Autoprefixer 설치

yarn add tailwindcss@latest postcss@latest autoprefixer@latest

@latest를 패키지명 뒤에 붙인다면 최신 버전으로 설치할 수 있습니다.

 

2. 기본 설정 파일을 삭제하고 tailwind.config.js, postcss.config.js의 보일러 플레이트 코드 파일 생성

npx tailwindcss init -p

기본 설정 파일을 .cjs로 변경하여 생긴 문제라 생각하고 새로 보일러플레이트를 생성한 후 기존에 설정 해두었던 파일을 옮겼습니다.

 

3. tailwind.config.js에 구문을 추가하여 모든 프로젝트의 파일에서 TailwindCSS가 적용될 수 있도록 하기

content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],

아마 이 부분이 가장 큰 원인이 아닐까 싶었습니다.

설정을 아무리 잘 해두었어도 어디서 사용할 지 지정하지 않았다면 당연하게도 디자인이 적용되지 않을 것입니다.

 

4. index.css에 선언된 @import문들을 @tailwind로 변경하기

// 이전 코드
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

// 변경 코드
@tailwind base;
@tailwind components;
@tailwind utilities;

Vite 프로젝트이므로 index.css에 다음과 같은 작업을 진행하였습니다.

 

물론 이렇게 작업을 해두어도 아래와 같이 노란 줄이 뜨기는 했습니다.

 

원인을 찾아보니 TailwindCSS, PostCSS, Autoprefixer과 호환되는 Node의 버전이 달라서 생기는 문제라고 합니다.

하지만 실제로 작동하는 데에는 큰 문제가 없기에 넘어가기로 했습니다.

 

참고자료는 아래에 링크 해두었습니다.

Install Tailwind CSS with Vite - Tailwind CSS

 

결과

정상적으로 적용되는 모습을 보입니다!

---

End