Tailwind CSS 설치

최근에 Tailwind CSS 프레임워크(Svelte 포함 및 포함하지 않음)를 살펴보았습니다. 다양한 유틸리티의 현재 버전이 필요하기 때문에 모든 것이 제대로 컴파일되도록 하는 데 약간의 어려움을 겪었습니다. 일단 이걸 정리해서 참고용으로 만들었습니다.

시작하기

Tailwind 웹 사이트에는 내가 시작한 video tutorial course이 있으며 아주 약간의 조정만 필요하면 확실히 볼 가치가 있습니다.

먼저 빈 NPM 프로젝트를 초기화합니다.

❯ npm init -y

다음 단계는 필요한 구성 요소를 설치하는 것입니다.

❯ npm install tailwindcss postcss-cli autoprefixer

tailwind 라는 완전히 다른 패키지가 있으므로 tailwindcss 를 설치해야 합니다.

다음으로 Tailwind를 초기화하면 tailwind.config.js 가 생성됩니다.

❯ npx tailwind init

비디오는 계속해서 CSS 컴파일을 구성하기 위해 postcss.config.js라는 새 파일을 설정합니다.

module.exports = {
    plugins: [
        require("tailwindcss"),
        require("autoprefixer"),
    ]
}

마지막으로 Tailwind 지시문을 가져오는 기본 CSS 파일을 만들고 이 빌드 스크립트를 포함하도록 수정package.json합니다.

"scripts": {
    "build": "postcss css/tailwind.css -o public/build/tailwind.css"
}

CSS 컴파일

이제 실행npm build하면 컴파일된 CSS가 생성됩니다. 그러나 이것을 시도했을 때 작동하지 않았습니다.

❯ npm run build

> [email protected] build /home/user/workspace/tailwind-example> postcss css/tailwind.css -o public/build/tailwind.css
Error: PostCSS plugin autoprefixer requires PostCSS 8.
Migration guide for end-users:https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
    at Processor.normalize (/home/user/workspace/tailwind-example/node_modules/postcss/lib/processor.js:153:15)
    at new Processor (/home/user/workspace/tailwind-example/node_modules/postcss/lib/processor.js:56:25)
    at postcss (/home/user/workspace/tailwind-example/node_modules/postcss/lib/postcss.js:55:10)
    at /home/user/workspace/tailwind-example/node_modules/postcss-cli/index.js:218:14
    at async Promise.all (index 0)
npm ERR! code ELIFECYCLEnpm ERR! errno 1
npm ERR! [email protected] build: `postcss css/tailwind.css -o public/build/tailwind.css`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/user/.npm/_logs/2020-11-02T20_03_37_814Z-debug.log

해결책은 간단하지만 찾기가 어려웠습니다. 누락된 것은 postcss 자체(postcss-cli 뿐만 아니라)의 설치뿐입니다.

❯ npm install postcss

그러면 모든 것이 의도한 대로 작동합니다.

❯ npm run build

> [email protected] build /home/user/workspace/tailwind-example
> postcss css/tailwind.css -o public/build/tailwind.css

100 Days To Offload의 일부로 이것을 게시하고 있습니다. https://100daystooffload.com.를 방문하여 직접 가입할 수 있습니다.