Tailwind CSS と Laravel Mix とで SCSS のビルド環境を作る

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));
}

ジャーン。