[V4] Prose

[NicolasCassunde]

How can i use PROSE typography in tailwind v4?

[apz-gh]

I've been importing the stylesheet shared by Adam Wathan in this tweet:

Gist: adamwathan/41dcab602afd07ac8ba243eb186c324a

[cbmongithub]

Customizing Tailwindcss V4 Alpha

MDX, Prose, and Highlight Elements

Via tailwindcss/cli@next

Use the empty component layer for component related styles. Create a styles folder, along with nested base.css, theme.css, components.css, utilities.css, and finally, index.css files. Copy styles from tailwind repo. Init the cli if you haven't already.

Put your typography styles in components.css or base.css at the bottom, and the following in index.css :

@layer theme, base, components, utilities;

@import "./theme.css" layer(theme);
@import "./base.css" layer(base);
@import "./components.css" layer(components);
@import "./utilities.css" layer(utilities);

Configure @tailwindcss/cli@next with a script or run the init function in the cli. I personally use pnpm scripts to build, watch, optimize and minify. I use nextjs and output to the default globals.css file. I also use concurrently and run the tw scripts in production mode, per source of tailwindcss/postcss plugin

    "tw:build": "NODE_ENV=production && tailwindcss -i ./styles/index.css -o app/globals.css --optimize -m",
    "tw:watch": "NODE_ENV=production && tailwindcss -i ./styles/index.css -o app/globals.css --optimize -m -w",
    "develop": "concurrently --names \"CSS,DEV\" -c \"bgBlue.bold,bgMagenta.bold\" -k \"pnpm tw:watch\" \"pnpm dev\""

Finally, run the script:

pnpm/npm run develop

Via tailwindcss@next (Customized defaults, fastest way imo)

pnpm/npm install tailwindcss@next

Follow the v4 tutorial in the tailwind blog and configure it up until the point where you get to globals.css file or whatever index file it is. You want to do what we did with the index file above, in the globals.css file (nextjs), aside from changing source. It's been a few months, but it should go something like this:

@layer theme, base, components, utilities;

@import "tailwindcss/theme" layer(theme);
@import "tailwindcss/preflight" layer(base);
@import "tailwindcss/components" layer(components);
@import "tailwindcss/utilities" layer(utilities); 

@layer components {
... 
...
}

Or whichever layer you want to append styles to. Just remember to pay attention to cascade order and don't forget to configure your postcss config file. Make sure plugin is set to "@tailwindcss/postcss": {} or "@tailwindcss/postcss": {base: 'your_base_file', optimize: {minify:true}}

I believe that's it. Unless things have changed. Just refer to source and your answers are there, or you can reply and I will answer as soon as I am able. I am currently experimenting with all sorts of configs so if anyone has something better, please share.

References:

• Link to tailwindcss/next branch
• Link to tailwindcss blog

I hope this helps you and other fellow devs!

@_coderchris on 𝕏 if you'd like 👍

[aaronadamsCA]

You can write your own basic prose utility until somebody, hopefully Tailwind, ships one for v4!

Here's something to get you started: https://play.tailwindcss.com/4d11rHJifI?file=css

This has the enormous advantage of being zero-config. If you're on Tailwind v4 latest, you can write a @utility in your tailwind.css and you're done.

[fcrozatier]

You can add the typography plugin like this in your css

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

[cbmongithub]

Yeah they added that after :P seen that. Obv the best solution. It's all coming together and I am so stoked for it.