A plugin that provides a set of prose classes you can use to add beautiful typographic defaults to any vanilla HTML you don't control

In a section of text, from Markdown (.Content in Hugo), I have a shortcode that is rendering a button. Prose is overriding the styling of the font styling and is underlining the text in the button. I can't seem to override this with TW classes on that element. If I disable prose on the higher-level container, then it works as expected, but then I lose all the nice styling for the rest of the content.

I am suggesting a 'no-prose' class that can disable the application of prose styles to that element and all children of it.

What version of @tailwindcss/typography are you using?

v0.5.0-alpha.2

What version of Node.js are you using?

v16.11.1

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction repository

https://github.com/alexmanzo/alex

Describe your issue

I just set up this repo, so it's basically a blank slate. I installed both [email protected] and @tailwindcss/[email protected]. Attempting to run the project results in the following error:

TypeError: Cannot read properties of undefined (reading '700')
    at Object.module.exports [as typography] (alex/node_modules/@tailwindcss/typography/src/styles.js:16:65)

That particular line in the styles.js is:

color: theme('colors.gray.700', colors.gray[700]),

I haven't yet tried overriding the config or anything, but wanted to flag it since these versions are still in alpha! I'd love to be able to use the newest versions as I work on this... happy to try fixes/workarounds!

Edit to add tailwind.config.cjs

const config = {
  content: ['./src/**/*.{html,js,svelte,ts}'],

  theme: {
    extend: {},
  },

  plugins: [require('@tailwindcss/typography')],
}

module.exports = config

Resolves #32.

This PR makes it possible to add markup within a prose block that ignores the styles that prose would normally add.

For example:

<div class="prose">
  <h1>My Title</h1>
  <p>Once upon a time there was a troll who lived inside my underpants and his name was Fred.</p>

  <div class="not-prose">
    <h1>This isn't styled like a prose h1</h1>
    <blockquote>This isn't styled like a prose blockquote</blockquote>
  </div>

  <p>One day Fred yelled up from my nether regions, "Hey, I need your help!"</p>
  <!-- ... -->
</div>

The not-prose class ignores all styles except styles set directly on the prose class, which are font-size, line-height, and color styles for the whole block.

We could reset these back to the same values they are in preflight, but it's easy enough to do with a couple extra classes:

  <div class="prose">
    <!-- ... -->
-   <div class="not-prose">
+   <div class="not-prose text-base text-black">
      <h1>This isn't styled like a prose h1</h1>
      <blockquote>This isn't styled like a prose blockquote</blockquote>
    </div>
    <!-- ... -->
  </div>

This means that by default, anything in a not-prose block will still be gray for example, and also match whatever the font size is set to for your prose block (which is different depending on whether you use just prose, or prose prose-xl, etc.)

I think this is the right trade-off overall since it's easy to "fix" with those two extra classes, and if we automatically did that for you but you did want to match the font-size of the rest of your prose stuff you wouldn't easily be able to do it.

This feature depends newer CSS features like :not({selector list}) and :where({selector list}) so it depends on the new target mode being set to modern (which is the default).

The whole plugin will be broken in older browsers because of this by default, so if you need to support Safari < 14 or Samsung Internet < 15, you should set target to legacy (which will remove this not-prose feature completely, since it's not possible without these features):

// tailwind.config.js
module.exports = {
  // ...
  plugins: [
    require('@tailwindcss/typography')({
      target: 'legacy',
    })
  ]
}

Will leave this open for a couple days in case anyone has important feedback but overall really impressed with how this works in practice 👍🏻

I've installed the package and referenced it in my tailwind.config.js but only the .max-w-prose-classes are in my final css. All other classes are missing?!

Used versions: | Package | Version | |---------|---------| | Laravel | 8.20.1 | | Laravel Mix | 5.0.9 | | @tailwindcss/typography | 0.3.1 | | @tailwindcss/postcss7-compat | 2.0.2 |

Here is my tailwind.config.js:

module.exports = {
    purge: [
        './resources/**/*.blade.php',
        './resources/**/*.js',
        './resources/**/*.vue',
    ],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography'),
    ],
}

