Customize Tailwind’s Naming Convention for Generated Utility Classes
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.
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.