How to convert Html content into plain text in Tailwind and postcss

Question

I'm not able to parse html-content in react, which is actually tailwind and postcss specific issue because i have used same code on codesandbox which is working fine without tailwind CSS styling.

Note: I have tested this on my local-computer with and without tailwind, i have faced same issue

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;

Expected Output

Actual Output

Whether there is another way to convert html into plain-text when using tailwind for styling in react

Answer 1

Change your code like this:

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;

Result https://react-v29quj.stackblitz.io/

Answer 2

This has nothing to do with HTML parsing.

Tailwind has a preflight stylesheet. One of the things that happen is that list bullets are removed.