How to set up Tailwind CSS with Cake PHP

Set up Tailwind CSS with the following command

npm install -D tailwindcss
npx tailwindcss init

Then create a configuration file as such, tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./templates/**/*.php",
    "./webroot/**/*.js",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Then add resources/input.css file with the following contents for example

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

@layer base {
    body {
        @apply text-gray-600 font-sans;
    }
...

Now your project is all set up. All you need to do is run the following command to build your css file and make sure you include it on your page.

npx tailwindcss -i ./resources/input.css -o ./webroot/css/app.css --watch --minify