Is the whitespace-pre-line feature of TailwindCSS experiencing issues?

whitespace-pre-line doesn't seem to be working for me. I attempted to replicate the same code from my text editor on https://play.tailwindcss.com/, and it worked perfectly. Below is a screenshot that I have attached.

This is the 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 is displayed here:

https://i.sstatic.net/Pcioa.png

This is the sample code in play.tailwindcss.com

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

The result is displayed here: https://i.sstatic.net/BTffL.png

Answer №1

Regarding the whitespace-pre-line property, the second output is actually what was intended.

It seems like there may have been a technical issue or perhaps your code on https://play.tailwindcss.com/ had additional parent classes applied to it.

Fortunately, it worked perfectly for me.

https://i.sstatic.net/yXkt7.png

Just to clarify,

As per Tailwind's documentation,

By using whitespace-pre-line, you can maintain newlines but not spaces within an element, while text wraps normally.

For instance, take this 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>

The resulting output would appear as:

Hey everyone!

It's almost 2022 and we still don't know if there are aliens living among us, or do we? Maybe the person writing this is an alien.

You will never know.

For further information, refer to the Tailwind documentation here: https://tailwindcss.com/docs/whitespace

Answer №2

To achieve the desired formatting, include the CSS class whitespace-pre-line on the div element.

<div class="whitespace-pre-line">
  <p>
  Only for
  showcasing
  intentions
  </p>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Styling Input elements with a unified border in Bootstrap

[Issue Resolved] I have been working on setting a single border between multiple inputs inside a form-group in Bootstrap. Currently, the border is only visible when the input is not focused and it is the last one. However, my expectation is for the bo ...

Create a layout that includes options with checkboxes and divs styled inline

I'm in the process of setting up a voting poll on a website. The poll needs to be presented as a radio button followed by a <div> that contains all relevant poll details. In this <div>, I want the option text to appear on the left and the ...

Using a custom font in a Django project without relying on the Google Fonts API

I've hit a roadblock in my programming journey and I'm seeking help. As a newcomer to both programming and Django, I've been following a helpful tutorial up until part 4. Everything was going well until I stumbled upon a new font online cal ...

"Difficulties with Tribute Page Project on FreeCodeCamp: HTML and

I am currently working on a tribute page for a challenge from FCC and I am facing some issues with adding padding to my .life and .work divs in the HTML and CSS code above. Despite spending a few hours searching for solutions online, I have not been able ...

What is the best way to ensure a consistent time interval between invoking two functions in JavaScript?

Is there a way to create a code that will call one function, let's say toStart(), and then immediately call another function, toStop(), exactly two seconds after the first function is initiated? I want this process to continue until a specific button, ...

Div blur event for editing content

Utilizing a content editable div as an input control has presented some challenges for me. Unlike a textarea or input element, the div does not send information to the server automatically. To work around this issue, I have implemented a solution where I u ...

What might be causing my direct descendant selector to not work as expected?

I'm struggling with my direct descendant selector. Let's analyze a straightforward example: .myDiv > table tr:first-child td { font-weight: bold; text-align: center; } <div class="myDiv"> <table style="width:100%"> < ...

The use of "runat="server" in the HTML Head tag is preventing C# embedded code blocks from being converted to client-side code

After I included runat="server" in the head tag and added a CSS href with the value of <%= WebAppInstance %>, I noticed that the <%= WebAppInstance %> was not being converted to client-side code. To provide clarity on my question, please refer ...

Creating a new dynamic page can be achieved by clicking on a dynamically generated link. Would you like to learn how to do that?

Recently, I developed a custom API using Node.js to retrieve information about blogs from Medium.com. The API currently provides: The author/main picture of the article Title A link to the article on medium.com (redundant) The entire article text in the ...

Easily transform a CSS file for optimal use on dark backgrounds from scratch

I've got around 200 CSS files that look like this: /** * GeSHi Dynamically Generated Stylesheet * -------------------------------------- * Dynamically generated stylesheet for bnf * CSS class: , CSS id: * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 ...

What is the best way to superimpose an image onto a canvas?

I am working on a cool project where I have created a canvas that displays matrix binary code raining down. However, I would like to enhance it by adding an image overlay on top of the canvas. Here is my current setup: <div class="rain"> ...

alter the color of the accordion display

Good day everyone, I am seeking help with a Bootstrap query. Here is the HTML code I am working on <!DOCTYPE html> <html lang="nl-NL"> <body> <div class="container-md"> <br> <div c ...

Using a for loop within a ul tag in HTML

If I needed to display the numbers 0 to 4 on an HTML page, how should I modify this code snippet to achieve that? <ul> {% for i in range(5) %} <li><a>i</a></li> {% endfor %} </ul> ...

Using Javascript and CSS to Float DIV Elements

Recently, I've been working on a small algorithm that adds a special class to an element when the mouse reaches the halfway point or beyond on the X-axis of the browser. I also have a screenshot that demonstrates where this application will be utiliz ...

Troubleshooting issue with CSS in Django_tables2

Working with the django_tables2 plugin for the first time has been an interesting experience. I followed the installation and quick start guide provided in their documentation. After pip-installing django-tables2, adding 'django_tables2' to my ...

Special CSS rule for targeting an active state of a specific child element

My issue involves a div with the :active selector effect. Within this div, there is a smaller child div that contains some buttons. Currently, when either the parent div or one of the buttons within the child div is clicked, the :active effect is triggere ...

Instructions for making a crossword-inspired grid using a high quantity of divs or alternative elements

I am looking to create a grid on the screen of a web browser or mobile device, with each grid item containing just one letter. It's similar to a crossword puzzle, but taking up most of the screen. I've tried using divs for this purpose, but it se ...

How can I stop full-page auto-scroll screenshot extensions from automatically scrolling?

As the owner of a membership website, I'm faced with the challenge of preventing users from easily taking full page screenshots of the valuable text content in my members area. Many browser extensions, such as Fireshot and GoFullPage, enable auto-scro ...

Instant data entry upon clicking

In an attempt to automate input based on image pairs, I encountered a challenge. On one side, there are two images that need to be matched with input fields, and on the other side, there are corresponding letters for each image to fill in the inputs upon c ...

What steps can I take to make sure a jQuery Mobile table does not become responsive?

My goal is to make a table responsive by using media queries to hide optional columns on smaller devices. I need to hide two columns based on different screen sizes: @media screen and (max-width: 33em) { th.optional-1, td.optional-1 { display: no ...