Sveltekit package with Tailwind styles

Question

I'm trying to create a package of Svelte components using the svelte packaging library (the one you can set up with npm create svelte@latest and choosing svelte library. I then add tailwind following tailwind's guide https://tailwindcss.com/docs/guides/sveltekit.

The issue is, when I run npm run build to create my package, the utility classes aren't being converted into css. Interestingly enough, any styles I add to the a style tag using the @apply syntax does.

Can anyone help explain what's going on? Is this a preprocessing issue? Am I fundamentally misunderstanding something about how tailwind works?

For more detail, here's a small repository I made to illustrate the point: https://github.com/awenzel5/sveltekit-package-tailwind

It has a component in the src/lib folder that's simply

<h1 class="text-2xl">Hello</h1>
<h1 class="small-text">World</h1>

<style lang="postcss">
    .small-text{
        @apply text-sm;
    }
</style>

After running npm run build, this builds into

<h1 class="text-2xl">Hello</h1>
<h1 class="small-text">World</h1>

<style>
    .small-text {
    font-size: 0.875rem;
    line-height: 1.25rem
}
</style>

As you can see, the @apply class worked and grabbed the css from tailwind, however the text-2xl class on the first h1 did not.

Any ideas are appreciated.

Answer 1

I've recently run into the same issue. You need to tell TailwindCSS where to look for your utility classes. I've solved this by using Flowbite-Svelte's solution.

Let's say you have two packages: awesome-ui and awesome-app. Your awesome-ui package is already published on npm and installed in awesome-app.

In your awesome-app/tailwindcss.config.js file, you need to make sure that contents also includes the path to your installed awesome-ui package:

// ./awesome-app/tailwindcss.config.js

content: [
    './src/**/*.{html,js,svelte,ts}',
    './node_modules/awesome-ui/**/*.{html,js,svelte,ts}'
],

For more details see:

https://flowbite-svelte.com/docs/pages/quickstart#Configuration

https://github.com/shinokada/flowbite-svelte-starter/blob/main/tailwind.config.cjs

https://tailwindcss.com/docs/content-configuration#working-with-third-party-libraries