Lists
Many novice users are surprised that Tailwind's lists are not styled by default.
This means that whether we use ol or ul, they will have no bullets or numbers by default.
But don't worry, Tailwind CSS offers us various utility classes to customize the appearance and behavior of lists. We can leverage these classes to style lists according to their design requirements.
Numbered list
Add .list-decimal to create a classic, ordered list with numbers:
HTML
<ol class="list-decimal">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ol>
Bullet list
Add .list-disc to create a classic, unordered list with dots / small black circles:
HTML
<ul class="list-disc">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
List position
There is a small problem when we want to put a list, for example, next to a paragraph:
See the list bullets extend beyond the left paragraph boundary?
However, we can easily fix this by adding a .list-inside class to the list:
HTML
<p class="mb-3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum corporis
eos reiciendis doloribus iure aut sint eligendi rerum, delectus ipsam.
Velit amet fugit, ut facere quam inventore dolorem esse atque.
</p>
<ul class="list-inside list-disc">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
List with icons
Using what we learned about icons in previous lessons, we can create lists with icons.
List with checkmarks:
HTML
<ul>
<li class="mb-2">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="me-1 inline h-5 w-5 fill-green-700">
<path
fill-rule="evenodd"
d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
clip-rule="evenodd"></path>
</svg>
<span>Item 1</span>
</li>
<li class="mb-2">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="me-1 inline h-5 w-5 fill-green-700">
<path
fill-rule="evenodd"
d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
clip-rule="evenodd"></path>
</svg>
<span>Item 2</span>
</li>
<li class="mb-2">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="me-1 inline h-5 w-5 fill-green-700">
<path
fill-rule="evenodd"
d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
clip-rule="evenodd"></path>
</svg>
<span>Item 3</span>
</li>
</ul>
List with arrows:
HTML
<ul class="mb-10">
<li class="mb-2">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="me-1 inline h-5 w-5 fill-primary-700">
<path
fill-rule="evenodd"
d="M16.72 7.72a.75.75 0 011.06 0l3.75 3.75a.75.75 0 010 1.06l-3.75 3.75a.75.75 0 11-1.06-1.06l2.47-2.47H3a.75.75 0 010-1.5h16.19l-2.47-2.47a.75.75 0 010-1.06z"
clip-rule="evenodd"></path>
</svg>
<span>Item 1</span>
</li>
<li class="mb-2">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="me-1 inline h-5 w-5 fill-primary-700">
<path
fill-rule="evenodd"
d="M16.72 7.72a.75.75 0 011.06 0l3.75 3.75a.75.75 0 010 1.06l-3.75 3.75a.75.75 0 11-1.06-1.06l2.47-2.47H3a.75.75 0 010-1.5h16.19l-2.47-2.47a.75.75 0 010-1.06z"
clip-rule="evenodd"></path>
</svg>
<span>Item 2</span>
</li>
<li class="mb-2">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="me-1 inline h-5 w-5 fill-primary-700">
<path
fill-rule="evenodd"
d="M16.72 7.72a.75.75 0 011.06 0l3.75 3.75a.75.75 0 010 1.06l-3.75 3.75a.75.75 0 11-1.06-1.06l2.47-2.47H3a.75.75 0 010-1.5h16.19l-2.47-2.47a.75.75 0 010-1.06z"
clip-rule="evenodd"></path>
</svg>
<span>Item 3</span>
</li>
</ul>
List with question marks:
HTML
<ul class="mb-10">
<li class="mb-2">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="me-1 inline h-5 w-5 fill-orange-500">
<path
fill-rule="evenodd"
d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm11.378-3.917c-.89-.777-2.366-.777-3.255 0a.75.75 0 01-.988-1.129c1.454-1.272 3.776-1.272 5.23 0 1.513 1.324 1.513 3.518 0 4.842a3.75 3.75 0 01-.837.552c-.676.328-1.028.774-1.028 1.152v.75a.75.75 0 01-1.5 0v-.75c0-1.279 1.06-2.107 1.875-2.502.182-.088.351-.199.503-.331.83-.727.83-1.857 0-2.584zM12 18a.75.75 0 100-1.5.75.75 0 000 1.5z"
clip-rule="evenodd"></path>
</svg>
<span>Item 1</span>
</li>
<li class="mb-2">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="me-1 inline h-5 w-5 fill-orange-500">
<path
fill-rule="evenodd"
d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm11.378-3.917c-.89-.777-2.366-.777-3.255 0a.75.75 0 01-.988-1.129c1.454-1.272 3.776-1.272 5.23 0 1.513 1.324 1.513 3.518 0 4.842a3.75 3.75 0 01-.837.552c-.676.328-1.028.774-1.028 1.152v.75a.75.75 0 01-1.5 0v-.75c0-1.279 1.06-2.107 1.875-2.502.182-.088.351-.199.503-.331.83-.727.83-1.857 0-2.584zM12 18a.75.75 0 100-1.5.75.75 0 000 1.5z"
clip-rule="evenodd"></path>
</svg>
<span>Item 2</span>
</li>
<li class="mb-2">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="me-1 inline h-5 w-5 fill-orange-500">
<path
fill-rule="evenodd"
d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm11.378-3.917c-.89-.777-2.366-.777-3.255 0a.75.75 0 01-.988-1.129c1.454-1.272 3.776-1.272 5.23 0 1.513 1.324 1.513 3.518 0 4.842a3.75 3.75 0 01-.837.552c-.676.328-1.028.774-1.028 1.152v.75a.75.75 0 01-1.5 0v-.75c0-1.279 1.06-2.107 1.875-2.502.182-.088.351-.199.503-.331.83-.727.83-1.857 0-2.584zM12 18a.75.75 0 100-1.5.75.75 0 000 1.5z"
clip-rule="evenodd"></path>
</svg>
<span>Item 3</span>
</li>
</ul>
Step 1 - add list with icons to the project
Now let's use the knowledge from this lesson and complete our "Details" section. Next to the carousel, we will insert a list with icons and text with a header.
HTML
<!-- Text -->
<div class="flex items-center">
<div class="text-gray-700 dark:text-white">
<h3 class="mb-4 text-3xl font-semibold">Details</h3>
<p class="mb-7">
This beginner-friendly, example-based course will guide you through
the essential knowledge of TW Elements ecosystem.
</p>
<p class="mb-4 font-semibold">What will you learn:</p>
<ul class="">
<li class="mb-2 flex">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="me-1 h-6 w-6 text-green-800">
<path
fill-rule="evenodd"
d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
clip-rule="evenodd" />
</svg>
<span>Tailwind</span>
</li>
<li class="mb-2 flex">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="me-1 h-6 w-6 text-green-800">
<path
fill-rule="evenodd"
d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
clip-rule="evenodd" />
</svg>
<span>TW Elements</span>
</li>
<li class="mb-2 flex">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="me-1 h-6 w-6 text-green-800">
<path
fill-rule="evenodd"
d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
clip-rule="evenodd" />
</svg>
<span>UI/UX design</span>
</li>
<li class="mb-2 flex">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="me-1 h-6 w-6 text-green-800">
<path
fill-rule="evenodd"
d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
clip-rule="evenodd" />
</svg>
<span>Responsive web design</span>
</li>
</ul>
</div>
</div>
<!-- Text -->
After saving the file and refreshing the browser you should see content like this:
Top comments (0)