如何在 Tailwind 和 postcss 中将 Html 内容转换为纯文本

Posted 2023-03-07

【中文标题】如何在 Tailwind 和 postcss 中将 Html 内容转换为纯文本

【英文标题】：How to convert Html content into plain text in Tailwind and postcss

【发布时间】：2021-12-06 10:36:15

【问题描述】：

我无法在 react 中解析 html 内容，这实际上是 tailwind 和 postcss 特有的问题，因为我在 codesandbox 上使用了相同的代码，在没有 tailwind CSS 样式的情况下可以正常工作。

注意：我已经在我的本地计算机上进行了测试，无论是否有顺风，我都遇到了同样的问题

App.js

import React,  useState  from 'react';
import parse from 'html-react-parser';

const App = () => 
  const [text, setText] = useState('<p>asdfsadf</p><ul><li>asdfsdf</li><li>sdcas</li></ul>');
  return (
    <div className="m-10">parse(text)</div>
  );
;

export default App;

预期输出

实际输出

在 react 中使用 tailwind 进行样式设置时是否有另一种方法可以将 html 转换为纯文本

【问题讨论】：

您是否使用create-react-app在您的电脑上创建了该应用程序？

是的，实际上它在没有顺风的情况下工作正常。

您应该在问题中添加如何使用带有解析器的顺风

【参考方案1】：

像这样更改您的代码：

import React,  useState  from 'react';

const App = () => 
  const [text, setText] = useState(
    '<p>asdfsadf</p><ul><li>asdfsdf</li><li>sdcas</li></ul>'
  );
  return <div className="m-10" dangerouslySetInnerHTML= __html: text  />;
;

export default App;

结果https://react-v29quj.stackblitz.io/

【讨论】：

我不知道为什么我的答案被否决了，但我知道结果就是你要找的。 react-v29quj.stackblitz.io

我已经使用了至少 4-5 种方法（包括以上）将 html 转换为纯文本，没有顺风也可以正常工作

tailwindcss.com/docs/list-style-type 默认情况下，Tailwind css 将列表样式设置为无。

【参考方案2】：

这与 HTML 解析无关。

Tailwind 有一个preflight 样式表。发生的一件事是list bullets are removed。