(This was originally posted years ago on Medium. Since then I've moved it to Dev.to and kept it relatively up-to-date.)
This is a list I put together while doing research while we were considering a trial of utility-first CSS in the Drupal team at my last job (and have since kept relatively up-to-date). I’ve posted the list here to make it easier to refer to in the future. If you have any organisations or websites that you think should be on this list, let me know with a comment or via Twitter.
Some people react to the suggestion of utility-first CSS with the idea that ‘it won’t scale’ or that it won’t be right for a large project, or a large team, or that it isn’t best practice, because it isn’t the traditional way of doing things.
Beyond trying it and finding out first-hand, there isn’t an easy way to address this concern, but one way is to show examples of it being used by respected organisations, especially ones that are technology-focused.
Consider that for each organisation in this list, people will have had the same debates and discussions about the merits of a utility-first approach, but their decision was to go for it.
Solid by Buzzfeed
Shed by TED
Meetup (first via their Swarm design system, then via Tailwind on the Meetup homepage)
Heroku switched from a BEM approach to a utility-first approach in the latest version of their design system
Laravel Spark, Laracasts, Laracon AU
Clearbit’s Salesforce landing page
Der Spigel (“one of continental Europe’s most influential magazines” according to The Economist)
Clubhouse (‘the social audio app’) — I’ve included Clubhouse on this list but its inclusion doesn’t mean I support Clubhouse. The app has made very little effort to add captioning support for deaf/Deaf/hard of hearing users.
Percy (now acquired by Browserstack)
Shopify Hydrogen framework, both for the marketing site and as the default styling option when using the framework
Top comments (0)
Some comments have been hidden by the post's author - find out more