The responsive overrides are being ignored

[HynekS]

Greetings! I've almost managed to get a grasp on how to configure most of the prose features via tailwind.config.js, but with one exception: the responsive classes. There are being silently ignored.

Important info

I am using @tailwind/typography along with twin.macro on a nextjs project – it is possible that the issues come from these libs.

The classes are being applied as such (do I have to explicitly add sm:(prose-sm)? Haven't tried that yet) No, I've tried, that wasn't the issue):

<article tw="prose lg:(prose-lg px-0) dark:(prose-dark)">

The config

module.exports = {
  darkMode: "class",
  theme: {
    extend: {
      backgroundColor: {
        primary: "var(--bg-primary)",
        secondary: "var(--bg-secondary)",
        tertiary: "var(--color-primary)",
      },
      textColor: {
        primary: "var(--text-primary)",
        secondary: "var(--text-secondary)",
        tertiary: "var(--color-primary)",
      },
      typography: () => ({
        DEFAULT: {
        // The "sm" media queries are ignored (they are neither being applied, nor are showing anywhere in the css inspector) 😢
          sm: {
            css: {
              "figure, video": {
                marginLeft: "-1rem",
                marginRight: "-1rem",
              },
            },
          },
          css: {
            color: "var(--text-primary)",
            pre: {
              marginLeft: "-1rem",
              marginRight: "-1rem",
              borderRadius: 0,
            },

            code: {
              backgroundColor: "var(--bg-secondary)",
              borderRadius: 4,
            },
            "code::before": {
              content: '""',
            },
            "code::after": {
              content: '""',
            },
          },
        },
        dark: {
          css: {
            color: "var(--text-primary)",
            "h1, h2, h3, h4, h5, h6, a, code, strong, em, blockquote": {
              color: "var(--text-secondary)",
            },
          },
        },
      }),
    },
  },
  variants: {
    typography: ["responsive", "dark"],
  },
  plugins: [require("@tailwindcss/typography")],
}

If you'd have any idea what's wrong, I 'd be very gratefuls.

[simonswiss]

Hey!

Two things: First, the sm key should be at the same level as the DEFAULT key inside the typography config function, instead of being nested inside of it:

typography: () => ({
  DEFAULT: {
    css: { //... }
  },
  sm: {
    css: { //... }
  },
  dark: {
    css: { //... },
  },
}),

Second - you indeed need to apply the responsive variant sm:prose-sm for these styles you have in sm to be applied.

Here's a super minimal example of that in a Play:

https://play.tailwindcss.com/KvBvN5gJlO?file=config

Worth noting - we might revisit this API in favour of something simpler down the road. This was implemented at a very low level on purpose to allow as much control as possible without having to "design" APIs that fit the needs people have when customising the Typography plugin.

Hope it helps 👍

[HynekS]

Hey, Simon!

Thank you very much. Lifting the responsive rules one level up and adding the corresponding rule to a prose section have indeed helped ✌️.

And yes, I am perfectly aware that tailwind is evolving at warp speed 🚀! I really appreciate the effort and I also understand that breaking changes are very hard to avoid when moving that fast.

Cheers,
Hynek