Class collision detection

[sashuk]

Let's imagine that Tailwind configuration uses two presets – @abc/preset-a and @abc/preset-b.

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [
    /* default Tailwind configuration */,
    require('@abc/preset-a'),
    require('@abc/preset-b'),
  ]
}

The @abc/preset-a configuration

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        red: { 100: 'red' },
        green: { 100: 'green' }
      }
   }
}

The @abc/preset-b configuration

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        blue: { 100: 'blue' },
        green: { 100: 'MediumSeaGreen' }
      }
   }
}

Due to the order of presets in Tailwind configuration, the final classes will be

.bg-red-100 { background-color: "red" }    /* comes from @abc/preset-a */
.bg-blue-100 { background-color: "blue" } /* comes from @abc/preset-b */
.bg-green-100 { background-color: "MediumSeaGreen" } /* comes from both presets, but @abc/preset-b version wins */

---

As an developer, I would like to be notified when such collision happen. As an example, it could be a key in configuration or list of presets that are not allowed to override each other.

/** @type {import('tailwindcss').Config} */
module.exports = {
  throwErrorOnClassCollision: true,
  /* or */
  forbidOverridesInPresets: [ ... ], 
  presets: [ ... ]
}

---

What do you think about this feature?

Preset prefixes can be used, but they require change of class names inside of components that rely on preset.