Question 1

What list style classes does Tailwind provide?

Accepted Answer

Tailwind provides list-none (no markers), list-disc (bullet points), list-decimal (numbers), and list-inside/list-outside for marker position. You can also use arbitrary values for custom marker types.

Question 2

How do I create custom list markers?

Accepted Answer

Use the ::marker pseudo-element or list-style-type with custom values. In Tailwind, use marker: utilities or arbitrary values like list-['→'] for custom marker characters.

Question 3

What's the difference between list-inside and list-outside?

Accepted Answer

list-outside (default) places markers outside the content flow. list-inside places markers inside, aligning with the text. list-inside is useful for tight layouts but can affect text alignment.

Question 4

How do I style list marker colors?

Accepted Answer

Use the marker: modifier in Tailwind, like 'marker:text-blue-500'. This applies styles to the ::marker pseudo-element, letting you change marker color independently from text.

List Style Generator

You might also like

Typography Scale

Spacing Visualizer