🏠

Tailwind CSS Concept Explained

Styling Common Web Page Parts

Make lists (bullet points or numbers) look good.

Skill ID: StylingCommonParts_19

Description: Control the appearance of bulleted or numbered lists.

Where to apply: Feature lists, instructions, ingredients.

Key Tailwind Classes:

list-disc , list-decimal , pl-5

Gotcha: Forgetting the padding-left ( pl-* ). Without it, the bullets or numbers might sit flush against the left edge of their container, looking cramped or even overlapping.

Example:

Bulleted List ( list-disc pl-5 ):

  • First item
  • Second item
  • Third item with a bit more text to see how it wraps.

Numbered List ( list-decimal pl-5 ):

  1. Step one
  2. Step two
  3. Step three, which also has a longer description for demonstration.

List without padding (for comparison - cramped):

  • Item A
  • Item B

List with more padding ( pl-8 ):

  • Item X
  • Item Y

Note: The pl-5 (padding-left) class is a common choice for lists. You can adjust the padding value (e.g., pl-4 , pl-6 ) as needed for your design. The list-disc class adds bullet points, and list-decimal adds numbers. These are standard CSS list styles, easily applied with Tailwind.

Example 1:

Example 2:

Example 3:

Example 4:

Example 5:

Example 6:

Example 7:

Example 8:

Example 9:

🏠