추가 2021년 10월 27일
정상적인 CSS 파일 경고가 사라지지 않을 때
VScode 확장 기능
"PostCSS Language Support"
를 넣을 수 있다.
추가 종료

추가 2021년 6월 10일
VSCode를 클린 설치(VScode 자체 외, VScode의 설정도 확장 기능도 모두 소거)

npx create-next-app {アプリ名}
cd {アプリ名}
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p

styles/globals.css

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

물결선이 표시되고 그 위에 마우스 커서를 올려 놓으면,
새로 설치한 후 이 단계에서도 동일하게Unknown at rule @tailwindcss(unknownAtRules)라고 표시되었습니다.

그리고 매뉴얼대로
설치 - Tailwind CSS
h tps : // 싶다 l ぃん dcs ㎃. 코 m / 드 cs / 인 s tachion

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

그리고 회피했는데 성공적으로 읽을 수있었습니다.

추가 종료

환경
Windows10
Next.js 10
VSCode

문제 tailwindCSS 설정이 import되지 않습니다.

globals.css

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

@tailwind 에 마우스 커서를 올려 호버를 표시시키면Unknown at rule @tailwindcss(unknownAtRules)라고 표시되어 tailwindCSS 장식이 앱에 반영되지 않습니다.

실제 이미지


공식
Installation - Tailwind CSS
h tps : // 싶다 l ぃん dcs ㎃. 코 m / 드 cs / 인 s tachion
를 보면

Windows10의 경우

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:

postcss-import (또는 Webpacker for Rails와 같이 보닛에서 사용하는 도구)를 사용하는 경우 @tailwind 지시문 대신 우리의 import를 사용하여 자체 추가 파일을 가져올 때 문제를 피하십시오.

그리고 있습니다.

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

그러나 이것은 tailwindCSS가 장식 한 다양한 설정을 반영하지 않았습니다.

거기서

/* Windows10の場合？ */
@import "~tailwindcss/base";
@import "~tailwindcss/components";
@import "~tailwindcss/utilities";

그리고 이렇게 ~ 를 선두에 붙이면 tailwindCSS 장식의 설정이 반영되게 되었습니다.



따라서 경고 등은 표시되지 않으며 tailwindCSS 장식 설정이 반영됩니다.
그러나 @layer 의 곳에서는 경고가 남아 있습니다.

기타

@layer 하지만 경고가 나오고 있지만 ~ 를 붙여도 사라지지 않았습니다.

설정은 반영되지만 경고도 표시됩니다.

VSCode settings.json 에

settings.json

"css.lint.unknownAtRules": "ignore",

와 무시하는 설정으로 합니다.