sveltejs / sveltejs/kit

tailwindcss css output don't being putted inside ./package/

Open
#8,709 9 comments 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

documentation pkg:svelte-package
Dominant language
JavaScript
Stars
20.8k
Forks
2.3k
Avg merge
1d 16h
Merged PRs (30d)
156

Description

Describe the bug

basically, I was creating a simple library with sveltekit and using tailwindcss. the problem is when I do "npm run build" it creates the files correctly but when i do npm install of the same file. the component don't have any CSS applied to it.

Reproduction

my npm package: https://www.npmjs.com/package/mathview-svelte
my GitHub repo: https://github.com/Laaouatni/MathViewSvelte

example of the error: https://svelte.dev/repl/39421699a03f4717a74e6665f7055eff?version=3.55.1

what should output:
image

what is wrong:

image

another info is that tailwind works fine in dev mode "npm run dev", but when build don't work fine.

how make also the css being exported with the component library?

System Info
System:
    OS: Windows 10 10.0.22621
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz
    Memory: 1.04 GB / 7.65 GB
  Binaries:
    Node: 16.14.0 - C:\Program Files\nodejs\node.EXE
    npm: 9.3.1 - C:\Program Files\nodejs\npm.CMD    
  Browsers:
    Edge: Spartan (44.22621.1105.0), Chromium (109.0.1518.55)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @sveltejs/adapter-auto: ^1.0.0 => 1.0.2
    @sveltejs/kit: ^1.0.0 => 1.2.6
    @sveltejs/package: ^1.0.0 => 1.0.2
    svelte: ^3.54.0 => 3.55.1
    vite: ^4.0.0 => 4.0.4
Severity

annoyance

Additional Information

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked MathViewSvelte reproduction and compare the files produced by npm run build with the installed package output. Check how the SvelteKit package build handles Tailwind CSS assets, then verify the fix by installing the built package and confirming the component's CSS is applied.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, tailwindcss, vite
Domain
build-system, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.