Smaller concerns in typography

[mrwokkel]

For a project I'm doing (not tailwind), I use the same principle. Create scoped areas for content styling.
The Tailwind Typography in current state is doing too much per class, in my opinion.

I have a good experience with separating stuff:

• basic content (example could be .prose)
• headings (example could be .prose-headings)
• I also have multiple system (example could be .prose-article and .prose-footer)
• Sometimes content needs to inherit the color om the component (example .prose-color-inherit)
• Sometimes the last element (direct child) should have it's margin collapsed, sometimes not! (example .prose-collapse-last-margin or inline with tailwind: .prose:last:mb-0 (just a sketch for a name)

Even the table / images and others can be separated (and purged when not used)

Just food for thought.

[adamwathan]

How would you use those classes when you have no access to the markup for those sections though, since typically it looks like this:

<article class="prose">
  {{ articleFromDatabaseOrMarkdownOrSomething }}
</article>

[mrwokkel]

Like so:

<article class="prose prose-color-inherit prose-collapse-last-margin">
  {{ articleFromDatabaseOrMarkdownOrSomething }}
</article>

(classnames are just example, should be better)

[mrwokkel]

Point is, now it is doing a lot at once.

[olets]

You can do everything you've described by adding new modifiers

tailwindcss-typography#adding-new-modifiers

typography: {
  DEFAULT: { // styles `.prose`
    css: {...},
  },
  'headings': { // styles `.prose-headings`
    css: {...},
  },
  'article': { // styles `.prose-article`
    css: {...},
  },
  'footer': { // styles `.prose-footer`
    css: {...},
  },
  'color-inherit': { // styles `.prose-color-inherit`
    css: {...},
  },
  'collapse-last-margin': { // styles `.prose-collapse-last-margin`
    css: {...},
  },
}

A given element could have as many of those as you wanted.

[mrwokkel]

Yes agreed but the DEFAULT one is doing too much at once.

For instance, the .color-inherit' should not be necessary, but DEFAULT is coloring stuff. So one could do class="prose text-green-500" and all content is green.

Also when tables are not used, prose DEFAULT does output the classes, why not .prose-tables.

I think the DEFAULT should be less to minimal, and maybe put the 'out-of-the-box' stuff in a modifier class (for instance .prose-full, that includes most that is now in DEFAULT)

Now the only way to achieve this is by completely overriding the DEFAULT.