TailwindCSS's whitespace-pre-line is not working? - html

Question

whitespace-pre-line seems not working for me. I've tried to copy the same code from my text editor to https://play.tailwindcss.com/ , it works like a charm. I've attached the screenshot below.
sample code in my text editor:
export default function App() {
return (
<div>
<p className="whitespace-pre-line">
Just for
demonstration
purpose
</p>
</div>
);
}
the result shows here:
sample code in play.tailwindcss.com
<div>
<p class="whitespace-pre-line">
Just for
demonstration
purpose
</p>
</div>
the result shows here:

Answer 1

As far as the whitespace-pre-line is concerned. The second ouput is actually the desired output.
I guess it's technical issue or your code in the https://play.tailwindcss.com/ was wrapped with some other parent classes.
For me it worked perfectly.
Just for clarity .
According to the documentation of the tailwind.
Use whitespace-pre-line to preserve newlines but not spaces within an element. Text will be wrapped normally.
For example the code:
<div class="w-3/4 ...">
<div class="whitespace-pre-line ...">Hey everyone!
It's almost 2022 and we still don't know if there is aliens living among us, or do we? Maybe the person writing this is an alien.
You will never know.</div>
</div>
And the ouput goes like:
Hey everyone!
It's almost 2022 and we still don't know if there is aliens living among us, or do we? Maybe the person writing this is an alien.
You will never know.
For more details please follow the tailwind documentation. https://tailwindcss.com/docs/whitespace

Answer 2

Just add the class whitespace-pre-line to the div.
<div class="whitespace-pre-line">
<p>
Just for
demonstration
purpose
</p>
</div>