Plugin not compatible with Tailwind 2

[Defite]

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

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

[0xhjohnson]

Can confirm. Works with default config but customizing styles (adding typography key to theme section of config) results in empty prose.

[jhull]

Same. Also, no dark mode support. 🥲

[will-stone]

Going back to 0.2.x seems to fix the issue.

[Defite]

Going back to 0.2.x seems to fix the issue.

yep, works for me, but without dark theme support.

[mikkeltschentscher]

Going back to 0.2.x seems to fix the issue.

yep, works for me, but without dark theme support.

Same here. 0.2.0 works with config modifiers.

[silvenon]

Yep, customizing the CSS doesn't extend the default ones anymore, but replaces them entirely, so the styles I wrote become the only styles. Considering that the latest updates haven't been pushed to GitHub, I assume that this is a known problem and that the team is working on it, so we just have to be patient.

[frankspin89]

You must change the "default" keyword to "DEFAULT", see the upgrade nodes.

https://tailwindcss.com/docs/upgrading-to-v2#update-default-theme-keys-to-default

  "devDependencies": {
    "@tailwindcss/typography": "^0.3.1",
    "autoprefixer": "^10.0.2",
    "postcss": "^8.1.7",
    "postcss-cli": "^8.3.0",
    "postcss-import": "^13.0.0",
    "postcss-nested": "^4.2.3",
    "tailwindcss": "^2.0.1",
  }

const path = require("path");


module.exports = {
  purge: {
    enabled: process.env.HUGO_ENVIRONMENT === "production",
    content: [path.resolve(__dirname) + "/layouts/**/*.html"],
    options: {
      whitelist: [],
    },
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      typography: (theme) => ({
        DEFAULT: {
          css: {
            color: theme('colors.gray.800'),
            maxWidth: '80ch',
            h1: {
              color: theme('colors.gray.800'),
            },
            h2: {
              color: theme('colors.gray.800'),
            },
            h3: {
              color: theme('colors.gray.800'),
            },
            a: {
              color: theme('colors.indigo.500'),
              fontWeight: '600',
              textDecoration: 'none',
            },
          },
        },
      }),
    },
  },
  variants: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

[adamwathan]

Sorry haven't had a chance to write release notes yet.

The big difference is you will want to add your customizations under extend now.

The typography plugin now relies on Tailwind to do the merging for you instead of doing it itself. I'll get release notes written and docs updated soon.

[Defite]

Sorry haven't had a chance to write release notes yet.

The big difference is you will want to add your customizations under extend now.

The typography plugin now relies on Tailwind to do the merging for you instead of doing it itself. I'll get release notes written and docs updated soon.

Ok, and what about dark theme and typography plugin? Still doesn't work.

[ecklf]

Sorry haven't had a chance to write release notes yet.
The big difference is you will want to add your customizations under extend now.
The typography plugin now relies on Tailwind to do the merging for you instead of doing it itself. I'll get release notes written and docs updated soon.

Ok, and what about dark theme and typography plugin? Still doesn't work.

Light and dark mode works fine for me after moving my customization into extend

  "devDependencies": {
    "@tailwindcss/aspect-ratio": "^0.2.0",
    "@tailwindcss/forms": "^0.2.1",
    "@tailwindcss/typography": "^0.3.1",
    "tailwindcss": "^2.0.1-compat",
  }

[Defite]

Sorry haven't had a chance to write release notes yet.
The big difference is you will want to add your customizations under extend now.
The typography plugin now relies on Tailwind to do the merging for you instead of doing it itself. I'll get release notes written and docs updated soon.

Ok, and what about dark theme and typography plugin? Still doesn't work.

Light and dark mode works fine for me after moving my customization into extend

  "devDependencies": {
    "@tailwindcss/aspect-ratio": "^0.2.0",
    "@tailwindcss/forms": "^0.2.1",
    "@tailwindcss/typography": "^0.3.1",
    "tailwindcss": "^2.0.1-compat",
  }

Pls, show me your config, I don't understand.

This is mine:

// tailwind.config.js
module.exports = {
  darkMode: "media",
  purge: {
    mode: "all",
    content: ["./_site/**/*.html"],
  },
  theme: {
    extend: {
      colors: {
        dark: "#24283b",
      },

      typography: (theme) => ({
        DEFAULT: {
          css: {
            color: theme("colors.gray.900"),
            a: {
              color: theme("colors.blue.700"),
              "&:hover": {
                color: theme("colors.blue.700"),
                textDecoration: "none",
              },
            },
            "h2 a": {
              color: theme("colors.gray.900"),
              textDecoration: "none",
            },
            ".tag a": {
              textDecoration: "none",
            },
          },
        },

        dark: {
          css: {
            color: "#7982a9",
            a: {
              color: "#9ECE6A",
              "&:hover": {
                color: "#9ECE6A",
              },
            },

            "h2 a": {
              color: "#A9B1D6",
            },

            h1: {
              color: "#A9B1D6",
            },
            h2: {
              color: "#A9B1D6",
            },
            h3: {
              color: "#A9B1D6",
            },
            h4: {
              color: "#A9B1D6",
            },
            h5: {
              color: "#A9B1D6",
            },
            h6: {
              color: "#A9B1D6",
            },

            strong: {
              color: "#A9B1D6",
            },

            code: {
              color: "#A9B1D6",
            },

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

            "::selection": {
              backgroundColor: "#6f7bb635",
            },
          },
        },
      }),
    },
  },
  plugins: [require("@tailwindcss/typography")],
};

[ecklf]

Try using default instead of DEFAULT. This is the only difference I spot compared to mine.. See below

[Defite]

Ok, I've figured it out. In order to darkMode work correctly with typography plugin, we must add

variants: {
    typography: ["dark"],
  },

to tailwind.config.js.

Full config will be:

// tailwind.config.js
module.exports = {
  darkMode: "media",
  purge: {
    mode: "all",
    content: ["./_site/**/*.html"],
  },
  theme: {
    extend: {
      colors: {
        dark: "#24283b",
      },

      typography: (theme) => ({
        DEFAULT: {
          css: {
            color: theme("colors.gray.900"),
            a: {
              color: theme("colors.blue.700"),
              "&:hover": {
                color: theme("colors.blue.700"),
                textDecoration: "none",
              },
            },
            "h2 a": {
              color: theme("colors.gray.900"),
              textDecoration: "none",
            },
            ".tag a": {
              textDecoration: "none",
            },
          },
        },

        dark: {
          css: {
            color: "#7982a9",
            a: {
              color: "#9ECE6A",
              "&:hover": {
                color: "#9ECE6A",
              },
            },

            "h2 a": {
              color: "#A9B1D6",
            },

            h1: {
              color: "#A9B1D6",
            },
            h2: {
              color: "#A9B1D6",
            },
            h3: {
              color: "#A9B1D6",
            },
            h4: {
              color: "#A9B1D6",
            },
            h5: {
              color: "#A9B1D6",
            },
            h6: {
              color: "#A9B1D6",
            },

            strong: {
              color: "#A9B1D6",
            },

            code: {
              color: "#A9B1D6",
            },

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

            "::selection": {
              backgroundColor: "#6f7bb635",
            },
          },
        },
      }),
    },
  },
  variants: {
    typography: ["dark"],
  },
  plugins: [require("@tailwindcss/typography")],
};