[NextJs] shadcn 설치시 tailwind 오류 발생시

NextJs에 shadcn/ui 설치시

No Tailwind CSS configuration found at /Users/taehyunkim/workspaces-study/nextjs-docs/docs-tutorial. It is likely you do not have Tailwind CSS installed or have an invalid configuration. Install Tailwind CSS then try again. Visit https://tailwindcss.com/docs/guides/nextjs to get started.

위와 같은 오류 발생시

필수 설치 단계

1. Tailwind CSS와 의존성 패키지들을 설치[
2. ](https://www.tutorialspoint.com/what-to-do-if-tailwind-css-is-not-compiling)[

npm install -D tailwindcss postcss autoprefixer

1. Tailwind 설정 파일 생성[]([https://www.tutorialspoint.com/what-to-do-if-tailwind-css-is-not-compiling)\[]

npx tailwindcss init -p

설정 파일 구성

1. tailwind.config.js 파일에 콘텐츠 경로 설정[](https://tailwindcss.com/docs/installation)[](https://tailwindcss.com/docs/content-configuration):

javascript

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

1. CSS 파일에 Tailwind 디렉티브 추가[](https://tailwindcss.com/docs/installation):
2. 5

css

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

주의사항

• 프로젝트 루트 디렉토리에서 설치 명령어를 실행해야 합니다[](https://www.tutorialspoint.com/what-to-do-if-tailwind-css-is-not-compiling)
• 설정 파일의 content 배열에 모든 템플릿 파일 경로가 정확히 지정되어야 합니다[](https://www.geekster.in/articles/content-configuration-in-tailwind/)
• PostCSS 설정이 올바르게 되어있는지 확인해야 합니다[](https://www.tutorialspoint.com/what-to-do-if-tailwind-css-is-not-compiling)

이러한 단계들을 모두 수행한 후에도 문제가 지속된다면, node_modules 폴더를 삭제하고 npm install을 다시 실행해보세요