Tailwind nested lists

Issue

This HTML shows nested bullets as circles instead of dots. Great!

<ul class="p-2 text-sm max-w-xs list-disc list-outside">
  <li class="py-2">one</li>
  
  <li class="py-2">two
    <ul class="list-disc list-outside ps-5 mt-2 space-y-1 ">
      <li>two B is nested</li>
    </ul>
  </li>
  
</ul>

My project uses Tailwind, though, so nested lists' bullets are all showing as dots.

How can I un-reset the Tailwind reset, but just for nested lists?

So far, I've added this SCSS, but this feels weird, and this doesn't fix deeper levels of nesting.

ul {
  ul {
    list-style-type: circle !important;
  }
}

I bet there is an official Tailwind way to accomplish what I want.

Solution

I don't believe there is any "official Tailwind way" but here are some possible Tailwind-centric solutions.

You could use an arbitrary variant to select child <ul> elements with an arbitrary value to apply list-style-type: revert:

<script src="https://cdn.tailwindcss.com/3.4.1"></script>

<ul class="pl-5 list-disc list-outside [&_ul]:list-[revert]">
  <li>one</li>

  <li>
    two
    <ul>
      <li>two B is nested</li>

      <li>
        two
        <ul>
          <li>two B is nested</li>
          <li>
            two
            <ul>
              <li>two B is nested</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

You could abstract these arbitrary values to be non-arbitrary:

tailwind.config = {
  theme: {
    extend: {
      listStyleType: {
        revert: 'revert',
      },
    },
  },
  plugins: [
    tailwind.plugin(({ addVariant }) => {
      addVariant('ul', '& ul');
    }),
  ],
};

<script src="https://cdn.tailwindcss.com/3.4.1"></script>

<ul class="pl-5 list-disc list-outside ul:list-revert">
  <li>one</li>

  <li>
    two
    <ul>
      <li>two B is nested</li>

      <li>
        two
        <ul>
          <li>two B is nested</li>
          <li>
            two
            <ul>
              <li>two B is nested</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

You could write a rule in your CSS to use:

<script src="https://cdn.tailwindcss.com/3.4.1"></script>

<style type="text/tailwindcss">
@layer utilities {
  .nested-lists ul {
    list-style-type: revert;
  }
}
</style>

<ul class="pl-5 list-disc list-outside nested-lists">
  <li>one</li>

  <li>
    two
    <ul>
      <li>two B is nested</li>

      <li>
        two
        <ul>
          <li>two B is nested</li>
          <li>
            two
            <ul>
              <li>two B is nested</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Or in a plugin:

tailwind.config = {
  plugins: [
    tailwind.plugin(({ addUtilities }) => {
      addUtilities({
        '.nested-lists ul': {
          listStyleType: 'revert',
        },
      });
    }),
  ],
};

<script src="https://cdn.tailwindcss.com/3.4.1"></script>

<ul class="pl-5 list-disc list-outside nested-lists">
  <li>one</li>

  <li>
    two
    <ul>
      <li>two B is nested</li>

      <li>
        two
        <ul>
          <li>two B is nested</li>
          <li>
            two
            <ul>
              <li>two B is nested</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

You could have a @layer base style to have it applied globally via CSS:

<script src="https://cdn.tailwindcss.com/3.4.1"></script>

<style type="text/tailwindcss">
@layer base {
  ul ul {
    list-style-type: revert;
  }
}
</style>

<ul class="pl-5 list-disc list-outside">
  <li>one</li>

  <li>
    two
    <ul>
      <li>two B is nested</li>

      <li>
        two
        <ul>
          <li>two B is nested</li>
          <li>
            two
            <ul>
              <li>two B is nested</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Or in a plugin:

tailwind.config = {
  plugins: [
    tailwind.plugin(({ addBase }) => {
      addBase({
        'ul ul': {
          listStyleType: 'revert',
        },
      });
    }),
  ],
};

<script src="https://cdn.tailwindcss.com/3.4.1"></script>

<ul class="pl-5 list-disc list-outside">
  <li>one</li>

  <li>
    two
    <ul>
      <li>two B is nested</li>

      <li>
        two
        <ul>
          <li>two B is nested</li>
          <li>
            two
            <ul>
              <li>two B is nested</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Answered By - Wongjn