Instructor: 00:00 I have a default tailwind config file which gets processed via Gulp every time the CSS file changes. I also have an index.html file that has a reference to the compile CSS as well as a button composed of tailwind utility classes.
00:14 Say I want a pink button now. I could copy and paste this button element and change the colors to pink. There we go. Let's make one more button but give it a teal background. It's pretty obvious we have a lot of repetition going here. This is not going to scale too well if we have, say, 500 buttons in our application.
00:33 In my style.css file, I'll create a button class. In there, I will use at apply, a custom directive provided by tailwind, and combine utility class together within that class. The hover state classes need to be applied separately. I can now replace all these classes with the button class in my HTML.
00:56 Let's quickly add these two margin classes that I forgot. I use them in this example so my buttons spread out properly, but in general, I recommend leaving margins outside of your component pattern. Let's refresh our page. The button still works.
01:10 Let's replicate this base button a couple of times. We'll create modifier classes for our colors, button--pink and button--teal. In my stylesheet, I will create these classes and apply the right background colors to them. Give that a save. It still works.
01:31 Let's create some more modifiers for the button corners. Button--peel will have the rounded-full class, and button square will have rounded none. Let's create buttons with these classes in our HTML quickly, button peel here and button square here. Give that a save. Whoops, almost there, we must have a typo in our CSS class. Yep, let's fix that.
02:02 Voila! We are now writing bam style components while enforcing the decisions made in the tailwind config file.