Tailwind CSS v3.0.24 を使おうと思い、いろいろ調べていましたがバージョン2の情報ばかりでバージョン3の情報があまりありませんでした。v2 と v3 はかなり違いがあるようで少々つまずいたので記事にしてみます。
今回はDocker + Node.js(Express)という環境に PostCSS を使って Tailwind CSS v3 を使用できるようにします。
インストール方法
Tailwind CSS をインストール
公式サイトのマニュアルに従いインストールしていきます。公式サイトのマニュアルでは npm でインストールしていますが、僕は yarn を使っているので yarn でインストールします。
yarn add tailwindcss postcss autoprefixer postcss-cli --dev
npx tailwindcss init公式サイトでは「postcss-cli」を npm install する様になっていないのですが、「postcss-cli」がないと動かないので一緒にインストールします。
npx tailwindcss init で「tailwind.config.js」ファイルを作成します。
postcss.config.js ファイルに Tailwind を追加
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}tailwind.config.js にテンプレートパスを追加
public ディレクトリの HTML と JavaScript ファイル、views ディレクトリの pug ファイルに書かれる Tailwind CSS の class を追跡したいので content に下記のような配列を追加します。
module.exports = {
content: [
// Tailwind CSS の class が追加されるすべてのファイルを記す
"./public/**/*.{html,js}",
"./views/**/*.pug",
],
theme: {
extend: {},
},
plugins: [],
}v2 までは content: [ ] ではなくpurge: [ ] という書き方をしていましたが、Tailwind はもう PurgeCSS を使用しないので、その目的をよりよく反映するために、purge オプションの名前を content に変更したようです。
Tailwind ディレクティブを CSS に追加
input.css ファイル（ファイル名は何でもOK）をどこでもいいのですが、今回はルートに作り下記のようにします。
@tailwind base;
@tailwind components;
@tailwind utilities;package.json の書き方
"scripts": {
"tailwindcss": "postcss ./input.css -o ./public/stylesheets/output.css --watch"
},package.json の scripts にこの様に書き、yarn tailwindcss または、 npm run tailwindcss を実行すると、public ディレクトリの HTML か JavaScript ファイル、views ディレクトリの pug ファイルに Tailwind CSS の class が書いてあるファイルがあれば output.css ファイルに css が出力されます。
ここでちょっとハマったのですが、このままだと Docker では 「watch」が効かず「Just-in-Time Mode（JIT モード）」にならないので、docker-compose.yml か Dockerfile に以下の設定を追加する必要があります。
environment:
- CHOKIDAR_USEPOLLING=trueENV CHOKIDAR_USEPOLLING=trueこれで「watch」されて、対象ファイルの更新があるとリアルタイムで差分が output.css ファイルに出力されます。
既にコンテナを起動した後だと「docker-compose up -d –build」と –build を付けて再起動しないと追加した設定が反映されないので注意してください。
docker-compose up -d --buildJust-in-Time Mode について
Tailwind CSS v2.1 では tailwind.config.js にmode: ‘jit’ と書かないと「Just-in-Time Mode」が有効にならなかったのですが、v3 からはデフォルトで JIT モードが有効になっています。「Just-in-Time Mode」とは対象ファイルに class を追加して更新したらリアルタイムで css ファイルに反映される仕組みです。
cssnano で CSS を minify（圧縮）
yarn add cssnano --devcssnano をインストールし、公式サイトの通り postcss.config.js の プラグインリストの最後に
…(process.env.NODE_ENV === ‘production’ ? { cssnano: {} } : {})
を追加します。
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {})
}
}package.json の scripts に下記を追加します。
"scripts": {
"tailwindcss": "postcss ./input.css -o ./public/stylesheets/output.css --watch",
"build": "NODE_ENV=production postcss ./input.css -o ./public/stylesheets/output.css"
},これで yarn build すると cssnano で CSS が minify されるようになるので本番環境では minify された css が読み込まれます。
下記が公式サイトの説明です。
開発環境の package.json の例
yarn-run-all をインストールして複数の処理を実行できるようにします。
yarn add yarn-run-all --dev"scripts": {
"start": "node ./bin/www",
"dev": "run-p dev:*",
"dev:start": "node ./bin/www",
"dev:tailwindcss": "postcss ./input.css -o ./public/stylesheets/output.css --watch",
"build": "NODE_ENV=production postcss ./input.css -o ./public/stylesheets/output.css"
},package.json の scripts を上記のようにし、Bash で 「PORT=xxxx yarn dev」とコマンドすると、リアルタイムで CSS が反映されブラウザで確認できるので開発しやすくなります。
PORT=8000 yarn devTailwind CSS の VS Code の拡張機能
- Tailwind CSS IntelliSense
- PostCSS Language Support
この2つを入れておくと便利です。
Tailwind CSS IntelliSense は、class 名を補完してくれる拡張機能で Tailwind CSS を使うなら必須の拡張機能です。
PostCSS Language Support は、VS Code 上で @apply や @screen 等で警告やエラーが発生してしまうので、この拡張機能で警告やエラーを表示しないようにするという拡張機能です。詳しくは公式サイトをご参照ください。
GitHub
今回作成したコードは GitHub ↓ にあげてます。
コメント