How to Style Lists in Tailwind CSS ?
Last Updated :
24 Jun, 2024
Styling lists in Tailwind CSS enhances the visual appeal and usability of web pages by making lists more attractive and easier to navigate. By customizing the appearance of lists, you can improve the overall user experience on your website.
These are the following approaches to Style the list in Tailwind CSS:
By using List Styles classes
In this approach, we use Tailwind CSS classes to style lists. Each class represents a different kind of list style. Some commonly used classes include:
- "list-none" class Removes default list styles such as bullet points or numbering from unordered (<ul>) and ordered (<ol>) lists.
- "list-disc" class Applies a filled circle bullet point to each list item in an unordered list (<ul>).
- "list-decimal" class Applies decimal numbering to each list item in an ordered list (<ol>).
Syntax:
<ul class="list-none">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>Example: This example shows the uses of classes to style the list.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>
Tailwind CSS Lists
</title>
</head>
<body class="text-center">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<div class="flex justify-center items-center mt-6">
<ul >
<li class="list-none" >Item 1</li>
<li class="list-disc">Item 2</li>
<li class="list-decimal">Item 3</li>
</ul><br><br>
</div>
</body>
</html>
Output:
outputBreakpoints and media queries are essential for creating responsive web designs that adapt to various screen sizes.
In Tailwind CSS, breakpoints are predefined thresholds that trigger layout adjustments and style changes.
- Tailwind simplifies the use of media queries with utility classes prefixed by abbreviations like `sm`, `md`, `lg`, `xl`, and `2xl`, corresponding to different screen sizes.
- By applying these utility classes directly to HTML elements, developers can effortlessly craft responsive layouts without writing custom CSS media queries.
- This approach allows for granular control over element styles at specific breakpoints, ensuring a consistent user experience across devices.
- With Tailwind CSS, developers can efficiently build web applications that seamlessly transition between desktop and mobile environments, delivering compelling experiences to users regardless of the device they use.
Tailwind CSS provides utility classes that allow you to apply styles based on breakpoints.
Example: This example shows the list in bullet point at big screen and no format at all in small screens.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
rel="stylesheet">
<link rel="stylesheet"
href="style.css">
<title>
Tailwind CSS Lists
</title>
</head>
<body class="text-center">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<div class="flex justify-center items-center mt-6">
<ul class="list-none md:list-disc">
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
</ul>
</div>
</body>
</html>
Output:
By using Arbitrary Values and customizing the theme
Tailwind CSS allows for flexibility in styling elements with arbitrary values. You can set themes in the Tailwind configuration file to access them locally. For instance, you can customize the listStyleImage to use an image for list bullets.
Example: This example shows the customize list style type.
HTML
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>
Tailwind CSS Lists
</title>
</head>
<body class="text-center">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<div class="flex justify-center items-center mt-6">
<ul class="list-image-[url(img.png)] ">
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
</ul>
</div>
</body>
</html>
module.exports = {
theme: {
extend: {
listStyleImage: {
img: 'url("/img/img.png")',
},
}
}
}
Output:
outputStyling lists in Tailwind CSS provides a variety of methods to enhance the appearance of your lists. Whether you're using standard list style classes, responsive design techniques with breakpoints, or customizing themes with arbitrary values, Tailwind CSS offers ways to create visually appealing and navigable lists.
Similar Reads
How to Set the List Style Image in Tailwind CSS ?
Tailwind CSS is a Utility-first CSS framework for building rapid custom UI. It is a highly customizable, low-level CSS framework that gives you all the building blocks you need. These are the following approaches by using these we can customize the list-style image: Table of Content List Style Image
3 min read
Tailwind CSS List Style Type
This class accepts lots of value in tailwind CSS in which all the properties are covered as in class form. It is the alternative to the CSS List Style Type property. This class specifies the appearance of the list item marker (such as a disc, character, or custom counter style) if the ‘list-style-im
1 min read
Tailwind CSS Font Style
This class accepts lots of value in tailwind CSS in which all the properties are covered as in class form. It is the alternative to the CSS font-style property. If we want to give design to any type of text then we can make the use of Tailwind CSS font style class. It helps to make a better user exp
2 min read
How to Style Checkboxes in Tailwind CSS ?
In Tailwind CSS, you can style checkboxes using utility classes to customize their appearance. You can use utility classes like appearance-none to remove the default browser styles from checkboxes. ApproachBegin with the basic HTML structure, including the <!DOCTYPE html> declaration, <html
3 min read
How to style a href links in React using Tailwind CSS ?
In this article, we will learn how we can style a href link in Reactjs. Since we use Tailwind CSS, Tailwind CSS describes itself as the first applicable CSS framework. Rather than focusing on the performance of a style object, Tailwind focuses on how it should be displayed. This makes it easier for
2 min read
How to use :not() in Tailwind CSS ?
In Tailwind CSS, the :not() selector is used to exclude specific elements from a set of CSS rules. It allows you to apply styles to all elements except those that match the specified selector, providing greater control and precision in styling complex layouts.CDN link:<script src="https://cdn.tai
2 min read
Tailwind CSS List Style Position
This class accepts lots of value in tailwind CSS in which all the properties are covered as in class form. It is the alternative to the CSS list-style-position Property. This class specifies the position of the marker box with respect to the principal block box. List Style Position classes: list-ins
1 min read
How to Create A Nested Menus in Tailwind CSS?
TailwindCSS allows designers to create highly customizable and visually appealing interfaces using utility-first classes. With its extensive set of utilities, you can build nested menus that are both responsive and stylish. Tailwind's flexible styling options make it easy to design complex, nested m
6 min read
How to target next sibling in Tailwind CSS ?
In Tailwind CSS, you may run into a situation where you only want to target and format direct siblings of HTML elements. This article walks you through the process of accessing the direct sibling of a tag in Tailwind CSS by providing syntax, methods, and examples. A solution that allows developers t
3 min read
How to style HTML Tables with Tailwind CSS ?
TailwindCSS offers utilities to make tables visually appealing. The colored header table emphasizes visual hierarchy through background color, while the stripped row table improves readability with alternating row colors. Similarly, the hover effect table enhances user interaction by applying visual
5 min read