Overview

The Squeeze Design System exposes a custom Tailwind CSS configuration for combining Curology's unique design tokens with a robust atomic CSS library.

Not only are the components of Squeeze built with Tailwind, any application consuming the design system can (and should!) use the class-based approach to laying out its UI. CSS Modules and CSS-in-JS begone!

The best reference for how to use these classes is the Tailwind Docs, with the caveat being that Squeeze has some custom values that don't match Tailwind's default configuration. These include:

• Breakpoints
• Colors
• Margin
• Padding
• Height
• Width

To view a complete list of all configuration overrides, look at the tailwind.config.cjs inside of @curology/ui-styles-web.

All of Tailwind's classes are prefixed with cur- to prevent any clashes with existing CSS.

Example

<div class="cur-flex cur-flex-col">
  <div class="cur-text-body-lg">
    Laborum amet nostrud dolor labore ea dolor irure.
  </div>
  <div class="cur-text-meta cur-mt-4">
    Excepteur anim nostrud amet sint occaecat ea enim do duis amet.
  </div>
</div>