Prose: when you use prose, how can you ensure p in app css also works

[in-sg]

I have a sveltekit app using tw and tw typography.
in my app css i have p defined.
when i use prose, prose size modifiers don't work. It seems auto set to prose-lg. The only way to set is to use css and !important. But that defeats the purpose of both tw and prose. how can i get prose-base to work?

[psupra22]

Fix without !important

1. Scope your global p styles
   Instead of p { … } in app.css, do something like:

/* app.css */
body > p {
  /* or use a class on your layout wrapper instead of global */
}

This ensures your custom p rules don’t override .prose p.

2. Lower precedence of global styles
   In SvelteKit with Tailwind, app.css usually gets included last. If you move your custom CSS before Tailwind’s layers, Tailwind will win:

/* app.css */
@layer base {
  p {
    @apply text-base leading-relaxed; /* this still cooperates with prose */
  }
}

3. Only use Tailwind utilities
   Instead of raw CSS:

/* bad */
p { font-size: 1rem; }

You can:

<p class="text-base leading-relaxed">

Or set defaults with @apply in @layer base. This keeps everything in Tailwind’s cascade, so prose-base, prose-lg, etc. continue to work.

Practical Fix
In app.css, change:

p {
  font-size: 1rem;
  line-height: 1.5;
}

to:

@layer base {
  p {
    @apply text-base leading-relaxed;
  }
}

[in-sg]

Hey psupra22,

Thank you for the excellent advice! Your suggestions, especially about using @layer base, were the key and put me on the right track to solving this.

Sharing the final solution, as there was one BIG mistake in my app.css. My global p styles were already in the base layer, but were too specific. Thus the prose size modifiers weren't working.

This was my rule in app.css:

CSS

@layer base {
p {
@apply text-base sm:text-lg font-normal ...;
/* The text-base and sm:text-lg were the problem */
}
}

The responsive sm:text-lg utility was causing a conflict with the prose classes on larger screens.

When i removed all font-size utilities from my default p style in the base layer, everything worked as intended.

Final app.css rule:

CSS

@layer base {
p {
@apply font-normal ...;
/* No more text-base or sm:text-lg */
}
}
Now prose-sm, prose-base, and prose-lg all started working perfectly.

Thanks again psupra22 for your help! Your advise pointed me in the right direction - and I could IDENTIFY what I was doing WRONG. Highly unlikely that someone else is making the same mistake... but hope this helps someone else who runs into the same issue.

[in-sg]

Thanks again!