Styles Overview

Midwest uses Tailwind CSS, with a few key modifications.

Tailwind modifications

The only modification Midwest does to Tailwind is to use a different color system and a different color API. The color system has now expanded to have 13 steps, 0 -> 12 , with 6 being the "center"/base. Tailwind, by default, uses 3 digit syntax with 10 steps, beginning at 50, then spanning 100 -> 900, the "center"/base being the affixed -500 values. Swapping to the 13 step color system broadens out the potential colors, plus allows richer light- and dark-mode experiences.

With standard Tailwind syntax, you would write:

<h1 class="text-green-500 hover:text-green-900 bg-green-50 border-solid border-green-500 p-2">Heading</h1>

Where in Midwest, you'll now write:

<h1 class="theme-green text-theme-6 hover:text-theme-12 bg-theme-0 border-solid border-theme-6 p-2">Heading</h1>

Tailwind plugins

We use some Tailwind plugins to help consumers in a few nice ways.

Nested Styles Plugin

https://tailwindcss.com/docs/using-with-preprocessors#nesting

Tailwind allows you to write CSS as if you were writing Sass, using nested declarations. This project uses that, so when authoring css, you can use nesting.

Typography Plugin

https://tailwindcss.com/docs/plugins#typography

This is used to provide a .prose class, which is used within the midwest_prose component. Link to docs

Aspect Ratio plugin

https://tailwindcss.com/docs/plugins#aspect-ratio

[add a description]

Forms plugin

https://tailwindcss.com/docs/plugins#forms

[add a description]

Line Clamp plugin

https://tailwindcss.com/docs/plugins#line-clamp

[add a description]