PurgeCSS erases some heading rules about tailwindcss-typography HOT 10 CLOSED

this done the work in purgecssOptions:

whitelistPatternsChildren: [/prose$/],

from tailwindcss-typography.

Hey! Thank you for your bug report!
Much appreciated! 🙏

By default purge will purge everything that it can't find. Essentially if you build the markdown files, and <h2> is not present then it will remove .prose h2. If your markdown content is coming from some form database/API, then you would have to safelist all the .prose related styles (because you don't know what you will get from your DB/API).

You can use the /prose$/ regex that @lowv-developer provided.

Also see: https://tailwindcss.com/docs/optimizing-for-production#purge-css-options

from tailwindcss-typography.

I'm also having issues with PurgeCSS. I am only using prose and prose-xl classes in my html, but purgecss is not removing the other prose classes (sm lg 2xl) from the production build.

So my 20kb css file ends up over 120kb because of this issue.

from tailwindcss-typography.

I've updated my previous comment to include the dependencies. Using tailwindcss 1.5.2 still strips out classes such as .lg\:prose-lg h2 which I need to include in the whitelist.

from tailwindcss-typography.

Thanks, @lowv-developer! It did work! 👍

from tailwindcss-typography.

I have similar problem especially for responsive classes such as lg:prose-lg. I don't have .lg\:prose-lg h2, .lg\:prose-lg pre, etc.

I ended up having this config for tailwind.config.js:

module.exports = {
  purge: {
    mode: 'all',
    content: [
      'layouts/**/*.html'
    ],
    options: {
      whitelist: ['h2', 'pre', 'code']
    }
  },
  variants: {},
  plugins: [
    require('@tailwindcss/typography')
  ]
}

and my main.css:

/* purgecss start ignore */
@tailwind base;
@tailwind components;
/* purgecss end ignore */

@tailwind utilities;

Dependencies:

+ [email protected]
+ [email protected]
+ [email protected]
+ [email protected]
+ [email protected]
+ @tailwindcss/[email protected]

So I am wondering what is the best way to use PurgeCSS with tailwindcss-typography.

from tailwindcss-typography.

Typography plugin needs tailwindcss v1.50
#43

from tailwindcss-typography.

yeah you right, I have some issues myself with 1.5.2 and class .prose table tr
maybe the solution would be in this direction tailwindlabs/discuss#250

can we import prose somehow in the scss file so then we can do purgecss start ignore?

from tailwindcss-typography.

I'm also having issues with PurgeCSS. I am only using prose and prose-xl classes in my html, but purgecss is not removing the other prose classes (sm lg 2xl) from the production build.

So my 20kb css file ends up over 120kb because of this issue.

@oxalorg You may need to manually disable unused modifiers. After I disabled all modifiers except default according to Disabling size modifiers, the file dropped from 86KB to 33KB. But this is not small enough. Chrome says that there are still 78% unused css. I suspect purgecss did not clean up @tailwindcss/typography.

from tailwindcss-typography.

Ran into the same problem with Eleventy, my solution was to run 11ty first and then run Tailwind:

purge settings in tailwind.config.js:

purge: {
  mode: 'all',
  content: ['_site/**/*.html'],
},

build command in package.json:

"build": "eleventy && NODE_ENV=production postcss src/css/tailwind.css --o _site/css/style.css"

The only downside (that I know so far) is that you can't inline css.

from tailwindcss-typography.