如何在Lexical中使用内联CSS替代类名适配邮件客户端？

Lexical本身没有内置将Tailwind类直接转为内联CSS的功能，但可以通过两种方式实现需求：

一、自定义节点的HTML导出逻辑 #

直接重写Lexical核心节点的exportDOM方法，在生成HTML时输出内联样式而非类名。以段落和文本格式为例：

import { ParagraphNode, TextNode } from 'lexical';

// 自定义ParagraphNode，替换默认类名输出为内联样式
class CustomParagraphNode extends ParagraphNode {
  exportDOM() {
    const dom = super.exportDOM();
    if (dom.element) {
      // 映射Tailwind类到内联样式
      dom.element.style.fontSize = '1rem';
      dom.element.style.marginBottom = '0.25rem';
      // 处理居中格式
      if (this.getFormat().includes('center')) {
        dom.element.style.textAlign = 'center';
        dom.element.style.color = '#bfdbfe';
      }
    }
    return dom;
  }
}

// 自定义TextNode处理文本格式
class CustomTextNode extends TextNode {
  exportDOM() {
    const dom = super.exportDOM();
    if (dom.element) {
      const format = this.getFormat();
      if (format & this.getFormatType('bold')) {
        dom.element.style.fontWeight = '700';
      }
      if (format & this.getFormatType('italic')) {
        dom.element.style.fontStyle = 'italic';
      }
      if (format & this.getFormatType('underline')) {
        dom.element.style.textDecorationLine = 'underline';
      }
      if (format & this.getFormatType('strikethrough')) {
        dom.element.style.textDecorationLine = 'line-through';
      }
    }
    return dom;
  }
}

// 在initialConfig中注册自定义节点
const initialConfig = {
  namespace: 'MyEditor',
  editable: true,
  nodes: [CustomParagraphNode, CustomTextNode, ImageNode, ListNode, ListItemNode],
  // 保留theme用于编辑器内渲染，导出逻辑用自定义实现
  theme,
  onError(error) {
    throw error;
  },
};

二、生成HTML后批量转换内联样式 #

先保留原有的Tailwind类生成HTML，再用工具将类对应的CSS内联到元素上：

1. 先通过Tailwind CLI或PostCSS将所需的Tailwind类编译为纯CSS
2. 使用inline-css库完成样式内联：

import inlineCss from 'inline-css';
import { $generateHtmlFromNodes } from '@lexical/html';

// 生成带Tailwind类的原始HTML
const rawHtml = $generateHtmlFromNodes(editor, null);

// 编译后的Tailwind CSS内容（可从本地样式文件读取）
const compiledTailwindCss = `
.text-base { font-size: 1rem; }
.mb-1 { margin-bottom: 0.25rem; }
.text-center { text-align: center; }
.text-blue-200 { color: #bfdbfe; }
.font-bold { font-weight: 700; }
.list-disc { list-style-type: disc; }
.list-inside { list-style-position: inside; }
/* 其他需要的样式 */
`;

// 执行内联转换
const inlineHtml = await inlineCss(rawHtml, {
  extraCss: compiledTailwindCss,
  removeStyleTags: true,
  preserveMediaQueries: true, // 保留媒体查询适配移动端邮件
});

注意事项 #

• 邮件客户端几乎不支持hover等交互样式，生成时可直接移除这类规则
• 图片样式优先使用width/height属性，避免纯CSS宽高在部分客户端失效
• 列表样式直接在<ol>/<ul>/<li>上设置内联的list-style-type和list-style-position

内容的提问来源于stack exchange，提问作者Rafael Zasas