Start with ul for an unordered group or ol when sequence matters. Tailwind’s reset removes default markers, so choose a marker utility when visible bullets or numbers help.
Version and setup
These examples are compiled with Tailwind CSS 3.3.2. Copy document includes the required CSS, so that document runs without a Tailwind installation. To use the utility classes in a project, follow the versioned setup guide.
This site customizes its spacing scale: p-10 is 10px here, while standard Tailwind 3 uses 2.5rem. The examples below use unaffected spacing keys or explicit arbitrary values. Check your project configuration before assuming a utility’s size. Tailwind 4 has a different setup; use its official installation guide for a new version-4 project.
Bullets outside the text
Tailwind CSS 3.3.2; the CSS tab includes the compiled styles.
HTML
<ul class="list-disc list-outside pl-8">
<li class="mb-4">Read the HTML structure before changing its appearance.</li>
<li class="mb-4">
Test this longer instruction at a narrow width and watch where its next line
starts.
</li>
</ul>CSS
*,
::before,
::after {
box-sizing: border-box;
border: 0 solid #e5e7eb;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
button,
input,
select,
textarea {
font: inherit;
color: inherit;
}
button {
background: none;
}
img,
svg,
video {
display: block;
max-width: 100%;
}
img,
video {
height: auto;
}
a {
color: inherit;
text-decoration: inherit;
}
ol,
ul,
menu {
list-style: none;
margin: 0;
padding: 0;
}
.mb-4 {
margin-bottom: 1rem;
}
.list-outside {
list-style-position: outside;
}
.list-disc {
list-style-type: disc;
}
.pl-8 {
padding-left: 2rem;
}Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.
list-outside keeps the marker outside the text block; start-side padding reserves room for it. The wrapped text aligns with the text, rather than the marker.
Numbers inside the item
Tailwind CSS 3.3.2; the CSS tab includes the compiled styles.
HTML
<ol class="list-decimal list-inside p-4 bg-blue-50">
<li class="mb-4">Open the example.</li>
<li>
Copy the document and change one value. A wrapped line starts at the item’s
inline edge.
</li>
</ol>CSS
*,
::before,
::after {
box-sizing: border-box;
border: 0 solid #e5e7eb;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
button,
input,
select,
textarea {
font: inherit;
color: inherit;
}
button {
background: none;
}
img,
svg,
video {
display: block;
max-width: 100%;
}
img,
video {
height: auto;
}
a {
color: inherit;
text-decoration: inherit;
}
ol,
ul,
menu {
list-style: none;
margin: 0;
padding: 0;
}
.mb-4 {
margin-bottom: 1rem;
}
.inline {
display: inline;
}
.list-inside {
list-style-position: inside;
}
.list-decimal {
list-style-type: decimal;
}
.bg-blue-50 {
--tw-bg-opacity: 1;
background-color: rgb(239 246 255 / var(--tw-bg-opacity));
}
.p-4 {
padding: 1rem;
}Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.
list-inside puts the marker inside the item’s line box, which changes wrapping. It is not simply an indentation shortcut. Use CSS margins or gap for spacing, rather than empty li elements.
Keep real list markup even if a navigation design hides markers. Some browser and assistive-technology combinations need extra care with markerless lists; see list-style and test the target combination. Do not claim that visual bullets alone establish list semantics.
Sources
Reference 1 Reference 2 Reference 3 provide the technical details and current compatibility information.