CSS classes being added by WordPress with Tailwind

I am writing custom blocks using tailwind CSS. I’m not understanding the classes WordPress is adding. I have no idea what is going on. It displays the correct CSS in the FSE: class=”block-editor-rich-text__editable font-sans font-light text-8xl rich-text”

But on the front end it adds font-bold: class=”wp-block-mikrutblocks-genericheading font-sans font-light text-8xl font-bold”

If I add the block to a post in the block editor I get: class=”block-editor-rich-text__editable rich-text #t6gg29 #1thlppk #23wnib”

And get the same thing on the front end for the post: class=”wp-block-mikrutblocks-genericheading #t6gg29 #1thlppk #23wnib”

Here is the code for the block – genericheading.js

import { ToolbarGroup, ToolbarButton } from "@wordpress/components";
import { RichText, BlockControls } from "@wordpress/block-editor";
import { registerBlockType } from "@wordpress/blocks";

registerBlockType("mikrutblocks/genericheading", {
  title: "Generic Heading",
  attributes: {
    text: { type: "string" },
    // Tailwind css
    size: { type: "sting", default: "text-8xl" }
  },
  edit: EditComponent,
  save: SaveComponent
});

function EditComponent(props) {
  function handleTextChange(x) {
    props.setAttributes({ text: x });
  }

  function createTagName() {
    switch (props.attributes.size) {
      case "text-8xl":
        return "h1";
      case "text-5xl mb-3":
        return "h2";
      case "text-2xl mb-8":
        return "h3";
    }
  }

  return (
    <>
      <BlockControls>
        <ToolbarGroup>
          <ToolbarButton isPressed={props.attributes.size === "text-8xl"} onClick={() => props.setAttributes({ size: "text-8xl" })}>
            Large
          </ToolbarButton>
          <ToolbarButton isPressed={props.attributes.size === "text-5xl mb-3"} onClick={() => props.setAttributes({ size: "text-5xl mb-3" })}>
            Medium
          </ToolbarButton>
          <ToolbarButton isPressed={props.attributes.size === "text-2xl mb-8"} onClick={() => props.setAttributes({ size: "text-2xl mb-8" })}>
            Small
          </ToolbarButton>
        </ToolbarGroup>
      </BlockControls>
      <RichText allowedFormats={["core/bold", "core/italic"]} tagName={createTagName()} className={font-sans font-light ${props.attributes.size}} value={props.attributes.text} onChange={handleTextChange} />
    </>
  );
}

function SaveComponent(props) {
  function createTagName() {
    switch (props.attributes.size) {
      case "text-8xl":
        return "h1";
      case "text-5xl mb-3":
        return "h2";
      case "text-2xl mb-8":
        return "h3";
    }
  }
  return <RichText.Content tagName={createTagName()} value={props.attributes.text} className={font-sans font-light ${props.attributes.size}} />;
}

• This topic was modified 2 years ago by jmikrut62.