Why Tailwind List Style type is not working

Question

I have installed Tailwind CSS using npm, i am using "tailwindcss": "^2.2.15" version. when i am trying to apply list style type on my paragraph it's not working, it doesn't show any style type with content.

Here is my code which is running fine on play.tailwindcss.com CODE

But when i write exact same code in my local code editor it doesn't work as intended.

Screenshot of exact same code when i run it locally.

Answer 1

You should find the answer in the preflight docs, more specifically here.

As a solution you could add your own base styles to overwrite this default behavior in your tailwind.css file like so for all lists:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  ul, ol {
    list-style: revert;
  }
}

Or use tailwinds utility classes to target specific lists.

Answer 2

Add utility class "list-inside" also to the ul class.

<ul class="list-disc list-inside">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>