Font-size classes have no effect on `<p>`

[troldtog]

Current Behavior

When working with a project generated from the Skeleton CLI, Tailwind's font-size classes have no effect on the size of text in p or div elements. They work fine when applied to span and a.

Steps To Reproduce

1. Create a new Skeleton project from the CLI 1a. TypeChecking with TypeScript? Yes, with typescript syntax 1b. ESLint, Prettier, Playwright, vitest? No. (Have also reproduced when creating a project where I answered yes to these four) 1c. SvelteKit-Experimental Inspector? No. 1d. Tailwind Plugins? No. (Have also opted-in to typography and forms and still reproduced) 1e. Skeleton theme. 1f. Welcome template. See https://github.com/troldtog/skeleton-bug-demo for a ready-to-use repo with this problem

2. Add this somewhere in +page.svelte (or in an unused AppShell slot in +layout.svelte, I found this when trying to add a small-font footer):

   <div class="grid grid-cols-2 gap-4">
      <p class="text-xs">This should be  tiny</p><p><span class="text-xs">This is  tiny</span></p>
      <p class="text-sm">This should be small</p><p><span class="text-sm">This is small</span></p>
      <p class="text-lg">This should be large</p><p><span class="text-lg">This is large</span></p>
      <p class="text-xl">This should be giant</p><p><span class="text-xl">This is giant</span></p>
   </div>

3. npm run dev and view

   

Anything else?

Creating a new SvelteKit project and adding tailwind manually doesn't run into this problem, so I'm thinking it must be something to do with Skeleton, but am new enough to Tailwind, Skeleton and Svelte that I'm not sure where to look from here.

[Sarenor]

The solution is to prepend a ! to your text-xl classes like so: !text-xl.

That's currently the only way to make sure that manually added tailwind classes take priority over the tailwind classes applied to typography elements by Skeleton.

[troldtog]

Thank you! I must have sailed past that part of the docs at least twice (found it now), so I was really confused for a while and appreciate you pointing me in the right direction.