Snowpack으로 TailwindCSS 변경 사항 보기

TailwindCSS 및 Snowpack에 익숙하지 않은 경우를 위해 간단한 소개부터 시작하겠습니다.

TailwindCSS는 웹사이트에 게시된 것처럼 "사용자 정의 디자인을 빠르게 구축하기 위한 유틸리티 우선 CSS 프레임워크"입니다. Snowpack은 또한 "더 빠른 웹 개발을 위한 최신 프론트엔드 빌드 도구"로, "개발 워크플로에서 Webpack 또는 Parcel과 같은 더 무겁고 복잡한 번들러를 대체합니다."

저는 최근에 이러한 도구를 사용하여 기본 앱을 만들고 있었습니다. 내가 기본이라고 하면 일반 HTML, CSS 및 JavaScript를 의미합니다. React, Vue, Svelte 또는 기타가 없습니다. 내 주요 목표는 앞서 언급한 프레임워크에 일반적으로 연결된 공식 또는 커뮤니티 플러그인 없이도 TailwindCSS와 Snowpack이 함께 작동하는 방식을 탐색하는 것이었습니다.

기본 마크업이 예상대로 작동합니다.

HTML에 TailwindCSS 클래스를 추가하면 예상대로 작동합니다. Snowpack은 브라우저를 신속하게 업데이트하고 새로 고친다는 약속을 이행합니다.

<!-- sample HTML, no problem here (index.html) -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Button
</button>

저장 시 고급 기능 딸꾹질

어느 시점에서, 위와 같이 마크업을 작성하는 것은 손에 잡히지 않고 읽기 어려울 수 있습니다. 클래스 목록이 80자를 초과하거나 두 번째 줄로 증가하고 동일한 내용을 여러 번 작성해야 한다고 상상해 보십시오. 당신은 확실히 다른 접근 방식을 원할 것입니다.

TailwindCSS는 CSS 구성 요소를 추출할 수 있는 @apply 지시문과 같은 고급 기능을 제공합니다. 아래 코드는 위에서 보여준 마크업의 대안을 보여줍니다(문서의 예).

<button class="btn-blue">
  Button
</button>

/* In my test src/styles.css gets compiled to public/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn-blue {
    @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
  }
  .btn-blue:hover {
    @apply bg-blue-700;
  }
}

이것은 확실히 개선되었지만 Snowpack은 파일 저장 시 변경 사항을 처리하지 않았습니다. 보시다시피 여기의 차이점은 HTML 파일을 편집하는 대신 CSS 파일을 편집했으며 이 파일을 공용 디렉터리에서 컴파일하고 업데이트해야 한다는 점입니다. "tailwind"또는 "postcss"명령을 통해 컴파일할 수 있습니다.

구조 대본

시행 착오를 겪고 Snowpack, TailwindCSS 및 PostCSS 문서를 몇 번 살펴본 후 Snowpack이 @snowpack/plugin-run-script 를 통해 스크립트를 실행할 수 있는 기능을 제공한다는 것을 알게 되었습니다. 따라서 package.json 에 컴파일 스크립트를 추가할 필요가 없습니다. 기술적으로 가능하지만 Snowpack "플러그인 실행 스크립트"기능과 함께 PostCSS-CLI를 통해 사용할 수 있는 "감시"프로세스를 활용할 수는 없습니다.

따라서 이 문제를 해결하려면 먼저 플러그인을 설치해야 합니다.

npm i @snowpack/plugin-run-script

다음으로 PostCSS 명령을 사용하여 Snowpack 구성 파일snowpack.config.json을 업데이트합니다.

 "plugins": [
    [
      "@snowpack/plugin-run-script",
      {
        "cmd": "postcss src/styles.css -o public/styles.css",
        "watch": "postcss src/styles.css -o public/styles.css -w"
      }
    ]
  ]

이러한 변경을 수행한 후에는 npm start (snowpack dev 실행)를 실행해야 합니다. 다음에 CSS 파일을 변경하고 저장할 때 Snowpack이 컴파일을 감시하고 실행해야 합니다.

만일을 대비하여 이것은 내 package.json 파일의 모습입니다:

  "scripts": {
    "start": "snowpack dev",
    "build": "snowpack build",
    "test": "echo \"This template does not include a test runner by default.\" && exit 1",
    "format": "prettier --write \"src/**/*.js\"",
    "lint": "prettier --check \"src/**/*.js\""
  },
  "dependencies": {
    "@snowpack/plugin-run-script": "^2.1.5",
    "tailwindcss": "^1.8.10"
  },
  "devDependencies": {
    "postcss": "^8.1.1",
    "postcss-cli": "^8.0.0",
    "prettier": "^2.0.5",
    "snowpack": "^2.12.0"
  }
}

참조:

TailwindCSS
Snowpack
PostCSS
PostCSS-CLI

Kameron Kincade에 Unsplash의 사진