Tailwind CSS List Style Type

The CSS property list-style-type defines the marker type used for lists. It determines the appearance of bullets or numbering for ordered and unordered lists. Tailwind CSS offers an extensive set of utility classes to directly apply these styling properties without writing custom CSS. These utilities allow you to efficiently manage list-style-type with a highly functional and scalable approach.

Whether you're crafting detailed bullet points, hierarchical numbering, or custom-themed lists, Tailwind CSS makes it intuitive to implement and customize these stylings.

Class	Properties	Example
`list-none`	`list-style-type: none;`	`<div className="list-none"></div>`
`list-disc`	`list-style-type: disc;`	`<div className="list-disc"></div>`
`list-decimal`	`list-style-type: decimal;`	`<div className="list-decimal"></div>`

Overview of List Style Type

Styling the List Type

Tailwind provides disc and decimal list marker styles tailored for unordered or ordered lists.

Here, the class list-disc applies a circular bullet style:

This is a live editor. Play around with it!

// Background: Applying list bullet styles

export default function App() {
  return (
    <div className="h-screen w-screen bg-gray-100 flex justify-center items-center">
      <ul className="list-disc pl-5 text-blue-600">
        <li>Personal Development</li>
        <li>Web Development</li>
        <li>Photography</li>
      </ul>
    </div>
  );
}

// CSS Values:
// list-style-type: disc;
// color: blue;

Here's another example of list-decimal that applies numbered bullets:

This is a live editor. Play around with it!

// Background: Applying list bullet styles

export default function App() {
  return (
    <div className="h-screen w-screen bg-gray-100 flex justify-center items-center">
      <ul className="list-decimal pl-5 text-blue-600">
        <li>Personal Development</li>
        <li>Web Development</li>
        <li>Photography</li>
      </ul>
    </div>
  );
}

// CSS Values:
// list-style-type: disc;
// color: blue;

States and Responsiveness

Hover and Focus States

When building dynamic applications, there are situations where you'd want a list's style to change based on user interaction, such as hover or focus.

In this snippet, a default disc list type changes into decimal when hovered:

This is a live editor. Play around with it!

// Background: Hover interaction affecting list markers.

export default function App() {
  return (
    <div className="h-screen w-screen bg-gray-50 flex justify-center items-center">
      <ul className="list-disc hover:list-decimal text-gray-800">
        <li>Data Analysis</li>
        <li>Machine Learning</li>
        <li>AI Design</li>
      </ul>
    </div>
  );
}

// CSS Values:
// list-style-type: disc;
// list-style-type (hover): decimal;

Breakpoint Modifiers

Tailwind's list-style-type utilities integrate seamlessly with breakpoint modifiers like sm, md, lg, etc. This ensures your list styles can adapt to various screen sizes.

Here, you see list markers dynamically transforming based on the screen size, enabling more flexible designs.

This is a live editor. Play around with it!

// Background: Different list markers across breakpoints.

export default function App() {
  return (
    <div className="h-screen w-screen bg-gray-200 flex flex-col justify-center items-center">
      <ul className="list-disc sm:list-circle md:list-decimal lg:list-square">
        <li>Travel Planning</li>
        <li>Cultural Research</li>
        <li>Adventure Activities</li>
      </ul>
    </div>
  );
}

// CSS Values:
// Small screens: list-style-type: disc;
// Medium screens: list-style-type: circle;
// Large screens: list-style-type: decimal;

Custom List Style Type

Sometimes you might want the list-style-type property to deviate from Tailwind's predefined marker styles. Tailwind allows you to extend its configuration or directly define arbitrary values.

Extending the Theme

Tailwind's design system is easily adjustable. You can add unique list-style markers to the theme configuration file (tailwind.config.js), targeting specific projects.

Once added, these marker types become available as utility classes.

This is a live editor. Play around with it!

import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

// Background: Applying custom markers.

export default function App() {
  return (
    <div className="h-screen w-screen bg-gray-300 flex justify-center items-center">
      <ul className="list-triangle pl-8 text-indigo-600">
        <li>Innovative Thinking</li>
        <li>Team Collaboration</li>
        <li>Product Design</li>
      </ul>
    </div>
  );
}

