Tailwind CSS 사용자 정의 요약

10578 단어 tailwindcssjavascript
tailwindcss 3.0.23에서 작업

색상 테마 추가


tailwind 에서 흰색 배경색에 bg-white, 흰색 텍스트에 text-white 등을 사용할 수 있지만 white 부분에는 원하는 색상을 사용할 수 있습니다.

tailwind.config.js

module.exports = {
  ・・・
  theme: {
    extend: {
      colors: {
        "foo": "#f97316",
        "bar": {
      "buz": "#65C18C",
      ・・・
        },
      },
    },
  },
  ・・・
}


배경 색상foo 및 텍스트 색상bar-buz을 지정할 수 있습니다.

<div class="bg-foo text-bar-buz">　・・・</div>


사용자 지정 글꼴 사용



글꼴 파일 읽기

HTML

<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet" />


또는 CSS로로드

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');


글꼴 이름 및 글꼴 모음 지정

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        fancy: ["Dancing Script"],
      },
    },
  },
}

font-fancy를 사용할 수 있습니다.

HTML

<span class="font-fancy">・・・</span>


Google 글꼴 추가에 대한 지침은 this article에서 찾을 수 있습니다.

수업을 하나로 모으기


tailwind로 @apply 클래스를 요약하는 클래스를 만들 수 있습니다.

CSS

.custom-btn {
  @apply w-20 h-20 m-5 p5 text-center;
}


HTML

<button class="custom-btn">Button</button>

@layer는 추가된 스타일의 우선 순위를 결정합니다. 이 경우 base < components < utilities .

@layer base {
  h1 { @apply text-2xl; }
}

@layer components {
  h1 { @apply text-4xl; }
}

@layer utilities {
  h1 { @apply text-5xl; }
}


이러한 용도는 document에서 인용한 것입니다.

베이스

The base layer is for things like reset rules or default styles applied to plain HTML elements.



구성 요소

The components layer is for class-based styles that you want to be able to override with utilities.



유용

The utilities layer is for small, single-purpose classes that should always take precedence over any other styles.



라이트/다크 모드 전환


dark:는 어두운 모드에 대해 class를 지정합니다.

<div class="bg-white dark:bg-black">
  ・・・
</div>


다크 모드인지 확인하는 방법

tailwind.config.js

module.exports = {
  // elements with dark class and below act as dark mode
  darkMode: "class",

  // dark mode is determined by os setting (default)
  // darkMode: "media",
  }
}


이 경우 다크모드로 동작합니다.

<html class="dark">
  ・・・
  <div class="bg-white dark:bg-black">
    ・・・
  </div>
</html>


클래스를 동적으로 추가 및 제거dark하여 어두운 모드와 밝은 모드 간에 전환

테마 전환



이 예에서 색상 primary 및 primary-text를 만듭니다.

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
     　　  "primary": "var(--color-primary)",
     　　  "primary-text": "var(--color-primary-text)",
      }
    },
  },
}

css로 색상 설정

/* default theme */
:root {
  --color-primary: #ffffff;
  --color-primary-text: #000000;
}

/* alternate-theme */
.custom-theme {
  --color-primary: #000000;
  --color-primary-text: #ffffff;
}


테마의 클래스명을 지정하여 적용

<div class="custom-theme">
  <button class="bg-primary text-primary-text">Button</button>
</div>


테마의 클래스 이름을 동적으로 만들면 예를 들어 사용자별로 응용 프로그램의 테마를 전환할 수 있습니다.

tailwind.config.js에서 지정할 수 있는 항목 및 해당 기본값



여기에서 확인할 수 있습니다.
https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/defaultConfig.stub.js
WP REST API를 사용하여 WordPress 게시물의 문자 수 목록을 가져오는 NPM 라이브러리
악명 높은 Two Sum 문제. (DSA 시리즈 3)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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