Tailwind CSS Marker Cheatsheet
Complete guide to Tailwind's marker utilities for styling list bullet points and numbers using the ::marker pseudo-element.
Click any class to copy it to your clipboard.
Quick Reference
| Class | CSS | Color | |
|---|---|---|---|
| marker:text-red-500 | ::marker { color: #ef4444 } | Red | |
| marker:text-blue-500 | ::marker { color: #3b82f6 } | Blue | |
| marker:text-green-500 | ::marker { color: #22c55e } | Green | |
| marker:text-purple-500 | ::marker { color: #a855f7 } | Purple | |
| marker:text-pink-500 | ::marker { color: #ec4899 } | Pink | |
| marker:text-yellow-500 | ::marker { color: #eab308 } | Yellow |
Marker Colors (Unordered Lists)
Style the bullet points of unordered lists with colored markers. The marker: modifier applies styles to the ::marker pseudo-element.
marker:text-red-500- First item in the list
- Second item with more text
- Third item example
marker:text-blue-500- First item in the list
- Second item with more text
- Third item example
marker:text-green-500- First item in the list
- Second item with more text
- Third item example
marker:text-purple-500- First item in the list
- Second item with more text
- Third item example
marker:text-pink-500- First item in the list
- Second item with more text
- Third item example
marker:text-yellow-500- First item in the list
- Second item with more text
- Third item example
Marker Colors (Ordered Lists)
The marker modifier works equally well with ordered lists, styling the numbers instead of bullets.
marker:text-red-500- Install the package
- Configure your settings
- Start building
marker:text-blue-500- Install the package
- Configure your settings
- Start building
marker:text-green-500- Install the package
- Configure your settings
- Start building
marker:text-purple-500- Install the package
- Configure your settings
- Start building
marker:text-pink-500- Install the package
- Configure your settings
- Start building
marker:text-yellow-500- Install the package
- Configure your settings
- Start building
More Marker Colors
Tailwind supports the full color palette for markers. Here are additional popular colors.
marker:text-orange-500- First item in the list
- Second item with more text
- Third item example
marker:text-teal-500- First item in the list
- Second item with more text
- Third item example
marker:text-indigo-500- First item in the list
- Second item with more text
- Third item example
marker:text-cyan-500- First item in the list
- Second item with more text
- Third item example
marker:text-rose-500- First item in the list
- Second item with more text
- Third item example
marker:text-emerald-500- First item in the list
- Second item with more text
- Third item example
Marker Color Shades
Each color comes in multiple shades (50-950). Here's an example using red.
marker:text-red-300- Item one
- Item two
marker:text-red-400- Item one
- Item two
marker:text-red-500- Item one
- Item two
marker:text-red-600- Item one
- Item two
marker:text-red-700- Item one
- Item two
marker:text-red-800- Item one
- Item two
Combining Marker with List Styles
Combine marker colors with list style utilities for complete control over your lists.
list-disc marker:text-blue-500- First item in the list
- Second item with more text
- Third item example
Blue bullet points
list-decimal marker:text-green-500- Install the package
- Configure your settings
- Start building
Green numbers
list-inside list-disc marker:text-purple-500- First item in the list
- Second item with more text
- Third item example
Inside position with purple markers
list-[square] marker:text-pink-500- First item in the list
- Second item with more text
- Third item example
Square markers in pink
Common Use Cases
Feature List
marker:text-green-500<ul class="list-disc marker:text-green-500 pl-5"> <li>Fast performance</li> <li>Easy to use</li> <li>Fully responsive</li> </ul>
Step-by-Step Guide
marker:text-blue-500<ol class="list-decimal marker:text-blue-500 pl-5"> <li>Install dependencies</li> <li>Configure settings</li> <li>Deploy to production</li> </ol>
Warning/Error List
marker:text-red-500<ul class="list-disc marker:text-red-500 pl-5"> <li>Missing required field</li> <li>Invalid email format</li> <li>Password too short</li> </ul>
Highlighted Items
marker:text-yellow-500<ul class="list-disc marker:text-yellow-500 pl-5"> <li>New feature announcement</li> <li>Important update</li> <li>Breaking change</li> </ul>
Responsive Markers
Use responsive prefixes to change marker colors at different breakpoints.
marker:text-blue-500 md:marker:text-green-500- Blue on mobile
- Green on md and up
- Resize to see change
marker:text-red-500 lg:marker:text-purple-500- Red by default
- Purple on lg screens
- Try resizing browser
About Tailwind Markers
The marker: modifier in Tailwind CSS targets the ::marker pseudo-element, which represents the bullet, number, or other marker of a list item.
You can use any text color utility with the marker modifier: marker:text-red-500, marker:text-[#ff6600], etc.
For responsive markers, add breakpoint prefixes: md:marker:text-blue-500, lg:marker:text-green-500
Note: The marker pseudo-element has limited styling options in CSS. Only color, font, and a few other properties can be applied.
Explore more Tailwind tools
Tailwind Grid Generator
Create grid layouts visually
Tailwind Flexbox Generator
Create flex layouts visually
Tailwind Gradient Generator
Create custom gradients
Tailwind Text Gradient
Gradient text effects
Tailwind Gradients Collection
275+ ready-to-use gradients
Tailwind Colors
Complete 240+ color palette
Tailwind Box Shadow Generator
Design multi-layer shadows
Tailwind Text Shadow
Add depth to text with shadows
Tailwind Filter Generator
Apply blur, brightness & more
Tailwind Transform Generator
Rotate, scale & translate elements
Tailwind Animation Generator
Create built-in & custom animations
Tailwind Transition Generator
Smooth hover transitions
Tailwind Config Generator
Generate your config file
Tailwind Input Generator
Design form inputs visually
Tailwind Class Sorter
Organize classes in order
Flexbox Cheatsheet
All flex utilities visualized
Overflow Cheatsheet
Control content overflow