0
0
0
dark
0
0
0
Hand-Picked Top-Read Stories
Trending Tags
1 minute read
No comments

Tailwind CSS tutorial #23: List Style Type

Erica Golightly
November 30, 2022
tailwind-css-tutorial-#23:-list-style-type
Total
18
Shares
18
0
0

In the article, we will go into detail on how to use List Style Type.

List Style Type

Format

list-style-type-{none|disc|decimal}

Tailwind Class CSS Property
list-none list-style-type: none;
list-disc list-style-type: disc;
list-decimal list-style-type: decimal;

Code

  class="container mx-auto divide-y divide-gray-400 divide-dotted" style="font-family: Raleway">
   class="flex items-center justify-between px-4 py-2">
     class="list-none">
    
  • Now this is a story all about how, my life got flipped-turned upside down
    • 
     
  • Now this is a story all about how, my life got flipped-turned upside down
    • 
     
  • Now this is a story all about how, my life got flipped-turned upside down
    • 
    
     class="text-xs font-semibold font-mono whitespace-nowrap px-2 py-1 ml-5 rounded text-white bg-pink-500 rounded-2">list-none
    class="flex items-center justify-between px-4 py-2"> class="list-disc">
  • Now this is a story all about how, my life got flipped-turned upside down
    •
  • Now this is a story all about how, my life got flipped-turned upside down
    •
  • Now this is a story all about how, my life got flipped-turned upside down
    •  class="text-xs font-semibold font-mono whitespace-nowrap px-2 py-1 ml-5 rounded text-white bg-pink-500 rounded-2">list-disc
    class="flex items-center justify-between px-4 py-2"> class="list-decimal ">
  • Now this is a story all about how, my life got flipped-turned upside down
    •
  • Now this is a story all about how, my life got flipped-turned upside down
    •
  • Now this is a story all about how, my life got flipped-turned upside down
    •  class="text-xs font-semibold font-mono whitespace-nowrap px-2 py-1 ml-5 rounded text-white bg-pink-500 rounded-2">list-decimal

    Full code:
    The overall code will be attached to repo link.

    Overall Output
    Image description

    Resources:
    tailwind.css

    Thank you for reading :), To learn more, check out my blogs on Flex Direction, Hackathons and Flex Wrap.
    If you liked this article, consider following me on Dev.to for my latest publications. You can reach me on Twitter.

    Keep learning! Keep coding!! ๐Ÿ’›

    Total
    18
    Shares
    Share 18
    Tweet 0
    Pin it 0
    Leave a Reply

    Your email address will not be published. Required fields are marked *

    Previous Post
    the-6-stages-of-the-product-life-cycle

    The 6 Stages of the Product Life Cycle

    November 30, 2022
    Next Post
    tailoring-your-stakeholder-justification-messages-when-investing-in-a-project-portfolio-management-system

    Tailoring Your Stakeholder Justification Messages When Investing In A Project Portfolio Management System

    November 30, 2022
    Related Posts