Starwind CSSでSvelteをセットアップする方法

SvelteでTrewind CSSを設定する方法、新しいSvelteプロジェクトにTailwind CSSを追加する2つの例を示します.
ℹ️ Sveltekitを書くときに注意してくださいV 1ではないが、これはSveletKit V 1に行くときに新しいsvelteプロジェクトを作成するためのデフォルトの方法になります.
各プロジェクトからデフォルトのプロジェクトのセットアップを行いますinit viteとsvelteの両方のコマンド.次に、両方のプロジェクトのインデックスページでスタイルを再利用して、Tailwindを使用するように変換します.
両方の例はSvelte Add ユーティリティと私はスベルトスコープのCSSからのそれぞれを変換することによって行きます.

必要条件

あなたが沿って続いているならば、あなたが私があなたがすでにノード(V 14 +)と端末でセットアップされた開発環境を持っていると思う検索を通してこれを見つけたならば.

SvelteKit NPM INITでsvelte@next

私は、新しいSvelteプロジェクトを開始しますnpm init svelte@next コマンドと名前を与えるtailwind-svelte .

npm init svelte@next tailwind-svelte

CLIから以下のオプションを選択します.

✔ Which Svelte app template? › SvelteKit demo app
✔ Use TypeScript? › No
✔ Add ESLint for code linting? › No
✔ Add Prettier for code formatting? › Yes

CLIからの指示に従ってディレクトリをプロジェクトに変更し、依存関係をインストールし、変更を強調するためにgitを初期化します.

cd tailwind-svelte
npm install # (or pnpm install, etc)
git init && git add -A && git commit -m "Initial commit" # (optional step)
npm run dev -- --open

devサーバがプロジェクトを実行したら、デモアプリケーションが期待通りに機能していることを簡単に確認します.

# kill the dev server if it's still running with Ctrl+c
npx svelte-add@latest tailwindcss
# install the newly configured dependencies
npm i

インストールコマンドを実行した後、私のソースコントロール側パネルはVSコードでこのように見えます.

それだ!すべての設定は、SvelEtプロジェクトでTarwindを使用する必要がありました!それはあなたがクール知っている必要があるすべての場合!これの残りの部分は、私たちが仕組まれたクラスで既存のスタイルを複製することです.
今すぐスタイルを削除してから始めると風車を使用する!
ℹ️ 私が始めに言及したように、私はTruwindクラスをここにあるインデックスページに適用するだけですsrc/routes.index.svelte ).
削除することから始めましょう<style> インデックスページについてはsrc/routes.index.svelte ファイル

<script context="module">
  export const prerender = true
</script>

<script>
  import Counter from '$lib/Counter.svelte'
</script>

<svelte:head>
  <title>Home</title>
</svelte:head>

<section>
  <h1>
    <div class="welcome">
      <picture>
        <source srcset="svelte-welcome.webp" type="image/webp" />
        <img src="svelte-welcome.png" alt="Welcome" />
      </picture>
    </div>

    to your new<br />SvelteKit app
  </h1>

  <h2>
    try editing <strong>src/routes/index.svelte</strong>
  </h2>

  <Counter />
</section>

-<style>
-  section {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    flex: 1;
-  }
-
-  h1 {
-    width: 100%;
-  }
-
-  .welcome {
-    position: relative;
-    width: 100%;
-    height: 0;
-    padding: 0 0 calc(100% * 495 / 2048) 0;
-  }
-
-  .welcome img {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    display: block;
-  }
-</style>

だから、全体の底部<style> HTMLの要素にTailwindクラスを追加するようにタグが削除されます.
休養する<section> ここでgit diffを追加しました.

+<section class="flex flex-col justify-center items-center flex-1">
+  <h1 class="w-full">
+    <div class="relative w-full pb-[calc(100% * 495 / 2048)]">
      <picture>
        <source srcset="svelte-welcome.webp" type="image/webp" />
        <img src="svelte-welcome.png" alt="Welcome" />
      </picture>
    </div>

    to your new<br />SvelteKit app
  </h1>

  <h2>
    try editing <strong>src/routes/index.svelte</strong>
  </h2>

  <Counter />
