Create Custom Utility Classes in Tailwind

Share this video with your friends

Send Tweet
Published 5 years ago
Updated 3 years ago

In this lesson, we learn how to generate custom utility classes in tailwind. We add new properties to our JavaScript config object to generate new helper classes to suit our needs.

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.

whisher
whisher
~ 4 years ago

Hi there, following your course

padding: {
    px: "1px",
    "0": "0",
    "1": "0.25rem",
    "2": "0.5rem",
    "3": "0.75rem",
    "4": "1rem",
    "6": "1.5rem",
    "8": "2rem",
    "16": "4rem",
    crazy: "8rem"
  },

than run gulp

there is no class

named py-crazy or py-16 in the styles.css

btw the styles.css is about 412kb :O

Kevin
Kevin
~ 4 years ago

Yeah, unfortunately updating tailwind.js and running the gulp command is not generating the new custom css classes.

Simon Vrachliotis
Simon Vrachliotisinstructor
~ 4 years ago

If nothing is updating, there is probably an issue with the gulpfile. @Kevin and @wisher, can you put your gulpfile code on a git repo or gist so I can take a look?

Sorry about the late reply, I totally missed the email notifications and only see this now!

Kevin
Kevin
~ 4 years ago

@Simon here's a gist to the gulpfile.

https://gist.github.com/klufkin/2dc29fa9b2cf484b04080bdfbcbaafe5