Next.js(6): TailwindCSS의 Class &Modifier 소개(Dark mode 등)

개요

이번에 이 디자인들을 이용해서저번 보도 다음으로tailwindCSS에 유용한Class,modifier를 소개합니다.
Zenn Articles의 어두운 모드

이케아 상품 명세서 카드

Dark mode

젠의 아티클의 다크 모드를 만들어 봤어요.
(tailwindCSS에서 제공하는 색상 세트로 만들어져 색상 조합이 어색해요.😞)
Dark mode의 판단은 기본적으로 컴퓨터의 설정과 브라우저에 따라 결정됩니다.
className에 Dark mode를 설치하려는 경우darkMode: "class", 추가됩니다.
이렇게 class Name에 추가dark하면 그 산하의 요소가 Dark mode입니다.편리합니다!
tailwind.config.js

module.exports = {
  content: [
    "./pages/**/*.{js,jsx,ts,tsx}",
    "./components/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  darkMode: "class", //default media
  plugins: [],
};

https://tailwindcss.com/docs/dark-mode

modifier

hover 시 CSS 리액션도 쉽게 만들 수 있습니다.호버 뒤에 호버를 붙일 때의class만 있으면 됩니다.

hover

hover:bg-cyan-600

<button className="rounded-full bg-blue-700 p-3 shadow-xl transition-colors hover:bg-cyan-600">

이외에focus:form의disable:required: 등 각양각색의modifier를 제공하니 문서를 참고하십시오
https://tailwindcss.com/docs/hover-focus-and-other-states

ring

아웃라인 루프를 표시하는 데 사용합니다.focus 다음에 링이 표시됩니다.

링블랙:링의 색깔

ring-offset-2:ring과 원소 사이의 간격

ring-2:ring의 너비

<div className=" bottom-0 right-4 space-x-2">
  <button className="h-5 w-5 rounded-full bg-black ring-black ring-offset-2 transition focus:ring-2"></button>
  <button className="h-5 w-5 rounded-full bg-amber-400 ring-amber-400 ring-offset-2 transition focus:ring-2"></button>
  <button className="h-5 w-5 rounded-full bg-teal-500 ring-teal-500 ring-offset-2 transition focus:ring-2"></button>
</div>

https://tailwindcss.com/docs/ring-width
https://tailwindcss.com/docs/ring-color
https://tailwindcss.com/docs/ring-offset-width
https://tailwindcss.com/docs/ring-offset-color

Configuration

tailwindCSS에서 제공하는 기본 설정이 아닙니다. 사용자 정의도 가능합니다.
예컨대

옐로우 컬러를 다른 컬러로 바꾸고 싶은 옐로우 컬러

글씨체를 바꾸고 싶다

width 70% 원하기

다음과 같이 설정할 수 있습니다.예를 들어width:70%는 w-70/100처럼 사용할 수 있다.

module.exports = {
  content: [
    "./pages/**/*.{js,jsx,ts,tsx}",
    "./components/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      spacing: {
        "70/100": "70%",
      },
      colors: {
        yellow: "#ffc82c",
      },
      fontFamily: {
        sans: ["Graphik", "sans-serif"],
        serif: ["Merriweather", "serif"],
      },
    },
  },
  darkMode: "class", //default media
  plugins: [],
};

https://tailwindcss.com/docs/configuration

animation

animate-pulse를 이용하여 요소를 부드럽게fade.

<button className="animate-pulse p-2">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    className="h-7 w-7 stroke-blue-700"
    fill="none"
    viewBox="0 0 24 24"
    strokeWidth="2"
  >
    <path
      strokeLinecap="round"
      strokeLinejoin="round"
      d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
    />
  </svg>

는 또 다른 유용한 코드animate-spin 정보 디스플레이animate-ping 등을 제공했다.
https://tailwindcss.com/docs/animation

총결산

소개된class 이외에도 각양각색의class가 있으니 참고하세요공식 문서.
처음에는 클라스 이름에 익숙하지 않아 개발이 어려울 수도 있지만 몇 번 반복해서 사용하면 자주 사용하는 클라스는 금방 기억할 수 있다.
또한 지난번 보도에서 소개한 자동 보충 vscode의 extension'Tailwind CSS Intelli Sense'와 Tailwind CSS 라벨을 동시에 사용하면 더욱 효율적으로 디자인할 수 있을 것 같습니다.
소스 코드는 이미 당신내 git 창고에게 드렸습니다. 편하시면 한번 보세요.