vincent15000's avatar

How to customize tailwindcss typography with version 4 ?

Hello,

I'm using TailwindCSS v4.

In the CSS file, I have this.

@plugin '@tailwindcss/typography';

There isn't the tailwind.config.js file anymore, so how to customize some styles ?

I have tried this as suggested by claude.ia.

@plugin '@tailwindcss/typography' {
    .prose {
        color: theme(colors.black);

        a {
            color: theme(colors.green.500);
        }

        a:hover {
            color: theme(colors.green.700);
        }

        h1, h2, h3, h4, h5, h6 {
            color: theme(colors.black);
        }

        blockquote {
            border-left-color: theme(colors.green.500);
        }
    }
}

But is doesn't work, no change is visible on the screen.

Any idea ?

Thanks for your help.

V

0 likes
5 replies
LaryAI's avatar
LaryAI
AI
7 months ago
Level 58

Certainly! With TailwindCSS v4, configuration is now handled through the new tailwind.config.ts (TypeScript) or tailwind.config.js (if using JS), and customization via the CSS @plugin at-rule is not how you modify plugin options.

To customize @tailwindcss/typography in v4, you need to use the typography key in your config file, like this:

1. Open or create your tailwind.config.ts:

If you don't have one, generate it with:

npx tailwindcss init --ts

2. Customize the Typography by extending the theme:

import type { Config } from "tailwindcss";

export default {
  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            color: "#000",
            a: {
              color: "#22c55e", // green-500
              "&:hover": {
                color: "#15803d", // green-700
              },
            },
            "h1, h2, h3, h4, h5, h6": {
              color: "#000",
            },
            blockquote: {
              borderLeftColor: "#22c55e", // green-500
            },
          },
        },
      },
    },
  },
  plugins: [require('@tailwindcss/typography')],
} satisfies Config;

3. Remove the @plugin directive from your CSS.

You only need to include the @tailwind directives in your CSS:

@tailwind base;
@tailwind components;
@tailwind utilities;

Summary:

  • Do not use the CSS @plugin at-rule for plugin configuration.
  • Use the typography key in your Tailwind config to customize prose styles.
  • Use the hex codes or CSS variables for colors since theme helpers aren't available in the CSS file.

Documentation:
See the official plugin docs for more customization details:
https://tailwindcss.com/docs/typography-plugin#customizing-the-plugin

Let me know if you need help with a specific part of your config!

vincent15000's avatar
vincent15000
OP
7 months ago
Best Answer
Level 63

Lary helped, but not exactly like it has to be.

@plugin '@tailwindcss/typography';
@config '../../tailwind.config.js';
Merklin's avatar

No need for that import of the config file.

Also, before @layer components, you can use @layer properties to define some variables like this:

	*,
	::before,
	::after,
	::backdrop {
		--tw-translate-x: 0;
        --tw-translate-y: 0;
        --tw-translate-z: 0;
        --tw-scale-x: 1;
        --tw-scale-y: 1;
        --tw-scale-z: 1;
}
1 like
vincent15000's avatar

And how do you add styles this way only available for the typography plugin ?

Merklin's avatar

As per the documentation:

If you want to edit the prose, for example, you can add .prose {} inside @layer components. If you want a custom colour, you can easily add:

.prose-stone {
    @apply color-primary; //supposed you have defined --color-primary variable
}

As a final destination, if the least one does not work, you can force it via @apply !color-primary;

Please or to participate in this conversation.