Skip to content

Tailwind Theme implementation with some styling tech debt removal ✨

Warren Gifford requested to merge brett/tailwind into main

Created by: bretthayes

This closes #5378 (closed) in preparation for #5381 and includes a new theme that meets our DLS specifications. This PR also removes some of our tech debt items like unused styles, temporary utility class placeholders, and duplicate markup that has been replaced by reusable components.

Notes

  • This PR is quite large due to removing a lot of tech debt and meeting more specs in our DLS. All other tech debt items will be listed and tackled progressively in #5381.
  • There will be some slight visual differences against production due to our DLS standardizing our styling
  • Not all Bootstrap has been converted to Tailwind thoroughly for each line touched
  • Mostly focus on the tailwind.config, globals.css, and look for any breaking UI changes through all pages on the site

Changelog

Most notably:

  • Created our Tailwind theme file based on specs in our DLS
  • Removed 48% of our scss files with conversions to Tailwind ✨
  • Set global base styles using Tailwind's @layer directives for conveniently writing vanilla HTML markup without needing additional classes
  • Consolidated our typography to meet our DLS specs; headings, paragraphs, standalone and inline links, lists, code blocks, and tables. This includes the removal of all heading-x and font-weight-x classes from headings and other elements.
  • Removed all unused and rogue gradient backgrounds and consolidated our gradients under DLS specs into convenient Tailwind utility classes
  • Removed a few image backgrounds from the community page and use-cases pages and replaced them with our Background component
  • Removed some dupe markup on our use case pages in lieu of using our TwoColumnSection for better code reuse
  • Removed all unused and rogue colours completely from globals.scss. Our new source of truth is our Tailwind config.
  • Converted our Footer to Tailwind
  • Created a Tabs component styled with Tailwind to replace Bootstrap Tabs
  • Renamed BlogResources to ResourceList and converted it to a simpler plank component
  • Blockquote borders can now be reversed for TwoColumnLayout with the reverseBorder prop
  • Converted the following utility classes to Tailwind: display, text alignment, justify, overflow, auto margins, text decorations, border radius, rounded borders, padding, and positioning
  • HubSpot forms on product pages now have Chili Piper enabled

Test

  1. Ensure prettier has standardized the proposed changes.
  2. Ensure all pages render without any UI breaking. Feel free to go through each page in the file tree.

Merge request reports