Tailwind CSS - List Style Image

Previous
Quiz
Next

Tailwind CSS List Style Image is a collection of predefined classes that enable us to easily change the style, image, or type of marker used for list items on webpages.

Tailwind CSS List Style Image Classes

Below is a list of Tailwind CSS List Style Image classes that allow you to easily style how lists appear on your webpage.

Class CSS Properties
list-image-none list-style-image: none;

Functionality Of Tailwind CSS List Style Image Classes

  • list-image-none: This class removes the default markers (such as bullets or numbers) from list items, so they appear without any additional symbols or decorations.

Tailwind CSS List Style Image Class Examples

Below are examples of Tailwind CSS List Style Image classes that provide different options to improve the appearance of lists on your web page.

Custom List Style Image

This example uses the list-image utility from Tailwind CSS to replace the default list bullets with a custom image.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-4">
        Tailwind CSS List Style Image Example
    </h2>
    <ul class="list-image-[url('./checkmark.jpg')] ml-4">
        <li>1 cup strawberries</li>
        <li>1/2 cup blueberries</li>
        <li>1 banana</li>
    </ul>
</body>

</html>

List Item Icons on Hover

This example shows how to change the list item icons to an image when you hover over them.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-4">
        Tailwind CSS List Style Image Example
    </h2>
    <ul class="list-image-none hover:list-image-[url('./checkmark.jpg')] ml-4">
        <li>1 cup strawberries</li>
        <li>1/2 cup blueberries</li>
        <li>1 banana</li>
    </ul>
</body>

</html>

Note: You can easily enhance the look of your lists by replacing the provided URL with your favorite images.

Print Page
Previous
Next