DEV Community

Cover image for TW Elements - Lists. Free UI/UX design course
Keep Coding
Keep Coding

Posted on • Originally published at tw-elements.com

TW Elements - Lists. Free UI/UX design course

#webdev #tailwindcss #tutorial #beginners

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.

Image description

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>
Enter fullscreen mode Exit fullscreen mode

Image description

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>
Enter fullscreen mode Exit fullscreen mode

Image description

List position

There is a small problem when we want to put a list, for example, next to a paragraph:

Image description

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>
Enter fullscreen mode Exit fullscreen mode

Image description

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>
Enter fullscreen mode Exit fullscreen mode

Image description

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>
Enter fullscreen mode Exit fullscreen mode

Image description

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>
Enter fullscreen mode Exit fullscreen mode

Image description

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 -->
Enter fullscreen mode Exit fullscreen mode

After saving the file and refreshing the browser you should see content like this:

Image description

DEMO AND SOURCE CODE FOR THIS LESSON

Top comments (0)

Read next

dipakahirav profile image

Top 5 JavaScript Features You’re Not Using Enough

Dipak Ahirav -

ng_news profile image

Ng-News 24/45: Rationale behind (potential) Authoring Format

ng-news -

msnmongare profile image

How to Generate and Display Swagger (OpenAPI) Documentation for Your Laravel API

Sospeter Mong'are -

jullymac profile image

Como publicar um pacote no npm: um guia passo a passo

Juliana Macêdo -