How to Select Last Child in Tailwind CSS | Last Child Selector

The last child selector in CSS is very useful in many situations. For example, you may not want to add border to the last element as a divider or you may want to use last-child the selector to style the table row differently than the reset. There are 2 different ways to style the last element in TailwindCSS.

Method 1: Using last-child Selector in TailwindCSS

You can use the last-child selector anywhere you have more than one item and want to style the ending element in the list. The syntax is quite different than other Tailwind classes. Here is the example code which you can check online on tailwind playground.

Here is the output of the above code.

Last Child Selector in TailwindCSS

Method 2: Using Default last-child Selector from TailwindCSS

TailwindCSS also provides a default :last pseudo-class to select the last element but you have to apply it to every child element. This looks weird until you don’t use a framework and use a loop to display elements. You need to add class to all the children elements and it will only style the last element in the list. Here is an example with a working example on tailwind.


The default :last pseudo-class doesn’t make sense because it has to be applied on every element The second method in the above article uses the provided method on official documentation on TailwindCSS. The first method is quite useful if you are not rendering children elements in a framework like React or Vue.

Latest articles

Related articles