11ty를 배우자 7부: 순풍 추가

시작하기 전에

이 기사는 내 작업 흐름에 따라 어제 올라갈 예정이었습니다. 그러나 기술적인 문제, 즉 내 ISP를 처리해야 했습니다.

나는 다시 연결하려고 전화하는 데 대부분의 시간을 보냈습니다 ...

내가 당신에게 말하는 재미없는 시간 ...

일레븐티 & 순풍

그래서, 시간이야... 내가 미뤄왔던 시간. 하지만 지난 번에 사이트에 플러그인을 추가했기 때문에 이제 tailwind를 추가할 수 있을 것 같습니다.

DESCLAIMER
You do not have to add Tailwind to your site. If you're alright with the CSS we have currently, you can stick to that.

Tailwind 설치 및 설정

시간 낭비하지 말고 바로 시작합시다.

터미널을 열고 다음 명령을 실행합니다.

npm install -D tailwindcss postcss autoprefixer

그런 다음 tailwind 구성 파일을 초기화합니다.

npx tailwindcss init

프로젝트의 루트에서 다음을 사용하여 postcss.config.js를 만듭니다.

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

그런 다음 Tailwind 지시문을 사용하여 CSS 파일을 만듭니다. 현재 스타일시트가 있는 동일한 폴더에 넣습니다.

/* src/assets/css/tailwind.css*/
@tailwind base;
@tailwind components;
@tailwind utilities;

그런 다음 tailwind 구성에서 콘텐츠 배열을 편집하여 파일을 감시합니다.

/* tailwind.config.js*/

 content: ["./src/**/*.{njk,md}", "./src/**/*.svg",]

마지막으로 base.njk 에 CSS 파일을 포함합니다. 이전에 head 태그에서 스타일시트가 있던 바로 아래에 다음을 추가합니다.

 <link rel="stylesheet" href="{{ '/assets/css/tailwind.css' | url }}">

Don't forget to comment out the other link

Tailwind 및 Eleventy를 실행하도록 스크립트 수정

프로젝트를 설정할 때를 기억한다면 Eleventy를 실행하는 방법만 추가했습니다.

새로운 설정이 작동하려면 Tailwind와 Eleventy가 동시에 실행되어야 합니다. 운 좋게도 이를 쉽게 해주는 패키지가 있습니다. npm run all - 설치해 봅시다.

npm install npm-run-all --save-dev

그런 다음 package.json에서 스크립트를 수정하여 이벤트를 배포할 때 새 스타일이 표시되도록 해야 합니다.

  "scripts": {
    "start": "npm-run-all -p dev:*",
    "build": "run-s build:*",
    "dev:11ty": "eleventy --serve",
    "dev:css": "tailwindcss -i src/assets/css/tailwind.css -o _site/assets/css/tailwind.css --watch --postcss",
    "build:11ty": "eleventy",
    "build:css": "tailwindcss -i src/assets/css/tailwind.css -o _site/assets/css/tailwind.css --postcss"
  },