npx degit "vannsl/sapper-tailwindcss-template#rollup" sapper-tailwindcss-template
# or
npx degit "vannsl/sapper-tailwindcss-template#webpack" sapper-tailwindcss-template
cd sapper-tailwindcss-template
npm install

npm run dev:tailwindcss

npm run dev

# for Rollup
npx degit "vannsl/sapper-tailwindcss-template#rollup" my-app
# for webpack
npx degit "vannsl/sapper-tailwindcss-template#webpack" my-app

cd my-app
npm install # or yarn
npm run dev

npx degit "sveltejs/sapper-template#rollup" sapper-tailwindcss
# or
npx degit "sveltejs/sapper-template#webpack" sapper-tailwindcss
cd sapper-tailwindcss
npm install

이제 Sapper 응용 프로그램이 설치되었습니다.실행 sapper-template 로컬 서버를 시작합니다.예제 항목을 보려면 npm run dev 을 엽니다.
http://localhost:3000

TailwindCSS, PostCSS 및 PurgeCSS 다운로드

다음 명령은 및 PostCSS 패키지를 TailwindCSS 및 devDependencies 종속성으로 다운로드합니다.

npm install -D postcss-cli tailwindcss --save
npm install @fullhuman/postcss-purgecss --save

CSS 정화 구성 작성

다음 절차의 순서는 중요하지 않다.아래의 모든 변경이 이루어질 때만 작용할 수 있습니다.

순풍구성회사 명

그런 다음 다음 다음 명령을 사용하여 TailwindCSS를 초기화합니다.

npx tailwind init

이 명령은 프로젝트의 루트 디렉토리에 파일tailwind.config.js을 생성합니다.다음과 같은 뼈대가 있습니다.

// tailwind.config.js

module.exports = {
  theme: {
    extend: {}
  },
  variants: {},
  plugins: []
}

TailwindCSS를 사용자 정의하는 방법에 대한 자세한 내용은 을 참조하십시오.너는 잠시 원래의 상태를 유지할 수 있다.

공식 TailwindCSS 구성 문서 우편 번호.구성회사 명

postcss.config.js라는 빈 파일을 만듭니다.IDE나 finder에서 이 파일을 만들거나 sapper 응용 프로그램의 루트 폴더에서 다음 명령을 실행합니다(macOS의 경우).

touch postcss.config.js

그런 다음 파일에 다음을 추가합니다.

// postcss.config.js

const tailwindcss = require("tailwindcss");

const purgecss = require("@fullhuman/postcss-purgecss")({
  content: ["./src/**/*.svelte", "./src/**/*.html"],
  defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
});

module.exports = {
  plugins: [
    tailwindcss("./tailwind.config.js"),

    ...(process.env.NODE_ENV === "production" ? [purgecss] : [])
  ]
};

총결산구성js/webpack。구성회사 명

할 일이 없다.다른 방법은postcs를 요약 설정에 추가하는 것을 포함하기 때문에 이 부분을 추가했습니다.본문의 방법을 사용할 때 이렇게 할 필요가 없다.

정태css

이제 TailwindCSS 스타일을 프로젝트에 추가할 때가 되었습니다.statics 디렉토리에 새 CSS 파일을 만듭니다.

cd static
touch tailwind.css

TailwindCSS 스타일을 가져오려면 이 파일에 규칙을 적용해야 합니다.

