SvelteKit Tailwind’s layers src: url | skeleton v2 & v3 | SvelteKitError: Not found: /assets

[Bimbimz]

Current Behavior

app.css

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@layer base {
    @font-face {
        font-family: 'Tes';
        src: url('./assets/font/Tes.ttf');
    }

    body {
        font-family: 'Tes';
    }
}

Result: SvelteKitError: Not found: /assets/font/Tes.ttf

Expected Behavior

No response

Steps To Reproduce

app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    @font-face {
        font-family: 'Tes';
        src: url('./assets/font/Tes.ttf');
    }

    body {
        font-family: 'Tes';
    }
}

Link to Reproduction / Stackblitz

https://tailwindcss.com/docs/installation

More Information

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

to be:

@tailwind base;
@tailwind components;
@tailwind utilities;

changing this will fix it, is this behavior normal?

[endigo9740]

@Bimbimz can you share how you installed and setup Skeleton and/or Tailwind that resulted in the invalid directives like this? These are definitely invalid.

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

If you're using Skeleton v2, we provide a CLI tool that should auto-implement the directives for you correctly.

If you're using Skeleton v3, our install instructions install Tailwind using Svelte-Add, which again should handle this properly.

SvelteKitError: Not found: /assets/font/Tes.ttf

I wasn't clear if this was a separate issue - but can you verify you have font files within this path in your application?

[Bimbimz]

@Bimbimz can you share how you installed and setup Skeleton and/or Tailwind that resulted in the invalid directives like this? These are definitely invalid.

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Of course, I did as it was in the document. I skipped this ~Create Your Project~ because I had a project, and did the next step which was: Install Skeleton

pnpm i -D @skeletonlabs/skeleton @skeletonlabs/tw-plugin
or 
pnpm i -D @skeletonlabs/skeleton@next @skeletonlabs/skeleton-svelte@next

and next: Install Tailwind I know by doing this step, my project should not have/should not have tailwind installed previously, because the skeleton has its own version.

pnpx svelte-add@latest tailwindcss
or
pnpx svelte-add@latest tailwindcss --tailwindcss-typography false

and yes tailwind.config.js already in the project without run npx tailwindcss init. but i have src/app.css which is automatically filled in it

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

I wasn't clear if this was a separate issue - but can you verify you have font files within this path in your application?

Of course

NB: I created a project with vite js with svelte option.

[endigo9740]

and next: Install Tailwind I know by doing this step, my project should not have/should not have tailwind installed previously, because the skeleton has its own version.

Just so we're clear, Skeleton is made up of two parts:

• @skeletonlabs/skeleton@next - the core library that contains a Tailwind -plugin-
• @skeletonlabs/skeleton-svelte@next - a library of Svelte components

We do not bundle Tailwind itself. That is always a separate dedicated installation process. We recommend Svelte-Add because it's mostly plug-and-play. It does a few things:

1. Installs the Tailwind dependency
2. Adds and configures your tailwind.config
3. Implements an app.pcss global stylesheet (note: the extension may differ)

The global stylesheet that this implements should come with the required Tailwind directives in place.

So if you can confirm you used Svelte-Add and received the directives in that format, then I'll aim to test the the install process and see if they've updated something that would break this. That would likely be a bug we would need to report upstream to them (we're not directly affiliated with the Svelte-Add team)

[endigo9740]

Also @Bimbimz just FYI we've received notice of a bug within the dependencies for our most recent release of Skeleton v3. You may encounter this when you start importing Skeleton components:

Cannot find module '@zag-js/accordion' imported from 

We have a fix in place and will be aiming to roll out a new version sometime tomorrow.

[Bimbimz]

and next: Install Tailwind I know by doing this step, my project should not have/should not have tailwind installed previously, because the skeleton has its own version.

We do not bundle Tailwind itself. That is always a separate dedicated installation process. We recommend Svelte-Add because it's mostly plug-and-play. It does a few things:

1. Installs the Tailwind dependency
2. Adds and configures your tailwind.config
3. Implements an app.pcss global stylesheet (note: the extension may differ)

yes that's what I mean by the word (its own version). installing with its own version settings (not a modified third party version). I haven't installed tailwind and use:

pnpx svelte-add@latest tailwindcss
or
pnpx svelte-add@latest tailwindcss --tailwindcss-typography false

to avoid conflicts with pre-existing (tailwind.config etc) changes

[endigo9740]

@Bimbimz I've reviewed this with the team and we tested a new project using Svelte-Add. Sure enough we're getting this format for the Tailwind directives:

However, I've now learned this is valid - just a new format that Tailwind is migrating towards: https://tailwindcss.com/docs/functions-and-directives#config

So those are valid and you should not need to change. In fact I'd suggest rolling back to this format.

Currently we believe the issues lies within the font configuration itself. The issue may actually exist for either directive configuration, but it's being suppressed when you use the older @tailwind directive approach. It's should be easy to confirm this by reviewing your app and ensure the font actually renders or not. I'd expect it to fail as is.

That said, we've noted you're referencing your font from this path:

src: url('./assets/font/Tes.ttf');

However this would be incorrect. Unlike Vite (which uses /assets), SvelteKit instead uses a /static directory for this purpose. However, you do not reference this when linking your path though:

src: url('/font/Tes.ttf');

So /fonts/Tes.ttf would actually be referencing a file located in: <root>/static/fonts/Tes.ttf

If you can please make both corrections and see if that helps.

[endigo9740]

I'm going to go ahead and close this since there's not been a response in a while. I'm happy to reopen if the issue persists.