들어가기에 앞서
하단의 참고한 자료를 바탕으로 개인의 생각을 정리한 글이므로 오류가 있을 수 있습니다.
오류에 대한 피드백은 언제든지 환영합니다. 부디 댓글로 알려주시길 바랍니다. 감사합니다.
tailwind 초기화 명령어가 사라짐
tailwindcss 가 4버전부터는 더이상 npx tailwindcss init -p 명령어를 지원하지 않는다고 한다.
공식 홈페이지 에서 안내하는 대로 본인 환경에 맞게 환경설정 파일을 설정하면 된다.
Next.js
nextjs의 경우 아래 절차에 따라 설정하면 된다.
1.
패키지 설치
npm install tailwindcss @tailwindcss/postcss postcss
Shell
복사
2.
프로젝트 최상단에 postcss.config.mjs 생성
const config = {
plugins: {
"@tailwindcss/postcss": {},
},
};
export default config;
TypeScript
복사
3.
global.css에 @import "tailwindcss" 추가하고 layout.tsx에 import하기
/* app/globals.css */
@import 'tailwindcss';
CSS
복사
import './globals.css'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="ko">
<body>{children}</body>
</html>
)
}
TypeScript
복사
