10가지 Tailwind CSS 팁

6365 단어 tailwindcssjavascriptcss

Tailwind 구성 파일에서 !important를 true로 설정합니다.



이 옵션은 모든 유틸리티 클래스에 !important 키워드를 추가합니다.

이는 일부 요소에 스타일을 추가하는 타사 라이브러리를 다룰 때 특히 유용합니다. 이렇게 하면 이러한 요소에 새 유틸리티 클래스를 추가할 때 항상 적용되도록 할 수 있습니다.

javascript
// tailwind.config.js
module.exports = {
  important: true,
};


이제 Tailwind의 모든 유틸리티 클래스가 !important로 생성됩니다.

css
.mt-1 {
  margin-top: 1px !important;
}
.mt-2 {
  margin-top: 2px !important;
}
.mt-3 {
  margin-top: 3px !important;
}
/* And so on... */


메인 컨테이너 클래스의 패딩을 중앙에 배치하고 정의하는 데 지치셨습니까?



구성 파일에서 컨테이너에 대한 일부 설정을 지정하면 모든 .container 클래스에 자동으로 적용됩니다.

javascript
// tailwind.config.js
module.exports = {
  theme: {
    container: {
      center: true,
      padding: "1.5rem",
    },
  },
};


따라서 다음과 같이 할 필요가 없습니다.

html
<div class="container p-6 mx-auto"></div>


이제 다음과 같이 하면 됩니다.



html
<div class="container"></div>


잊지 마세요. 여전히 고유한 유틸리티 클래스를 추가할 수 있습니다.



구성 파일의 확장 속성은 프로젝트에 대한 새 클래스를 자동으로 생성하고 추가합니다. 주어진 CSS 속성에 대한 추가 클래스가 필요할 때 편리합니다.

예를 들어 최대 높이의 경우 다음 클래스에만 액세스할 수 있습니다.

.max-h-full    /* max-height: 100%; */
.max-h-screen  /* max-height: 100vh; */


그러나 max-h-xs, max-h-sm 또는 max-h-md와 같은 클래스를 사용하여 조금 더 정밀하게 max-height 속성을 제어해야 하는 경우에는 어떻게 해야 합니까?

음, 생성하는 방법은 다음과 같습니다.

javascript
    // tailwind.config.js
    module.exports = {
      theme: {
        extend: {
          maxHeight: {
            xs: "20rem",
            sm: "24rem",
            md: "28rem",
            lg: "32rem",
            xl: "36rem",
            "2xl": "42rem",
            "3xl": "48rem",
            "4xl": "56rem",
            "5xl": "64rem",
            "6xl": "72rem",
          },
        },
      },
    };


현재 활성 상태인 중단점을 항상 알 수 있습니다.
Tailwind CSS 디버그 화면.
TailwindCSS 디버그 화면 플러그인을 사용하면 개발 모드에서 현재 활성 화면을 표시할 수 있습니다. 설정하는 데 몇 초 이상 걸리지 않으며 장기적으로 많은 시간을 절약할 수 있습니다. 다음과 같이 설치할 수 있습니다.

bash
npm install tailwindcss-debug-screens --save-dev
javascript
// tailwind.config.js
module.exports = {
  plugins: [require("tailwindcss-debug-screens")],
};


태그에 디버그 화면 클래스를 추가합니다.

html
<body class="debug-screens"></body>

기존 프로젝트에 Tailwind를 통합해야 하는 경우 프리플라이트를 비활성화할 수 있습니다.



설명서에서: preflight는 브라우저 간 불일치를 완화하고 디자인 시스템의 제약 조건 내에서 작업하기 쉽도록 설계된 Tailwind 프로젝트의 기본 스타일 집합입니다.

즉, 프리플라이트가 머리글, 큰따옴표, 목록 등과 같은 모든 요소에 대한 기본 여백, 글꼴 크기 등을 모두 제거합니다.

