Tailwind CSS とは？
Tailwind CSSとは、ユーティリティ・ファーストなCSSフレームワーク。CSSフレームワークというと、Twitter Bootstrapがとみに有名であるが、完成品ができあがっているイメージの Bootstrap と比較して、ローレベルなCSSフレームワークとして設計されており、どんなデザインにも使えるカスタマイズのしやすさが特徴。詳しくは公式サイトを見てください。
Laravel Mix とは？
Laravel Mixとは、webpackを使いやすくしてくれるラッパーツール。その名の通り Laravelで開発するアプリで真価を発揮しますが、Laravel を使用しない場合でも便利です。
セットアップ
npm イニシャライズ
まずプロジェクトディレクトリを作成し、npmプロジェクトを初期化しましょう。
$mkdir tailwind-laravel-mix
$cd tailwind-laravel-mix
$ npm init -ypackage.jsonが自動的に生成されます。
Laravel Mix をインストール
$ npm install laravel-mix@4.x --save-dev$cp node_modules/laravel-mix/setup/webpack.mix.js ./
$mkdir src &&touch src/app.{js,scss}node_modules/ディレクトリ内に Laravel Mix がインストールされます。
プロジェクトディレクトリルートに webpack.mix.jsが作成されます。src/ディレクトリ内に空の app.jsと app.scssの２ファイルが作成されます。
Laravel Mix を使って Sass ファイルをコンパイルしてみる
$ node_modules/.bin/webpack --config=node_modules/laravel-mix/setup/webpack.config.js
まだ app.jsと app.scssに何も書いていないので、単に空の app.jsと app.cssが dist/ディレクトリに作成されるはずです。
長いので npm scripts に登録しておくと便利ですね。
"scripts":{"build":"node_modules/.bin/webpack --config=node_modules/laravel-mix/setup/webpack.config.js"},次の短いコマンドで実行できるようになります。
$ npm run build
エラーなく実行できればOKです。
Tailwind CSS をインストール
$ npm install tailwindcss
node_modules/内に Tailwind CSS がインストールされます。
Tailwind CSS 用のconfigファイルを作成
$ npx tailwind init
tailwind.config.jsファイルが自動で生成されます。
webpack.mix.js内で生成した tailwind.config.jsファイルを読み込むように設定しましょう。
constmix=require('laravel-mix');consttailwindcss=require('tailwindcss');mix.js('src/app.js','dist/').sass('src/app.scss','dist/').options({processCssUrls:false,postCss:[tailwindcss('./tailwind.config.js')],});Tailwind CSS を使用する
src/app.scssで Tailwind CSS をインポートしてみましょう。
@tailwindbase;@tailwindcomponents;@tailwindutilities;ビルドしてみましょう。
$ npm run build
dist/app.css内に Tailwind CSS のスタイルが書き込まれたら成功です。
HTML を作成してみて、実際の表示も確認してみましょう。
<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><title>Tailwind CSS Example</title><linkhref="https://fonts.googleapis.com/css?family=Sawarabi+Gothic&display=swap"rel="stylesheet"><linkrel="stylesheet"href="app.css"></head><bodyclass="bg-gray-100"><divclass="max-w-sm mx-auto p-6 bg-white rounded-lg shadow-xl"><h1class="block text-xl font-bold leading-normal font-sans">ユーティリティ・ファースト</h1><pclass="block text-base font-normal leading-relaxed font-sans">プリミティブなユーティリティの固定されたセットから複雑なコンポーネントを構築します。</p></div><script src="app.js"></script></body></html>こんな感じで、まだ何もCSSを書いていないですが、スタイルが適用されたWebページが見えるはずです。
Tailwind CSS の設定を変更してみる
Tailwind CSS は、設定ファイルでフォントファミリーやカラーリングなどの変更ができます。
module.exports={theme:{fontFamily:{sans:['"Sawarabi Gothic"','sans-serif'],},extend:{colors:{white:'red',},}},variants:{},plugins:[]}ビルドしてみると、HTMLもSCSSも変更していないのに、表示が変わったことが分かります。
@applyを使ってみる
用意されたクラスを組み合わせることでも Tailwind CSS を使いこなせますが、@applyを使うことで、既存のCSSクラスや要素に対して Tailwind CSS で用意されているスタイルを使用することができます。
<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><title>Tailwind CSS Example</title><linkhref="https://fonts.googleapis.com/css?family=Sawarabi+Gothic&display=swap"rel="stylesheet"><linkrel="stylesheet"href="app.css"></head><body><divclass="section"><h1>ユーティリティ・ファースト</h1><p>プリミティブなユーティリティの固定されたセットから複雑なコンポーネントを構築します。</p></div><script src="app.js"></script></body></html>@tailwindbase;@tailwindcomponents;body{@applyfont-sansbg-gray-100;}.section{@applymax-w-smmx-autop-6bg-whiterounded-lgshadow-xl;h1{@applyblocktext-xlfont-boldleading-normal;}p{@applyblocktext-basefont-normalleading-relaxed;}}@tailwindutilities;先ほどと同じ見た目になればOKです。
Purify CSS を有効にする
公式ドキュメントにも記載のあるように、Tailwind CSS はファイルサイズが大きいのが欠点です。ドキュメントでは Purgecss を使ったファイルサイズ節約法が載っていますが、今回は Laravel Mix で使える Purify CSS を使って、使われていないセレクタを削除し、ついでに Minify もかけてみます。
constpath=require('path');constglob=require('glob');constmix=require('laravel-mix');consttailwindcss=require('tailwindcss');mix.js('src/app.js','dist/').sass('src/app.scss','dist/').options({processCssUrls:false,postCss:[tailwindcss('./tailwind.config.js')],purifyCss:{purifyOptions:{minify:true,},paths:glob.sync(path.join(__dirname,'dist/*.html'))}});コンパイルしてみると、使っていないCSSの記述が削除され、app.cssのファイルサイズが大幅に減りました。
とりあえず、これでコーディングはスタートできそうですね。
Tailwind CSS は弊社CTOが採用を推進しているので、知見がたまればまたぼちぼちメモを残していければと思います。