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)

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

本家のREADMEに従ってみる。

koinori

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

とはいえcssが効かない。

ん〜。。。効かない。

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

src/app.postcss

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

src/routes/__layout.svelte

<script>
    import "../app.postcss";
</script>
  
<slot />

koinori

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

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"
  },
...

koinori

とりあえず今回はここまでとしておきます。