From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Combining utility classes with @apply

Combining utility classes with @apply - Next.js Tutorial

From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Start my 1-month free trial Buy for my team

Combining utility classes with @apply

“

If we want to add truly custom CSS to our project, then we can create some custom classes and use it. But we cannot override custom CSS using Tailwind classes. So if we want to use Tailwind features like modifiers and tree shaking, then we have to include the styling in the components layer of the Tailwind. To include a set of styling inside any layer, we need to use the add layer directive. Let's practically see why we need to include the styling in the components layer. I have already created a demo project using Tailwind CSS and in that I have added a button. Now I will add custom styles, so in the globals CSS, I will define a class .btn giving the background color to blue, color I will keep white, padding 8 pixels and 16 pixels. Now I will add this class to the button. Let's save and check. And styles are applied. Now I will change the background color of the button using Tailwind class. So I will add bg-green 500. Let's check it again and the background color has not changed…

Contents