Tailwind CSS에서 @tailwind를 작성할 때 VS 코드에서 오류가 발생하는 경우

※2021/08/31 시점에 확인할 수 있던 동작이 됩니다.

사용환경

・MacOS BigSur(11.5.2)
・VScode(1.59.1)
・Node.js (16.8.0)
・yarn (1.22.11)

소개

현재 Next.js, TypeScript 및 TailwindCSS로 프로젝트를 만들고 있습니다.

yarn create next-app --ts my-app[アプリ名]
cd my-app[アプリ名]
yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest
yarn tailwindcss init -p

그 때 Tailwind CSS 셋업에서 공식이나 다른 기사를 참고하면서 하고 있으면, 타이틀과 같이 @tailwind 에서 import시에 에러가 표시되었습니다.

styles/globals.css

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

이것을 설명한 결과,
Unknown at rule @tailwindcss(unknownAtRules)라는 에러 표시가 나와 있습니다.



이것이라도 일단 localhost::3000의 브라우저에는 반영되고 있는 것 같습니다만, 조금 기분 나쁜 것과 나중에 문제가 있으면 싫기 때문에 이 에러 표시가 나오지 않게 하고 싶습니다.

이번에는 그 해결 방법을 정리합니다.

해결책

결론부터 말하면, Workaround적인 방법입니다만 지금 확인되고 있는 것으로 2개 있습니다.

① 공식 doc 대로 설정

이전의 styles/globals.css 설명을 아래에 다시 씁니다.

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

② VS Code의 PostCSS Language Support 확장 기능 도입

이쪽은 Stackoverflow 를 참고로 한 방법입니다.

소개하면 @tailwind 부분의 이전 오류가 사라져야합니다.

브라우저 쪽에도 반영되고 있습니다.

마지막으로

지금은 문제 없기 때문에, 실험적으로 PostCSS Language Support를 사용하고 있습니다만, 추천은 공식의 방법입니다.

공식이나 다른 기사대로 해보고, 왜 @tailwind를 사용할 수 없는지 의문점이 남는 곳입니다.

공식적으로,

If you’re using postcss-import (or a tool that uses it under the hood, such as Webpacker for Rails), use our imports instead of the @tailwind directive to avoid issues when importing any of your own additional files:

라고 썼습니다.
아마도 Rails를 이전에 만져본 적이 있었기 때문에 여기에 쓰여진 Webpacker for Rails가 간섭하고 있다고 생각합니다.

위에도 썼습니다만, Workaround감이 닦아 떠날 수 없습니다.
이것으로 나중에 에러에 부딪치거나 하면, Webpacker for Rails당을 조사하거나, 원래의 설정 부분을 재검토하는 것처럼 해 갑니다.

참고 자료

Tailwind CSS 공식 Installation

Stackoverflow How to add a @tailwind CSS rule to css checker