webpack4에서 Tailwind CSS의 파일 크기를 줄이기까지 시도했습니다.

Tailwind CSS
h tps : // 싶은 ぃ ぃん dc ㎃. 이 m

만든 것

Simple Collage Maker
브라우저에서 로컬 이미지 파일을 읽고 연결하여 한 장의 이미지로 만드는 도구.
webpack + Vue.js + Tailwind CSS. CSS 파일 크기 약 8KB. (보통 Minify했을 뿐이라면 600KB 정도가 됩니다.)

소스 코드의 파일 구성은 이런 느낌입니다.

설치

webpack은 이미 설치되어 CSS 로더와 Tailwind CSS를 설치합니다.

$ npm i -D css-loader postcss-loader tailwindcss

CSS 파일을 외부 파일로 출력하여 파일 크기를 줄이기 위해 다음을 설치합니다.

$ npm i -D mini-css-extract-plugin @fullhuman/postcss-purgecss

설정

webpack4

webpack.config.js

// ...
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  // ...

  plugins: [
    new MiniCssExtractPlugin({
      filename: "style.css"
    }),
    // ...
  ],

  module: {
    rules: [
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: "css-loader", options: { importLoaders: 1 } },
          { loader: "postcss-loader" }
        ]
      },
      // ...
    ]
  }
};

use 로 loader의 순서를 잘못하면 제대로 움직이지 않고 빠집니다. 일단, Bulma등에서 Sass를 사용하는 경우는 다음과 같은 느낌이 됩니다. (Tailwind에서 Sass를 사용할 수 있는지 여부는 확인되지 않았습니다.)

      {
        test: /\.(sa|c|sc)ss$/,
        exclude: /node_modules/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: "css-loader", options: { importLoaders: 1 } },
          { loader: "postcss-loader" },
          { loader: "sass-loader" }
        ]
      },

PostCSS

postcss.config.js

const purgecss = require("@fullhuman/postcss-purgecss")({
  content: ["./src/**/*.html", "./src/**/*.vue"],
  defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
});

module.exports = {
  plugins: [
    require("tailwindcss"),
    require("autoprefixer"),
    ...(process.env.NODE_ENV === "production" ? [purgecss] : [])
  ]
};

content 에서 구문 분석할 파일을 지정합니다. defaultExtractor 는 이해하지 못합니다. 마지막으로 webpack이 production 모드 일 때만 purgecss가 호출됩니다. ...는 스프레드 구문입니다.

Tailwind CSS

tailwind.config.js

module.exports = {
  theme: {
    fontFamily: {
      display: ["Berkshire Swash", "sans-serif"]
    }
  },
  variants: {},
  plugins: []
};

디폴트 폰트를 만드셨을 뿐입니다.

사용

CSS 파일을 main.js 등에서 가져와서 사용합니다.

style.css

@tailwind base;
@tailwind components;

.button {
    @apply shadow bg-gray-700 text-white font-bold py-2 px-4 rounded inline-block items-center text-center mb-2;
}

.button:hover {
    @apply bg-gray-600;
}

.button:focus {
    @apply outline-none;
}

/* ... */

@tailwind utilities;

이상입니다.