@tailwindcss/typography not loading on Tailwind v4.0.0

[dukuo]

on devDependencies:

"@tailwindcss/typography": "^0.5.16",
tailwindcss": "4.0.0",

on globals.css

@import 'tailwindcss';
@plugin '@tailwindcss/typography';

Result: .prose div with headings or other typography have absolutely no styles whatsoever. It doesn't even compile any plugin-related styles (I'm not sure if that's normal, but still).

[wongjn]

Consider providing git repo that reproduces the unexpected behavior. You could also consider updating Tailwind to see if that helps.

[Seefer]

It doesn't help that the Tailwindcss 4 docs do not have explicit links in the sidebar menu for the official plugins like typography, forms, container-queries etc. They only show in the sidebar docs links if you change doc version to 3.4.17.

Are these plugins officially supported in Tailwindcss version 4 and it's just a matter of using the correct method to reference plugins using the @plugin directive alongside the @import "tailwindcss" directive in the relevant css file?

[dukuo]

That’s exactly what I’m doing: I have a wrapper doc with .prose, but headings and other typography inside of it is not styled. *Dilip Ramírez* Data Architect @ Falabella Corp Tech LinkedIn <https://linkedin.com/in/dilipramirez> +56 9 90724198

…

On Sat, 8 Mar 2025 at 16:48 Justin Wong ***@***.***> wrote: The typography plugin doesn't introduce typography styling globally. You'd need to wrap the elements that you'd want styled using the prose class name: <h2>Unstyled</h2> <div class="prose"> <h2>I would be styled</h2></div> — Reply to this email directly, view it on GitHub <#17073 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACU3HEZLC57NIMWT7IXDG32TNCQXAVCNFSM6AAAAABYTLS3A6VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTENBTGY2TGMQ> . You are receiving this because you authored the thread.Message ID: ***@***.*** com>

[wongjn]

Ah, I see, thank you. Please consider providing git repo that reproduces the unexpected behavior. You could also consider updating Tailwind to see if that helps.

[Looooooka]

Is there any fix for this?
Using vite. Updated to v4 and everything is screwed. Typography is simply not being loaded.
tailwinds is being loaded using the new
import tailwindcss from '@tailwindcss/vite' import and loaded as a plugin:

plugins: [
tailwindcss(),
vue({
script: {
defineModel: true
}
}),

I tried loading the typography as plugins inside tailwind.config.cjs:

const defaultTheme = require('tailwindcss/defaultTheme')
const { iconsPlugin, getIconCollections } = require('@egoist/tailwindcss-icons')

module.exports = {
purge: [],
content: [
'./index.html',
'./src/.css',
'./src/**/.{vue,ts}'
],
,
theme: {
fontFamily: {
customfontname: [
"Segoe UI",
"Helvetica Neue",
"Arial",
"sans-serif",
...defaultTheme.fontFamily.customfontname,
],
},
extend: {},
},
darkMode: false, // or 'media' or 'class'
plugins: [
require('@tailwindcss/aspect-ratio'),
require('@tailwindcss/typography'),
require('@tailwindcss/forms'),
iconsPlugin({
// Collections: https://icones.js.org/
collections: getIconCollections(['mdi']),
})
],
}

and using the @plugin inside my style.css it does absolutely nothing(the @layer base code for adding back the cursor works fine):

@import "tailwindcss";

@plugin "@tailwindcss/typography";
@layer base
{
button,
[role='button'] {
cursor: pointer;
}
button:disabled,
[role='button']:disabled {
cursor: default;
}

}

how do i get back access to the text-blue-500 and other typography classes?

[Looooooka]

Ok so the only way to get the classes back so far has been to add them to my style.css using the apply function.

`@import "tailwindcss";
@plugin "@tailwindcss/typography";
@layer base
{
button,
[role='button'] {
cursor: pointer;
}
button:disabled,
[role='button']:disabled {
cursor: default;
}

}

.bg-blue-100 { @apply bg-blue-100; }
.bg-blue-200 { @apply bg-blue-200; }
.bg-blue-600 { @apply bg-blue-600; }
.bg-blue-700 { @apply bg-blue-700; }

.bg-red-100 { @apply bg-red-100; }
.bg-red-200 { @apply bg-red-200; }
.bg-red-600 { @apply bg-red-600; }
.bg-red-700 { @apply bg-red-700; }

.text-teal-500 { @apply text-teal-500; }

.\hs-strong-password-active:text-teal-500 { @apply text-teal-500}

.text-blue-400 { @apply text-blue-400; }
.text-blue-500 { @apply text-blue-500; }
.text-blue-600 { @apply text-blue-600; }
.text-blue-700 { @apply text-blue-700; }

.text-red-400 { @apply text-red-400; }
.text-red-500 { @apply text-red-500; }
.text-red-600 { @apply text-red-600; }
.text-red-700 { @apply text-red-700; }

.border-blue-400 { @apply border-blue-400; }
.border-blue-500 { @apply border-blue-500; }
.border-blue-600 { @apply border-blue-600; }
.border-blue-700 { @apply border-blue-700; }

.hs-strong-password-accepted {
@apply bg-green-700;
}

.hs-strong-password {
@apply bg-red-700;
}

`
is there something one can turn on to just get the basic typography to load fully or even better...for the templates used inside vue/vite templates to be magically detected and added?