Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Create Custom Utility Classes in Tailwind


    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.



    Become a Member to view code

    You must be a Pro Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    orLog In




    Man 1: 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.

    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.

    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?

    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.

    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.

    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.