Customizing typography in V4 (beta)

[Avaray]

In V3 I configured typography in tailwind.config.mjs like this:

export default {
  theme: {
    extend: {
      typography: () => ({
          DEFAULT: {
            css: {},
          },
          md: {
            css: {
              h1: {
                fontSize: '2.25em',
                lineHeight: '1.2',
              },
            },
          },
        }
      }
    }
  }
}

As you can see in the example, I changed the default font size and line height of the <h1> element for the md breakpoint.

How to do the same in V4 (without using Legacy tailwind.config.js file)?

[dvzrd]

I have a separate typography.css file that I import into a base layer.

@import "./base/typography.css" layer(base);

In that file, I just have typography related styles, for example:

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  line-height: var(--leading-tight);
}

h1 {
  font-weight: var(--font-weight-extrabold);
  font-size: var(--text-12xl);
}

...

But the easiest way would be to have a base layer in your main css file like this:

@layer base {
  h1 {
    @media (min-width: theme(--breakpoint-md)) {
      font-size: 2.25em;
      line-height: 1.2;
    }
  }
}

[deebov]

It's still overridden by the default typography styles:

(bottom is what I wrote as a utility)

[KorigamiK]

Exactly what happens for me, did you every figure it out?

[tifandotme]

I've managed to migrate my prose configuration to a CSS file. Hope this helps

from

import colors from "tailwindcss/colors"
import defaultTheme from "tailwindcss/defaultTheme"

/** @type {import("tailwindcss").Config} */
const config = {
  theme: {
    extend: {
      typography: {
        // default prose styles: ./node_modules/@tailwindcss/typography/src/styles.js
        DEFAULT: {
          css: {
            "h2::before": {
              display: "block",
              marginBottom: "1rem",
              height: "3px",
              width: "1.5rem",
              background: "hsl(var(--foreground))",
              content: "''",
            },
            h2: {
              marginTop: "3rem",
              marginBottom: "1.5rem",
              fontFamily: [
                "var(--font-heading)",
                ...defaultTheme.fontFamily.serif,
              ].join(", "),
              letterSpacing: defaultTheme.letterSpacing.wide,
              fontWeight: defaultTheme.fontWeight.normal,
              fontSize: defaultTheme.fontSize["4xl"][0],
              ...defaultTheme.fontSize["4xl"][1],
            },
            h3: {
              marginTop: "1.3rem",
              fontWeight: defaultTheme.fontWeight.semibold,
              fontSize: defaultTheme.fontSize["xl"][0],
              ...defaultTheme.fontSize["xl"][1],
            },
            "blockquote p:last-of-type": {
              marginBottom: "0",
            },
            "blockquote p:first-of-type::before": null,
            "blockquote p:last-of-type::after": null,
            "blockquote p:first-of-type": {
              marginTop: "0",
            },
            "p + p, blockquote + p, ol, ul": {
              marginTop: "0",
            },
            blockquote: {
              marginTop: "0",
              fontWeight: defaultTheme.fontWeight.normal,
            },
            pre: null,
            "code::before": null,
            "code::after": null,
            code: {
              fontWeight: defaultTheme.fontWeight.extrabold,
              color: "hsl(var(--bold)) !important",
            },
            a: {
              fontWeight: defaultTheme.fontWeight.normal,
              textUnderlineOffset: "1px",
            },
            figure: {
              marginTop: "1.25rem",
              marginBottom: "1.25rem",
            },
            "--tw-prose-body": "hsl(var(--foreground))",
            "--tw-prose-headings": "hsl(var(--heading))",
            "--tw-prose-lead": colors.zinc[600],
            "--tw-prose-links": "hsl(var(--foreground))",
            "--tw-prose-bold": "hsl(var(--bold))",
            "--tw-prose-counters": colors.zinc[500],
            "--tw-prose-bullets": colors.zinc[300],
            "--tw-prose-hr": "hsl(var(--border))",
            "--tw-prose-quotes": "hsl(var(--foreground))",
            "--tw-prose-quote-borders": colors.zinc[300],
            "--tw-prose-captions": colors.zinc[500],
            "--tw-prose-code": "hsl(var(--foreground))",
            "--tw-prose-pre-code": colors.zinc[200],
            "--tw-prose-pre-bg": "var(--codeblock)",
            "--tw-prose-th-borders": colors.zinc[300],
            "--tw-prose-td-borders": colors.zinc[200],
            "--tw-prose-invert-body": "hsl(var(--foreground))",
            "--tw-prose-invert-headings": "hsl(var(--heading))",
            "--tw-prose-invert-lead": colors.zinc[400],
            "--tw-prose-invert-links": "hsl(var(--foreground))",
            "--tw-prose-invert-bold": "hsl(var(--bold))",
            "--tw-prose-invert-counters": colors.zinc[400],
            "--tw-prose-invert-bullets": colors.zinc[600],
            "--tw-prose-invert-hr": "hsl(var(--border))",
            "--tw-prose-invert-quotes": "hsl(var(--foreground))",
            "--tw-prose-invert-quote-borders": colors.zinc[700],
            "--tw-prose-invert-captions": colors.zinc[400],
            "--tw-prose-invert-code": "hsl(var(--foreground))",
            "--tw-prose-invert-pre-code": colors.zinc[300],
            "--tw-prose-invert-pre-bg": "var(--codeblock)",
            "--tw-prose-invert-th-borders": colors.zinc[600],
            "--tw-prose-invert-td-borders": colors.zinc[700],
          },
        },
      },
    },
  }
}

