Tailwind CSS Tutorial #11 - @apply Directive

Key Takeaways

all right then gang so we've seen now how to make a card and a badge component with these Tailwind classes but they do use a lot of classes and if we wanted to make multiple cards or multiple budgets we'd have to use all of these classes on each one we created now imagine as well if we wanted to change the style of a card then we'd have to change it in every place that we have a card and the same would be true for badges so that's not a great idea and it's also looking a bit messy as well so instead it would be nice if we could extract these different classes into an external selector using some nifty tailoring syntax and we can do so what I'm going to do is open up my CSS file over here in the source folder and I'm going to create a selector for card so anything with the class of card now if I want to use all of the same classes for this selected that we have defined in our HTML for a card right here we can do that using a directive called apply like so now the apply directive is a little bit like a mixing in sass and we can nest it in a custom selector to apply other classes to it so what we need to do is grab all of these classes right here and cut them from here and paste them after apply over here now anything with a class of card is going to look at that and it's going to apply all of these classes to it so all I need to do now is give this a class of card and we have a reusable component which we only have to update over here and not in every place we create a card now that's a bit better and it's also much tidier - it becomes much more reusable so let's do the same thing for the badge let's make another selector called batch and then in here we need apply and then we grab all of the different classes we use which is all of this stuff all right here cut those and paste them over here and then we can save this and come back over here and give this a class of badge instead now because we changed this file over here the source styles we have to run the build again to rebuild the CSS so let's do that at the bottom we see NPM run build - CSS that built it for us now if we preview we should hopefully see no difference because it's still applying all of the same classes it's just that we've extracted those into styles or CSS instead so they're not over here so let's preview and we do see exactly the same even if we refresh so that has worked okay so now we have that well let's add a few more cards I'm going to grab this thing over here and I'm gonna paste it down here two times and I'm going to change this from stew to noodles because we have a noodles JPEG image over here change this to noodles as well and let's change this to veg noodles and then down here I'm going to change this it's a curry this to curry and then finally this to soul through curry alright save that and preview and now we can see three of these cards cool so that is much better now we no longer have all of the classes defined right here inside the HTML well we have a lot of classes that we're using over and over in different places in that case it makes sense to extract all of those into a custom selector and we can apply them using the apply directive