
•
2025년 1월 말 업데이트된 최신버전 Tailwindcss v4.0에서 사용자 정의 파일인 tailwind.config.js/tailwind.config.ts가 제거됨
•
대신 Tailwind를 임포트하는 CSS파일에서 직접 구성하도록 함
•
새로운 변화에 익숙해지거나, v3.4.17버전으로 다운그레이드해서 사용하자
2025년 들어 새로운 프로젝트를 시작하고자 nextjs 프로젝트를 만들었습니다. tailwindcss의 사용자 정의 파일인 tailwind.config.ts로 전체적인 테마를 관리하는 것을 선호했기에 설치하려고 했는데 에러를 만났습니다.
# 설치
yarn add tailwindcss postcss autoprefixer -D
# 사용자 정의 파일 추가
yarn run tailwindcss init -p
Usage Error: Couldn't find a script named "tailwindcss".
yarn pnp에 문제가 있는 줄 알고 npm으로 패키지 관리자를 변경했으나 똑같은 문제를 만났습니다.
# 설치
npm install -D tailwindcss postcss autoprefixer
# 사용자 정의 파일 추가
npx tailwindcss init -pnpm error could not determine executable to run
패키지 관리자 문제가 아니라 tailwindcss가 4버전으로 넘어가면서 크게 바뀐 것들이 문제였습니다. Tailwindcss는 기존 3버전까지 자바스크립트로 사용자 정의 파일을 구성했는데, 4버전부터는 CSS로만 구성할 수 있도록 변경되었습니다.
github에서도 기존 v3까지 명령어 호출을 담당했던 tailwindcss/src/cli의 코드들이 v4에서는 전부 삭제되고 Tailwind 프로젝트 구조도 전체적으로 변경되었습니다. 앞으로 Tailwindcss를 사용하기 위해서는 이러한 변화에 익숙해져야겠네요.
기존 버전을 사용하기 위해서는 Tailwind를 다운그레이드해야 합니다.
# npm 설치
npm install -D tailwindcss@3.4.17
# yarn 설치
yarn remove tailwindcss # yarn에서 버전 변경을 위해서는 먼저 삭제해야 함
yarn add tailwindcss@3.4.17 -D다음과 같은 방법으로 다운그레이드할 수 있습니다. package.json에서 직접 tailwindcss의 버전을 3.4.17로 고정시키는 방법도 가능합니다.
v4에서는 tailwindcss.config.js를 자동으로 감지하지 않습니다. 하지만 이전 버전과의 호환성을 위해 다음과 같이 최상위 css파일에 명시하면 인식이 가능합니다.
@config "../../tailwind.config.js";하지만 corePlugins, safelist, separator 옵션들이 더 이상 제공되지 않기 때문에 기본적인 설정만 가능합니다. 따라서 v4에서는 CSS기반 설정을 사용하는 것을 권장합니다. 해당 내용은 Tailwindcss Docs v4.1의 Upgrade guide에 있습니다.
Loading comments...

