001. tailwindcss init이 되지 않아요
v2 개정 2025.05.04
2025.03.02
· Updated 2025.05.04

  • 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 -p
    npm 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...

    관련 포스트

    © Churnobyl 성철민
    Contact: tjdcjfals@gmail.com