tailwindcss와purgecss로 작은 css 만들기

최초 Qiita

tailwindcss는 맞춤형 css 프레임워크입니다.(너무 뒤죽박죽이어서 못 참겠다.)
1부터 구성 요소의 디자인을 코드로 만들 때 쓰기 쉬워요. 개인적으로 좋아해요.
그러나 공식. 페이지와 같이 파일 크기는 큰 편이다.
그래서 purgeCSS로 그 문제를 덜어주고 즐겁게 프론트 데스크를 쓰고 싶어요.
Nuxt.js라면 모듈 버전의 tailwindcss를 가져오면purgeCSS도 자동으로 추가될 것 같습니다
최대한 작은 구성으로 페이지를 만들고 싶어서 대충 메모를 남겨야 합니다.
이번에도 미니파이한테 시켜.

환경

macOS Mojave 10.14.6
NodeJS v12.4.0
npm 6.10.2

패키지 과정 준비

내가 먼저 필요한 물건을 넣을게.

$ npm i -g tailwindcss
$ npm i -g purgecss
$ npm i -g clean-css-cli

버전 확인

$ tailwind

   tailwindcss 1.0.6

   Usage:
      tailwind <command> [options]

   Commands:
      help [command]            More information about the command.
      init [file]               Creates Tailwind config file. Default: tailwind.config.js
      build <file> [options]    Compiles Tailwind CSS file.

$ purgecss -v
1.3.0

$ cleancss -v
4.3.0

설정 만들기

각종 설정 파일을 만들다.
설정 내용은 상황에 따라 개작하십시오.
이번 설정은tailwind 변환 전 파일을 css/tailwind-base.css, 변환 후 파일을 css/tailwind.css 로 설정합니다.
이 설정에서 실제 생산에 사용되는 css 파일은 css/style.css 로 최종 출력됩니다.
package.json

{
  "name": "PROJECT_NAME",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "build": "tailwind build css/tailwind-base.css -c tailwind.config.js -o css/tailwind.css",
    "purge": "purgecss --config purgecss.config.js | PYTHONIOENCODING=utf-8 python -c 'import sys, json; print json.load(sys.stdin)[0][\"css\"]' | cleancss > css/style.css"
  },
  "author": "",
  "license": "UNLICENSED"
}

tailwind.config.js

module.exports = {
  theme: {
    extend: {}
  },
  variants: {},
  plugins: []
}

purgecss.config.js

module.exports = {
  content: ['**/*.html'],
  css: ['css/tailwind.css'],
  extractors: [
    {
      extractor: class TailwindExtractor {
        static extract(content) {
          return content.match(/[A-Za-z0-9-_:\/]+/g) || []
        }
      },
      extensions: ['html', 'css']
    }
  ]
}

tailwind의 css 생성

우선 기본적인 css 파일을 만듭니다.
css/tailwind-base.css

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

css에 tailwind.config.js 내용을 반영합니다.

$ npm run build

> test@1.0.0 build /Users/keyakko/git/test
> tailwind build css/tailwind-base.css -c tailwind.config.js -o css/tailwind.css


   tailwindcss 1.0.6

   🚀 Building... css/tailwind-base.css

   ✅ Finished in 1.05 s
   📦 Size: 480.89KB
   💾 Saved to css/tailwind.css

설정된 코드를 반영하여 내보내기css/tailwind.css.

$ ls css
tailwind-base.css  tailwind.css

제작 페이지

잘했어.
방금 생성된 css/tailwind.css 을 개발하여 읽기 쉽습니다.
index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>test</title>
  <link rel="stylesheet" href="css/tailwind.css">
</head>
<body class="bg-gray-200">
  <div class="container mx-auto">
    <div class="bg-white shadow-xl mt-12 px-12 py-16 rounded">
      <p class="text-gray-900 tracking-wider">HOGEHOGE</p>
    </div>
  </div>
</body>
</html>

python 등으로 웹 서버를 적당히 만들어서 확인하면 이런 느낌이 든다.

깎다

tailwindcss는 쓰기는 좋지만 커요.
우선, 아무것도 쓰지 않고 설정한 상태의 파일 크기와 줄 수를 확인합니다.

$ ls -lh css/tailwind.css
-rw-r--r-- 1 keyakko 481K Aug  6 21:47 css/tailwind.css

$ wc -l css/tailwind.css
35256 css/tailwind.css

481kB, 약 35000줄.
깎아 보세요.

$ npm run purge

> test@1.0.0 purge /Users/keyakko/git/test
> purgecss --config purgecss.config.js | PYTHONIOENCODING=utf-8 python -c 'import sys, json; print json.load(sys.stdin)[0]["css"]' | cleancss > css/style.css

css/style.css.

$ ls -lh css/style.css
-rw-r--r-- 1 keyakko 2.7K Aug  6 22:23 css/style.css

2.7kB
미니파이 다음은 이런 느낌이에요.

html 파일이 그렇게 크지 않기 때문에 css도 삭제되었습니다.

끝내다

css 파일을 잘 쓰지 않고 html에 클래스를 넣으면 어떻게든 코드가 됩니다...
무엇이 가장 적합한지 전혀 모르기 때문에 더듬어 할 수밖에 없다...

Reference

이 문제에 관하여(tailwindcss와purgecss로 작은 css 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/keyakko/items/0cb82e48726778040feb

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)