Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Tailwind - Is there a way to disable preflight ONLY for ul / ol lists?

In tailwind, ul and ol lists are unstyled by default due to preflight. I need lists to work as they normally do before preflight strips it to nothing. Specifically, I need bullets to appear and nested bullets to appear and be indented. Putting the following code in application.tailwind.css doesn't work (nested lists don't appear as they should):

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

Expected:

  • item1
    • item2
  • item3

Current:

  • item1
  • item2
  • item3

is there any way to make lists appear normal?

like image 303
Corey Avatar asked Sep 02 '25 13:09

Corey


1 Answers

Adding revert to margin and padding makes lists behave as they did prior to tailwind preflight.

In application.tailwind.css

@layer base {
  ul, ol {
    list-style: revert;
    margin: revert;
    padding: revert;
  }
}
like image 57
Corey Avatar answered Sep 05 '25 03:09

Corey