Create Custom Utility Classes in Tailwind

Share this video with your friends

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.

whisher

~ 7 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

~ 7 years ago

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

Simon Vrachliotis(instructor)

~ 7 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

~ 7 years ago

@Simon here's a gist to the gulpfile.

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