tailwind CSS in React, unknown at rule @tailwind 🤨

tailwins CSS를 리액트 프로젝트에 적용해보자.

우선 cra로 간단하게 리액트 프로젝트를 만들어주고, tailwind CSS 공식 문서에 가서 하라는 대로 명령어를 입력해준다

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

tailwind를 설치하면서 필요한 peer 디펜던시를 같이 설치한다.
그리고 init 명령어로 tailwind.config.js 와 postcss.config.js를 생성해준다.

tailwind.conging.js 파일에서는 내가 특별하게 변경하고 싶은, 지정하고 싶은 속성을 적어준다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

특정 파일에 적용할 수 있는 tailwind 속성을 만드는 config 파일인가 보군.. 만약 저기에 설정되어있지 않은 속성을 사용하면 기본 tailwind 속성이 적용된다.

근데 이렇게 하고 전역으로 tailwind를 사용하기 위해 App.css를 만들어서

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

이렇게 넣어줬더니 unknown at rule @tailwind라고 뜨는 것이다... :)

왜인지 몰라서 스택오버플로우에 검색해봤는데, Vscode 익스텐션을 깔아라고 하는 글을 봤다. PostCSS Language Support라는 익스텐션이었고 사실 이게 큰 해결책은 아니었다. 이 익스텐션은 그냥 CSS 작성을 편하게 만들어주는 툴일 뿐이고. 에러를 없애주기만 했다.

진짜 문제는 뭐였냐면.. ^^ 내가 제대로 파일에 필요한 코드를 안 적어줘 놓고 안된다 엉엉 이러고 있었던 거였음. 그냥 공식문서에서 하라는 대로 하면 되는거 였다.
tailwind.config.js 파일에 src폴더 안에 있는 모든 확장자의 파일에 적용될 수 있도록 다음 코드를 적어준다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}", // ✅ 이 부분! 
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

그리고 실행하면 잘 먹는다.