브라우저 확장 프로그램 - Tailwind CSS 추가

어제 우리는 첫 번째 새 탭 브라우저 확장을 만들었습니다.
그러나 일반 CSS로만 구동되었습니다. 이것은 시간이 지남에 따라 유지하기가 매우 어려워질 수 있으므로 Tailwind CSS를 도입하여 많은 부분을 자동화할 수 있는지 알아보겠습니다.

Tailwind 추가의 주요 이점은 페이지에서 사용 중인 클래스를 포함하기 위해 자동 제거 옵션만 사용할 수 있다는 것입니다.

빌드를 처리하기 위해 무거운 작업을 수행하는 데 사용할 수 있는 매우 슬림한 번들링 도구인 Parcel도 추가할 것입니다.

종속성 설치

이 기사를 따르고 싶다면 다음GitHub repo을 시작점으로 삼을 수 있습니다.

이전에 일반 HTML 스타터가 있었기 때문에 먼저 패키지 파일을 초기화해야 합니다.

npm init -y

프로젝트를 열고 터미널에서 이 프로젝트에 대해 다음 명령을 실행합니다.

npm i parcel tailwindcss

그러면 Parcel 및 Tailwind CSS 패키지가 설치됩니다.

그런 다음 개발 종속성도 필요합니다.

npm i -D parcel-reporter-static-files-copy postcss-cli

이렇게 하면 Parcel static file copier 및 postCSS CLI 이 설치됩니다.
이를 사용하여 빌드 프로세스를 정리합니다.

그게 다야. 이제 필요한 모든 패키지가 있습니다.

정적 파일 마이그레이션

Parcel 정적 파일 리포터를 설치했기 때문에 절대 변경되지 않는 파일을 dist 출력으로 이동하는 기능을 활용할 수 있습니다.

프로젝트의 루트에 static 폴더를 만든 다음 매니페스트와 그 안에 있는 아이콘 폴더를 이동합니다.

작동하려면 .parcelrc 파일을 만들고 다음 내용을 넣어야 합니다.

{
  "extends": ["@parcel/config-default"],
  "reporters":  ["parcel-reporter-static-files-copy"]
}

이렇게 하면 정적 디렉토리가 항상 dist 출력에 복사됩니다.

순풍 설정

다음으로 Tailwind 설정이 작동하도록 도입하는 방법을 살펴보겠습니다.

우선 루트 프로젝트에 .postcssrc.json 파일을 추가합니다. 이것은 postCSS 구성 파일이지만 Parcel에 내장되어 있기 때문에 대부분의 구성을 처리합니다.

이 파일 안에 다음 줄을 넣으십시오.

{
  "plugins": {
    "tailwindcss": {}
  }
}

다음으로 다음 명령을 실행하여 Tailwind 구성 파일을 만듭니다.

npx tailwind init

다음과 같이 보이도록 수정할 수 있습니다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['*.html'],
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

이제 기존css/style.css 파일을 열고 내부의 모든 내용을 다음 줄로 바꿉니다.

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

그리고 그게 다야. 순풍 구성은 이미 완료되었습니다.

함께 모아서

이제 모든 개별 플레이어가 정렬되었으므로 이들을 결합해야 합니다.
이 마법은 package.json 파일에서 발생합니다.

파일에 다음 스크립트를 추가합니다.

{
    ...
  "scripts": {
    "prebuild": "rm -rf dist .parcel-cache",
    "watch": "parcel watch new-tab.html",
    "build": "parcel build new-tab.html"
  },
}

anyprebuild가 소포 캐시와 dist 디렉토리를 제거해야 한다고 명시합니다.
확장 프로그램을 개발하는 동안 watch 명령을 사용할 수 있으며 자동으로 다시 로드됩니다.
만족하면 다음 명령을 실행하여 최종 빌드를 생성할 수 있습니다.

npm run build

테스트하려면 this article에 설명된 단계를 따라야 하지만 로드할 dist 폴더를 선택해야 합니다.

그리고 그게 다야!
이제 Tailwind CSS 및 Parcel에서 제공하는 확장 프로그램이 있습니다.

여기에서 전체 코드 샘플을 찾을 수도 있습니다GitHub repo.

읽어주셔서 감사합니다. 연결해 봅시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나