/* static/tailwind.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

CSS 파일의 이름은 중요하지 않습니다.tailwind.css, main.css 또는 global.css 등의 이름을 사용하는 것이 좋습니다.이 강좌는 Sapper의 뼈대 프로젝트global.css가 이미 제공되었기 때문에 충돌을 방지하기 위해 이름tailwind.css을 사용하는 것을 권장합니다.유틸리티 기반 CSS 프레임워크를 사용할 때 사전 구성global.css 스타일이 필요하지 않을 수 있습니다.필요한 경우 이 파일을 사용하여 기본 설정을 덮어쓸 수도 있습니다.

Note: This file can be used either for only adding TailwindCSS to the Sapper project or be extended with further global rules and styles. For example, custom CSS classes or Font Faces can be registered here.

소포json

거의 완성하다.TailwindCSS CSS를 개발 및 운영 모델의 내장 응용 프로그램에 도입하려면 package.json 에 다음 npm 스크립트를 추가해야 합니다.

// package.json

// ...
scripts: {
 // ...
 "dev:tailwindcss": "postcss static/tailwind.css -o static/main.css -w",
 "build:tailwindcss": "NODE_ENV=production postcss static/tailwind.css -o static/main.css",
 // ...
}
// ...

이 명령은 main.css 폴더에 파일static을 만들거나 덮어씁니다.첫 번째 명령dev:tailwindcss은 모든 TailwindCSS 스타일을 포함하는 CSS 파일을 생성합니다.원본 코드에 대한 변경 사항은 웹 사이트에 즉시 적용되고 열 모듈을 교체합니다.production를 사용하여 NODE_ENV=production 환경에서 POSTSS를 실행하면 PurgeCSS로 인해 파일main.css에는 응용 프로그램에서 사용하는 TailwindCSS 스타일만 포함됩니다.이 두 버전을 사용해 보시면 파일 크기 main.css 에 현저한 차이가 있을 것입니다.
이 파일main.css의 이름을 지정할 필요가 없습니다.프로젝트에서 사용하지 않은 이름을 선택할 수 있습니다.다음 절에서는 응용 프로그램에서 구축된 CSS 파일을 가져옵니다.그러나 우선 Sapper 응용 프로그램을 구축하거나 내보낼 때 실행할 문장 build:tailwindcss 을 추가합니다.따라서 npm run build:tailwindcss && 및 build 스크립트의 시작 부분에 export 를 추가합니다.

// package.json for rollup

// ...
scripts: {
 // ...
 // "dev:tailwindcss": "postcss static/tailwind.css -o static/main.css -w",
 // "build:tailwindcss": "NODE_ENV=production postcss static/tailwind.css -o static/main.css",
 "build": "npm run build:tailwindcss && sapper build --legacy",
 "export": "npm run build:tailwindcss && sapper export --legacy",
 // ...
}
// ...


// package.json for webpack

// ...
scripts: {
 // ...
 // "dev:tailwindcss": "postcss static/tailwind.css -o static/main.css -w",
 // "build:tailwindcss": "NODE_ENV=production postcss static/tailwind.css -o static/main.css",
 "build": "npm run build:tailwindcss && sapper build",
 "export": "npm run build:tailwindcss && sapper export",
 // ...
}
// ...

.gitignore

git 저장소를 초기화하면 /static/main.css 파일에 .gitignore 을 추가하는 것을 권장합니다.예를 들어, Git 저장소를 보여주는 데모 .gitignore 는 다음과 같습니다.

.DS_Store
/node_modules/
/src/node_modules/@sapper/
yarn-error.log
/cypress/screenshots/
/__sapper__/
/static/main.css

src/템플릿.html

생성된 main.css 파일을 가져오려면 파일src/template.html의 다른 가져오기 위에 다음 행을 추가합니다.

<!-- src/template.html -->

<link rel="stylesheet" href="main.css">

프로젝트 실행

운영 환경에서 응용 프로그램을 실행하려면 npm run build 를 실행하십시오.응용 프로그램의 정적 사이트를 생성하려면 npm run export 를 실행하십시오.npm run build:tailwindcss에 추가된 스크립트를 통해 명령은 자동으로 파일package.json을 생성합니다.
프로젝트를 로컬에서 실행하려면 터미널의 단독 창에서 다음 명령을 실행합니다.

npm run dev:tailwindcss

npm run dev

👏 그렇습니다.너 끝났어.👏