Tailwind CSS を使ったビルド環境を、Laravel Mix ベースで構築するメモ
install
まずは Tailwind CSS と Laravel Mix をインストール。cross-env も必要そうなので一緒に入れる。
yarn add -D tailwindcss laravel-mix cross-env
package.json を修正
Laravel Mix のドキュメントを参考に、package.json ファイルの scripts 部分を追加
"scripts": { "dev": "npm run development", "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch": "npm run development -- --watch", "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", "prod": "npm run production", "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" }
npm run dev
とか npm run watch
とかを使うための設定ですね
Laravel Mix の設定ファイルを作成
Laravel Mix の設定ファイルとして webpack.mix.js を作成、こんなかんじ
const mix = require('laravel-mix'); const tailwindcss = require('tailwindcss') mix.sass('src/app.scss', 'public/css') .options({ processCssUrls: false, postCss: [ tailwindcss() ], })
フォルダ名部分は適宜ご自由に
SCSS ファイルを作成
いよいよ Tailwind CSS を使ったスタイルシートを書く、前述の設定例だと src/app.scss
として
.btn { @apply font-bold py-2 px-4 rounded; } .btn-blue { @apply bg-blue-500 text-white; } .btn-blue:hover { @apply bg-blue-600; }
とか書く。(公式サイトの例そのまんまですが)
@apply
の部分が Tailwind CSS のキモ的なところ。
ビルド
npm run build
とか npm run watch
とかでビルド。
するとビルド結果として public/css/app.css
がこうなる
.btn { font-weight: 700; padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 1rem; padding-right: 1rem; border-radius: 0.25rem; } .btn-blue { --bg-opacity: 1; background-color: #4299e1; background-color: rgba(66, 153, 225, var(--bg-opacity)); --text-opacity: 1; color: #fff; color: rgba(255, 255, 255, var(--text-opacity)); } .btn-blue:hover { --bg-opacity: 1; background-color: #3182ce; background-color: rgba(49, 130, 206, var(--bg-opacity)); }
ジャーン。
以上
そんなかんじです。
いちおうサンプルの GitHub はこちら
オフィシャルのインストールドキュメントはこちら