// CSS Values for the extension:
// list-style-type: custom-defined triangle marker;

Notice the implementation of a custom triangular bullet added via a Tailwind extension.

Using Arbitrary Values

If you need to implement a unique marker for a one-off case, Tailwind's support for arbitrary values allows you to apply precise CSS directly to list-style-type.

This is a live editor. Play around with it!

// Background: Arbitrarily-defined styles for list markers.

export default function App() {
  return (
    <div className="h-screen w-screen bg-gray-50 flex justify-center items-center">
      <ul className="list-[square] pl-4 space-y-2 text-teal-800">
        <li>Deep Research</li>
        <li>Creative Prototyping</li>
        <li>Final Development</li>
      </ul>
    </div>
  );
}

Real World Examples

Product Feature List with Custom Decimal Markers

This component displays product features with custom decimal markers, ideal for showcasing key selling points of a software application.

This is a live editor. Play around with it!

export default function ProductFeatures() {
  const features = [
    { id: 1, title: "Real-time collaboration with unlimited team members" },
    { id: 2, title: "Advanced security with end-to-end encryption" },
    { id: 3, title: "Custom workflow automation and integrations" },
    { id: 4, title: "Detailed analytics and reporting dashboard" },
    { id: 5, title: "24/7 priority customer support with dedicated manager" },
    { id: 6, title: "Unlimited storage with automatic backup" }
  ];

  return (
    <div className="max-w-2xl mx-auto p-6 bg-gray-50 rounded-lg">
      <h2 className="text-2xl font-bold mb-6 text-gray-800">
        Enterprise Features
      </h2>
      <ul className="list-decimal list-inside space-y-4 marker:text-blue-600 marker:font-bold">
        {features.map((feature) => (
          <li key={feature.id} className="text-gray-700 pl-2">
            {feature.title}
          </li>
        ))}
      </ul>
    </div>
  );
}

Recipe Instructions with Roman Numerals

A component that displays cooking instructions using Roman numerals for a sophisticated cooking app interface.

This is a live editor. Play around with it!

