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

Already subscribed? Sign In

Autoplay

    Customize Tailwind’s Naming Convention for Generated Utility Classes

    Simon VrachliotisSimon Vrachliotis

    In this lesson, we look at the “prefix” and “separator” options, that let you customise the naming convention for your utility classes, which can be useful to avoid naming collisions or incompatibilities with specific templating languages.

    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

    Instructor: 00:00 Sometimes, you might be using Tailwind alongside another CSS code base. You might run into cases where a class name, like text-white here, might clash with another existing class name.

    00:12 To avoid such problems, Tailwind allows you to add custom prefix to all your generated utility classes. Since I like to think of utility classes as Lego blocks, I'll use Lego, dash, as my prefix.

    00:24 All the styles should be broken now, as the generated class names have changed. Let's quickly add our Lego prefix to all the classes. Here we go. Whoops, we missed one on the padding for...

    00:37 Viola, all our styles are back in place. Same goes for the separator -- that is placed between a hover, responsive prefixes, and the class names. Let's change that to double underscore, and we can now change the separator in the class names in our HTML.

    00:53 Note that the custom prefix comes after the responsive prefix. Here, we have md, which is our responsive prefix, then a double underscore, which is a separator, then a custom prefix of Lego, and then finally the class name.

    Discuss

    Discuss