Is there a way to wrap generated Tailwind classes under a root class?

Question

I would like to wrap the generated Tailwind utility classes with a class to prevent them from bleeding into consumer stylesheets, like this:

.root {
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
  @tailwind variants;

 .exampleClass { }
}

{children}

However, this does not work.

Could you please give me some advice to solve the issue? Thanks in advance.

user_287476 · Answer

One solution is to add a prefix in tailwind.config.js:

module.exports = {
  prefix: 'tw-',
}

This would make it so that the Tailwind utility classes can only be referenced if the prefix is added, e.g. tw-m-2, which should (hopefully) prevent any conflicts with the other site styles.

For more details, see: https://tailwindcss.com/docs/configuration#prefix

Is there a way to wrap generated Tailwind classes under a root class?

1 Answers