export default function RecipeSteps() {
  const instructions = [
    { id: 1, step: "Preheat oven to 350°F (175°C)", time: "5 mins" },
    { id: 2, step: "Mix dry ingredients in a large bowl", time: "3 mins" },
    { id: 3, step: "Whisk wet ingredients separately", time: "4 mins" },
    { id: 4, step: "Combine wet and dry mixtures gradually", time: "5 mins" },
    { id: 5, step: "Pour batter into prepared pan", time: "2 mins" },
    { id: 6, step: "Bake until golden brown", time: "45 mins" }
  ];

  return (
    <div className="max-w-2xl mx-auto p-8 bg-white shadow-lg">
      <h2 className="text-3xl font-serif mb-6">Classic Vanilla Cake</h2>
      <ul className="list-[upper-roman] marker:text-amber-600 marker:font-serif space-y-6">
        {instructions.map((item) => (
          <li key={item.id} className="pl-4">
            <div className="flex justify-between items-center">
              <span className="text-gray-800">{item.step}</span>
              <span className="text-sm text-gray-500">{item.time}</span>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}

Travel Checklist with Custom Bullets

A travel preparation checklist using custom bullet styles and category grouping.

This is a live editor. Play around with it!

export default function TravelChecklist() {
  const items = [
    { id: 1, name: "Passport", category: "Documents", checked: true },
    { id: 2, name: "Travel Insurance", category: "Documents", checked: false },
    { id: 3, name: "Power Bank", category: "Electronics", checked: true },
    { id: 4, name: "Universal Adapter", category: "Electronics", checked: false },
    { id: 5, name: "First Aid Kit", category: "Health", checked: true },
    { id: 6, name: "Medications", category: "Health", checked: false }
  ];

  return (
    <div className="max-w-xl mx-auto p-6 bg-teal-50 rounded-xl">
      <h2 className="text-2xl font-bold text-teal-800 mb-6">
        Pre-Trip Checklist
      </h2>
      <ul className="list-disc marker:text-teal-500 space-y-6">
        {items.map((item) => (
          <li key={item.id} className="pl-2">
            <div className="flex items-center justify-between">
              <div>
                <span className="text-gray-700">{item.name}</span>
                <span className="ml-2 text-sm text-teal-600">
                  ({item.category})
                </span>
              </div>
              <input
                type="checkbox"
                checked={item.checked}
                className="h-5 w-5 text-teal-600 rounded"
                readOnly
              />
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}

E-commerce Size Guide with Square Bullets

A size guide component for clothing items using square bullets and responsive design.

This is a live editor. Play around with it!

export default function SizeGuide() {
  const measurements = [
    { id: 1, size: "XS", chest: "32-34", waist: "26-28", hips: "34-36" },
    { id: 2, size: "S", chest: "34-36", waist: "28-30", hips: "36-38" },
    { id: 3, size: "M", chest: "36-38", waist: "30-32", hips: "38-40" },
    { id: 4, size: "L", chest: "38-40", waist: "32-34", hips: "40-42" },
    { id: 5, size: "XL", chest: "40-42", waist: "34-36", hips: "42-44" },
    { id: 6, size: "XXL", chest: "42-44", waist: "36-38", hips: "44-46" }
  ];

  return (
    <div className="max-w-2xl mx-auto p-8 bg-purple-50">
      <h2 className="text-2xl font-bold text-purple-800 mb-6">Size Guide</h2>
      <ul className="list-[square] marker:text-purple-500 space-y-4">
        {measurements.map((item) => (
          <li key={item.id} className="pl-2">
            <div className="grid grid-cols-4 gap-4">
              <span className="font-semibold">{item.size}</span>
              <span>Chest: {item.chest}"</span>
              <span>Waist: {item.waist}"</span>
              <span>Hips: {item.hips}"</span>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}

Project Timeline with Custom Markers

A project timeline component using custom markers and progressive styling.

This is a live editor. Play around with it!

export default function ProjectTimeline() {
  const milestones = [
    { id: 1, phase: "Project Initiation", date: "Jan 2024", status: "completed" },
    { id: 2, phase: "Requirements Gathering", date: "Feb 2024", status: "completed" },
    { id: 3, phase: "Design Phase", date: "Mar 2024", status: "in-progress" },
    { id: 4, phase: "Development", date: "Apr 2024", status: "pending" },
    { id: 5, phase: "Testing", date: "May 2024", status: "pending" },
    { id: 6, phase: "Deployment", date: "Jun 2024", status: "pending" }
  ];

  return (
    <div className="max-w-3xl mx-auto p-8 bg-gray-100">
      <h2 className="text-2xl font-bold text-gray-800 mb-8">Project Timeline</h2>
      <ul className="list-[disclosure-closed] marker:text-indigo-600 space-y-6">
        {milestones.map((item) => (
          <li key={item.id} className="pl-4">
            <div className="flex items-center justify-between">
              <div>
                <h3 className="text-lg font-semibold text-gray-800">
                  {item.phase}
                </h3>
                <p className="text-sm text-gray-600">{item.date}</p>
              </div>
              <span
                className={`px-3 py-1 rounded-full text-sm ${
                  item.status === 'completed' 
                    ? 'bg-green-100 text-green-800'
                    : item.status === 'in-progress'
                    ? 'bg-yellow-100 text-yellow-800'
                    : 'bg-gray-100 text-gray-800'
                }`}
              >
                {item.status}
              </span>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}

Customization Examples

Custom Resume Bullet Points

This example demonstrates how to create a custom resume-style list with unique bullet points for different sections.

This is a live editor. Play around with it!

// App.js
  import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

export default function ResumeList() {
  return (
    <div className="max-w-2xl mx-auto p-8 bg-gray-50">
      <h2 className="text-2xl font-bold mb-6">Professional Resume</h2>
      
      <div className="space-y-6">
        <div>
          <h3 className="text-lg font-semibold text-blue-600 mb-2">Experience</h3>
          <ul className="list-square list-inside space-y-2 text-gray-700">
            <li>Senior Frontend Developer at TechCorp (2020-Present)</li>
            <li>Web Developer at StartupX (2018-2020)</li>
            <li>Junior Developer at CodeCo (2016-2018)</li>
          </ul>
        </div>

        <div>
          <h3 className="text-lg font-semibold text-blue-600 mb-2">Education</h3>
          <ul className="list-circle list-inside space-y-2 text-gray-700">
            <li>Master's in Computer Science - Tech University</li>
            <li>Bachelor's in Software Engineering - Code College</li>
          </ul>
        </div>

        <div>
          <h3 className="text-lg font-semibold text-blue-600 mb-2">Skills</h3>
          <ul className="list-decimal list-inside space-y-2 text-gray-700">
            <li>React.js, Vue.js, Angular</li>
            <li>Node.js, Express, MongoDB</li>
            <li>AWS, Docker, Kubernetes</li>
          </ul>
        </div>
      </div>
    </div>
  )
}

This example shows how to create an interactive documentation menu with custom list styles that change on hover.

This is a live editor. Play around with it!

// App.js
  import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

export default function DocumentationMenu() {
  return (
    <div className="max-w-3xl mx-auto p-6 bg-white shadow-lg rounded-xl">
      <h2 className="text-2xl font-bold mb-8 text-gray-800">Documentation</h2>
      
      <div className="grid gap-8">
        <div className="bg-gray-50 p-6 rounded-lg">
          <h3 className="text-xl font-semibold mb-4 text-indigo-600">Getting Started</h3>
          <ul className="space-y-3">
            {['Installation', 'Configuration', 'Quick Start'].map((item) => (
              <li key={item} 
                  className="list-arrow list-inside cursor-pointer
                            text-gray-700 hover:text-indigo-600">
                {item}
              </li>
            ))}
          </ul>
        </div>

        <div className="bg-gray-50 p-6 rounded-lg">
          <h3 className="text-xl font-semibold mb-4 text-green-600">Completed Modules</h3>
          <ul className="space-y-3">
            {['Basic Setup', 'Authentication', 'Database'].map((item) => (
              <li key={item} 
                  className="list-arrow list-inside text-gray-700
                            cursor-pointer duration-300">
                {item}
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  )
}

Feature Comparison List

This example demonstrates how to create a feature comparison list with custom markers for different status types.

This is a live editor. Play around with it!

// App.js
  import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

export default function FeatureComparison() {
  return (
    <div className="max-w-4xl mx-auto p-8 bg-gradient-to-br from-gray-50 to-gray-100">
      <h2 className="text-3xl font-bold mb-8 text-gray-800 text-center">
        Feature Comparison
      </h2>
      
      <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
        <div className="bg-white p-6 rounded-xl shadow-md">
          <h3 className="text-xl font-semibold mb-4 text-green-600">Available Features</h3>
          <ul className="list-roman list-inside space-y-3">
            {[
              'User Authentication',
              'Real-time Updates',
              'Data Export',
              'API Access'
            ].map((feature) => (
              <li key={feature} className="text-gray-700">{feature}</li>
            ))}
          </ul>
        </div>

        <div className="bg-white p-6 rounded-xl shadow-md">
          <h3 className="text-xl font-semibold mb-4 text-yellow-600">Pending Features</h3>
          <ul className="list-roman list-inside space-y-3">
            {[
              'Advanced Analytics',
              'Custom Integrations',
              'Bulk Operations'
            ].map((feature) => (
              <li key={feature} className="text-gray-700">{feature}</li>
            ))}
          </ul>
        </div>

        <div className="bg-white p-6 rounded-xl shadow-md">
          <h3 className="text-xl font-semibold mb-4 text-red-600">Unavailable Features</h3>
          <ul className="list-roman list-inside space-y-3">
            {[
              'AI Processing',
              'Blockchain Support',
              'Legacy System Integration'
            ].map((feature) => (
              <li key={feature} className="text-gray-700">{feature}</li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  )
}

Best Practices

Maintain Design Consistency

Always ensure that your use of list-style-type is consistent across components. This means using predefined or custom markers that align with your design system's typography and branding. For instance, when working on a product catalog, the use of consistent list-disc or custom markers, such as list-star, provides uniformity and clarity.

For complex systems, extend the default markers in Tailwind's configuration file to standardize custom styles like arrows or triangles. By maintaining this standard across your designs, not only does it provides a better user experience, but it also makes your project easier to maintain as the team scales.

Balance with Other Layout Properties

Integrating list-style-type with layout utilities ensures your lists feel naturally integrated into your overall design. Pairing list-disc with flex or grid layouts allows lists to serve different UX needs, such as formatted pricing tables or aligned feature lists. Use spacing utilities like space-y- and gap- to balance alignment and ensure readability.

For instance, an e-commerce feature list with structured headers and markers can be built using list-none, grid utilities, and responsive typography. Experiment with using grid columns in conjunction with list markers to highlight the contents of each item.

This is a live editor. Play around with it!

// Example: Left-Aligned Feature List with Grid Layout

export default function FeatureGrid() {
  const features = [
    "Unlimited Storage",
    "24/7 Customer Support",
    "AI-Powered Analytics",
    "Real-Time Collaboration",
  ];

  return (
    <div className="p-6">
      <h3 className="text-lg font-semibold text-gray-800 mb-4">Features:</h3>
      <ul className="list-disc list-inside marker:text-blue-500 pl-3 grid grid-cols-2 gap-4">
        {features.map((feature, index) => (
          <li key={index} className="text-gray-600">{feature}</li>
        ))}
      </ul>
    </div>
  );
}

Accessibility Considerations

Enhance Readability and Navigability

Using well-defined list styles improves content hierarchy, which is particularly advantageous for users navigating with assistive technologies. For instance, unordered lists help screen readers articulate grouped information, while ordered list markers can clarify the sequence in procedural content.

To maximize readability, pair list-decimal for numerical sequences or logical steps with sufficient padding and text utilities for font size accessibility. Consider the clarity of custom markers or icons used—ensuring they are distinctly recognizable when magnified or zoomed.

This is a live editor. Play around with it!

// Example: Accessible Navigation Content

export default function AccessibleList() {
  const steps = [
    "Choose a subscription plan.",
    "Enter billing information.",
    "Set up user preferences.",
  ];

  return (
    <div className="max-w-lg mx-auto p-6">
      <h2 className="text-xl font-bold text-gray-800 mb-4">Quick Start</h2>
      <ol className="list-decimal list-outside marker:text-indigo-600 text-gray-800 pl-10 space-y-2">
        {steps.map((step, index) => (
          <li key={index}>{step}</li>
        ))}
      </ol>
    </div>
  );
}

Focus on High Contrast

For inclusive accessibility, always maintain adequate contrast between markers and backgrounds. Tailwind's marker:text-color class can ensure that markers stand out against surrounding text and backgrounds. Pairing high-contrast markers with distinct list item spacing facilitates easier content scannability for low-vision users.

This is a live editor. Play around with it!

// High-Contrast Accessible List

export default function ContrastList() {
  const topics = [
    "Web Design Essentials",
    "Responsive Layout Techniques",
    "CSS Grid Guide",
    "Advanced Animations",
  ];

  return (
    <div className="bg-black text-white p-6 h-screen">
      <h3 className="text-2xl font-bold mb-4">Learning Modules</h3>
      <ul className="list-disc list-inside pl-3 space-y-2 marker:text-yellow-500">
        {topics.map((topic, index) => (
          <li key={index}>{topic}</li>
        ))}
      </ul>
    </div>
  );
}

List Style Position Hyphens

Tailwind CSS List Style Type

Overview of List Style Type

Styling the List Type

States and Responsiveness

Hover and Focus States

Breakpoint Modifiers

Custom List Style Type

Extending the Theme

Using Arbitrary Values

Real World Examples

Product Feature List with Custom Decimal Markers

Recipe Instructions with Roman Numerals

Travel Checklist with Custom Bullets

E-commerce Size Guide with Square Bullets

Project Timeline with Custom Markers

Customization Examples

Custom Resume Bullet Points

Interactive Documentation Menu

Feature Comparison List

Best Practices

Maintain Design Consistency

Balance with Other Layout Properties

Accessibility Considerations

Enhance Readability and Navigability

Focus on High Contrast