„Jeśli lubisz tylny wiatr, użyj go, jeśli nie lubisz tylnego wiatru, nie używaj go. Nikogo to nie obchodzi” — Firship

Nie jestem tutaj, aby dyskutować o zaletach i wadach, pułapkach i zaletach tylnego wiatru. Zajrzyj do czeluści Twittera, aby uzyskać świadomą i zwięzłą dyskusję na ten temat. Ha

Gdy dojdziesz do wniosku, że Tailwindcss będzie najlepiej służył Tobie i potrzebom Twojego projektu, jeśli chodzi o dodawanie stylów do Twojej startowej aplikacji internetowej wartej milion dolarów, przeczytaj to.

Powiem krótko, nie ma za co.

1. Utwórz projekt SvelteKit

Stwórz swoją aplikację SvelteKit , możesz wybrać dowolną konfigurację początkową. Użyj maszynopisu, jeśli jesteś prawdziwym programistą stron internetowych, i zignoruj ​​konfigurację testu, jeśli korzystasz z 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

Dla wygody poniżej dodałem kilka typowych aliasów. Możesz je usunąć i utworzyć własne. Będziesz także musiał dodać je do pliku tsconfig.json, jeśli używasz maszynopisu.

/**
 * 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/>

Jakość życia (opcjonalnie)

1. Użyj prettier, aby posortować swoje klasy tylnego wiatru. Jeśli nie zdecydowałeś się użyć ładniejszego podczas konfigurowania uruchomienia projektu SvelteKit:

touch .prettierrc
npm install prettier prettier-plugin-svelte

Dziękuję za przeczytanie, to mój pierwszy artykuł na Medium. Jeśli to ci pomogło, zostaw trochę oklasków i zostaw trochę konstruktywnej krytyki, abym mógł ulepszyć.