Companies using utility-first CSS (like Tailwind) in production
Tags: tailwindcss, css
Published: 2021-11-17 19:07:58


(This was originally posted years ago [on Medium](https://medium.com/@philwolstenholme/companies-using-utility-first-css-in-production-c9b9c2568046). 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](http://solid.buzzfeed.com/) by Buzzfeed

* [Shed](http://tedconf.github.io/shed-css/) by TED

* [Stripe’s dashboard](https://twitter.com/adamwathan/status/1058879918556082176)

* [Github’s Primer design system](https://styleguide.github.com/primer/utilities/margin/)

* [Medium](https://res.cloudinary.com/wolstenh/image/upload/c_scale,f_auto,w_1600/v1552570077/blog_posts/medium.png)

* Meetup (first via their [Swarm design system](https://meetup.github.io/swarm-sasstools/seldon/doc.html), then via Tailwind on the Meetup homepage)

* [Firefox Send](https://send.firefox.com/)

* [Kickstarter](https://res.cloudinary.com/wolstenh/image/upload/c_scale,f_auto,w_1600/v1552570077/blog_posts/kickstarter.png)

* [Twitch](https://res.cloudinary.com/wolstenh/image/upload/c_scale,f_auto,w_1600/v1552570077/blog_posts/twitch.png)

* [Stack Overflow’s Stacks design system](https://stackoverflow.design/product/base/spacing)

* [Mapbox](https://youtu.be/uHVqbCPnOwU?t=157)

* [Heroku](https://design.herokai.com/purple3/docs/#spacing) switched from a BEM approach to a utility-first approach in the [latest version of their design system](https://design.herokai.com/purple3/docs/#spacing)

* Laravel [Spark](https://res.cloudinary.com/wolstenh/image/upload/c_scale,f_auto,w_1600/v1552570077/blog_posts/laravel-spark.png), [Laracasts](https://res.cloudinary.com/wolstenh/image/upload/c_scale,f_auto,w_1600/v1552570077/blog_posts/laracasts.png), [Laracon AU](https://res.cloudinary.com/wolstenh/image/upload/c_scale,f_auto,w_1600/v1552570077/blog_posts/laracon-au.png)

* [Algolia](https://blog.algolia.com/redesigning-our-docs-part-4-building-a-scalable-css-architecture/)

* [Starbucks](https://www.starbucks.com/developer/pattern-library/style-utilities/styles-index/#styles-index/)

* [Pizza Hut (UK)](https://res.cloudinary.com/wolstenh/image/upload/c_scale,f_auto,w_1600/v1552570077/blog_posts/pizza-hut.png)

* [National Basketball Association (N. America)](https://twitter.com/JovaniPink/status/1343288594904051714)

* [Blizzard / Diablo 4](https://twitter.com/tailwindcss/status/1190423327590027264?lang=en)

* [Gearbox / Borderlands 3](https://twitter.com/adamwathan/status/1172517748150288386)

* [Stephen Hawking](https://www.hawking.org.uk/)

* Clearbit’s [Salesforce landing page](https://clearbit.com/salesforce)

* [Eurovision](https://twitter.com/adamwathan/status/1133627038173155329)

* [NASA’s Jet Propulsion Laboratory](https://www.jpl.nasa.gov/)

* [U.S. Web Design System (USWDS)](https://designsystem.digital.gov/utilities/)

* [Der Spigel](https://www.spiegel.de/) (“one of continental Europe’s most influential magazines” [according to The Economist](https://www.economist.com/europe/2002/11/14/his-countrys-mirror))

* [Clubhouse](https://www.joinclubhouse.com/) (‘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](https://www.hearinglikeme.com/how-clubhouse-app-lacks-accessibility/).

* [Github CoPilot](https://copilot.github.com/)

* [React beta documentation](https://philwolstenholme.medium.com/companies-using-utility-first-css-in-production-c9b9c2568046)

* [Percy](https://percy.io/) (now acquired by Browserstack)

* Shopify Hydrogen framework, both for the [marketing site](https://hydrogen.shopify.dev/) and [as the default styling option when using the framework](https://shopify.dev/api/hydrogen/framework/css-support)

* [Netflix’s Top 10 site](https://top10.netflix.com/)

* [Google's IO 2022 site](https://web.archive.org/web/20220429065100/https://io.google/2022/)

* [Decathlon's design system](https://www.decathlon.design/726f8c765/p/41193f-ui-libraries/b/53f92e)

* [Microsoft's .NET marketing site](https://dotnet.microsoft.com/en-us/)

* [New York Times Events](https://www.nytimes.com/events)

* [ConvertKit](https://convertkit.engineering/2023/03/27/why-we-use-tailwind)

* [Shopify.com](https://www.shopify.com)