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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!