Headers classname for styling headers with SEO about tailwindcss-typography HOT 8 CLOSED

I can't think of a use case? Why should you misuse the semantics?

from tailwindcss-typography.

I can't think of a use case? Why should you misuse the semantics?

You know h1...h6 have different values for search engine optimization..

For example you have a header that needs styles as h1 but for search engine optimization that header needs to be a h2.

<h2 class="h1"></div>

Put any headers instead of h1 or h2 in the above example.

All the libraries are doing it for this purpose.

Also sometimes you want to apply headers styles also if the tag is not an header. Still for SEO purpose.

<div class="h1"></div>

from tailwindcss-typography.

As an SEO I see why you'd ask for this, but I think that what you're asking for misses the key purpose of this plugin. From the README:

use to add beautiful typographic defaults to any vanilla HTML you don't control

I'd argue that if you have the means to add a class name, that's markup that you control. Simply add the normal Tailwind utilities. If you have a lot to add, create components for each of the heading types and @apply the appropriate utilities, then use them in your markup as you see fit.

from tailwindcss-typography.

As an SEO I see why you'd ask for this, but I think that what you're asking for misses the key purpose of this plugin. From the README:

use to add beautiful typographic defaults to any vanilla HTML you don't control

I'd argue that if you have the means to add a class name, that's markup that you control. Simply add the normal Tailwind utilities. If you have a lot to add, create components for each of the heading types and @apply the appropriate utilities, then use them in your markup as you see fit.

I see your point, this plugins is super useful when you have a cms with wysiwyg field to style.
But to really use it for custom styling, you need headers classes, also for @apply header class utilities.

from tailwindcss-typography.

I understand this plugin should be used with .prose for elements with content like wysiwyg so h1 h6 should be the seo ones, outside of it you should style headers with tailwind classes: This is tailwind phylosophy, so .h1-.h6 classes are not needed that much.

from tailwindcss-typography.

Hey! Thank you for your suggestion!
Much appreciated! 🙏

If you want to style h1, h2, ... differently with @apply than you can do it like this:

https://play.tailwindcss.com/50zlHdztW8?file=config

If you want to apply these by default, make sure to replace example with DEFAULT in the config.

from tailwindcss-typography.

I would like to bump this issue for reconsideration.

I understand that the point of this plugin is to style html content that you don't control. However, using the normal utilities on the content that I do control is not always enough.

For example, say I have two content areas on a page where one of them I control and one I do not. I can add the prose class to the wrappers for each content area - that's all fine and good. But what if the reason I can control one of the areas is because it's a bit more complicated, ie. I need to style an h2 as an h1 (for SEO of course). Then in this case I would have to find out exactly what the typography styles are for h1's, create a custom class (e.g. .h1) that matches this exactly, and then maintain that class in case I ever change my prose to prose-xl or change the typography config in tailwind.config. This is not ideal by a long shot, since now I have to always change my styles in two places if I ever want to change the look of my h1's. This gets exponentially more complicated when you factor in h1's - h6's, plus the more custom styles like h1 + code {margin-top: ...}, plus different screen sizes.

In conclusion, there's a reason why other libraries style their headings, etc. with classes. It's so they can reuse those styles in other places without having to change the html. I don't see why we couldn't have that here as well, especially since this is a use case that comes up for me all the time when building Wordpress websites.

P.S. Love the plugin btw. I just wish I could use it more, since this issue will often literally make me rewrite all my typography styles just so that I can have the content I DO control look the same as the content I DON'T control.

from tailwindcss-typography.

Not a SEO issue but consider the case where user could input a markdown article that gets rendered in page, it could have 6 levels of heading though the h1 of the article is not semantically equivalent to h1 of the page. So it's preferred to use headings in the article starting from a higher level. In this case, no matter how the heading tags are used the need for such utilities are inevitable.

from tailwindcss-typography.