Tailwind CSS Tutorial #11 - @apply Directive

In tailwind, we can use the @apply directive to apply a number of clases to an individual custom class. This way our html code doesn't get too bloated with lots of classes.

🐱‍👤🐱‍👤 JOIN THE GANG -
----------------------------------------
🐱‍💻 🐱‍💻 My Udemy Courses:

🐱‍💻 🐱‍💻 Course Files:

🐱‍💻 🐱‍💻 Other Related Free Courses:

[muhammadaffanjavaid]

I have learnt lot of things from you. I watched almost all of your tutorials, but I liked your NodeJs and this tutorial most. I have too much respect for you in my heart. May Allah Almighty bless you always.

[jamieroszel]

@apply is a game-changer! It was getting tedious going through and adding all the styling - the idea of doing that for each card was daunting. Clever!

[bijayaadhikari]

That's really cool. I was building a dashboad with tailwind and I way copying and pasting all the classes to its siblings. Finally you are here with solution. Thanks alot.

[TrixyJ]

This is so amazing. With the power of apply directive the html file will be cleaner. I love this :)

[SiawashKasra]

Just watched the tutorial, your way of explanation is easy to catch, thank you for the amazing work.

[window.location]

I was following this tutorial and came across where class names where too much Just like callback hell in JS.
Glad they made @apply
right tutorial at right time

[CreatedByDalius]

this is really good. hopefully there will be an update in the future. I've added BEM along with Sass into my styling but I appreciate any videos you've made on any topic.

[michrisoft]

I had an issue where the card and badge classes were not being copied over into the built CSS file (even if I just put a regular CSS rule like .card { background-color: white; }. After reading many issues on the GitHub and StackOverflow posts with no success, I finally figured out that I needed to change the build script to say "tailwindcss build -i src/styles.css -o public/styles.css" (take not of the -i) because I was seeing a deprecation notice of not using the -i flag to point to the input. Maybe this will save someone else the trouble in the future.

[MaerlynsRainbow]

I came for the Tailwind CSS. I stayed for the vegan food.

[dnynu]

Request
Plzz use big font so we can watch your videos in 240p clearly.
Thanks in advance 👍👍🙏

[jamshidkarimov]

Useful tutorial, I didn't know about this

[comradered]

The best youtube coding channel ever.Thanks a lot net ninja. you helped me learn python, html, css, js and now tailwind.Just a suggestion. Can you please make a tutorial on anime.js or ml5/tensorflow.js. I hope you will read my comment.I know you probabaly might not read but still i am giving it a try
-A Intermediate Coder

[tarunkmr]

Hail the great Ninja. Lol. You're doing great buddy. I don't know how you know these many technologies. Can you make a mini project of e- commerce website in Laravel and Vue js??? That would be very useful for us.

[findubk]

If got error try this with new version

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
.card {
@apply bg-white rounded overflow-hidden shadow-md relative;
}
.badge {
@apply bg-secondary-100 text-secondary-200 text-xs uppercase font-bold rounded p-2 absolute top-0 ml-2 mt-2;
}
.image {
@apply w-full h-32 sm:h-48 object-cover;
}
}

[Shakeel]

Learning a lot from you. Thanks a lot.

[behnamaboutalebi]

one question about where you place the @apply directives. Shouldn't they be placed before @tailwind utilities? Cause I think declaring them after tailwind utilities will overwrite the possibility to apply utility classes to your custom-defined classes. i.e it won't be possible to override classes used in card definition when you use them

[Hypersz]

try this if you got an error
/* fixes error */

@layer components {
.card {
@apply rounded bg-white border-gray-200 shadow-md overflow-hidden relative;
}

.badge {
@apply absolute top-0 ml-2 p-2 mt-2 bg-secondary-100 text-secondary-200 text-xs uppercase font-bold rounded-full;
}
}

[snookems]

I ran into some problems with the card. bg-white rounded overflow-hidden shadow-md relative. It shows me an error on rounded.

[wsthankyou]

So... In your Opinion... What's the best way to go? To use on building a website. Traditional CSS... Sass... or Tailwind??? To have a good solid structure.

[jaideepnalluri]

Can we use @apply directive in react to prevent tideous correction in react apps