"Arka rüzgarı seviyorsan kullan, sevmiyorsan kullanma. Kimsenin umurunda değil ”- Fship

Kuyruk rüzgarının artılarını ve eksilerini, tuzaklarını ve avantajlarını tartışmak için burada değilim. Bu konuyla ilgili bilinçli ve özlü bir tartışma için Twitter'ın derinliklerine başvurun. Ha

Konu milyon dolarlık başlangıç ​​web uygulamanıza stiller eklemek olduğunda, Tailwindcss'in size ve projenizin ihtiyaçlarına en iyi şekilde hizmet edeceği sonucuna vardığınızda , bunu okuyun.

Bunu çok kısa tutacağım, rica ederim.

1. SvelteKit Projesi Oluşturun

SvelteKit uygulamanızı oluşturun , istediğiniz ilk yapılandırmayı seçmekten çekinmeyin. Gerçek bir web geliştiricisiyseniz TypeScript kullanın ve ChatGPT v3 iseniz test kurulumunu dikkate almayın.

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

Kolaylık sağlamak için aşağıya bazı yaygın takma adlar ekledim, bunları silip kendinizinkini oluşturmaktan çekinmeyin. TypeScript kullanıyorsanız bunları tsconfig.json dosyanıza da eklemeniz gerekir.

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

Yaşam kalitesi (Opsiyonel)

1. Kuyruk rüzgarı sınıflarınızı sıralamak için daha güzel öğesini kullanın. SvelteKit Proje çalıştırmasını ayarlarken daha güzel kullanmayı seçmediyseniz:

touch .prettierrc
npm install prettier prettier-plugin-svelte

Okuduğunuz için teşekkürler, bu benim ilk Medium makalem. Bu size yardımcı olduysa, birkaç alkış bırakın ve bazı yapıcı eleştiriler bırakın, böylece yükseltebilirim.