‫In this video, we're gonna learn how
‫we can reuse some styles using Tailwind's Apply directive.
‫So basically using Apply, we can create an old school class
‫by composing many Tailwind classes together.
‫So let me show you what I mean by that.
‫So let's come here to our index.css file.
‫And so here we have all this stuff that we actually
‫no longer need, but this loader we will actually need.
‫So we will keep this one here.
‫So here again, we already have these base components
‫and utilities, which is not really important what they do.
‫But now let's create a new so-called layer,
‫which is called components.
‫So in Tailwind we can create a few
‫of these different so-called layers
‫and if you want to learn more about that,
‫then as always, you can check out the documentation
‫'cause in practical terms, that's not really important.
‫What matters is that in here we can now create
‫some new classes and so let's now create the input class.
‫So just like this,
‫and now what I want to do is to copy all of this.
‫So all of these different Tailwind classes, I will cut them
‫and then here we can write, apply, past all of that here,
‫give it a save
‫and now this input class is basically composed
‫of all these Tailwind classes
‫and so I can now replace this here simply with input.
‫So when I give it a save,
‫then it still looks exactly the same as before.
‫And so let's do the same here.
‫So class name of input, and also right here.
‫So input and beautiful.
‫So we have the same styling here now
‫in all these three input fields.
‫So again, simply by composing all these Tailwind classes
‫together into this one new input class.
‫So this looks really nice and helpful, right?
‫But that doesn't mean that we should start using
‫this technique all over the place now
‫because basically if we started to doing this
‫for all our elements,
‫then we would simply go back to writing CSS
‫in the old school way.
‫So being back to writing classes and then applying
‫those classes, so that's what we did before
‫and so then there would be no point
‫in using Tailwind in the first place.
‫So this should really be treated
‫as an exception here when there are so many classes
‫that we are using all at the same time, like this year
‫and when we do not want to create a new component
‫because the actual better solution would be to reuse
‫all of this by creating a React component.
‫So for example, creating an input component
‫which we could then reuse here
‫in all these different places, which is actually
‫what we're going to do in the next video for our buttons.
‫So again, keep in mind that this way of creating new classes
‫by composing many other classes together with Apply
‫should really be the exception and not the rule
‫because with this, we are throwing out of the window
‫all of the advantages that Tailwind actually gives us.
‫Well, maybe not all of them,
‫but surely many of the advantages.
‫But of course, I still wanted you to know
‫about this technique because it is still
‫an important technique that you might see used
‫in Tailwind in some situations.
‫But now in the next lecture,
‫we will actually reuse some other styles.
‫So in particular this button here.
‫So all of this year we will try to reuse this
‫using React components which is indeed the better way
‫of reusing styles.