</section>

あなたがプロジェクトの残りの部分に取り組むことを望むならば、それはこのファイルのためですsrc/app.css ファイルが定義されます.
viteでそれを行うに移動!

SvelteKit NPM INITでvite@latest

Vite CLIとの同じプロセスで、私はnpm init vite@next コマンドと名前を与えるvite-tailwind-svelte .

npm init svelte@next vite-tailwind-svelte

CLIから以下のオプションを選択します.

? Select a framework: › - Use arrow-keys. Return to submit.
    vanilla
    vue
    react
    preact
    lit
❯   svelte

Then svelte .

? Select a variant: › - Use arrow-keys. Return to submit.
❯   svelte
    svelte-ts

Vite CLIからの指示は、スヴェルトと同じです.

Done. Now run:

  cd vite-tailwind-svelte
  npm install
  npm run dev

一旦プロジェクトをチェックしたら、Gitを初期化してコードの変更を強調します.

git init && git add -A && git commit -m "Initial commit"

今すぐSvelteの追加で風を追加するには

# kill the dev server if it's still running with Ctrl+c
npx svelte-add@latest tailwindcss
# install the newly configured dependencies
npm i

今、私はこのプロジェクトのインデックスページの変更を行うことができますsrc/App.svelte .
再び除去する<style> このページからはgit diffがあります.

<script>
  import logo from './assets/svelte.png'
  import Counter from './lib/Counter.svelte'
</script>

<main>
  <img src={logo} alt="Svelte Logo" />
  <h1>Hello world!</h1>

  <Counter />

  <p>
    Visit <a href="https://svelte.dev">svelte.dev</a> to learn how to build Svelte
    apps.
  </p>

  <p>
    Check out <a href="https://github.com/sveltejs/kit#readme">SvelteKit</a> for
    the officially supported framework, also powered by Vite!
  </p>
</main>

-<style>
-  :root {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
-      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-  }
-
-  main {
-    text-align: center;
-    padding: 1em;
-    margin: 0 auto;
-  }
-
-  img {
-    height: 16rem;
-    width: 16rem;
-  }
-
-  h1 {
-    color: #ff3e00;
-    text-transform: uppercase;
-    font-size: 4rem;
-    font-weight: 100;
-    line-height: 1.1;
-    margin: 2rem auto;
-    max-width: 14rem;
-  }
-
-  p {
-    max-width: 14rem;
-    margin: 1rem auto;
-    line-height: 1.35;
-  }
-
-  @media (min-width: 480px) {
-    h1 {
-      max-width: none;
-    }
-
-    p {
-      max-width: none;
-    }
-  }
-</style>

次に、TailwindクラスをHTML要素に追加します.

<script>
  import logo from "./assets/svelte.png";
  import Counter from "./lib/Counter.svelte";
</script>

+<main class="m-auto text-center p-4">
+  <img class="m-auto h-64 w-64" src={logo} alt="Svelte Logo" />
+  <h1
+    class="font-thin mx-auto max-w-none my-8 text-[#ff3e00] text-6xl uppercase md:max-w-56 md:leading-5"
+  >
    Hello world!
  </h1>

  <Counter />

+  <p class="mx-auto max-w-none my-4 max-w-56 md:leading-5">
    Visit <a href="https://svelte.dev">svelte.dev</a> to learn how to build Svelte
    apps.
  </p>

+  <p class="mx-auto max-w-none my-4 max-w-56 md:leading-5">
    Check out <a
+      class="underline underline-dark-500"
      href="https://github.com/sveltejs/kit#readme">SvelteKit</a
    > for the officially supported framework, also powered by Vite!
  </p>
</main>

完了.

結論

私は、プロジェクトを使用していくつかの例のプロジェクトを作成しましたnpm init viteとsvelte両方のコマンド.を使用してSvelte Add そして、それぞれの上でインデックスページスタイルをTrewind風で置き換えました.