“ถ้าคุณชอบ tailwind ก็ใช้มัน ถ้าคุณไม่ชอบ tailwind ก็อย่าใช้มัน ไม่มีใครสนใจ” — Firship

ฉันไม่ได้มาที่นี่เพื่อพูดคุยเกี่ยวกับข้อดีข้อเสีย ข้อผิดพลาด และข้อดีของ tailwind ใช้ส่วนลึกของ Twitter เพื่อการสนทนาที่มีข้อมูลและกระชับในหัวข้อนี้ ฮา

เมื่อคุณได้ข้อสรุปแล้วว่าTailwindcssจะตอบสนองความต้องการและโครงการของคุณได้ดีที่สุดเมื่อต้องเพิ่มสไตล์ให้กับเว็บแอปพลิเคชันเริ่มต้นมูลค่าล้านดอลลาร์ของคุณ โปรดอ่านสิ่งนี้

ฉันจะเขียนให้สั้นลงจริงๆ ยินดีต้อนรับ

1. สร้างโครงการ SvelteKit

สร้าง แอปพลิเคชัน SvelteKit ของคุณ เลือกการกำหนดค่าเริ่มต้นได้ตามต้องการ ใช้ 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

ฉันได้เพิ่มนามแฝงทั่วไปด้านล่างเพื่อความสะดวก คุณสามารถลบออกและสร้างชื่อของคุณเองได้ตามสบาย คุณจะต้องเพิ่มสิ่งเหล่านี้ใน tsconfig.json หากคุณใช้ 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/>

คุณภาพชีวิต (ไม่บังคับ)

1. ใช้สิ่งที่ดีกว่าเพื่อจัดเรียงคลาส tailwind ของคุณ หากคุณไม่ได้เลือกที่จะใช้สิ่งที่ดีกว่าเมื่อตั้งค่าการเรียกใช้โครงการ SvelteKit:

touch .prettierrc
npm install prettier prettier-plugin-svelte

ขอบคุณที่อ่าน นี่เป็นบทความขนาดกลางเรื่องแรกของฉัน หากสิ่งนี้ช่วยคุณได้โปรดปรบมือและแสดง ความคิดเห็น เชิงสร้างสรรค์เพื่อที่ฉันจะได้อัปเกรด