主页 / coding / 问题 / 77812922
Accepted
Ryan
Asked: 2024-01-14 04:05:52 +0800 CST

Tailwind 嵌套列表

  • 772

此 HTML 将嵌套项目符号显示为圆圈而不是点。伟大的！

<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>

项目符号列表

不过，我的项目使用 Tailwind，因此嵌套列表的项目符号全部显示为点。

如何取消重置 Tailwind 重置，但仅限于嵌套列表？

到目前为止，我已经添加了这个 SCSS，但这感觉很奇怪，而且这并不能修复更深层次的嵌套。

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

我打赌有一个官方的 Tailwind 方法可以实现我想要的。

css

1 个回答

  1. Best Answer

    我不相信有任何“官方 Tailwind 方式”，但这里有一些可能的以 Tailwind 为中心的解决方案。

    您可以使用任意变体来选择<ul>具有任意值的子元素来应用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>

    您可以将这些任意值抽象为非任意值：

    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>

    您可以在 CSS 中编写一条规则来使用：

    <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>

    或者在插件中：

    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>

    你可以有一个@layer base样式通过 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>

    或者在插件中：

    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>

    • 1

相关问题