初Qiita
tailwindcssは、むっちゃカスタマイズしやすいcssフレームワークです。（雑ですいません..）
1からコンポーネントのデザインをコードにするときに書きやすくて個人的に大好きです。
ただ、公式のページにあるように、ファイルサイズがまぁまぁ大きい。
なので、purgeCSSでその問題を軽減して、楽しくフロントを書きたいねというもの。
Nuxt.jsだったら、module版のtailwindcssを導入することでpurgeCSSも自動で追加されるみたいですけど、
なるべく小さい構成でページを作りたかったので、雑にメモを残しますね。
今回はminifyもさせます。
環境
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に出力されます。
{
"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"
}
module.exports = {
theme: {
extend: {}
},
variants: {},
plugins: []
}
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ファイルを作ります。
@tailwind base;
@tailwind components;
@tailwind utilities;
tailwind.config.jsの内容をcssに反映させます。
$ 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を読み込むとやりやすいです。
<!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とかで適当にwebサーバを建てて確認すると、こんな感じで表示されます。
cssを削る
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
minifyをした後はこんな感じになってます。
そこまでhtmlのファイルが大きくないので、cssも削られまくってます。
おわりに
cssファイルをあまり書かずにhtmlにクラスを足しまくったらどうしてもコードがながーくながーくなる...
何が最適なのかぜんぜんわからないので探り探りでやっていくしか...