Closed9

SvelteKit + TailWindCSSに入門

$ 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に従ってみる。

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

ん〜。。。効かない。

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

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

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

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にクローズされました
作成者以外のコメントは許可されていません