And my webpack.mix.js:

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/assets/js')
    .postCss('resources/css/app.css', 'public/assets/css', [
        require('tailwindcss'),
    ])
    .version();

What am I doing wrong?

If you need more information please let me know.

I have applied prose prose-blue on my content. However it doesn't render the links as blue.

See here my blog.

https://nextjs-blog-git-feature-blog-posts.marcofranssen.vercel.app/posts/202006-building-a-elasticsearch-cluster-using-docker-compose-and-traefik

This is my code rendering the markdown

export default function PostBody({ content }) {
  return (
    <div
      className="max-w-4xl mx-auto prose prose-blue"
      dangerouslySetInnerHTML={{ __html: content }}
    />
  );
}

In the html it shows as.

<div class="">
  <p>My blog content including <a href="https://github.com">some link</a>.</p>
</div>

My tailwind.config.js looks as

module.exports = {
  .......
  plugins: [require("@tailwindcss/typography")],
};

Is this a bug? Did I miss something?

"tailwindcss": "^2.0.1",
"@tailwindcss/typography": "^0.3.1"

Subj, no errors on build stage, but in css I have empty .prose {} statement.

The default style of inline code has backquotes which I do not want. I tried to override it with the following configuration but it does not work.

// tailwind.config.js
module.exports = {
  theme: {
    typography: {
      default: {
        css: {
          code: {
            '&::before': {
              content: '""',
            },
            '&::after': {
              content: '""',
            },
          }
          // ...
        },
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

For some reason, if I do any sort of customization of this plugin's styles in my tailwind.config.js, it breaks everything.

Without any overrides in my Tailwind config:

After adding the following to my Tailwind config:

      typography: {
        DEFAULT: {
          css: {
            color: '#222'
          }
        }
      }

Any ideas how to resolve this? Thanks.

Hi,

I'm hoping this isn't a duplicate of https://github.com/tailwindlabs/tailwindcss-typography/issues/26

I've been trying to override the default colors of tailwind typography for hours now and I'm slowly going insane. I tried !important and targeting every class of prose on every screen size and everything and it's still showing the default colors...

I decided to eventually try using dark mode, which has a lot of very unhelpful tutorials and the actual docs which are awesome: https://tailwindcss.com/docs/dark-mode although the problem is this still doesn't work. Adding the dark class to html works for the background color, but the individual prose classes and similar (and there are dozens if not hundreds of them) still have their default colors, and I can only change them by using !important and listing every single one of them, and can only do it programmatically by using javascript...

I'm about ready to give up on this and just remove the typography plugin entirely and set the background-color to black and the color to white... but there's got to be an easier way, right? Is there any way to use the typography plugin without using the colors, or any way to override the default colors? I've seen this article: https://stefanzweifel.io/posts/2020/07/20/add-dark-mode-support-to-at-tailwindcsstypography/ which has this code in the taildwind config:

module.exports = {
    theme: {
        typography: (theme) => ({
            default: {
                css: {
                    color: theme('colors.gray.900'),
                    a: {
                        color: theme('colors.blue.700'),
                        '&:hover': {
                            color: theme('colors.blue.700'),
                        },
                    },
                },
            },

            dark: {
                css: {
                    color: theme('colors.gray.300'),
                    a: {
                        color: theme('colors.green.500'),
                        '&:hover': {
                            color: theme('colors.green.500'),
                        },
                    },

                    h1: {
                        color: theme('colors.gray.300'),
                    },
                    h2: {
                        color: theme('colors.gray.300'),
                    },
                    h3: {
                        color: theme('colors.gray.300'),
                    },
                    h4: {
                        color: theme('colors.gray.300'),
                    },
                    h5: {
                        color: theme('colors.gray.300'),
                    },
                    h6: {
                        color: theme('colors.gray.300'),
                    },

                    strong: {
                        color: theme('colors.gray.300'),
                    },

                    code: {
                        color: theme('colors.gray.300'),
                    },

                    figcaption: {
                        color: theme('colors.gray.500'),
                    },
                },
            },
        }),
    },
};

however it still doesn't work and messes all of my css up (with no errors anywhere). Removing that code again and adding darkMode: 'class', it works as I said before, except the colors are still messed up.

Full (relevant) files

(I'm using jekyll and tailwind, using someone else's (awesome) boilerplate)

tailwind.config.js

module.exports = {
    purge: [
        '{,!(node_modules|_site)/**/}*.{html,md}',
    ],
    theme: {},
    plugins: [
        require('@tailwindcss/typography'),
    ],
    darkMode: 'class',
}

default.html

<!DOCTYPE html>
<html class="dark" lang="{{ site.lang | default: "en-US" }}">

<head>
    {% include head.html %}
</head>

<body class="antialiased bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100 min-h-screen">
<!-- <body class="antialiased min-h-screen"> -->
    {{ content }}
    {% include scripts.html %}
</body>

</html>

post.html

---
layout: default
---

<header>
    {% if page.backLink or page.backLink == nil %}
    <a href="/" class="flex items-center m-5 text-xl hover:underline">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd"
                d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
                clip-rule="evenodd"></path>
        </svg>
        <span>Back</span>
    </a>
    {% endif %}
</header>

<article class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto dark:prose-dark">
    {{ content }}
</article>

Thanks in advance for any help on this...

I have tried a few approaches to make this work. These are detailed below. But whatever I have tried, it seems to fail with some pre-set inheritance overriding the config.

here is a screenshot of the inheritance overriding:

Here is what I have tried:

'ol > li': {
  '&::before': {
    color: theme('colors.pink.500'),
  },
},

ol: {
  li: {
    '&::before': {
      color: theme('colors.pink.500'),
    },
  },
},

<ul> lists seem to work ONLY if you use the second approach. Again wrapping 'ul > li' fails with inheritance.

Hello.

I use 11ty with TailwindCSS and I faced a problem. Look, I set class prose on the article in my post.njk template:

{% block content %}
    <article class="prose">
        <h1>{{ title }}</h1>
        {{ content | safe }}
    </article>
    ...
{% endblock %}

Content in markdown files may contain tier 1-4 headings. After build, the resulting css includes .prose h1 and .prose h3 but doesn't contain .prose h2 and .prose h4. Although this page has only level 2 headings.

I tried to add 'prose' to whitelist but it didn't work:

purge: {
    enabled: process.env.ELEVENTY_ENV === 'production',
    content: [
      './src/**/*.njk',
      './src/**/*.md',
      './src/**/*.js',
      './src/**/*.svg',
    ],
    options: {
      whitelist: ['mode-dark', 'prose'],
    },
  },
plugins: [
  require('@tailwindcss/typography'),

In development mode everything works.

Do anybody knows where might be a problem?

What version of @tailwindcss/typography are you using?

v0.5.0

What version of Node.js are you using?

v12.0.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction repository

https://play.tailwindcss.com/vkmcuQsUPz

Describe your issue

I may be misunderstanding how prose-invert works, but in the Tailwind Play example where it's used in combination with a custom color theme (in this case prose-white) the inversed colours are not being applied.

prose-white prose-invert I would expect --tw-prose-body to be set to theme.colors.black.

What version of @tailwindcss/typography are you using?

v0.4.1

What version of Node.js are you using?

v16.3.0

What browser are you using?

Chrome

What operating system are you using?

Windows

Reproduction repository

https://play.tailwindcss.com/YZS1I4iDer

Describe your issue

kbd tag style should look like keyboard.

Try out the following & see it's styled differently.

<article class="prose mx-6 mt-10">
  <h1>`kbd` tag below is styled incorrectly</h1>
  <kbd>Enter</kbd>
</article>

Or check out the Tailwind Play here -> https://play.tailwindcss.com/YZS1I4iDer

By default it should look like on here -> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd or https://meta.superuser.com/questions/4788/css-for-the-new-kbd-style

I know I can do it in my project but a default style wouldn't hurt :)

I not only use dl, dt and dd tags but I nest them inside of each other. E.g. dd has another dl inside of it.

I have to add tailwind classes manually to make dt semi bold and add left padding to dd.

Also I am terrible designer so I would like some great designer to take a look once over.

Hi,

I noticed that margin is not adjusted for <picture> as it is for <img> when used inside the <figure> tag.

It just needs adjusting it around here to figure > picture > * and plus the responsive options.

Thank you ✌️