Back to Tailwind CSS Hub

Nearby lessons

45 of 61
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-['→']
🌀

tailwind Designer

Live Component Playground

html Source
Loading...
Built with Tailwind CSS • Instant Reflection

📍 List Style Position

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

  • list-inside
  • list-outside (default)
🌀

tailwind Designer

Live Component Playground

html Source
Loading...
Built with Tailwind CSS • Instant Reflection

🖼️ List Style Image

Use a custom image for the list marker:

  • list-image-none
  • Arbitrary: list-image-[url('/path/to/image.png')]
🌀

tailwind Designer

Live Component Playground

html Source
Loading...
Built with Tailwind CSS • Instant Reflection

🧠 Test Your Knowledge

3 Questions

Progress: 0 / 3
Keep Going!Tailwind CSS - Text