「追い風が好きなら使えばいいし、追い風が嫌なら使わなければいい。誰も気にしません」 — フィルシップ

私は追い風のメリットとデメリット、落とし穴や利点について議論するためにここにいるわけではありません。このトピックについて情報に基づいた簡潔なディスカッションを得るには、Twitter を活用してください。はぁ

100 万ドルのスタートアップ Web アプリケーションにスタイルを追加する場合、Tailwindcss があなたとあなたのプロジェクトのニーズに最もよく応えるという結論に達したら、これをお読みください。

本当に短くしますので、どういたしまして。

1.SvelteKitプロジェクトの作成

SvelteKitアプリケーションを作成します。必要な初期構成を自由に選択してください。あなたが本物の Web 開発者であれば typescript を使用し、ChatGPT v3 であればテスト設定を無視してください。

npm create svelte@latest my-app
cd my-app
npm install

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init tailwind.config.cjs -p

1. svelte.config.js
2. tailwind.config.js
3. postcss.config.cjs

touch src/app.css
touch src/routes/+layout.svelte

便宜上、以下に一般的なエイリアスをいくつか追加しました。自由に削除して、独自のエイリアスを作成してください。typescript を使用している場合は、これらを tsconfig.json に追加する必要もあります。

/**
 * svelte.config.js
 */

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite';


/** @type {import('@sveltejs/kit').Config} */
const config = {
 // Consult https://kit.svelte.dev/docs/integrations#preprocessors
 preprocess: vitePreprocess(),

 kit: {
  adapter: adapter(),
  alias: {
   '$components': './src/components',
   '$stores': './src/stores',
   '$utils': './src/utils',
   "$actions": "./src/actions",
   "$lib": "./src/lib",
   '$assets': './src/lib/assets',
  }
 }
};

export default config;
/**
 * tailwind.config.js
 */

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,svelte,ts}"],
  mode: 'jit',
  // you dont need `purge: enabled: production` because you are using jit
  purge: [
    "./src/**/*.svelte",
    "./src/**/*.html"
  ],
  theme: {},
  plugins: [],
}

// src/app.css

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

// src/routes/+layout.svelte
<script lang="ts">
 import '../app.css';
</script>

<slot/>

生活の質 (オプション)

1. prettyer を使用して追い風クラスを並べ替えます。SvelteKit プロジェクトの設定時に prettier の使用を選択しなかった場合は、次を実行します。

touch .prettierrc
npm install prettier prettier-plugin-svelte

読んでいただきありがとうございます。これは私の最初の Medium 記事です。これが少しでも役に立った場合は、アップグレードできるようにいくつかの拍手と建設的な批判を残してください。