How to use [first-of-type] and [last-of-type] in TailwindCSS

Although you can use the first-child and last-child selectors to select the first and last element in a list, the first-of-type and last-of-type pretty much does the same. The difference is that the first-of-type will only select the element if it’s the first element in the list of many others.

Using first-of-type in Tailwind CSS

You can use the first-of-type modifier class on a list of elements. The modifier will only apply styles if it’s the first element of it’s type in the list. Here is an example of using first-of-type in TailwindCSS.

Here is the working code example and the output is shown below.

first-of-type in tailwindcss

Using last-of-type in Tailwind CSS

Same as the first-of-type you can use the last-of-type which does the same thing but to the last element in the list. Here is a simple example of last-type-of in TailwindCSS.


The first-of-child and last-of-child does the same thing as first-child selector and last-child selector but in a different way. You can use first-of-child and last-of-child in TailwindCSS to only apply styles on the first or the last element of its type in a list of elements. Please read more about first-of-type on Tailwind documentation.


Latest articles

Related articles