Write better CSS by stopping writing any more CSS! How and why to use utility-first CSS on large-scale Drupal websites with Tailwind CSS

CSS will always be a fundamental part of the web stack, but it's deceptively hard to get right on large, long-running projects worked on by multiple developers.

What might start as a well-structured, duplication free, rule-following codebase can decrease in quality with time, with repetition, inconsistencies, and overrides-on-top-of-overrides taking over. When was the last time you confidently deleted a sizeable portion of a site's CSS codebase, or changed some rules and were 100% sure that you didn't just cause a regression?

Utility-first CSS aims to change things by moving complexity and component definitions out of your CSS, and into our markup – an approach very well supported by Drupal and Twig, albeit with a bit of a change in thinking required.

This session will cover the benefits of a utility-first approach and include examples based on over two years of building such sites for multiple clients. We'll cover configuring and extending Tailwind CSS to tie your CSS to a design system, some nice Twig templating tricks, useful modules for taking a more markup-centric and component-based approach to styling, an outline of potential performance benefits, a discussion of the developer experience improvements, and much more.

It doesn't matter if you're curious about utility-first, already getting started with it – or a die-hard BEM fanatic, as the session will include content for all levels and points of view.

*Session Materials*