브라우저 지원

일반적으로 Tailwind CSS v3.0은 Chrome, Firefox, Edge, Safari의 최신 안정 버전을 대상으로 설계되고 테스트되었습니다. IE 11을 포함한 모든 버전의 IE는 지원하지 않습니다.

Tailwind CSS의 대부분 기능은 모든 모던 브라우저에서 작동하지만, 아직 모든 브라우저에서 지원되지 않는 몇 가지 최신 기능에 대한 API도 포함하고 있습니다. 예를 들어 :focus-visible 의사 클래스와 backdrop-filter 유틸리티가 있습니다.

Tailwind는 매우 저수준 프레임워크이기 때문에, 지원되지 않는 기능을 사용하지 않으면 쉽게 피할 수 있습니다. 마치 해당 CSS 기능을 사용하지 않는 것과 같은 방식입니다.

익숙하지 않은 CSS 기능의 지원 여부가 궁금하다면 Can I Use 데이터베이스가 유용한 리소스입니다.

​벤더 프리픽스

많은 CSS 속성은 브라우저에서 이해되기 위해 벤더 프리픽스가 필요합니다. 예를 들어 background-clip: text는 대부분의 브라우저에서 작동하려면 -webkit 프리픽스가 필요합니다:

.bg-clip-text {
  -webkit-background-clip: text;
  background-clip: text;
}

Tailwind CLI 도구를 사용 중이라면, 이러한 벤더 프리픽스가 자동으로 추가됩니다.

그렇지 않다면, Autoprefixer를 사용하는 것을 추천합니다. Autoprefixer는 PostCSS 플러그인으로, 지원해야 할 브라우저를 지정하면 필요한 벤더 프리픽스를 자동으로 추가해 줍니다.

Autoprefixer를 사용하려면 npm을 통해 설치하세요:

npm install -D autoprefixer

그런 다음 PostCSS 설정 파일의 플러그인 목록 맨 끝에 추가하세요:

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

지원해야 할 브라우저를 지정하는 방법에 대해 더 알아보려면 Browserslist를 확인하세요. Browserslist는 프론트엔드 도구에서 타겟 브라우저를 정의하는 표준 방법입니다.