Skip to content

Switch to Tailwind for styling#633

Open
rmccue wants to merge 65 commits intomainfrom
tailwind-time
Open

Switch to Tailwind for styling#633
rmccue wants to merge 65 commits intomainfrom
tailwind-time

Conversation

@rmccue
Copy link
Copy Markdown
Member

@rmccue rmccue commented Apr 8, 2026

This removes the last vestiges of the HM Pattern Library and associated tooling, moving to Tailwind instead. This brings multiple benefits:

  • Tailwind styles are scoped minimally, avoiding a huge cascade of default styles. The HM Pattern Library had big issues with this in particular, and we had a huge number of rules which required correcting back to less opinionated ones. I've cleaned up many in here, but likely not all.
  • Our styles are generally tied directly to the component, meaning that two files are required for one component. Tailwind better matches the React component style here by colocating the styles with their markup.
  • Partially through side effects from both of those, this is also much more AI-friendly, as changes can be scoped minimally. This makes it much faster to iterate and improve things.

Consider this the v1 of switching to Tailwind. There's three remaining efforts that can follow on from this:

  • Removing the SCSS layer entirely. Most of this is only here temporarily to make sure we're not breaking anything for now.
  • Switching to Tailwind Typography (i.e. prose class). This is a visual change, so is deferred from here, but this would help us significantly clean up a lot of the PostContent styles and also make display more consistent.
  • Cleaning up styles across the board. We have a bunch of styles which are duplicative (see how many custom colours we have in here eg) or very slightly differ from other bits. This is a visual and design change, so is deferred from here.

rmccue added 26 commits March 17, 2026 16:10
May have been a bit too ambitious here trying to use grid when it's not
needed.
Removes CTA and pagination helpers
This keeps the specificity low so that they can be overridden later, eg
in PostContent.
Our old size was 18px, which messed up a variety of different styles in
Tailwind. This applies it back to just our prose content.
This means small is now actually small, and regular is usable (and the
new default).
@joehoyle
Copy link
Copy Markdown
Member

joehoyle commented Apr 9, 2026

"- Required (in require-dev) package "humanmade/asset-loader" is not present in the lock file."

@rmccue
Copy link
Copy Markdown
Member Author

rmccue commented Apr 9, 2026

Just also checking if the search bar is working correctly, I'm seeing cases where it seems to be hidden.

Various bits of the Tailwind output in production mode were being
exorcised by cssnano. Until we update webpack-helpers for the newest
version, disable minimisation.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants