Browser Support

Menu

Tailwind CSS List Style Position

The CSS property list-style-position determines where list item markers (like bullets or numbers) appear. By default, markers are placed outside of the content box. With Tailwind CSS, you gain access to utility classes that allow you to control the positioning effortlessly. These utilities cover both inside and outside positions, aligning perfectly with modern web development needs while maintaining clean, responsive code.

This article breaks down how Tailwind CSS simplifies list-style-position management, even when applying it conditionally for responsive designs, or when using pseudo-classes like hover or focus.

Class	Properties	Example
`list-inside`	`list-style-position: inside;`	`<div className="list-inside"></div>`
`list-outside`	`list-style-position: outside;`	`<div className="list-outside"></div>`

Overview of List Style Position

Adding List Style Position

The utility classes for list-style-position primarily define whether markers remain inside the content flow or out at the edge. The two styles are:

Inside: Places the marker inside the list item's content box, so it aligns with the text.
Outside: Positions the marker outside the content box, maintaining its separation.

Here's an example of list-inside(left) and left-outside(right):

This is a live editor. Play around with it!

export default function ListStyle() {
  return (
    <div className="h-screen w-screen flex justify-center items-center">
    <ul className="list-inside w-60 list-disc p-6">
      {/* list-style-position: inside; */}
      <li>Customizable UI with Tailwind</li>
      <li>Responsive design tools</li>
      <li>
        High-performance <a href="#">CSS utilities</a>
      </li>
    </ul>
      <ul className="list-outside list-disc w-60 p-6">
      {/* list-style-position: outside; */}
      <li>Modern and dynamic classes</li>
      <li>Built for rapid development</li>
      <li>Highly customizable design</li>
    </ul>

      </div>
  );
}

States and Responsiveness

Hover and Focus States

With Tailwind CSS, it's simple to change your list style dynamically using state-based modifiers. For instance, you can adjust between inside and outside when a user hovers over the component.

This is a live editor. Play around with it!

export default function InteractiveList() {
  return (
    <ul className="list-inside hover:list-outside list-disc bg-gray-100 h-screen w-screen px-24 py-36">
      {/* Default: list-style-position: inside; */}
      {/* Hover: list-style-position: outside; */}
      <li>Default markers align to text box</li>
      <li>Hover to see positioning update</li>
      <li>Built entirely with Tailwind</li>
    </ul>
  );
}

Breakpoint Modifiers

Responsive modifiers of Tailwind(sm, md, lg, etc.) allows you to adjust your list style for different devices or screen widths using built-in breakpoints.

This is a live editor. Play around with it!

export default function ResponsiveList() {
  return (
    <ul className="list-outside sm:list-inside list-disc bg-gray-100 h-screen w-screen px-24 py-36">
      {/* Default: list-style-position: outside; */}
      {/* Small screens (>=640px): list-style-position: inside; */}
      <li>Changes dynamically</li>
      <li>On smaller screens</li>
      <li>Based on breakpoints</li>
    </ul>
  );
}

Real World Examples

Product Features Checklist with Inside Position

A product features checklist with list markers positioned inside the content area, perfect for showcasing product highlights.

This is a live editor. Play around with it!

