tailwind css의 autoprefixer

tailwindcss를 사용하면서 backdrop-filter 속성을 사용하는데 Mac의 Safari와 iOS의 브라우저에서 dackdrop-filter 속성이 적용되지 않는것을 보았습니다.

 

https://tailwindcss.com/docs/browser-support#vendor-prefixes

Browser Support - Tailwind CSS

 

공식문서에도 이미 https://github.com/postcss/autoprefixer를 설치하라고 안내해주고있었다.

GitHub - postcss/autoprefixer: Parse CSS and add vendor prefixes to rules by Can I Use

 

npm install -D autoprefixer

으로 devDependencies 로 설치를 하고

 

postcss.config.cjs 파일의 내용을 다음과 같이 바꾼다.

const config = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

module.exports = config;

 

그럼 이제 Mac과 iOS의 safari에서도 문제 없이 -webkit 같은 접두어가 필요한 backdrop-filter가 정상 동작하는것을 볼 수 있습니다.