實現簡單 List | 點燈坊

由於 Tailwind CSS 會將 <ul> Reset，因此原本 <ul> 不再顯示原本 Style，必須加上 Utility 才能正常顯示。

Version

Tailwind CSS 2.2.0

Simple List

使用 Tailwind 復刻原本 <ul> 的 style。

<template>
  <ul class="list-disc list-inside">
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
    <li>List Item 4</li>
  </ul>
</template>

設定 <ul> 的 style：

• list-disc：List 顯示圓餅
• list-inside：在 List 內顯示

Conclusion

• 由於 <ul> 的 margin 也被 reset，可自行使用 margin utility 調整

Reference

Tailwind CSS, List Style Type
Tailwind CSS, List Style Position