export default config

to

@import "tailwindcss"

...

@plugin "@tailwindcss/typography";

@utility prose {
  :where(:not(.not-prose, .not-prose *)) {
    --tw-prose-body: hsl(var(--foreground));
    --tw-prose-headings: hsl(var(--heading));
    --tw-prose-links: hsl(var(--foreground));
    --tw-prose-bold: hsl(var(--bold));
    --tw-prose-counters: hsl(var(--color-zinc-500));
    --tw-prose-bullets: hsl(var(--color-zinc-300));
    --tw-prose-hr: hsl(var(--border));
    --tw-prose-quotes: hsl(var(--foreground));
    --tw-prose-quote-borders: hsl(var(--color-zinc-300));
    --tw-prose-captions: hsl(var(--color-zinc-500));
    --tw-prose-code: hsl(var(--foreground));
    --tw-prose-pre-code: hsl(var(--color-zinc-200));
    --tw-prose-pre-bg: var(--codeblock);
    --tw-prose-th-borders: hsl(var(--color-zinc-300));
    --tw-prose-td-borders: hsl(var(--color-zinc-200));

    --tw-prose-invert-body: hsl(var(--foreground));
    --tw-prose-invert-headings: hsl(var(--heading));
    --tw-prose-invert-links: hsl(var(--foreground));
    --tw-prose-invert-bold: hsl(var(--bold));
    --tw-prose-invert-counters: hsl(var(--color-zinc-400));
    --tw-prose-invert-bullets: hsl(var(--color-zinc-600));
    --tw-prose-invert-hr: hsl(var(--border));
    --tw-prose-invert-quotes: hsl(var(--foreground));
    --tw-prose-invert-quote-borders: hsl(var(--color-zinc-700));
    --tw-prose-invert-captions: hsl(var(--color-zinc-400));
    --tw-prose-invert-code: hsl(var(--foreground));
    --tw-prose-invert-pre-code: hsl(var(--color-zinc-300));
    --tw-prose-invert-pre-bg: var(--codeblock);
    --tw-prose-invert-th-borders: hsl(var(--color-zinc-600));
    --tw-prose-invert-td-borders: hsl(var(--color-zinc-700));

    &:where(h2)::before {
      display: block;
      marginbottom: 1rem;
      height: 3px;
      width: 1.5rem;
      background: hsl(var(--foreground));
      content: "";
    }

    &:where(h2) {
      font-family: var(--font-heading);
      font-size: var(--text-4xl);
      line-height: var(--text-4xl-line-height);
      letter-spacing: var(--tracking-wide);
      font-weight: var(--font-weight-normal);
      margin-top: 3rem;
      margin-bottom: 1.5rem;
    }

    &:where(h3) {
      margin-top: 1.3rem;
      font-weight: var(--font-weight-semibold);
      font-size: var(--text-xl);
      line-height: var(--text-xl--line-height);
    }

    &:where(blockquote p:last-of-type) {
      margin-bottom: 0;
    }

    &:where(blockquote p:first-of-type) {
      margin-top: 0;
      &::before {
        content: none;
      }
    }

    &:where(blockquote p:last-of-type)::after {
      content: none;
    }

    &:where(p + p),
    &:where(blockquote + p),
    &:where(ol),
    &:where(ul) {
      margin-top: 0;
    }

    &:where(blockquote) {
      margin-top: 0;
      font-weight: var(--font-weight-normal);
    }

    &:where(pre) {
      content: none;
    }

    &:where(code) {
      font-weight: var(--font-weight-extrabold);
      color: hsl(var(--bold)) !important;
      &::before {
        content: none;
      }
      &::after {
        content: none;
      }
    }

    &:where(a) {
      font-weight: var(--font-weight-normal);
      text-underline-offset: 1px;
    }

    &:where(figure) {
      margin-top: 1.25rem;
      margin-bottom: 1.25rem;
    }
  }
}

[KorigamiK]

but isn't this a hack, both the styles still exist, I want to actually change the css of typography instead

[wongjn]

It's still overridden by the default typography styles:

(bottom is what I wrote as a utility)

https://play.tailwindcss.com/Xl5aHK0Qjf