List

Lists are ordered or unordered bulleted lists of items. They use <ul> or <ol> as the wrapping element and take a series of list items as <li> elements. Use them sparingly when you need to display an outline or series of items.

Default list

Lists are reduced to basic non-bulleted text by the Tailwind resets in all of the distributed CSS files that include Tailwind base classes.

In order to apply bullets, padding, and margin for a normal list group, add .hc-list to any <ul> or <ol> element. The individual <li> items do not need any classes to get basic styling restored.

Lists are indented by 2rem:

Now this is a story all about how, my life got flipped-turned upside down
And I'd like to take a minute just sit right there
I'll tell you how I became the prince of a town called Bel-Air

And now for an ordered list:

Now this is a story all about how, my life got flipped-turned upside down
And I'd like to take a minute just sit right there
I'll tell you how I became the prince of a town called Bel-Air

HTML

Expand Edit in Playground Copy


<strong>Lists are indented by 2rem:</strong>
<ul class="hc-list">
  <li>Now this is a story all about how, my life got flipped-turned upside down</li>
  <li>And I'd like to take a minute just sit right there</li>
  <li>I'll tell you how I became the prince of a town called Bel-Air </li>
</ul>
<strong>And now for an ordered list:</strong>
<ol class="hc-list">
  <li>Now this is a story all about how, my life got flipped-turned upside down</li>
  <li>And I'd like to take a minute just sit right there</li>
  <li>I'll tell you how I became the prince of a town called Bel-Air </li>
</ol>

Nested lists

Nesting lists inside of parent lists will further indent each child list another 1.5rem. All other styles should remain the same and remember that each list group needs the .hc-list class still.

Nesting lists:

Now this is a story all about how, my life got flipped-turned upside down
- And I'd like to take a minute just sit right there
  - I'll tell you how I became the prince of a town called Bel-Air

HTML

Expand Edit in Playground Copy


<strong>Nesting lists:</strong>
<ul class="hc-list">
  <li>Now this is a story all about how, my life got flipped-turned upside down
    <ul class="hc-list">
      <li>And I'd like to take a minute just sit right there
        <ul class="hc-list">
          <li>I'll tell you how I became the prince of a town called Bel-Air</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

The nested group should be inside of an <li> and fully contained within it, and ensure that this is also closed with </li>.

You can mix <ul> and <ol> elements within a nested group to change the default bullet style, in addition to the manual bullet modifiers below.

Bullet styles

Append .hc-list--roman, .hc-list--roman--lower, .hc-list--square, and .hc-list--none to change the list’s bullet style to uppercase Roman numerals, lowercase Roman numbers, squares, or no bullets, respectively.

United States Code:

Title 47—Telecommunications
- Chapter 5—Wire or Radio Commmunication
  - Subchapter 1: General Provisions
    - Sec. 157. New technologies and services

HTML

Expand Edit in Playground Copy


<strong>United States Code:</strong>
<ul class="hc-list hc-list--roman">
  <li>Title 47&mdash;Telecommunications
    <ul class="hc-list hc-list--roman--lower">
      <li>Chapter 5&mdash;Wire or Radio Commmunication
        <ul class="hc-list hc-list--square">
          <li>Subchapter 1: General Provisions
            <ul class="hc-list hc-list--none">  
              <li>Sec. 157. New technologies and services</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </ul>
</ul>