Tailwind CSS v3 をDocker + Node.js(Express) で使う方法

Tailwind CSS

Tailwind CSS v3.0.24 を使おうと思い、いろいろ調べていましたがバージョン2の情報ばかりでバージョン3の情報があまりありませんでした。v2 と v3 はかなり違いがあるようで少々つまずいたので記事にしてみます。

今回はDocker + Node.js(Express)という環境に PostCSS を使って Tailwind CSS v3 を使用できるようにします。

目次

インストール方法

Tailwind CSS をインストール

公式サイトのマニュアルに従いインストールしていきます。公式サイトのマニュアルでは npm でインストールしていますが、僕は yarn を使っているので yarn でインストールします。

あわせて読みたい
Install Tailwind CSS using PostCSS - Tailwind CSS Installing Tailwind CSS as a PostCSS plugin is the most seamless way to integrate it with build tools like webpack, Rollup, Vite, and Parcel.
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=true
ENV CHOKIDAR_USEPOLLING=true

これで「watch」されて、対象ファイルの更新があるとリアルタイムで差分が output.css ファイルに出力されます。
既にコンテナを起動した後だと「docker-compose up -d –build」と –build を付けて再起動しないと追加した設定が反映されないので注意してください。

docker-compose up -d --build

Just-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 --dev

cssnano をインストールし、公式サイトの通り 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 が読み込まれます。
下記が公式サイトの説明です。

あわせて読みたい
Optimizing for Production - Tailwind CSS Getting the most performance out of Tailwind CSS projects.

開発環境の 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 dev

Tailwind CSS の VS Code の拡張機能

  • Tailwind CSS IntelliSense
  • PostCSS Language Support

この2つを入れておくと便利です。
Tailwind CSS IntelliSense は、class 名を補完してくれる拡張機能で Tailwind CSS を使うなら必須の拡張機能です。
PostCSS Language Support は、VS Code 上で @apply や @screen 等で警告やエラーが発生してしまうので、この拡張機能で警告やエラーを表示しないようにするという拡張機能です。詳しくは公式サイトをご参照ください。

あわせて読みたい
Editor Setup - Tailwind CSS Plugins and configuration settings that can improve the developer experience when working with Tailwind CSS.

GitHub

今回作成したコードは GitHub ↓ にあげてます。

GitHub
GitHub - tanacio/tailwindcss-v3-express Contribute to tanacio/tailwindcss-v3-express development by creating an account on GitHub.
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

目次