-
tailwind customzingProject using python/Cloning Airbnb 2021. 2. 28. 15:20
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 전체를 감싸는 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
'Project using python > Cloning Airbnb' 카테고리의 다른 글
django signup FBV using forms.py (0) 2021.03.01 django signup FBV (0) 2021.03.01 tailwind css @apply (0) 2021.02.28 tailwindcss with gulp (0) 2021.02.28 django static files and header & footer (0) 2021.02.28