tailwind customzing

Customizing

  tailwindcss는 정말 많은 정해진 class들이 있다. 하지만 모든 것을 구현하지 않았기에 내가 원하는 detail한 부분의 class가 없을 수가 있다. 대신 새로운 class를 customizing을 할 수 있다. tailwind.config.js에서 새로운 class를 만들면 된다. 만드는 방법도 docs에 자세히 설명되어 있다.

grid customizing

  grid를 customizing하기 위해서 theme: { extend : {} } 부분에 다음과 같이 code를 추가했다. class에
grid-rows-2-300px를 추가하면 minmax(2, 200px)가 적용된다.

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      height: {
        18: "4.5rem",
      },
      gridAutoRows: {
        "200px": "minmax(2, 200px)",
        "300px": "minmax(0, 300px)",
        "400px": "minmax(0, 400px)",
      },
      gridTemplateRows: {
        "2-200px": "repeat(2, 200px)",
        "2-400px": "repeat(2, 400px)",
        "2-300px": "repeat(2, 300px)",
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

 

room_card.html

  room_card 전체를 감싸는 ul을 내가 customizing한 grid-rows-2-300px를 추가하니 높이가 300px인 room_card로 layout이 짜여졌다.

 

참고 자료

• 노마드 코더의 Airbnb 클론 강의
• Customizing grid-auto-rows on tailwindcss

소스 코드

github.com/zpskek/airbnb-clone-v3/commit/735d970c73037c7b5eb675fc6bdb4191fbdcc958