Overrides kill all styling

[selfagency]

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.

[chasegiunta]

@selfagency did you place your rules in the extend key? Should be:

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

[elisealcala]

I have the same problem and I'm using the example from the docs.

Before:

After changing the tailwind config.

[chasegiunta]

@elisealcala Can you recreate on https://play.tailwindcss.com/ ?

[selfagency]

@chasegiunta It was indeed placed under the extend key

[elisealcala]

@chasegiunta I was able to recreate it with version v1.9.6

[chasegiunta]

@elisealcala Ah gotcha. Which version of the tailwind typography plugin are you using?

As of v0.3.0, @tailwindcss/typography is designed for Tailwind CSS v2.0+.

[selfagency]

Here's my reproduction, also in 1.9.6. I am using typography "^0.4.0".

[selfagency]

Side note — shouldn't using "tailwindcss": "npm:@tailwindcss/postcss7-compat" in my dependencies give me the latest version of Tailwind, not 1.9.6?

[chasegiunta]

@selfagency Probably. Not sure what's going on there.

Looks like not using Tailwind 2.0+ is the issue for both of y'all. If you cannot upgrade to Tailwind 2.0, I would drop down to tailwindcss-typography 2.0 and that should resolve your issues. Make sure you read the past configuration in the readme as the configuration structure changed from 2.0 to 3.0

[selfagency]

Ok, I figured out my issue. As of Nuxt 2.15, the documentation on the Nuxt Tailwind site is incorrect:

This:

yarn add --dev tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

should now be:

yarn add --dev tailwindcss @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

[chasegiunta]

@selfagency good to close the issue?