DEV Community

Adjoa Wadee
Adjoa Wadee

Posted on

Using Tailwind's @apply in Vue3 + Nuxt3

Tailwind is great because it offers utility first styling.
Providing low-level styling, it can sometimes feel like writing inline styling.
I can already see the benefits of Tailwind including rapid development and it's performance advantages.
I noticed how long these stylings go to achieve the look I am going for.
Repeated lines of code that can be a quite annoying and it's not very readable.

That is until I discovered the @apply directive.

Consider this section
Consider this line here:

simplified to this..
simplified to:

In Vue, you can add styles to a Single File Component (SFC) in the <styles> tag. Here we can encapsulate the styling of this file. It's also a good practice to scope the style to this component.
section styling

This helps keeping code clean and readable.

Top comments (0)