Create Custom Utility Classes in Tailwind

Man 1: [00:00] I have a simple paragraph section styled with Tailwind. We apply a padding vertical as well as a light purple background. We also have a container with some padding horizontal. The text within the section has also some Tailwind classes.

[00:12] Let's focus for a minute on this padding vertical eight. If we look at our Tailwind config file, we have this padding object that contains a range of key value pairs which define what utility classes we have at hand. The way the padding class names are constructed is like so, p for padding followed by an optional side modifier, l for left, t for top, x for horizontal.

[00:35] Then, we have a dash separator and a size value. Each property in the padding object will define a size and generator class. If we look back at our py-8, you should now understand that it will apply a padding horizontal of the size eight, which is 2rems here. What happens if we want a padding that's bigger than the biggest value available?

[00:56] All you need to do is create a new key value pair in this padding object. Let's add an increment of 16 and give it a value of 4rem, which follows the current scale. You're not restricted to anything, though. Say you want some crazy big padding, You can totally name your size "crazy," and let's give 8rem to this one.

[01:14] Here, I could have a class of px-crazy, which will apply 8rem of padding left and right. I'll quickly recompile the Tailwind config file with gulp, and now, let's try to change this to -16. Here we go, we can see the padding doubled. Let's try py-crazy, and yep, it works.

[01:33] Tailwind has generated a bunch of utility class for us. I can use pt-crazy to only apply padding to the top. Same deal with padding left. That's it. This is how simple it is to generate new, easy-to-memorize utility classes in Tailwind through the JavaScript config file.