“순풍을 좋아하면 사용하고 순풍을 좋아하지 않으면 사용하지 마십시오. 아무도 신경 쓰지 않는다” — Firship

순풍의 장단점, 함정과 장점을 논의하려는 것이 아닙니다. 이 주제에 대한 정보에 입각한 간결한 토론을 위해 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

편의를 위해 아래에 몇 가지 일반적인 별칭을 추가했습니다. 자유롭게 삭제하고 직접 만들 수 있습니다. 또한 typescript를 사용하는 경우 tsconfig.json에 추가해야 합니다.

/**
 * 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 클래스를 정렬하려면 pretier를 사용하십시오. SvelteKit 프로젝트를 설정할 때 prettier를 사용하도록 선택하지 않은 경우 다음을 실행합니다.

touch .prettierrc
npm install prettier prettier-plugin-svelte

읽어주셔서 감사합니다. 이것은 저의 첫 미디엄 기사입니다. 이것이 도움이 되었다면 박수를 치고 업그레이드할 수 있도록 건설적인 비판을 남겨주세요.