question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. ItΒ collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

"npx svelte-add postcss" (or tailwindcss) fails with "The configuration file could not be found"

See original GitHub issue

On latest sveltekit, getting the following errors when trying to use svelte-add to add tailwindcss or postcss.

npx svelte-add tailwindcss --jit
Need to install the following packages:
  svelte-add
Ok to proceed? (y) y
[ info ]  Applying preset svelte-add/tailwindcss.
[ error ]  The configuration file could not be found (tried in /var/folders/j4/3_1h9_mn6w5g4p438nym2vl40000gn/T/tmp-12200-fEh58kp9FH25).

This was talked about in Discord but I could not find a ticket so I’m reporting here. Hopefully this is the right place to report!

System info:

npx envinfo --system --npmPackages svelte,rollup,webpack --binaries --browsers

  System:
    OS: macOS 11.2
    CPU: (8) arm64 Apple M1
    Memory: 84.34 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.3.0 - /var/folders/j4/3_1h9_mn6w5g4p438nym2vl40000gn/T/fnm_multishells/9404_1623953947746/bin/node
    npm: 7.15.1 - /var/folders/j4/3_1h9_mn6w5g4p438nym2vl40000gn/T/fnm_multishells/9404_1623953947746/bin/npm
  Browsers:
    Brave Browser: 91.1.25.72
    Chrome: 91.0.4472.106
    Safari: 14.0.3
  npmPackages:
    svelte: ^3.34.0 => 3.38.2 
npm ls
β”œβ”€β”€ @sveltejs/kit@1.0.0-next.115
β”œβ”€β”€ @typescript-eslint/eslint-plugin@4.27.0
β”œβ”€β”€ @typescript-eslint/parser@4.27.0
β”œβ”€β”€ eslint-config-prettier@8.3.0
β”œβ”€β”€ eslint-plugin-svelte3@3.2.0
β”œβ”€β”€ eslint@7.28.0
β”œβ”€β”€ prettier-plugin-svelte@2.3.0
β”œβ”€β”€ prettier@2.2.1
β”œβ”€β”€ svelte-check@2.1.0
β”œβ”€β”€ svelte-preprocess@4.7.3
β”œβ”€β”€ svelte@3.38.2
β”œβ”€β”€ tslib@2.3.0
└── typescript@4.3.3

Repro:

npm init svelte@next myapp
cd myapp
npm i
npx svelte-add tailwindcss --jit # or just npx svelte-add postcss

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:9 (3 by maintainers)

github_iconTop GitHub Comments

3reactions
babichjacobcommented, Jun 18, 2021

It sounds like npx is using an old version of the package (maybe because of an npm audit problem). Other people have reported problems that occur for the same reason.

I do not know whether or not it works to do npx svelte-add@latest instead of just npx svelte-add, but try that and let me know if it does, please.

Otherwise, you can find the latest version of the package at https://github.com/svelte-add/svelte-add/tags and ensure npx uses it like npx svelte-add@2021.06.15.01

1reaction
babichjacobcommented, Jun 19, 2021

Those are not the right ways to write it:

npx svelte-add@latest tailwindcss and npx svelte-add@2021.06.15.01 tailwindcss.

Read more comments on GitHub >

github_iconTop Results From Across the Web

PostCSS configuration was not passed or is invalid Β· Issue #470
Describe the bug I have an issue when I'd like to use the tailwind @apply syntax within a Svelte template: It works without...
Read more >
Installation - Tailwind CSS
The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool.
Read more >
Error: PostCSS plugin tailwindcss requires PostCSS 8
I tried to uninstall postcss and tailwindcss but it does not work. Need help. Module build failed (from ./node_modules/postcss-loader/src/index.
Read more >
How to Set Up SvelteKit with Tailwind CSS
A quick 3 step guide for myself on how to set up Svelte with Tailwind CSS. Tagged with svelte, tailwindcss, javascript.
Read more >
How to Use Tailwind on a Svelte Site | CSS-Tricks
Autoprefixer is a PostCSS plugin that goes through your code adding vendor prefixes to your CSS rules (Tailwind does not do thisΒ ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found