몇 달 전에 Tailwind를 기존 프로젝트(엄격한 기본 스타일 포함)에 점진적으로 통합해야 했습니다. 프리플라이트의 문제는 모든 애플리케이션 인터페이스를 손상시킨다는 것입니다. 비활성화하는 방법을 찾기까지 시간이 좀 걸렸습니다.

javascript
// tailwind.config.js
module.exports = {
  corePlugins: {
    preflight: false,
  },
};


자체 중단점을 정의해야 합니까?
디자이너가 Tailwind에서 제공하는 중단점과 다른 중단점을 사용하고 있더라도 걱정할 필요가 없습니다! 구성 파일을 열고 직접 정의하십시오. 필요한 경우 최소 너비 및 최대 너비 정의를 모두 사용하여 중단점을 만들 수 있습니다.

javascript
// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      sm: { min: "640px", max: "767px" },
      md: { min: "768px", max: "1023px" },
      lg: { min: "1024px", max: "1279px" },
      xl: { min: "1280px" },
    },
  },
};


//다음과 같음

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      sm: "640px",
      // => @media (min-width: 640px) { ... }
      md: "768px",
      // => @media (min-width: 768px) { ... }
      lg: "1024px",
      // => @media (min-width: 1024px) { ... }
      xl: "1280px",
      // => @media (min-width: 1280px) { ... }
    },
  },
};


패딩, 여백, 너비 및 높이에 대해 기본 rem 대신 px를 선호합니까?



구성 파일의 간격 속성을 사용하면 스냅에서 기본 간격/크기 배율을 재정의할 수 있습니다.

javascript
// tailwind.config.js
module.exports = {
  theme: {
    spacing: {
      "1": "8px",
      "2": "12px",
      "3": "16px",
      "4": "24px",
      "5": "32px",
      "6": "48px",
    },
  },
};


플렉스 아이템 주문 방법



flexbox를 사용하고 있다면 order 속성에 익숙할 것입니다. 불행히도 Tailwind에는 포함되어 있지 않습니다.

그런 다음 모든 반응형 변형으로 flexbox 주문 클래스를 구성하고 생성할 수 있습니다.

기본적으로 생성되는 유틸리티 클래스는 다음과 같습니다.

css
.-order-1 {
  order: -1;
}
.order-0 {
  order: 0;
}
.order-1 {
  order: 1;
}
.order-2 {
  order: 2;
}
.order-3 {
  order: 3;
}
.order-4 {
  order: 4;
}
.order-5 {
  order: 5;
}


@apply 사용을 피하고 모든 것을 구성 요소로 추출하는 것이 가장 좋습니다.



Adam Wathan(Tailwind의 제작자)은 트윗에서 이렇게 말했습니다.

Confession: The apply feature in Tailwind only exists to trick people who are put off by long lists of classes into trying the framework. You should almost never use it. Reuse your utility-littered HTML instead.



간단히 말해서 이것은 유지 관리 문제를 초래할 수 있습니다. 여러 프로젝트를 만들었고 거의 의존하지 않았습니다. 그러니 저를 믿으세요. 가능합니다!

Vue.js 또는 React(모든 것을 구성 요소로 정의하는 경우)와 같은 프레임워크를 사용하는 경우 @apply 기능을 사용하지 않는 것이 간단합니다. 나는 거의 사용하지 않습니다.

또한 많이 사용하지 않는 또 다른 이유가 있습니다. 코드에서 유틸리티 클래스만 사용할 때 코드를 디버그하기가 더 쉽습니다. 팀이 스타일(예: 클래스)을 제어할 수 있는 위치가 한 곳뿐이므로 각 태그에 어떤 스타일이 적용되었는지 확인할 수 있습니다.

따라서 @apply 기능을 신중하게 사용하여 장기적으로 시간을 절약할 수 있습니다!
useSyncExternalStore - 과소평가된 React API
실패한 Eventbridge 호출 디버깅

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage