[Blog post] Introducing Tailwind CSS Typography

[adamwathan]

Today we released the new Tailwind CSS Typography plugin! 🥳

Read "Introducing Tailwind CSS Typography" on the blog

Install it, play with it, break it, and complain about it here 😅

[RomainMazB]

I'm the first to complain? Shame on me :)

Is there a way prevent the styles to be applied on the code blocks? I'm using highlight.js with a custom theme and I would like to keep it.

Thanks!

[RomainMazB]

Doesn't matter anymore, I've found my way reading the sources:

    theme: {
        typography: {
            default: {
                css: {
                    pre: null,
                    code: null,
                    'code::before': null,
                    'code::after': null,
                    'pre code': null,
                    'pre code::before': null,
                    'pre code::after': null
                },
            },
        },
    }

[francoismajor]

I give up. For some reason responsive variants are just not building on my site. No idea why, I've read over and over the documentation, tried out a whole bunch of stuff in my config, nothing works. (responsive works fine for everything else, including my own components or utilities). But prose lg:prose-xl doesn't :(

I've tried any number of combinations of classes, tried without any typography overrides, without specified modifiers, etc.

prose prose-xl works just fine, I get the correct XL size. But adding responsive variant just doesn't. (and I can see it's not generated in my .css)

Here's my tailwind.config.js :

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
  purge: ['./site/**/*.php'],
  theme: {
    typography: (theme) => ({
      default: {
        css: {
          color: 'inherit',
          'h1, h2, h3, h4, h5, h6': {
            color: 'inherit',
          },
          strong: {
            color: 'inherit',
            fontWeight: 'bold',
          },
          a: {
            color: theme('colors.blue.500'),
            '&:hover': {
              color: theme('colors.blue.600'),
            },
          },
        },
      },
    }),
  },
  plugins: [
    require('@tailwindcss/typography')({
      modifiers: ['xl'],
    }),
  ],
  variants: {},
};

Any help would be much appreciated! Awesome plugin by the way, the styles are amazingly well made 👍

[adamwathan]

Hey! Shouldn't require much, here's a link to a Tailwind Play that has it set up and working:

https://play.tailwindcss.com/Uq1u6xeomG?size=788x720&file=config

Don't need that modifiers config for it to work.

What version of Tailwind are you using and what version of the plugin?

[francoismajor]

Oh man! 1.4.6, doh! 🤦 (And it even says 1.5+ required when running npm install, my fault for not reading!) Everything works now, just needed to update.

Thanks for the quick response and work, seriously this styling is perfect.

Cheers

[nvayalil]

How to adjust spacing?
For example <h2 class="mt-0 mb-0"> doesn't make the margins to zero.

[zergro]

Hey, big fan of Tailwindcss and the work you guys in the team does to make it better.

I'm not sure if this is supported yet, but I am mapping through an array of articles. The code in my react app is: {article.body}. This contains html code and text.

wrapping it like this:

{article.body}

With this the output does not change. I still see html with the brackets <>.

Is there a work around for this?

[zergro]

I'm updating my question to this:

In the documentation showing markdown should be wrapped in brackets: {{ markdown }}. Before in my code I'm mapping through an array to get data and outputting it like {article.body}. This content I would like to feel the magic of this typography plugin. In my logic then I would just do:

{{ {article.body} }}

But this does not work. Is there a workaround?

[zergro]

I found a solution. I'm using ReactMarkdown to add my content after mapping through an array of article.

[VicGUTT]

Hey, if your markdown has already been translated to HTML, sounds like what you needed was dangerouslySetInnerHTML as in <div dangerouslySetInnerHTML={{ __html: article.body }} />;

[zergro]

Thanks for your reply. Your solution would work, but I found out that I wanted to not use HTML in my project.