Tailwindcss-Typography with classes

[Nick-Mazuk]

This post deals mainly with the official typography plugin, but since that repo doesn't have a discussions tab, I'm posting this here. If there's a better place for this question, feel free to move it elsewhere, close it, ask me to repost it elsewhere, etc.

Is there a way to compose Tailwind/Typography text styles through classes?

In other words, is it possible to do something along the lines of:

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

where

/* globals.css */

@tailwind base;
@tailwind components;

.h1 {
    @apply text-4xl sm:text-5xl lg:text-6xl font-semibold
}

@tailwind utilities;

The problem

Being able to create a single source of truth for text styles can be incredibly important for maintaining a consistent style across large sites. For instance, I already have a React component that takes care of like 95% of the text for used on this site (and for the other 5%, there's always normal Tailwind!), but React components don't work well for blog posts, especially when it's generated from Markdown or a headless CMS. But Tailwind/Typography can solve this issue.

Other potential solutions?

1. From the README, I know it's possible to get the styles from the theme, and through the responsive variants of the prose class I can recreate all the current text styles. Unfortunately, that means two sources of truths for text styles (the React component and the Tailwind config). If using classes for Tailwind/Typography, I'll likely do this for now.
2. Find some way to create an external config and generate both the styles in the React component and the Tailwind/Typography config.
3. Any other ideas?

Thanks!

P.S., is there an official way of writing Tailwind/Typography? I've seen "Tailwind CSS Typography", "@tailwind/typography", "Tailwind/Typography", "tailwindcss-typography", etc. I'm somewhat of a stickler for writing names correctly (e.g., it bugs me when people write Mac OS instead of macOS).

[JNavith]

In this example, you've already enabled the experimental applyComplexClasses feature, so making .prose h1 take on .h1's styles is about this much work:

module.exports = {
  theme: {
    typography: {
      default: { // you omitted this
        css: {
          h1: {
            '@apply h1': '',
            // https://github.com/tailwindlabs/tailwindcss-typography/blob/master/src/styles.js#L69-L70
            color: false, // remove the default text color
            fontWeight: false, // remove the default font weight
          },
          // ...
        },
      },
    },
  },
  // ...
};

Hope this helps.