VITEとTarwindCSSを持つSvelte

Cookwind CSSとは
CookieはUIをビルドするために構成されるクラスを持つユーティリティの最初のCSSフレームワークです.彼らはあなたが書くでしょうCSSを置き換えるために簡単なクラスを提供します.あなたは、Tailwindウェブサイトで文書化されて、あなたが望むデザインをつくる複数のCSSクラスを加えることができます.これはあなたのCSSクラスの明確な名前を思い付く必要がなくなり、プロジェクトで再利用するために最善を尽くします.
TailwindCSS website それらの異なるクラスの良いドキュメンテーションとそれらを使う方法を含みます

VITEによるSvelteの設定
あなたはSvelteとViteと新しいプロジェクトを作成することができますこのガイドは、以前に従った.あなたはなぜVITEを使用して簡単にSvelteプロジェクトを設定する方法の詳細を見つける必要があります.
https://www.eternaldev.com/blog/build-and-deploy-apps-with-svelte-and-vite/

を追加する
StarWindCSSをsvelteアプリに追加する方法があります.

RLLlupを持つSvelte -あなたはロルプを使用してsvelteでTailwindを設定する場合は、他のチュートリアルのようにチェックアウトすることができますthis

VELITEを使用して-あなたはSvelteとViteとセットアップTailwindCSSにこのチュートリアルに従うことができます

Svelteさんは何ですか
Svelteの追加は、簡単に統合し、svelteアプリに他の機能を追加するコミュニティプロジェクトです.ので、簡単にあなたのsvelteとvite電源アプリにTarwindCSSを追加するためにこれを使用することができます.これは、Vite Powered Svelte AppsとSveletKitで動作することに注意してください.
注意:このメソッドは、初期化されたプロジェクトに対して推奨されます.既存のプロジェクトはいくつかの問題に直面するかもしれない.
あなたが他の統合についてもっと発見することに興味があるならば、チェックしてくださいGithub project

svelte addコマンドの実行
プロジェクトディレクトリのルートに移動し、次のコマンドを実行します

npx svelte-add@latest tailwindcss

このコマンドはあなたのためにたくさんの設定を行います.コマンドを実行した後、このプロセスから追加された新しいパッケージをインストールできます

npm install

を使って起動する
上記の手順が完了すると、あなたのsvelteアプリでTailwind CSSを使用して起動することができます.
我々の新しく見つかる風のCSS力で何かを造りましょう.通常のToDoアプリケーションの代わりに、Githubからアクティビティフィードを構築しましょう.

新しいモデルを作成します.データを格納するためのtsファイル

export interface ActivityContent {
    profileName: string;
    profileUrl: string;
    time: string;
    repo: Repository
}

interface Repository {
    name: string;
    url: string;
    description: string;
    language: string;
    stars: number;
    updatedDate: string;
}

新しいsvelteファイルを作成し、それをActivityItemと呼びます.スベルト

<script type="ts">
  import type { ActivityContent } from "src/models";
  import logo from "../assets/svelte.png";

  var activityContent: ActivityContent = {
    profileName: "profile2",
    profileUrl: "https://github.com/eternaldevgames",
    time: "4 days ago",
    repo: {
      name: "eternaldevgames/svelte-projects",
      url: "https://github.com/eternaldevgames/svelte-projects",
      description: "This Repository contains multiple svelte project to learn",
      language: "Svelte",
      stars: 2,
      updatedDate: "Oct 15",
    },
  };
</script>

<div class="p-3 m-3">
  <div class="flex flex-row items-center">
    <img class="h-8 w-8 rounded-full bg-gray-200" src={logo} alt="hero" />
    <h4 class="p-2">
      <a href={activityContent.profileUrl}>{activityContent.profileName}</a>
      started the repo
      <a href={activityContent.repo.url}>{activityContent.repo.name}</a>
    </h4>
    <p class="text-gray-500 text-sm">{activityContent.time}</p>
  </div>
  <div class="ml-8 p-5 rounded-lg bg-white border border-black">
    <a class="text-lg" href={activityContent.repo.url}
      >{activityContent.repo.name}</a
    >
    <p>{activityContent.repo.description}</p>

    <div class="flex flex-row items-center mt-4">
      <div class="w-3 h-3 bg-red-600 rounded-full ml-1 mr-1" />
      <p class="mr-5">{activityContent.repo.language}</p>
      <img
        src="https://img.icons8.com/material-outlined/24/000000/star--v2.png"
        alt="star"
      />
      <p class="ml-1 mr-5">{activityContent.repo.stars}</p>
      <p class="mr-5">Updated {activityContent.repo.updatedDate}</p>
    </div>
  </div>
</div>

結果はこちら


TailwindCSSクラスの故障
我々はテール風クラスですべてのコンポーネントのスタイルを持っているので、我々は次のプロジェクトのお手伝いをする重要なクラスのいくつかにブレークダウンする

<div class="p-3 m-3">

p-3 すべての側面にパッドを参照します.ナンバー3はパディングがどれくらい加えられるかを表します.

padding: 0.75rem;

同様にm-3 すべての側面にマージンを追加することを指します.

<img class="h-8 w-8 rounded-full bg-gray-200" src={logo} alt="hero" />

画像の場合は、高さと幅をh-8 and w-8 rounded-full 円を作成するために使用できます.だから、プロフィール画像のサークルアバターを作成するのに便利です.bg-gray-200 要素に背景色を追加するために使用されます.ここでクールなことは、あなたの好みの任意の色とグレー- 200を置き換えることができますし、背景色として設定されます.

<p class="text-gray-500 text-sm">{activityContent.time}</p>

text-gray-500 は要素のフォント色を設定するために使われる.

<div class="ml-8 p-5 rounded-lg bg-white border border-black">

border は、1 pxborder-black は境界線の色を黒として加える

<div class="flex flex-row items-center mt-4">

flex はディスプレイをflexに設定するflex-row はフレックス方向をitems-center を使用して、Align項目のプロパティを
あなたが使用されるクラスについてもっと学びたいならば、TarwindCSSは本当に良いDocsサイトを持っています
https://tailwindcss.com/docs

概要
各要素の別のクラスを定義せずにCSSスタイルを追加する方が簡単です.このメソッドは、個々のクラスを追加するよりもはるかに高速ですが、より速くコンテンツを作成するためにTailWindCSSの別のクラスを学ぶ必要があります.
我々の不和に加わってくださいhttps://discord.gg/AUjrcK6eep そして、そこで議論しましょう