BridgetownRB가 포함된 Tailwind CSS v2

이 게시물은 원래 my blog에 게시되었습니다.

오늘 저는 BridgetownRB를 정적 사이트 생성기로 가지고 놀았습니다.
나는 또한 최근에 Tailwind CSS의 새 버전을 가지고 놀고 있습니다.
이 사이트 디자인을 업데이트하여 사용하고 싶었습니다. 다음은 BridgetownRB로 설정하는 방법에 대한 빠른 자습서입니다.

1. Yarn으로 Tailwind 설치

yarn add -D postcss autoprefixer postcss-import postcss-loader tailwindcss

2. Tailwind 구성 파일 생성

npx tailwindcss init를 실행하여 tailwind.config.js 파일을 생성합니다.

3. postcss.config.js 파일 생성

module.exports = {
  plugins: [
    require("postcss-import", {
      path: "frontend/styles",
      plugins: [],
    }),
    require("tailwindcss"),
    require("autoprefixer"),
  ],
};

4. webpack.config.js 파일 업데이트

보이는 곳MiniCssExtractPlugin.loader(60행 주변)까지 아래로 스크롤하여 다음과 같이 변경합니다.

{
  test: /\.(s[ac]|c)ss$/,
  use: [
    MiniCssExtractPlugin.loader,
    "css-loader",
    {
      loader: "sass-loader",
      options: {
        sassOptions: {
          includePaths: [
            path.resolve(__dirname, "src/_components")
          ],
        },
      },
    },
  ],
},

이에

{
  test: /\.(s[ac]|c)ss$/,
  use: [
    MiniCssExtractPlugin.loader,
    "css-loader",
    {
      loader: "sass-loader",
      options: {
        sassOptions: {
          includePaths: [
            path.resolve(__dirname, "src/_components")
          ],
        },
      },
    },
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          ident: "postcss",
          plugins: [
            require("postcss-import"),
            require("tailwindcss"),
            require("autoprefixer"),
          ],
        }
      },
    },
  ],
},

5. CSS에 Tailwind 추가

frontend/styles/index.scss 에 다음을 추가하십시오.

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

6. 사용하지 않는 CSS 제거

Tailwind의 가장 큰 장점은 PostCSS를 사용하여 사용하지 않는 CSS를 제거하여 크기를 줄이는 것입니다.
최종 CSS 파일의 tailwind.config.js 파일을 다음과 같이 편집합니다.

module.exports = {
  purge: {
    enabled: process.env.NODE_ENV == "production",
    content: ['./src/**/*.{html,md,liquid}']
  },
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

이제 사이트를 구축/배포할 때 NODE_ENV 환경을 사용해야 합니다.
변하기 쉬운. 예를 들어:

NODE_ENV=production yarn deploy

성공! 이제 Tailwind v2가 포함된 BridgetownRB 사이트가 작동해야 합니다!