Tailwind Essentials: Styling Lists

Tailwind CSS CSS
Transcript

English (Auto-generated)

and talk about the list is tiling we do have in the in the trailer and so um you know to create the list first of all we need to have a list and I'm going to create the list inside this dave which I already have. Oh actually I do not have any debate is a direct grid. I'm gonna go inside this one first I'm going to create a div like that and in this day and I'm gonna I'm gonna create the jewel. So there is a jewel. Oh sorry you will. I got the usual and now I need to have some allies so they're our allies. Okay so um there there is nothing for now this is just a blank you know the blank red kind of rose colored box. Now I need to have some data in it and I'm going to have some data. So what I'm gonna do is I'm gonna I'm gonna write something like you know list item one and then ally again list item too. I can write anything. I mean you know it is up to me. List Item three and similarly list item for and then Ally. List item five. Okay I can write anything here but if I go to the browser you can see that there is nothing uh you know which which is making it a list. So there is a way because we are doing the tailwind tailwind has its own way to create a list and we're gonna apply that. So first of all we need to have a class to the ul here this way class name and in the class name I'm going to write a list disk. Okay now I'm gonna have the disk right before the list items, each items. So that's how you can create the lists and I think now that's pretty much you know it's explainable Now maybe this is one style I mean but there are more things but the other thing to get the other thing we need to have the um the oil because the other one works with the oil which is the decimal anyway, I mean adding the numbers so you also can make it less. None. This is also not in this style actually. So this list none. But you do not need to apply the list then because it is by default applied anyway. So disk now I'm gonna go down and I'm gonna create a new one ol for this time and I'm gonna simply copy this data and I'm gonna paste this data here and adding any space and then the class name and here list less. Okay this symbol so these are the options. If I go to the browser, you can see that 12345. You can see that we actually have got the second data. I'm adding the br saving it and there is any space between them. So this is how you can simply you know, put these styles in the disk by these two classes. List disk and list decimal. So in the next cast, we're absolutely gonna talk something more till then stay tuned.
131 Views 0 Likes 0 Comments

Let's learn how to style lists using Tailwind.

Comment
Leave a comment (supports markdown format)