export default function ProductFeatures() {
  const features = [
    { id: 1, text: "Advanced AI-powered recommendations" },
    { id: 2, text: "Real-time analytics dashboard" },
    { id: 3, text: "Multi-platform synchronization" },
    { id: 4, text: "Enterprise-grade security protocols" },
    { id: 5, text: "Automated backup system" },
    { id: 6, text: "24/7 premium customer support" }
  ];

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

Travel Destination List with Outside Position

A travel destinations list with markers positioned outside, creating a clean and organized layout.

This is a live editor. Play around with it!

export default function TravelDestinations() {
  const destinations = [
    {
      id: 1,
      title: "Kyoto, Japan",
      image: "https://images.unsplash.com/photo-1545569341-9eb8b30979d9",
      description: "Historic temples and traditional gardens"
    },
    {
      id: 2,
      title: "Dubai, UAE",
      image: "https://images.unsplash.com/photo-1512453979798-5ea266f8880c",
      description: "Modern architecture and luxury experiences"
    }
  ];

  return (
    <div className="max-w-4xl mx-auto p-8">
      <h2 className="text-3xl font-bold mb-6">Top Travel Destinations</h2>
      <ul className="list-decimal list-outside ml-6 space-y-6">
        {destinations.map((destination) => (
          <li key={destination.id} className="pl-2">
            <div className="flex items-center space-x-4">
              <img
                src={destination.image}
                alt={destination.title}
                className="w-24 h-24 rounded-lg object-cover"
              />
              <div>
                <h3 className="text-xl font-semibold">{destination.title}</h3>
                <p className="text-gray-600">{destination.description}</p>
              </div>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}

Recipe Steps with Inside Position

A cooking recipe steps list with markers positioned inside, making it easy to follow instructions.

This is a live editor. Play around with it!

export default function RecipeSteps() {
  const steps = [
    { id: 1, step: "Preheat oven to 350°F (175°C)", time: "5 mins" },
    { id: 2, step: "Mix all the dry ingredients in a large bowl", time: "10 mins" },
    { id: 3, step: "Whisk wet ingredients separately", time: "5 mins" },
    { id: 4, step: "Combine wet and dry ingredients", 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-3xl mx-auto p-6 bg-white">
      <h2 className="text-2xl font-bold mb-6">Classic Chocolate Cake Recipe</h2>
      <ul className="list-decimal list-inside space-y-4">
        {steps.map((step) => (
          <li key={step.id}>
            <span className="text-gray-800">{step.step}</span>
            <span className="text-sm text-gray-500">{step.time}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

Company Benefits with Outside Position

A company benefits list with markers positioned outside, creating a professional layout.

This is a live editor. Play around with it!

export default function CompanyBenefits() {
  const benefits = [
    {
      id: 1,
      title: "Health Insurance",
      icon: "https://images.unsplash.com/photo-1538108149393-fbbd81895907",
      description: "Comprehensive medical, dental, and vision coverage"
    },
    {
      id: 2,
      title: "Remote Work",
      icon: "https://images.unsplash.com/photo-1584931423298-c576fda54bd2",
      description: "Flexible work-from-home options"
    },
    {
      id: 3,
      title: "Professional Development",
      icon: "https://images.unsplash.com/photo-1434030216411-0b793f4b4173",
      description: "Annual learning and development budget"
    },
    {
      id: 4,
      title: "Paid Time Off",
      icon: "https://images.unsplash.com/photo-1532274402911-5a369e4c4bb5",
      description: "Generous vacation and personal days"
    },
    {
      id: 5,
      title: "Stock Options",
      icon: "https://images.unsplash.com/photo-1611974789855-9c2a0a7236a3",
      description: "Employee stock purchase program"
    },
    {
      id: 6,
      title: "Wellness Program",
      icon: "https://images.unsplash.com/photo-1544367567-0f2fcb009e0b",
      description: "Gym membership and wellness activities"
    }
  ];

  return (
    <div className="max-w-4xl mx-auto p-8 bg-gray-100">
      <h2 className="text-3xl font-bold mb-8 text-center">Employee Benefits</h2>
      <ul className="list-disc list-outside ml-8 space-y-8">
        {benefits.map((benefit) => (
          <li key={benefit.id} className="pl-4">
            <div className="bg-white p-6 rounded-lg shadow-md">
              <div className="flex items-center space-x-4">
                <img
                  src={benefit.icon}
                  alt={benefit.title}
                  className="w-12 h-12 rounded-full object-cover"
                />
                <div>
                  <h3 className="text-xl font-semibold">{benefit.title}</h3>
                  <p className="text-gray-600">{benefit.description}</p>
                </div>
              </div>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}

FAQ Section with Inside Position

A frequently asked questions list with markers positioned inside, optimized for readability.

This is a live editor. Play around with it!

export default function FAQSection() {
  const faqs = [
    {
      id: 1,
      question: "What payment methods do you accept?",
      answer: "We accept all major credit cards, PayPal, and bank transfers."
    },
    {
      id: 2,
      question: "How long does shipping take?",
      answer: "Standard shipping takes 3-5 business days within the continental US."
    },
    {
      id: 3,
      question: "What is your return policy?",
      answer: "We offer a 30-day money-back guarantee on all purchases."
    },
    {
      id: 4,
      question: "Do you ship internationally?",
      answer: "Yes, we ship to over 100 countries worldwide."
    },
    {
      id: 5,
      question: "How can I track my order?",
      answer: "You'll receive a tracking number via email once your order ships."
    },
    {
      id: 6,
      question: "Do you offer bulk discounts?",
      answer: "Yes, discounts are available for orders over $500."
    }
  ];

  return (
    <div className="max-w-3xl mx-auto p-8">
      <h2 className="text-3xl font-bold mb-6">Frequently Asked Questions</h2>
      <ul className="list-decimal list-inside space-y-6">
        {faqs.map((faq) => (
          <li key={faq.id} className="bg-gray-50 p-6 rounded-xl">
            <h3 className="text-xl font-semibold mb-2">{faq.question}</h3>
            <p className="text-gray-600">{faq.answer}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

Best Practices

Leverage Utility Combinations

Combine list-style-position utilities with other classes to create sophisticated layouts without increasing complexity in your Tailwind CSS code. Pair list-inside with spacing utilities like pl-4 or ml-2 to create indents that improve alignment in unordered lists. Similarly, mix list-outside with padding controls (pr-6 or mb-4) to separate markers clearly from the text elements.

Adding pseudo-class modifiers like hover: or focus: results in dynamic behavior depending on user interaction. For example, a feature checklist could switch between list-inside and list-outside based on hover states, reinforcing interactivity. You can combine these with responsive utilities to handle screen-specific marker positions, such as switching from list-inside in mobile contexts to list-outside in larger screens.

Accessibility Considerations

Enhance Readability and Navigability

When considering accessibility, the placement of list markers impacts both visual clarity and keyboard-based navigation. Choosing list-inside positions, for example, aligns markers closely with text, providing a seamless reading experience for screen-reader users. Similarly, list-outside placement simplifies dense content by visually separating markers from descriptions, particularly for unordered or ordered lists.

For multi-line markers in list-inside, avoid text clutter by pairing them with adequate leading-relaxed or leading-snug utilities.

Focus on High Contrast

Ensuring high contrast for list markers and surrounding content is a key component of accessible design. Background utilities like bg-black or bg-gray-800 paired with bright marker colors like text-white create clear distinctions for users.

Also use dark mode modifiers, e.g., dark:bg-gray-900 to enhance contrast adjustments for users operating in low-light settings.

Debugging Common Issues

Handle Nested Element Challenges

Nesting lists within parent containers often leads to challenges such as spacing inconsistencies or collapsed positions. In these scenarios, combine list-style-position utilities with structural padding adjustments. Use list-inside on child elements and introduce margin controls (ml-4) to harmonize nested marker spacing. This ensures that indentation is preserved without breaking parent-child markup conventions.

Line Height List Style Type