Prefix only certain classes

[garygreen]

Following on from the recent addition to the prefix option where you can specify a prefix for all classes - it would be nice to be able to list what classes should be prefixed:

prefix: {
   'container': 'tw-'
},

Reason for this suggestion is because the main reason why you use the prefix option is to avoid collisions with whatever framework e.g. Bootstrap that you are using. It seems wasteful to prefix every single classname when there is probably only a 5% collision of names with your current framework.

This will help reduce size of your output CSS and simplify the classnames you need to type.

Another idea, maybe some kind of "mutator" function that will be called when classes are being added to your CSS?

tailwind.addTransformer(function(css) {
    if (css.selector == '.container') {
        css.selector = 'tw-container';
    }

    return css;
});

[adamwathan]

Interesting idea; I don't think I want to go so far as to introduce anything crazy like "transformers" or anything, but I wouldn't be opposed to allowing the prefix configuration option to be a function for folks who want to do more complex stuff.

For example:

{
  // ...
  // 
  options: {
    prefix: function (selector) {
      if (selector == '.container') {
        return '.tw-container';
      }

      return selector;    
    },
    important: false,
    separator: ':',
  },
  
  // ...
}

Would be a pretty simple PR I think.

[adamwathan]

Closed by #367

[jangxyz]

Four years later, I was looking for the exact same feature and arrived here (ironically for the exact same reason: .tw-container).

However, this feature has been deprecated since v3.0. It is noted in the document(#prefix-cannot-be-a-function) and also shows warnings when ran.

warn - As of Tailwind CSS v3.0, `prefix` cannot be a function.
warn - Update `prefix` in your configuration to be a string to eliminate this warning.
warn - https://tailwindcss.com/docs/upgrade-guide#prefix-cannot-be-a-function

Just leaving a note here so anyone who comes here by googling can see that this does not work any longer. DO NOT USE THIS METHOD.

[K-Thompson]

See this discussion for a fix.

[ampedweb]

Yep. I missed these last few comments, and again was just trying to prefix .container specifically as this is the only conflict I can see with our current CSS.