How to Set the List Style Image in Tailwind CSS ?

Last Updated : 19 Mar, 2024

Tailwind CSS is a Utility-first CSS framework for building rapid custom UI. It is a highly customizable, low-level CSS framework that gives you all the building blocks you need.

These are the following approaches by using these we can customize the list-style image:

Table of Content

List Style Image in Tailwind CSS
Handling Hover, Focus, and Other States for List Style Image

List Style Image in Tailwind CSS

A list is a record of short pieces of related information used to display the data or any information on web pages in the ordered or unordered form. In ordered form, list elements are represented using numbers; in unordered form, they are presented using a disk, square, or circle. We can use images as the list style for the elements inside the list. Tailwind CSS doesn’t have a utility class to style the list-style-image . The custom utility class to style the list style image is list-image-[url(path)].

Example: This example shows the use of list style image.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0" />
    <title>List Style Image</title>
    <link rel="stylesheet" href="style.css" />
    <script src=
"https://cdn.tailwindcss.com"></script>
</head>

<body>
    <h1 class="text-center text-3xl font-bold
               text-green-700">
      List Style Image in Tailwind CSS
      </h1>

    <div class="m-4 border-4 border-red-600 px-12
                text-justify">
        <h3 class="text-center text-xl">
          List Style Image
          </h3>

        <ul class="text-xl">
            <li class="list-image-[
url(https://media.geeksforgeeks.org/wp-content/uploads/20240303100755/academic-cap.png)] pb-1">
                academic-cap
              </li>
            <li class="list-image-[
url(https://media.geeksforgeeks.org/wp-content/uploads/20240303100851/battery.png)] pb-2">
                Battery
              </li>
            <li class="list-image-[
url(https://media.geeksforgeeks.org/wp-content/uploads/20240303100856/bell-alert.png)]">
                Bell Alert
              </li>
            <li class="list-image-[
url(https://media.geeksforgeeks.org/wp-content/uploads/20240303100908/home.png)]">
                home
              </li>
        </ul>
    </div>

    <div class="m-4 border-4 border-red-600 px-12">
        <h3 class="text-center text-xl">
          All List items with Same Image
          </h3>
        <ul
            class="list-image-[
url(https://media.geeksforgeeks.org/wp-content/uploads/20240303100902/book-open.png)] font-bold">
            <li>Book open</li>
            <li>Book open</li>
        </ul>
    </div>
</body>

</html>

Output:

Output

Handling Hover, Focus, and Other States for List Style Image

Handling hover and focus states in Tailwind CSS involves using utility classes that specifically target these states. The hover: prefix is used for hover states, and the focus: prefix is used for focus states. Breakpoints in Tailwind CSS are specific screen widths at which the layout or design of a website can change. They are used to ensure that the website looks and behaves well on different screen sizes and devices. We will use this effect to style the list style image in Tailwind CSS.

Syntax:

<ul class="List style">
//  hover effect
    <li  class="hover:  list-image-[ url ( path of the image)]    ">  </li>

//breakpoints   
    <l   class=" sm:list-disc   lg: list-image-[ url ( path of the image)] " i></li>  
</ul>
// For focus state
<button class="bg-blue-500  focus:outline-none  focus:border-color">  
    <ul  class=" list-image-[ url ( path of the image)]    ">     
           <li> <li>
  <ul/>
</button>

Example: This example shows handling hover, focus and other states for list style image.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,
                                   initial-scale=1.0" />
    <title>List Style Image</title>
   
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
    <h1 class="text-center text-3xl
               font-semibold
               text-green-600">Welcome to GeeksforGeeks</h1>

    <div class="m-4 border-4 border-orange-400
                p-10 text-justify">
        <h3 class="text-center text-xl">List Style Image with hover effect</h3>
        <ul class="list-disc">
            <li
                class="font-bold
                       hover:list-image-[url(
https://media.geeksforgeeks.org/wp-content/uploads/20240303100755/academic-cap.png)]">
                academic-cap</li>
            <li
                class="font-bold
                       hover:list-image-[url(
https://media.geeksforgeeks.org/wp-content/uploads/20240303100755/academic-cap.png)]">
                academic-cap</li>
        </ul>
    </div>
    <div class="m-4 ">
        <h3 class="text-center text-xl">List Style Image with Focus effect</h3>
        <button class="rounded-md bg-amber-600 
                       px-8 py-4 focus:bg-red-700
                       focus:text-white">
            <ul>
                <li
                    class="list-image-[url(
https://media.geeksforgeeks.org/wp-content/uploads/20240303100908/home.png)] font-bold ">
                    home</li>
            </ul>
        </button>
    </div>
    <div class="m-4 border-4 border-green-500 p-12 text-justify">
        <h3 class="text-center text-xl">
              List Style Image with breakpoints
          </h3>
        <ul class="list-disc">
            <li
                class="font-bold xs:list-disc
                       sm:list-image-[url(
https://media.geeksforgeeks.org/wp-content/uploads/20240303100856/bell-alert.png)] 
                       lg:list-image-[url(
https://media.geeksforgeeks.org/wp-content/uploads/20240303100908/home.png)] ">
                Bell Alert</li>
            <li
                class="font-bold xs:list-disc
                       sm:list-image-[url(
https://media.geeksforgeeks.org/wp-content/uploads/20240303100856/bell-alert.png)]
                       lg:list-image-[url(
https://media.geeksforgeeks.org/wp-content/uploads/20240303100908/home.png)] ">
                Bell Alert</li>
        </ul>
    </div>
</body>

</html>