Tailwind + CakePHP Application Template

The front-end tools landscape is always evolving and changing. I’ve been aware of Tailwind for a few years, but haven’t had the chance to give it a try. Kevin Pfeifer from the CakePHP team has been using tailwind on a few projects and highlighted it as a CSS toolkit that would work well with CakePHP applications. This presented a great opportunity for me to learn more about Tailwind and build something potentially useful for the CakePHP community.

What I built

I wanted to try an application skeleton that combines CakePHP and Tailwind. I’ve done this before for React and Typescript and it was a fun project. With Tailwind being a CSS framework, I wanted the integration to go deeper than just providing build tool integration. Instead, we could provide a simpler to operate development server, and bake templates to generate a CRUD application using Tailwind. I wanted to do this so I could both learn more about Tailwind, and provide an example of how one could use bake to generate customized CRUD applications. We all need admin interfaces, and code-generating a CRUD application can be a low-effort way to get those management interfaces going.

Build tool integration

Kevin did the initial work to setup build tooling. He chose to go with vite, which is a very sensible choice, as it sets the application up to use almost any front-end framework or library. The developer experience of this would be to either run npm in the foreground and have PHP server running the background, or use two terminals to run the cake server and npm in the foreground. I didn’t like this though, and prefer to have a single command development experience. I added cake devserver which will run both the cake server and npm at the same time. Kevin has since improved it with more stable process management, and I’m pretty happy with how it works so far.

Learning Tailwind

Going into this project, I was a Tailwind skeptic. Having learned CSS in the ‘semantic CSS’ era, Tailwind’s utility classes contradicted most of I had learned about writing ‘good CSS’. I initially brushed Tailwind off as a novelty that would fade away. However, Tailwind has built a sizable community, of passionate developers. Before forming a more serious opinion on Tailwind, I would need to use it first.

Now that I’ve been able to use Tailwind a bit, I see why people are excited about it. As I learned more of the Tailwind conventions and DSL, it started feeling very productive. Being able to change all the styling and HTML without having to switch between files feels great. It captures a lot of what I like from the ‘CSS in JS’ development experience but without the run-time overhead.

Modern UI development is increasingly component based, and Tailwind fits in with that model very well. Whether your components are rendered client-side, or on the server, application interfaces are often structured as a series of small components that are composed together to build larger experiences. Components often map to files, and within a component, utility classes make it simpler to understand how a component will be rendered. For example, figuring out how a class list like border border-slate-500 rounded-sm max-w-md min-w-4 p-1 would be rendered, is much simpler than a classname like input-box. Having the HTML structure, and visual styling nearby encourages a locality of behaviour workflow in the same way that htmx does. Tailwind also does a great job of giving you a ‘design system starter kit’. By pre-defining grids for spacing, typography and colours you get the many benefits of a design system without having to do much work. Lastly, I can see big benefits if you work on multiple Tailwind applications. Having the same set of conventions across each application lowers the context switching cost of working across multiple applications.

Combining CakePHP and Tailwind

For the most part integrating Tailwind into a CakePHP application was simple. CakePHP’s view elements roughly approximate a component system, which works really well. Integrating Tailwind classes into CakePHP’s helpers had some rough spots. CakePHP’s view helpers use simple string templates to generate HTML, and I would have liked a bit more flexibility in how classes are applied to links, and form error states. With links it wasn’t possible to provide default classnames (like colour and hover effects), and also augment that with additional classnames or override classnames for specific links. Similarly, managing classnames for errors states is still a bit awkward and I could see the limitations being more painful in a larger application. I’d like to revisit CakePHP’s string templates and make them either more flexible, or explore using view elements instead to give more control.

If you’re interested in seeing the result, check out the cakephp/app-tailwind repository