tailwindCSS addvariant으로 커스텀 변형 feat.hover 모바일 제외

반응형 디자인을 하면서 생긴 문제를 해결하면서 알게된 tailwindCSS의 addvariant를 정리하려 한다.

현재 사내 프로젝트에서는 네이티브로 작업을 하지 않고 있다. 그렇다보니 반응형으로 작업을 진행하면서 발생한 이슈이다.

 

많은 프로젝트에서도 hover를 줄텐데 모바일에서는 hover를 할 수 없기에 제외시키는 코드를 주어야했다.

만약 hover를 제외시키지 않는다면 터치가 되었을때 hover에 주었던 css값들이 그대로 남아있게 된다.

 

위 이미지를 보게 되면 hover로 주었던 배경색이 그대로 남게 된다.

이 문제를 해결하기위해서는 css 미디어쿼리를 사용해서 hover를 지원하고 있는 기기에서만 css가 적용되도록 지정할 수 있었다.

---

 

screens raw

Tailwind Hover 모바일에선 제외하기

그렇게 구글링을 하면서 알게된 방법을 사용해저 지정을 하려고 했다.

     screens: {
        pointerhover: {
          raw: "(hover: hover) and (pointer: fine)",
        },
      },

- raw: tailwind CSS 설정 파일에서 사용자 정의 미디어 쿼리를 추가할 때 사용되는 특수한 속성이다. raw는 픽셀 기반이 아니기 때문에 미디어 쿼리를 직접 작성할 수 있다.
- fine: 정교한 포인팅 장치를 의미하며 마우스와 같은 정확한 포인터를 가진 장치에서 사용된다.

이 외에도 coarse: 손가락으로 조작하는 환경, none: 존재하지 않음 등 속성이 있다.

---

근데 문제가 또 발생... 

./tailwind.config.ts 에서 extend를 추가하여야하는데 screens에 적용하니 hover는 진행되지만

screens에 넣어서그런지 기존 반응형 브레이크 포인트가 적용되지 않았다... sm, md, lg, xl ... 등

 

관련 에러가 나만 생기는건가 싶어서 다른 글들을 찾아보니

Adding non-pixel media queries to screens config prevents auto-generated max-* classes for the rest of the breakpoints · Issue

나와 같은 에러를 만나는 사람들이 있었다.

 

tailwindCSS에서 theme/extend/screens에서 작성하고 사용하기 위해서는

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    extend: {
      screens: {
        'max-sm': { raw: `not all and (min-width: ${defaultTheme.screens.sm})` },
        'max-md': { raw: `not all and (min-width: ${defaultTheme.screens.md})` },
        'max-lg': { raw: `not all and (min-width: ${defaultTheme.screens.lg})` },
        'max-xl': { raw: `not all and (min-width: ${defaultTheme.screens.xl})` },
        'max-2xl': { raw: `not all and (min-width: ${defaultTheme.screens['2xl']})` },

        // You can now have your custom media queries and still use max-* ranges.
        pointerhover: {
          raw: "(hover: hover) and (pointer: fine)",
        },
      },
    },
  },
}

- 이런식으로 각 해당 브레이크 포인트를 다시 생성해주고 사용한다면 잘 적용된다..!

- 그치만 불필요하게 다시 브레이크 포인트를 생성해주는것보다 다른 방법이 있었다.

 

---

addVariant

 

Plugins - Tailwind CSS

  plugins: [
    function ({ addVariant }: { addVariant: Function }) {
      addVariant("pointerhover", "@media (hover: hover) and (pointer: fine)");
    },
  ],

- plugins 옵션을 활용해서 새로운 variant를 추가할 수 있다. 기존의 유틸리티를 같이 사용하면서 addVariant함수를 사용해 새로운 ,클래스를 추가해서 사용하면 된다.

- 미디어쿼리 코드들을 작성할때 screens를 사용하면서 기존 브레이크포인트를 모두 재작성하는것 보다 조금은 더 간편하게 정의할 수 있는 방법이 아닐까 싶다!