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: [
  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
Featured Articles
Deploying CakePHP to using Docker
A quick guide on how to create your Docker file for CakePHP when using for deployment
Using Tailwind with CakePHP
A quick guide for setting up Tailwind CSS with CakePHP
Deploying Flowise to
A quick guide on how to deploy a Flowise server to the network
Creating a static HTML template for Tailwind and Alpine JS
A guide for creating a basic HTML template that uses Tailwind for styling and Alpine JS for interactive elements