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 はこちら
github.com
オフィシャルのインストールドキュメントはこちら
tailwindcss.com
laravel-mix.com