Add color and scale plugin options

[sambauers]

Adds the ability to specify default color (gray scale) and scale (type scale) - this saves an implementor from specifying their preferences on every element where they utilise prose.

The associated PR for the documentation website is here tailwindlabs/tailwindcss.com#1475

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
tailwindcss-typography	✅ Ready (Inspect)	Visit Preview	Jan 4, 2023 at 7:46AM (UTC)

[reinink]

@sambauers Hey thanks for the PR!

This is a neat idea, although I'm not fully convinced it's the right API. We've been feeling for a long time that the way that this plugin is configured is overly complicated, so I'm really hesitant to add even more configuration options. I'd honestly rather find a way to simplify the whole story.

For example, in some ways I kind of wish that instead of a plugin we simply provided folks with a chunk of example CSS that they could just copy and paste into their projects and modify as needed.

Given that, I think I'm going to close this PR for now, as I don't feel confident in committing to supporting this feature long term. It may be something we eventually revisit, especially as we look at ways to improve the overall customization story for this plugin. I hope that makes sense!

That all said, here are some suggestions that might help.

First, I think if I was in your position I would simply create a <Prose> component in my project that includes these defaults baked in. Of course this recommendation is only helpful if your web framework provides some type of component system.

Alternatively, for setting the default colors, you can do this via the config by extending the typography.DEFAULT property. As a silly example, here's how you could do this using the pink color palette provided by Tailwind:

const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    extend: {
      typography: ({ theme }) => ({
        DEFAULT: {
          css: {
            '--tw-prose-body': theme('colors.pink[800]'),
            '--tw-prose-headings': theme('colors.pink[900]'),
            '--tw-prose-lead': theme('colors.pink[700]'),
            '--tw-prose-links': theme('colors.pink[900]'),
            '--tw-prose-bold': theme('colors.pink[900]'),
            '--tw-prose-counters': theme('colors.pink[600]'),
            '--tw-prose-bullets': theme('colors.pink[400]'),
            '--tw-prose-hr': theme('colors.pink[300]'),
            '--tw-prose-quotes': theme('colors.pink[900]'),
            '--tw-prose-quote-borders': theme('colors.pink[300]'),
            '--tw-prose-captions': theme('colors.pink[700]'),
            '--tw-prose-code': theme('colors.pink[900]'),
            '--tw-prose-pre-code': theme('colors.pink[100]'),
            '--tw-prose-pre-bg': theme('colors.pink[900]'),
            '--tw-prose-th-borders': theme('colors.pink[300]'),
            '--tw-prose-td-borders': theme('colors.pink[200]'),
            '--tw-prose-invert-body': theme('colors.pink[200]'),
            '--tw-prose-invert-headings': theme('colors.white'),
            '--tw-prose-invert-lead': theme('colors.pink[300]'),
            '--tw-prose-invert-links': theme('colors.white'),
            '--tw-prose-invert-bold': theme('colors.white'),
            '--tw-prose-invert-counters': theme('colors.pink[400]'),
            '--tw-prose-invert-bullets': theme('colors.pink[600]'),
            '--tw-prose-invert-hr': theme('colors.pink[700]'),
            '--tw-prose-invert-quotes': theme('colors.pink[100]'),
            '--tw-prose-invert-quote-borders': theme('colors.pink[700]'),
            '--tw-prose-invert-captions': theme('colors.pink[400]'),
            '--tw-prose-invert-code': theme('colors.white'),
            '--tw-prose-invert-pre-code': theme('colors.pink[300]'),
            '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',
            '--tw-prose-invert-th-borders': theme('colors.pink[600]'),
            '--tw-prose-invert-td-borders': theme('colors.pink[700]'),
          },
        },
      }),
    },
  },
  plugins: [require('@tailwindcss/typography')],
}

Here is a Tailwind Play illustrating this: https://play.tailwindcss.com/4sKePQbNaI. Notice how I'm only including the prose class in that demo.

For the size stuff there unfortunately isn't really an easy way to do this, other than to customize the plugin's CSS.

We've definitely found that there is a threshold with this plugin where it just makes more sense to write your own custom typography styles.

Hope that helps, and thanks either way for this contribution 👍

[sambauers]

I realised after reading your comment I can use postcss to solve my problem (using a component seems like overkill). I just created a new class in my globals.css and applied the classes I wanted. This way I can also specify a standard way for the text to scale with breakpoints.

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  .my-prose{
    @apply
      prose
      prose-pink
      prose-sm
      sm:prose-base
      lg:prose-lg
      xl:prose-xl
      2xl:prose-2xl;
  }
}

I found I had to put the class in the base layer in order to allow local overrides when using the class in an element, e.g.:

  <main>
    /* Use gray text for this section only */
    <section className='my-prose prose-gray'>{markdown}</section>
  </main>

I suppose there is probably also a way to add this class within a tiny inline plugin in the Tailwind config, but I haven't tried that (I imagine @apply may not work in there but maybe it does).