php css tailwind-css laravel-livewire flux

Livewire Flux and Tailwind list items

I'm having an issue and I think it might be with Tailwind4, I haven't really used Tailwind before. But now since I am using Livewire Flux, I have an issue with the Flux editor, or at least, with displaying the output. Here's an image of how I enter it in my editor:

So I expect the output to be the same, but it is being displayed like so:

The HTML looks like this:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

<div class="text-sm text-zinc-950 dark:text-white">
  <p>Hello, this is a test:</p>
  <ol>
    <li><p>First</p></li>
    <li><p>Second</p></li>
    <li><p>Third</p></li>
  </ol>
  <p>And this is also a test:</p>
  <ul>
    <li><p>First</p></li>
    <li><p>Second</p></li>
    <li><p>Third</p></li>
  </ul>
  <p>Does it work?</p>
</div>

So, two questions:

Why are the lists not being displayed properly?
Why are there no line breaks as expected? Or am I missing something here?

Solution

TailwindCSS is working correctly. What you're missing is the default CSS styling. Disable Tailwind Preflight when import TailwindCSS v4.

Preflight - TailwindCSS v4 Docs

The @import "tailwindcss" statement imports Preflight, which is designed to remove all default CSS styles from elements. If you want to skip this, you can do so by manually importing the individual parts of TailwindCSS and omitting Preflight:

TailwindCSS v4 Playground

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities);
</style>

<div class="text-sm text-zinc-950 dark:text-white">
  <p>Hello, this is a test:</p>
  <ol>
    <li><p>First</p></li>
    <li><p>Second</p></li>
    <li><p>Third</p></li>
  </ol>
  <p>And this is also a test:</p>
  <ul>
    <li><p>First</p></li>
    <li><p>Second</p></li>
    <li><p>Third</p></li>
  </ul>
  <p>Does it work?</p>
</div>

Or restore the style of ol and ul lists like this:

TailwindCSS v4 Playground

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@import "tailwindcss";

@layer base {
  ul,
  ol {
    list-style: revert;
    margin: revert; 
    padding-inline-start: revert;
  }

  li {
    margin: revert;
    padding: revert;
    display: list-item;
  }
}
</style>

<div class="text-sm text-zinc-950 dark:text-white">
  <p>Hello, this is a test:</p>
  <ol>
    <li><p>First</p></li>
    <li><p>Second</p></li>
    <li><p>Third</p></li>
  </ol>
  <p>And this is also a test:</p>
  <ul>
    <li><p>First</p></li>
    <li><p>Second</p></li>
    <li><p>Third</p></li>
  </ul>
  <p>Does it work?</p>
</div>

Or you can use TailwindCSS list classes (note that padding and margin are reset in this case, so you may want to restore them):

Typography: list-style-type - TailwindCSS v4 Docs
TailwindCSS v4 Playground

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@import "tailwindcss";
</style>

<div class="text-sm text-zinc-950 dark:text-white">
  <p>Hello, this is a test:</p>
  <ol class="list-decimal pl-[revert]">
    <li><p>First</p></li>
    <li><p>Second</p></li>
    <li><p>Third</p></li>
  </ol>
  <p>And this is also a test:</p>
  <ul class="list-disc pl-[revert]">
    <li><p>First</p></li>
    <li><p>Second</p></li>
    <li><p>Third</p></li>
  </ul>
  <p>Does it work?</p>
</div>