자동 리픽서를 테일윈드CSS 및 그리드섬과 연동시키는 방법

자동 리픽서를 테일윈드CSS 및 그리드섬과 연동시키는 방법

다음 절차에 따라 TailwindCSS를 Gridsome으로 셋업했습니다.https://gridsome.org/docs/assets-css/ # tailwind

다만, 이러한 순서에서는, 자동 리픽서의 셋업 방법에 대해서는 기재되어 있지 않습니다.그래서 제가 직접 해봤습니다. 다음과 같이요.

• npm 설치 자동 리픽서
• 수정했다gridsome.config.js파일(변경된 코드에 대한 코멘트는 아래를 참조해 주세요.
• 뛰었다gridsome develop
• 클래스를 추가했습니다.flex에 대해서p벤더 프리픽스가 추가되어 있는지 여부를 확인합니다.

결과는...

아무 것도 없어요.프리픽스 없음(그냥)display: flex;).

이걸 어떻게 작동시키는지 알아?

고마워요.

변경된 gridsome.config.js 파일:

const autoprefixer = require("autoprefixer");  // ADDED THIS LINE
const tailwind = require("tailwindcss");
const purgecss = require("@fullhuman/postcss-purgecss");

const postcssPlugins = [tailwind(), autoprefixer()]; // ADDED `autoprefixer()` to postcssPlugins array

if (process.env.NODE_ENV === "production") postcssPlugins.push(purgecss());

module.exports = {
  siteName: "Gridsome",
  plugins: [],
  css: {
    loaderOptions: {
      postcss: {
        plugins: postcssPlugins
      }
    }
  }
};

잘 되고 있더라고요.잘못된 수업을 체크하고 있었어요.에 대한 프레픽스는 추가되지 않습니다.display: flex(모든 메이저브라우저에서는display: flex;).

그래서 제가 한번 해봤는데appearance-noneclass(설정)appearance: none;게다가 프리픽스가 추가되었습니다.

답을 생각해 낸 레딧의 지구인 꼬마에게 특별한 감사를 표합니다.https://www.reddit.com/r/vuejs/comments/dy28wg/getting_autoprefixer_to_work_with_tailwindcss_and/f7y3agc?utm_source=share&utm_medium=web2x

언급URL : https://stackoverflow.com/questions/58914039/getting-autoprefixer-to-work-with-tailwindcss-and-gridsome