목적

최소한의 단계로 함께 작동하는 tailwind css 및 svelte의 기본 설치를 얻으려고 합니다. 제가 실수나 잘못된 가정을 했다면 연락주세요! 누락된 단계가 있으면 알려주시면 수정하겠습니다. 여기에서 내 목표는 커뮤니티에서 내가 정말 즐겨 사용하는 도구(TailwindCss)를 사용하도록 돕는 것입니다.

프로세스

1.) 기본 및 설치 종속성에서 프로젝트 복제:
(svelte-tailwind-app를 자신의 프로젝트 이름으로 바꿀 수 있습니다)

npx degit sveltejs/template svelte-tailwind-app
cd svelte-tailwind-app
npm install

2.) 순풍 설치npm install tailwindcss --save-dev3.) Tailwind 구성 파일 만들기npx tailwindcss init이것은 일부 기본값을 사용하여 프로젝트 루트에 tailwind.config.js를 생성합니다.
4.) svelte-preprocess 설치: npm install --save-dev svelte-preprocess5.) tailwind 및 svelte-preprocess에 대한 가져오기를 rollup.config.js 파일에 추가합니다.

import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
+import sveltePreprocess from 'svelte-preprocess';
+import tailwind from 'tailwindcss';

6.) svelte 섹션의 맨 아래에 플러그인을 추가하고 CSS 객체 바로 아래에 추가합니다.

preprocess: sveltePreprocess({
                postcss: {
                    plugins: [
                        tailwind('./tailwind.config.js')
                    ]
                },
            }),

7.) src : TailwindCss.svelte 아래에 새 구성 요소를 만들고 다음을 입력합니다.

<style global lang="postcss">
    @tailwind base;
    @tailwind components;
    @tailwind utilities;  
</style>

('purgecss 지시문 무시'가 왜 없는지 궁금하신가요? 아래 참조)
가져 와서 App.svelte에 추가하십시오.

<script>
+import TailwindCss from './TailwindCss.svelte'
</script>
+<TailwindCss/>
//...rest of App.svelte

8.) 테스트하려면 npm run dev를 실행한 다음 'App.svelte'를 편집하여 <h1> 태그에 새 클래스를 추가합니다.

-<h1>Hello {name}!</h1>
+<h1 class="bg-green-500">Hello {name}!</h1>

브라우저에서 배경색이 녹색으로 변경되는 것을 볼 수 있습니다.
9.) Tailwind가 이러한 훌륭한 경험을 제공하기 위해 많은 양의 클래스를 제공한다는 문제는 프로덕션 사이트에서 이를 제공하고 싶지 않습니다. 검사 영역 및 네트워크 탭을 보면 bundle.css가 최대 1.7MB라는 것을 알 수 있습니다. 이는 배경에 대해 약간 많으므로 일부 퍼지를 추가하겠습니다.
10.) tailwind v1.4.0에 대해서는 수동으로 설정할 필요가 없으므로 다음을 수행할 수 있습니다directions here to edit your tailwind.config.js.

+const production = !process.env.ROLLUP_WATCH;
-purge: [],
+purge: {
+content: [
+"./src/**/*.svelte",
+"./public/**/*.html"
+],
+css: ["./public/**/*.css"],
+enabled: production // disable purge in dev
+}

npm run dev를 실행하면 bundle.css에는 변경 사항이 없지만 npm run build 실행하면 npm run start bundle.css 크기가 감소하는 것을 볼 수 있습니다. 여기에 오타가 있었습니다)

적극 추천합니다vs-code plugin for tailwind css intellisense it helps me a ton

선택 사항: npm run dev 동안 sirv가 '콘솔 지우기'를 원하지 않으면 rollup.config.js를 편집하고 다음과 같이 전달된 매개변수에 --no-clear를 추가할 수 있습니다.

-server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
+server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev', '--no-clear'], {

npm run start 동안 sirv가 '콘솔 지우기'를 원하지 않으면 package.json을 편집하십시오.

-"start": "sirv public"
+"start": "sirv public --no-clear"

Sirv의 포트를 변경하려면 여기에 --host 6000 또는 다른 포트 번호를 입력합니다.

감사의 말:

나는 다른 사람들의 훌륭한 기사 없이는 거의 이 좋은 것을 얻을 수 없었을 것입니다:
~에 의해
~에 의해

각주

*. 나는 index.html이 어디에 있는지 정확히 알고 있기 때문에 purgecs ignore 지시문을 넣지 않았습니다. Setting up purgecss manually 문서의 맨 아래에 있는 node_modules에 숨겨져 있지 않고 공개되어 있습니다.

/* purgecss start ignore */
@tailwind base;
@tailwind components;
/* purgecss end ignore */

@tailwind utilities;

This will ensure you don't accidentally purge important base styles when working with frameworks like Next.js, Nuxt, vue-cli, create-react-app, and others that hide their base HTML template somewhere in your node_modules directory.

*. @tailwind base; 및 기타 규칙을 App.svelte의 <style> 섹션에 넣지 않았습니다. 왜냐하면 빌드가 정말 느려지는 것처럼 보였기 때문입니다. .