v4 Prose customization - plugins @layer

[fcrozatier]

Motivation

In v4 I'd like to both:

1. override some default css of the typography plugin and
2. be able to use utilities for one-off modifications

The problem is that currently we can't do this properly: I can override the default styles by using unlayered selectors or layering them in utilities

@import "tailwindcss";
@plugin '@tailwindcss/typography';

:where(.prose) {
 & p {
    @apply text-red-500;
 }
}
/* or  */
@layer utilities {
  :where(.prose) {
    & p {
       @apply text-red-500;
    }
   }
}

But then to override this for one-off modifications I have to use the !important modifier

<article class="prose">
  <p class="text-orange-500!">Lorem</p>
</article>

Workaround

I can fix this if I use the prose gist by importing it in a plugin layer with lower priority than utilities

@layer base, theme, components, plugin, utilities;

@import "tailwindcss";
@import "./prose.css" layer(plugin);

@layer plugin {
  .prose {
    & p {
       @apply text-red-500;
    }
   }
}

Then I can make one-off modifications with utilities without the !important modifier

Solution

It would be great to have a plugin layer with lower priority than utilities where the @plugin directive would import by default, to be able to both override the defaults and still be able to use utilities without the !important modifier

[philipp-spiess]

@fcrozatier Heya! I am not quite sure what you're trying to do here. In the code example it seems like you're extending the typography module at two places:

• Inside app.css via CSS
• Inside +page.svelte via a custom utility

The CSS you're adding is not within any layer and since we put the utilities created from the plugin inside the utilities layer, you'll need to put your CSS overwrite in the same layer otherwise it will take over all Tailwind utilities.

You have code for this in your example where you're saying you need !important for it to work but I don't use any important styles yet the text is blue.

[fcrozatier]

Good to see the prose plugin is now imported in the utilities layer. (I wouldn't have opened this if my own code worked ^^)

Thanks for the fix!