Postcss 플러그인 설치 및 설정, Tailwind css 포함

2021. 2. 20. by 원더바웃

지난 시간에 Postcss와 Tailwind 설치 그리고 설정 방법 등에 대해 알아보았습니다. 이번 시간에는 Tailwind를 Postcss에서 보다 효율적으로 사용할 수 있는 Postcss 플러그인들을 설치하고 설정하는 방법을 알아보려고 합니다.

PostCss

꼭 Tailwind 사용이 아니더라도 Postcss 설치와 플러그인 설치 설정 방법은 동일하니 참고해 보시기 바랍니다.

Postcss 설치

우선 작업할 폴더를 준비하고 npm init 해 줍니다.

npm init -y

준비가 되었으면 postcss와 postcss-cli를 설치합니다.

npm install -D postcss postcss-cli

설치가 완료되면 루트 경로에 postcss.config.js 파일을 미리 빈 파일로 만듭니다.

Tailwind 설치

Tailwind를 설치하고 tailwind init로 구성파일(tailwind.config.js)을 생성합니다.

npm install -D tailwindcss
npx tailwind init

그리고 src 폴더를 하나 만들고 그 안에 tailwind.css 파일 하나를 만듭니다.

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

@tailwind base;
@tailwind components;
@tailwind utilities;

마지막으로 미리 만들어 놓은 postcss.config.js 파일을 열어 아래 코드를 넣어 줍니다.

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

중간 점검 차원에서 지금까지 설정한 것을 빌드해 보도록 하겠습니다.

package.json 빌드 구성하기

package.json 파일을 열고 scripts 섹션에서 "test" 부분 아래에 아래처럼 구성합니다.(다음 줄로 이동하기 전 콤마 찍는 것을 잊지 마세요!)

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "postcss src/tailwind.css -o public/build/output.css"
},

터미널에 아래 명령를 입력 후 실행하면 public 폴더와 그 하위에 build폴더가 생성되고 그 아래에 빌드된 output.css이 생성됩니다. 파일명과 경로는 차후에 각자 원하는 데로 변경합니다.

npm run build

여기까지가 Postcss와 Tailwind 설치 및 기본적인 사용방법이었습니다.

 

Postcss 플러그인 설치

Postcss용 플러그인들을 설치해 보다 편리하고 유용한 기능들을 사용할 수 있습니다.

여기서는 복잡하지 않게 대표적으로 많이 사용하는 플로그인 몇 가지만 예을 들어 설치하고 설정해 보려고 합니다.

  • postcss-import
  • autoprefixer
  • postcss-purgecss
  • cssnano

참고로 autoprefixer와 cssnano는 Postcss에 내장되어 있는 것인지 설치하지 않아도 잘 작동됩니다. 내장된 플러그인들 종류를 알아보려고 했지만 찾질 못했습니다.

아래 깃허브로 방문하면 postcss플러그인과 postcss-cli 사용방법등이 나와 있습니다.

postcss-import

@import문을 사용할 수 있게 해 주는 postcss-import입니다. Sass에서 @import 사용하는 것처럼 사용할 수 있게 해 주는 것 같습니다.

자세한 사항은 postcss-import에서 볼 수 있습니다.

기본적으로 Tailwind에서 css파일을 불러오는 방식입니다.

@tailwind base;
@tailwind components;
@tailwind utilities;

postcss-import 플러그인을 설치하면 아래처럼 사용할 수 있게 됩니다. Tailwind css파일뿐만 아니라 사용자가 만든 css파일에도 적용됩니다.

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
/* 다른 파일 */
@import "./src/header.css";
@import "./src/footer.css";

postcss-import 플러그인 아래 명령어로 설치해 줍니다.

npm install -D postcss-import

autoprefixe

autoprefixer는 설치하지 않아도 설정만으로도 사용할 수 있습니다.

postcss.config.js 파일에 아래처럼 추가합니다. postcss-import가 항상 가장 위에 위치해야 한다고 합니다.

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

현재 설정 상태에서 빌드를 해 보면 출력 창과 css파일에 오류가 표시됩니다.

IE 브라우저에서 지원하지 않는 grid 때문에 오류가 표시됩니다. IE에서 grid를 사용하려면 polyfill이 필요한데 100% 완벽하지 않다고 합니다.

개인적으로 IE에서 polyfill까지 사용하면서 grid를 사용하는 것은 바람직하지 않다고 생각합니다.

IE에 grid에 대한 접두사(vendor prefix)를 붙이지 않으려면 postcss.config.js 파일에 autoprefixer 부분을 아래처럼 수정해 줍니다.

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

