CakePHP4でTailwindCSSを使う

技術系メモ

広告：超オススメUnity Asset
　　広告：超オススメUnity Asset

CakePHP4のプロジェクトでTailwindCSS（バージョン2.2.17）をセットアップしたときのMEMOです。TailwindCSSは、すでに3がリリースされているようですが、3だとpurgeあたりがうまく動いてないっぽいので、その辺は何かわかったらまたMEMOします。

  1. composer self-update && composer create-project --prefer-dist cakephp/app:4.2 CakeTailwindCSS
  2. cd CakeTailwindCSS CakePhpのルート
  3. mkdir TailwindCSS && cd TailwindCSS TailwindCSSの作業フォルダ作成
  4. npm init -y でpackage.jsonを作成。
  5. npm install -D tailwindcss@2.2.17 postcss@latest autoprefixer@latest npmコマンドはTailwindCSS作業フォルダで。※ バージョンは、現時点では3ではなく、2の最上位「2.2.17」にしておきます。
  6. npm install -D cross-env もあとで使うのでインストールしておく。
  7. src ディレクトリを作成して、source.css を作成。
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. package.json の "scripts"部分を以下のようにすることで dev（開発用） と build （本番用）のビルドが行えるようにしとく。（ついでにCakePHPのMySQLとサーバー起動もコマンド化）
  "scripts": {
      "dev": "tailwindcss build src/source.css -o ../webroot/css/tailwind.css",
      "build": "cross-env NODE_ENV=production tailwindcss build src/source.css -o ../webroot/css/tailwind.css",
      "server": "mysql.server start && ../bin/cake server",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  1. npx tailwindcss init でtailwind.config.jsを作成。
  2. CakePHPのビュー（templates）で使用されいているCSSを解析できるように purge を指定しておく。tailwind.config.js に以下を追加。
module.exports = {
    purge: [
        '../templates/**/*.php',
    ],
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}
  1. npm run devで開発用スクリプトを実行。すると、webroot/css/tailwind.css が作成されるが、このファイルは開発用の全部込みになっているので4MBくらいある。css実装時は、このファイルとlocalhostでテストしながら作る。
Tailblocks — Ready-to-use Tailwind CSS blocks
Ready-to-use Tailwind CSS blocks
tailblocks.cc
  1. この↑サイトに、使えるレイアウトサンプルがいくつかあるので、VIEW CODEからソースをコピーして、templates/Pages/home.php のbody内にコピペ。
  2. home.php のheader内にあるCSSへのリンク部分を <?= $this->Html->css(['tailwind']) ?> だけにする。 
  3. npm run serverでCakePHPのMySQLとローカルサーバーを一気に立ち上げられるように書いてあるので実行してhomeにコピペしたTailwindのCSSが動作しているかを確認。
  4. npm run build で本番用にビルドすると、purgeで指定したフォルダ内のphp内全てのcssを検知し、それら必要なものだけにした tailwind.cssをwebroot/css/に生成してくれる。上記のコピペ程度であれば、17KBほどの小さなファイルになる。

componentsを使う

上記の例のsrcフォルダ内のsource.cssにコンポーネントの定義をしておくと、cakephpのテンプレート内のソースがスッキリするので、よく使う組み合わせで利用すべし。

例：src/source.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .mskgtw_navLink{
        @apply mr-5 text-yellow-100 hover:text-yellow-50
    }
    .mskgtw_field {
        @apply w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-indigo-500 focus:bg-transparent focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out
    }
    .mskgtw_submit {
        @apply text-yellow-100 bg-pink-800 border-0 py-2 px-8 focus:outline-none hover:bg-pink-700 rounded text-lg
    }
    .mskg_alert{
        @apply px-6 py-4 border-0 rounded relative mb-4
    }
    .mskg_section{
        @apply px-1 md:px-4 py-4 mb-4 text-gray-600
    }
}

TemplatesのPHP内でソースを書く際に、mskgtw_navLink などをclassで指定するだけで @apply で指定しているtailwindcssの組み合わせをビルド時にジェネレートしてくれます。

おまけ：npmの関連コマンド

インストールされているバージョンの確認

npm list

npmのインストール可能バージョンの確認

npm view tailwindcss versions

npmのアンインストール

npm uninstall tailwindcss

npmのバージョン指定インストール

npm install -D tailwindcss@2.2.17

以上

参考サイト：

https://zenn.dev/chabatake_i/articles/tailwindcss_introduction
zenn.dev
Tailwind CSS の Purge でビルドサイズを縮小する
zenn.dev