tailwindcss-typography: Prose classes missing in rendered CSS (via Laravel Mix)

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.

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 2
Comments: 16 (2 by maintainers)

Most upvoted comments

Yes, I’ve added

module.exports = {
    // ...
    theme: {
        extend: {
            typography: {
                DEFAULT: {
                    css: {
                        color: '#333',
                    },
                },
            },
            // ...
        },
    },
    // ...
};

as you suggested but this makes no difference.

marcreichel on Dec 30, 2020

@marcreichel I’ve got a bit more for you. My Tailwind config had the following:

  theme: {
    typography: {
      default: {
        css: {
          color: "#333",
        },
      },
    },
    extend: {},
  },

It now works with the following config:

theme: {
    extend: {
      typography: {
          DEFAULT: {
            css: {
              color: "#333",
            },
          },
        },
    },
},

mattradford on Dec 30, 2020

I was having the same problem! I believe I got it working with the following:

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

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

I am using a default tailwind config based on the install in larevel guide.

mt-dev44 on Jan 1, 2021

FWIW @marcreichel, I stripped my tailwind.config.js back to the following:

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

Then all prose classes were generated as expected.

mattradford on Dec 30, 2020