“Bạn thích tailwind thì dùng, không thích tailwind thì đừng dùng. Không ai quan tâm” — Firship

Tôi không ở đây để thảo luận về những ưu và nhược điểm, những cạm bẫy và lợi thế của gió xuôi chiều. Tận dụng tối đa Twitter để thảo luận ngắn gọn và đầy đủ thông tin về chủ đề này. Hà

Sau khi bạn đã đi đến kết luận rằng Tailwindcss sẽ phục vụ tốt nhất cho bạn và nhu cầu của dự án khi bổ sung các kiểu vào ứng dụng web khởi nghiệp trị giá hàng triệu đô la của bạn, hãy đọc phần này.

Tôi sẽ giữ điều này thực sự ngắn gọn, bạn được chào đón.

1. Tạo dự án SvelteKit

Tạo ứng dụng SvelteKit của bạn , vui lòng chọn bất kỳ cấu hình ban đầu nào bạn muốn. Sử dụng TypeScript nếu bạn là nhà phát triển web thực sự và bỏ qua thiết lập thử nghiệm nếu bạn là 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. mảnh dẻ.config.js
2. tailwind.config.js
3. postcss.config.cjs

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

Tôi đã thêm một số bí danh phổ biến bên dưới để thuận tiện, vui lòng xóa chúng và tạo bí danh của riêng bạn. Bạn cũng sẽ cần thêm những thứ này vào tsconfig.json của mình nếu bạn đang sử dụng 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/>

Chất lượng cuộc sống (Tùy chọn)

1. Sử dụng đẹp hơn để sắp xếp các lớp tailwind của bạn. Nếu bạn không chọn sử dụng đẹp hơn khi thiết lập chạy Dự án SvelteKit:

touch .prettierrc
npm install prettier prettier-plugin-svelte

Cảm ơn vì đã đọc, đây là bài báo đầu tiên trên Medium của tôi. Nếu điều này giúp ích cho bạn chút nào, hãy vỗ tay và để lại một số lời chỉ trích mang tính xây dựng để tôi có thể nâng cấp.