PostCSS Tailwind 설치와 기본 설정 방법

2021. 2. 19. by 원더바웃

Tailwind를 PostCSS에 플러그인으로 설치하는 과정입니다. Tailwind만 설치해 사용해도 되지만 PostCSS 통해 유용한 플러그인들을 활용할 수 있어 좋습니다.

PostCSS&Tailwind

Tailwind만 단독으로 설치하는 방법은 Tailwind에 자세히 설명되어 있으니 참고하시기 바랍니다.
Using Tailwind without PostCSS

PostCSS에 Tailwind를 설치하는 방법도 설명되어 있습니다. Installing Tailwind CSS as a PostCSS plugin

Tailwind 설명을 따라 해 보았지만 정상적으로 작동되지 않았고 Postcss는 설명이 친절하지가 않았습니다. 이런저런 시도 끝에 대략 4시 만에 성공한 방법을 정리해 보았습니다.

작업 폴더 생성

작업할 폴더를 만들고 아래 명령어를 입력해 package.json 파일을 생성합니다.

npm init -y

PostCSS 설치

postcss와 postcss-cli을 설치합니다. postcss만 설치하면 안 됩니다. postcss-cli도 설치해야 합니다. 이 것 때문에 대부분의 시간을 낭비했습니다.

npm install -D postcss postcss-cli

설치가 완료되면 루트 폴더에 postcss.config.js 파일을 직접 만듭니다.(자동으로 생성 안됨) 추가된 플러그인은 나중에 작성해도 되지만 편의상 미리 작성해 두었습니다.

# postcss.config.js
module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer')
  ]
}

필요한 PostCSS 플러그인이 있으면 설치 후 require('플러그인 이름')으로 구성 파일에 넣어 줍니다. autoprefixer는 설치하지 않아도 됩니다. 처음에 autoprefixer를 별도로 설치해서 인지 계속 오류가 발생돼 많은 시간을 소비했습니다. PostCSS에 포함된 것으로 보입니다.

그 외에도 IE에서 지원되지 않는 grid 때문에 빌드 과정에서 polyfill이 필요하다는 문구가 출력됩니다.

빌드된 파일에서도 오류가 표시되고요 그런데 polyfill을 사용해도 완벽하지는 않다고 합니다. IE은 제외하는 것이 정신건강에 좋을 것 같습니다. Tailwind에서 2.0 이상 버전은 IE를 지원하지 않고 IE 지원이 필요한 경우 1.9번 전을 이용하라고 합니다.

postcss.config.js 구성 파일에서 autoprefixer 부분을 아래처럼 변경해 IE는 그리드에 접두사를 붙이지 않는 것으로 설정합니다.

require('autoprefixer')({ grid : false })

또는 모든 IE 브라우저에 그리드를 비롯해 모든 속성에 대한 접두사를 적용하지 않을 수 있습니다.

// last 2 versions은 모든 브라우저 마지막 2번째 버전을 의미함
require('autoprefixer')({ browsers: 'last 2 versions, not ie <= 11, not ie_mob <= 11', grid : false })

브라우저 리스트 관련 자세한 설명은 browserslist Github repository 설명을 보시길 바랍니다.

Tailwind 설치

Tailwind css를 아래 명령어를 이용해 설치합니다.

npm install -D tailwindcss

Tailwind 구성 파일(tailwind.config.js) 은 아래 명령을 사용해 만듭니다.(루트 폴더에 직접 생성해되 됩니다.)

npx tailwind init

Tailwind CSS 파일 만들기

루트 폴더에 소스 폴더를 추가하고 tailwind.css 파일을 만듭니다.(폴더 명이나 파일명은 원하는 곳에 원하는 데로 해도 됩니다.)

예) 루트폴더 -> src -> tailwind.css

tailwind.css파일에 아래 코드를 넣어 줍니다.

/* tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

빌드 명령 만들기

이제 package.json파일을 열고 스크립트 섹션에 아래 코드를 추가합니다.( "test": 부분을 삭제해도 되고 그 아래에 추가해도 됩니다.)

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

터미널 명령 줄에 npm run build를 하면 public폴더가 생성되고 그 아래 build폴더가 생성됩니다.

빌드된 css파일은 build폴더에 있습니다. 빌드된 CSS파일은 autoprefixer가 적용되어 있습니다.

빌드될 파일의 경로는 편의상 public/build로 했습니다. 원하는 경로로 수정할 수 있습니다. 빌드될 파일명도 원하는 파일명으로 정할 수 있습니다.

전체 디렉토리 구조를 보면 아래와 같습니다.

├─node_modules
├─public
│  └─build
│     └─tailwind.css
└─src
   └─tailwind.css
├─package.json
├─package-lock.json
├─postcss.config.js
├─tailwind.config.js

여기까지가 기본적인 설치와 설정 방법이었습니다.

Tailwind purge 사용하기

Tailwind는 그냥 사용하면 용량이 어마어마하게 큽니다. 17만 줄 이상으로 대략 3.5MB 정도가 됩니다. 이렇게 큰 파일을 사용할 수 없기 때문에 Tailwind에서는 purge 플러그인을 기본적으로 내장하고 있습니다.

purge는 HTML 파일에서 사용하는 클래스들을 파악해 사용하지 않는 클래스들은 CSS파일에서 제거해 주는 역할을 합니다. Tailwind사용 시 꼭 필요한 기능입니다.

purge는 Tailwind에 내장된 플러그인을 사용해도 되고 필요에 따라서 Postcss에 플러그인으로 설치해도 됩니다. Tailwind를 사용한다면 내장된 purge을 사용합니다.

참고 : Postcss에서 설치하려면 postcss-purgecss 검색 후 설치

우선 HTML 파일을 추가합니다. 저는 public폴더에 index.html 파일을 생성했습니다.

tailwind.config.js 파일에서 purge 부분을 아래 코드로 변경합니다.

// tailwind.config.js
  purge: {
    enabled: true,
    content: ['./public/**/*.html'],
  },

조금 더 세세한 설정을 하려면 Postcss에 플러그인을 설치해 PostCSS 구성 파일을 이용하는 것이 편리해 보입니다. 여기서 설명하면 복잡해질 것 같다 다음 기회에 설명해 보도록 하겠습니다.

postcss.parts에 다양한 PostCSS plugin들을 찾아볼 수 있습니다.

간단하게 tailwind를 사용해 보려고 했는데 요즘 핫한 PostCSS에 붙여서 사용하려니 그 과정이 참 복잡하고 험난했습니다. 그냥 바닐라 css나 Sass를 사용하는 것이 편하기는 합니다.

프론트엔드 개발자 분들은 구성이 복잡한 웹팩 같은 번들러에 익숙해서 이러한 과정이 쉬울 지도 모겠습니다.

반응형
'코딩공부'