CUBE CSS with Tailwind CSS

An example of how you can use Tailwind CSS as the U (utilities) in CUBE CSS. It also uses the following:

1. Every Layout layouts as compositional layouts (the C in CUBE CSS)
2. Utopia for fluid type and spacing scales
3. Post CSS to bundle up CSS files

Check out the source.

Fluid type and space

This is already being fluidly spaced using Utopia, global styles and a flow utility. Job done. Let’s render the type scale for fun though.

Every Layout Compositions

I’m not a fan of breakpoint-based layout and as a co-author of Every Layout, it probably comes as no surprise I use those in projects. Here's a couple of handy ones.

Sidebar

Switcher

Cluster

Check out the source.