#Rich Text with Tailwind

14 messages · Page 1 of 1 (latest)

dusky sapphire
#

I'm trying to make a custom converter for rich text.
Specifically the headings h1->h6, where I style them with tailwind classes.
The classes appear on the headings, but it seems they are overridden by the default css-layout-file.
I've searched for solutions and the tailwind typography plugin might work, but I would rather use the inline styling approach.

Did anyone solve this issue?

tawdry heraldBOT
#
New Community-Help Thread Created!

Help is on the way! To mark it as solved, use the /solve command. In the meantime, here are some existing threads that may help you:

Documentation:

Community-Help:

dusky sapphire
#

Here's the converter that succesfully adds the classes:

import { JSXConverters } from '@payloadcms/richtext-lexical/react'
import { SerializedHeadingNode } from '@payloadcms/richtext-lexical'

export const headingConverter: JSXConverters<SerializedHeadingNode> = {
heading: ({node, nodesToJSX}) => {
const text = nodesToJSX({ nodes: node.children });
const Tag = node.tag
return <Tag className={text-${node.tag === "h1" ? "4xl" : node.tag === "h2" ? "3xl" : node.tag === "h3" ? "2xl" : node.tag === "h4" ? "xl" : node.tag === "h5" ? "lg" : "base"} font-semibold}>{text}</Tag>
}
}

#

Weirdly enough the h6,h5 and h3 work as intended...

image.png
cinder sorrel
#

Tailwind can’t handle logic like this is most cases. Try taking the logic out of the className and do something like

const fontSize = {
  h1: “text-4xl”
  // etc
}

Then
className={fontSize[node.tag]}

#

On my phone, so can’t give a more detailed example 😂

#

If other classes are taking priority, you can do 4xl! to override that (use sparingly)

dusky sapphire
#

Thank you. I'll try it out! Thank you for the very helpful videos btw!

dusky sapphire
#

It worked! Thanks again 🙂

tawdry heraldBOT
wanton seal
dusky sapphire
#

I did like this in headingConverter.tsx

`import React from 'react'

// Payload
import { JSXConverters } from '@payloadcms/richtext-lexical/react'
import { SerializedHeadingNode } from '@payloadcms/richtext-lexical'

const headingStyles: Record<string, string> = {
h1: "text-4xl font-bold mb-4",
h2: "text-3xl font-semibold mb-4",
h3: "text-2xl font-semibold mb-4",
h4: "text-xl font-semibold mb-4",
h5: "text-lg font-semibold mb-4",
h6: "text-base font-semibold mb-4",
}

export const headingConverter: JSXConverters<SerializedHeadingNode> = {
heading: ({ node, nodesToJSX }) => {
//console.log("Heading node:", node);
const text = nodesToJSX({ nodes: node.children });
const Tag = node.tag;
const className = headingStyles[node.tag] || "";
return (
<Tag className={className}>
{text}
</Tag>
);
}
}`

wanton seal
dusky sapphire