“Jika Anda suka penarik maka gunakanlah, jika Anda tidak suka penarik maka jangan gunakan. Tidak ada yang peduli ”- Firship

Saya di sini bukan untuk membahas pro dan kontra, jebakan dan keuntungan penarik angin. Gunakan kedalaman Twitter untuk diskusi yang terinformasi dan ringkas tentang topik ini. Ha

Setelah Anda mencapai kesimpulan bahwa Tailwindcss akan memberikan layanan terbaik bagi Anda dan kebutuhan proyek Anda terkait dengan penambahan gaya ke aplikasi web awal Anda yang bernilai jutaan dolar, baca ini.

Saya akan membuat ini sangat singkat, sama-sama.

1. Buat Proyek SvelteKit

Buat aplikasi SvelteKit Anda , silakan pilih konfigurasi awal yang Anda inginkan. Gunakan TypeScript jika Anda benar-benar pengembang web, dan abaikan penyiapan pengujian jika Anda adalah 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. langsing.config.js
2. penarik angin.config.js
3. postcss.config.cjs

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

Saya telah menambahkan beberapa alias umum di bawah ini untuk kenyamanan, jangan ragu untuk menghapusnya dan membuatnya sendiri. Anda juga perlu menambahkan ini ke tsconfig.json jika Anda menggunakan TypeScript.

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

Kualitas hidup (Opsional)

1. Gunakan lebih cantik untuk mengurutkan kelas penarik Anda. Jika Anda tidak memilih untuk menggunakan yang lebih cantik saat menyiapkan proses Proyek SvelteKit:

touch .prettierrc
npm install prettier prettier-plugin-svelte

Terima kasih telah membaca, ini adalah artikel Medium pertama saya. Jika ini membantu Anda, berikan tepuk tangan, dan berikan kritik yang membangun agar saya dapat meningkatkan.