Tailwind and Typography in Rails

What if your Rails app is surfacing markdown or content from a CMS. Your traditional CSS choices are pretty much limited to defining `H1,H2,h3...`. And of course there's another screen where you'll need similar but different styling, so you'll end up with CSS like tuesday.H1, tuesday.h2, etc..

Tailwind, specifically the Typography plugin, has you covered. This plugin has been evolving fairly rapidly, ( but not as fast as Tailwind, now as I type at 3.0.11) and now gives you:

• A load of sensible CSS controlling things like font size, paragraph spacing by adding the class prose to an enclosing div.
• you can drop into the css you need through a set of predefined class accessors, like `
• 5 grayscale modifier classes so that black type has a more pleasing look to it.
• Control of how large text is for each tailwind media breakpoint.
• Intelligent Dark Mode extends to prose as it should.

Installation in a Rails project depends on which version of Rails you are using, but once that's squared away, you only need the following snippet to enable the Typography plugin.

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

In a best case scenario - Rails 7.x - you just add the above snippet to the tailwind.config.js file in the /config directory and you are good to go. But Tailwind 3.0 works with Rails 6, 5, 4.2 in various ways - more about that next time.