How do I configure tailwind typography in v4

[KorigamiK]

What's the standard way to configure this plugin now that it is built in?
This is my config that I want to use.

      typography: {
        DEFAULT: {
          css: {
            maxWidth: false,
            h1: { marginTop: false },
            h2: { marginTop: false },
          },
        },
        quoteless: {
          css: {
            "blockquote p:first-of-type::before": { content: "none" },
            "blockquote p:first-of-type::after": { content: "none" },
            "pre code::before": { content: "none" },
            "pre code::after": { content: "none" },
          },
        },
      },

[wongjn]

There's no real consensus yet. You could consider using a mix of @utility and regular CSS to get what you want.

[KorigamiK]

but isn't that a hack? both the styles would exist, I need a way to change he defaults

[wongjn]

There doesn't seem to be any API to do that.

[KorigamiK]

hmm, perhaps generating the css once and including it is the way to go?

[David-Else]

What's the standard way to configure this plugin now that it is built in? This is my config that I want to use.

Please could you link me to the docs that explain how https://github.com/tailwindlabs/tailwindcss-typography is now built in? I can't find any documentation, I had it working in v3 with:

const typography = require("@tailwindcss/typography");

module.exports = {
  plugins: [typography],
};

  "devDependencies": {
    "@tailwindcss/typography": "^0.5.14",
    "tailwindcss": "^3.4.10"
  }

[kerryj89]

@utility prose {
  max-width: none;

  blockquote p {
    &:first-of-type {
      &::before {
        content: none;
      }
    }
  }

  /* I guess you are using the below styles to kill your non-prose h1/h2 styles that are leaking into the prose scope? */

  /* 🤔 There are no backticks for <pre><code>...</code></pre>, just <code>...</code> */
  pre {
    code {
      &::before,
      &::after {
        content: none;
      }
    }
  }

  /* 🤔 There are no top margins by default on heading elements */
  h1 { margin-top: 0; },
  h2 { margin-top: 0; }
}

As for me, I wanted to kill the auto backtick display on inline code <code>...</code> and you can do that with the below:

@utility prose {
  code {
    &::before,
    &::after {
      content: none;
    }
  }
}

[paul-vd]

  @import "tailwindcss";
+ @plugin "@tailwindcss/typography";

https://github.com/tailwindlabs/tailwindcss-typography?tab=readme-ov-file#installation