Tailwind Integration

This gem integrates the Tailwind CSS utility library. For those to whom this jargon is foreign and confusing, Bootstrap's documentation describes CSS utilities (and their value) thusly:

Utility classes—formerly helpers in Bootstrap 3—are a powerful ally in combatting CSS bloat and poor page performance. A utility class is typically a single, immutable property-value pairing expressed as a class (e.g., .d-block represents display: block;). Their primary appeal is speed of use while writing HTML and limiting the amount of custom CSS you have to write.

Specifically regarding custom CSS, utilities can help combat increasing file size by reducing your most commonly repeated property-value pairs into single classes. This can have a dramatic effect at scale in your projects.

How we include Tailwind

This gem selectively includes parts of the Tailwind library to reduce size. Please see the section below when viewing Tailwind documentation. Every Tailwind declaration has the !important flag added, as the Bootstrap CSS utility toolkit uses !important for all of its declarations so that the utilities can override any Bootstrap component CSS.

Finally, we include the Tailwind CSS after the Bootstrap CSS so that Tailwind will win out over Bootstrap in any specificity ties. This allows you to use Tailwind utilities to alter any Bootstrap components.

Parts of Tailwind we include

The Tailwind docs describe the various Tailwind utilities over several pages. For instance, the flex property has its own Flex utility page while the flex-wrap utilities are on their own Flex Wrap page. Each page represents a "module" of Tailwind. The programmatic name of these modules can typically be found at the bottom of the page.

When reading through their docs, you will come across Tailwind modules that are not present in our build. You can check our Tailwind build for a comprehensive list of the modules we include. If a Tailwind utility class is not working, the most likely cause is that we are not including that module.

If you would like a Tailwind module to be included in Frontend, please let one of the Gem's maintainers know.

Versions of Tailwind included

Frontend version	Tailwind Version	Tailwind docs
1.0	0.7	Documentation
1.1	2.1	Documentation