This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Create Custom Utility Classes in Tailwind

    Simon VrachliotisSimon Vrachliotis

    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.

    tailwindTailwind
    cssCSS
    Code

    Code

    Become a Member to view code

    You must be a 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
    Transcript

    Transcript

    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.

    Discuss

    Discuss