autoprefixer 브라우저별 상세 설정 방법은 깃허브browserslist에서 확인할 수 있습니다. 아래 설정은 IE 브라우저에 대해 모든 접두사를 붙이지 않겠다는 설정입니다.

require('autoprefixer')({ browsers: 'last 2 versions, not ie <= 11, not ie_mob <= 11', grid : false })

purgecss

purgecss는 tailwind.config.js에서 설정해도 되지만 여기서는 postcss.config.js에서 설정하는 것으로 하겠습니다.

tailwind를 설치한 경우 postcss-purgecss플러그인을 설치하지 않아도 됩니다. tailwind css를 설치하지 않은 겨우나 작동이 안 되는 경우 설치해 사용하도록 합니다.

npm install @fullhuman/postcss-purgecss

purgecss 홈에 자세한 설치 방법과 옵션사항들을 볼 수 있습니다.

public 폴더 안에 html 파일을 만듭니다. 저는 index.html 파일을 만들고 <h1 class="bg-gray-50">Hello world!</h1>을 코딩해 두었습니다.

class="bg-gray-50" 여기서 사용한 class명은 tailwind에서 사용하는 class명입니다.

postcss.config.js파일에 아래 같이 purgecss를 추가해 줍니다. public폴더 안에 있는 html 파일들을 검사합니다.

// postcss.config.js
const purgecss = require('@fullhuman/postcss-purgecss');  // 추가
module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    // 아래 추가
    purgecss({
      content: ['./public/**/*.html']
    }),
    require('autoprefixer')({ grid : false }),
  ]
}

현재 상태에서 빌드를 해보면 html 파일에 사용된 클래스만 빌드되는 것을 확인할 수 있습니다.

cssnano

cssnano는 파일을 압축시켜주는 Minifier해주는 플러그인입니다.

자세한 설명은 cssnano 홈 소개 페이지를 참고하세요.

cssnano는 postcss에 내장되어 있어 설치하지 않아도 됩니다. 작동되지 않는 경우 아래 명령으로 설치해 주세요.

npm install cssnano

postcss.config.js파일에 추가해 줍니다.

require('cssnano')({ preset: 'default' })

지금 까지 설치하거나 설정한 postcss.config.js 파일입니다.

// postcss.config.js
const purgecss = require('@fullhuman/postcss-purgecss');  // 추가
module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    // 아래 추가
    purgecss({
      content: ['./public/**/*.html']
    }),
    require('autoprefixer')({ grid : false }),
    require('cssnano')({ preset: 'default' }),
  ]
}

기타사항

몇 가지 postcss-cli 옵션사항(--watch(-w), --env)등을 이용하면 배포 모드와 개발 모드로 나누어 사용할 수도 있습니다.

package.json scripts에 dev(개발)와 build(배포)를 만들어 개발 시에는 watch 옵션을 사용해 변화가 있을 시 즉시 반영되도록 했습니다. 배포 모드는 build 명령을 할 경우에만 작동되게 하고 옵션으로 --env=production를 넣었습니다.

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev": "postcss src/input.css -o public/build/output.css -w",
  "build": "postcss --env=production src/tailwind.css -o public/build/output.css"
},

그리고 postcss.config.js 파일은 아래처럼 변경했습니다.

const isProduction = process.env.NODE_ENV === 'production';
const purgecss = require('@fullhuman/postcss-purgecss');

module.exports = {
  plugins: [
    require('postcss-import'),
    isProduction ? require('autoprefixer') : false,
    isProduction ? purgecss({ content: ['./public/**/*.html']}) : false,
    isProduction ? require('cssnano')({ preset: 'default' }) : false,
  ],
};

autoprefixer와 purgecss 그리고 cssnano 플러그인은 배포 파일(build)을 만들 때만 작동됩니다. PostCss에 유용한 플러그인들이 많지만 제대로 사용하려면 공부할 것들이 많은 것 같습니다.

몇 가지지 안 되는 위 사항들을 직접 설치했다 삭제했다 하면서 상당히 많은 시간을 소비했습니다. 다시 한번 느끼지만 PostCss 설정이 복잡해서 사용할지 좀 망설여집니다. 아직까지는 Sass가 가장 좋은 것 같다는 생각이 듭니다.

참고로 질문해도 도움을 주지는 못할 것 같아 미리 알려드립니다. 아무쪼록 누군가에게 도움이 되기를 바랍니다.

반응형
'코딩공부'