[v4] Enable non-layered addition of CSS to plugins

[zoltanszogyenyi]

When creating plugins we use addBase, addComponents etc.

It's important that we are able to add styles outside of the layered constraints of Tailwind CSS.

One use case is that specificity will be low within any layer from Tailwind compared to an outside library, such as ApexCharts.

Example:

addComponents({
  '.apexcharts-canvas .apexcharts-tooltip': {
    backgroundColor: 'white',
    color: `${theme('colors.gray.500', colors.gray[500])}`,
    border: '0 !important',
    borderRadius: `${theme(
        'borderRadius.DEFAULT',
        borderRadius.DEFAULT
    )}`,
    // padding: `${theme('spacing.3', spacing[3])}`,
    boxShadow: `${theme('boxShadow.md', boxShadow.md)}`,
  }
});

So here we are overriding some styles from the parent ApexCharts library as we have included their CDN, but we can't override them via the plugin at all because they are added to the utilities layer which by definition has lower specificity than the normal CSS.

Current working use case in v3: https://flowbite.com/docs/plugins/charts/

[charlesdeb]

Did you solve this? I have a similar problem writing a wordpress plugin. I want to over-ride some of the styles in WordPress with Tailwind styles - but because tailwind styles are in an @layer, they have lower precedence than the styles in the WordPress stylesheet that are in an anonymous layer - which have higher precedence than styles in an @layer.

[adamwathan]

I would just use a CSS file for all this stuff, why does it need to be a plugin?

[charlesdeb]

I am writing a WordPress plugin, and to make it look pretty, I want to use Tailwind styling in both the admin area, and the user-facing area. Therefore, the pages will have a mixture of built-in WordPress styles as well as tailwind generated styles.

I was trying to figure out why this code of mine:

<h2 class="tw:text-red-900">Foo</h2>

Was not setting the text to red, since usualy class definitions would take precence over element definitions. WordPress already has a style telling h2 to be black in an anonymous layer, and the TailWind styling stuff is built into the utilities layer:

@layer utilities {
  .tw\:text-red-900 {
    color: var(--twww-color-red-900);
  }
}

I think it's because the styles in WordPress' anonymous layer takes precedence over this utilties layer.

I can't be the first person to have this issue (BTW, I'm using v4.0beta8) but I can't see an obvious reference to it in the issues or discussions - other than in this discussion. Hopefully I've missed something super-obvious... (I have a face-plant emoji ready to use!)

[charlesdeb]

My work-around at the moment is to use the ! directive, but peppering my code with !important doesn't feel like the right solution here...