TailwindCSS에 사용자 지정 중단점을 추가하는 방법

이 게시물은 원래 Red Pixel Themes에 게시되었습니다.


자, 오늘은 중단점에 대해 이야기하겠습니다.

Tailwind CSS를 만든 Adam은 프레임워크의 기본 중단점 값에 를 부여했습니다. 그리고 우리는 얼마 전에 추가했습니다.

이러한 중단점은 모바일에서 더 큰 데스크톱 화면에 이르기까지 가장 일반적인 화면 크기를 대상으로 하므로 사람들은 일반적으로 기본값을 고수합니다.

이러한 기본값을 수정하려는 경우 어떻게 됩니까? 그것이 오늘 우리의 주제입니다!

⭐ 한 가지 명심해야 할 점은 중단점의 순서가 매우 중요하다는 것입니다. 프레임워크는 중단점의 순서를 읽고 필요한 미디어 쿼리를 생성하며 CSS의 특성으로 인해(알고 있는 것처럼 위에서 아래로 읽음) 마지막 중단점이 첫 번째 중단점보다 더 구체적입니다.

이것이 기본값에서 640px (xl) 이전에 1280px (sm)이 표시되는 이유입니다.

자신만의 중단점을 추가하는 방법은 다음과 같습니다.

더 낮은 중단점 추가

const defaultTheme = require("tailwindcss/defaultTheme");

module.exports = {
  theme: {
    screens: {
      xs: "375px",
      ...defaultTheme.screens
    },
 }
}

여기서 우리는 Tailwind의 기본값을 가져와서 화면 값을 가져오고 사용자 지정 중단점xs 뒤에 퍼뜨립니다.

Tailwind 구성 파일은 Javascript 파일일 뿐이므로 여기에서도 JS 기술을 사용할 수 있습니다.

더 큰 중단점 추가

더 큰 중단점을 추가하려면 두 가지 방법이 있습니다.

확장 섹션에서

module.exports = {
  theme: {
    extended: {
      screens: {
        '3xl': "1800px",
      },
    }
  }
}

더 큰 것을 추가하고 있으므로 구성의 screens 섹션에 있는 extended 키에 추가할 수 있습니다.

기본값을 덮어써서

const defaultTheme = require("tailwindcss/defaultTheme");

module.exports = {
  theme: {
    screens: {
      ...defaultTheme.screens,
      '3xl': "1800px",
    },
  }
}

더 낮은 중단점을 추가하고 더 큰 중단점을 마지막으로 추가하는 것과 동일한 방법을 사용할 수 있습니다.

중간 어딘가에 중단점 추가

좋습니다. 중단점의 순서가 매우 중요하기 때문에 까다롭습니다. 임의로 중단점을 하나만 추가할 수 없고 추가하려는 값에 따라 특정 위치에 추가해야 하며 screens 속성은 개체이므로 특정 위치에 추가하는 것만큼 쉽지는 않습니다. 배열 색인.

이제 이를 해결하는 여러 가지 방법이 있습니다. tailwind 구성이 JS 파일이므로 논리를 추가할 수 있다고 말한 것을 기억하십니까? 그게 우리가 지금 할 일입니다.

아래는 foo 중단점(값이 960px ) 앞에 값이 lg인 1024px라는 중단점을 추가하는 코드입니다.

const defaultTheme = require("tailwindcss/defaultTheme");

const newScreens = Object.entries(defaultTheme.screens).reduce(
  (breakpoints, [label, value]) => {
    if (label == "lg") {
      breakpoints["foo"] = "960px";
    }
    breakpoints[label] = value;
    return breakpoints;
  },
  {}
);

module.exports = {
  theme: {
    screens: newScreens,
  },
};

우리는 newScreens라는 새 변수를 만들고 screens 개체를 배열로 변환하고 새 변수에 할당한 다음 reduce method을 사용하여 원하는 위치에 새 중단점이 있는 새 screens 개체를 만듭니다( lg 값 앞).

그런 다음 tailwind 구성에서 새 screens 변수를 사용하도록 newScreens 속성을 할당하기만 하면 됩니다.

결국 우리의 screens 속성은 다음과 같이 컴파일됩니다.

screens: {
  sm: '640px',
  md: '768px',
  foo: '960px', // our new breakpoint
  lg: '1024px',
  xl: '1280px',
  '2xl': '1536px'
}

필요에 따라 이 스니펫을 자유롭게 재사용하세요. 여기 Tailwind Play link에서 실제로 작동하는 것을 보고 가지고 놀 수 있습니다.


이게 다야! Tailwind 구성의 모든 위치에서 프로젝트에 사용자 지정 중단점을 추가하는 방법을 배웠기를 바랍니다.