Back to Tailwind CSS Hub

Nearby lessons

45 of 71
Tailwind CSS - Line ClampTailwind CSS - Line HeightTailwind CSS - List StyleTailwind CSS - TextTailwind CSS - Vertical Align

📜 Tailwind CSS - List Style (Type, Position & Image)

📖 Overview

List style utilities control the marker type, position, and images for list items.

📜 List Style Type

Control the bullet or numbering style of a list:

  • list-none
  • list-disc (bullets)
  • list-decimal (numbers)
  • Arbitrary: list-['→']
Example02
Loading editor…

📍 List Style Position

Control the position of the list marker relative to the list item content:

  • list-inside
  • list-outside (default)
Example03
Loading editor…

🖼️ List Style Image

Use a custom image for the list marker:

  • list-image-none
  • Arbitrary: list-image-[url('/path/to/image.png')]
Example04
Loading editor…

🧠 Test Your Knowledge

3 Questions
Progress: 0 / 3