Closed9

SvelteKit + TailWindCSSに入門

koinorikoinori
$ npx svelte-add tailwindcss --jit
➕ Svelte Add
The project directory you're giving to this command cannot be guaranteed to be fresh. If any issues arise after running this command, please try again, making sure you've run it on a freshly initialized SvelteKit or Vite–Svelte app template.

tailwindcss
file:///home/pi/.npm/_npx/76ab19934dff27c3/node_modules/svelte-add/index.js:310
                reject(new Error(body));
                       ^

Error: npm WARN deprecated debug@4.2.0: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)
npm ERR! process terminated
npm ERR! signal SIGTERM

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/pi/.npm/_logs/2021-06-07T13_28_03_473Z-debug.log

    at Socket.<anonymous> (file:///home/pi/.npm/_npx/76ab19934dff27c3/node_modules/svelte-add/index.js:310:10)
    at Socket.emit (node:events:406:35)
    at endReadableNT (node:internal/streams/readable:1329:12)
    at processTicksAndRejections (node:internal/process/task_queues:83:21)

というわけでなんかエラー

https://github.com/svelte-add/svelte-add
https://github.com/svelte-add/tailwindcss

本家のREADMEに従ってみる。

koinorikoinori

どうも既にインストール済みだった模様。忘れていたなんて。。

koinorikoinori

以下の修正で動いたっぽい。

src/app.postcss
@tailwind base;
@tailwind components;
@tailwind utilities;
src/routes/__layout.svelte
<script>
    import "../app.postcss";
</script>
  
<slot />
koinorikoinori

本日時点での依存関係は以下のような感じ

package.json
...
  "devDependencies": {
    "@sveltejs/kit": "next",
    "@typescript-eslint/eslint-plugin": "^4.19.0",
    "@typescript-eslint/parser": "^4.19.0",
    "autoprefixer": "^10.2.5",
    "cssnano": "^5.0.1",
    "eslint": "^7.22.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-svelte3": "^3.2.0",
    "postcss": "^8.2.10",
    "postcss-load-config": "^3.0.1",
    "prettier": "~2.2.1",
    "prettier-plugin-svelte": "^2.2.0",
    "svelte": "^3.34.0",
    "svelte-check": "^2.0.0",
    "svelte-preprocess": "^4.7.1",
    "tailwindcss": "^2.1.1",
    "tslib": "^2.0.0",
    "typescript": "^4.0.0"
  },
...
このスクラップは2021/06/07にクローズされました