Tailwindcss: Feature request: text styles

[benface]

It would be nice if, in addition to fonts, text sizes, font weights, line heights, letter spacings, and text colors, we could define "text styles" (aka "character styles" or "paragraph styles") which could combine any of those properties.

The way I see it working, it would be possible to use names representing values defined in the config, like this:

textStyles: {
    'h1': {
        'font': 'serif',
        'textSize': '3xl',
        'fontWeight': 'bold',
    },
},

...or we could use values directly (which are not necessarily used anywhere else in the config):

textStyles: {
    'h1': {
        'font': ['Constantia', 'Lucida Bright', 'Lucidabright'],
        'textSize': '1.875rem',
        'fontWeight': 700,
    },
},

All properties are optional and the ones that aren't defined simply inherit as per CSS. The above would generate a style-h1 class, and maybe it could be possible to override some of its properties like this:

<h1 class="style-h1 font-light">Title</h1>

Thoughts?

[reinink]

Hey there @benface! Thanks for your interest in Tailwind CSS! Generally we have tried to not mix more than one CSS property into each utility. It only happens in maybe one or two places in the whole framework, in very unique situations.

Generally when you start mixing utilities what you're really doing is creating components. I think this is a great use-case for some .style-h{x} as components. For example:

@responsive {
  .style-h1 { @apply .font-serif .text-3xl .font-bold }
  .style-h2 { @apply .font-serif .text-2xl .font-bold }
  .style-h3 { @apply .font-serif .text-xl .font-bold }
  .style-h4 { @apply .font-serif .text-xl }
}

You can read more about extracting components here.

I hope that makes sense! Good luck! 💪🏻

[benface]

Makes perfect sense! Thank you!