Tailwind
1.[Tailwind] React에서 calc 사용하기
Tailwind는 많은 값들이 정해져 있어서 사용이 편하기는 한데, 가끔 이렇게 계산을 해서 컴포넌트의 css를 조절해야할 때가 있다. 이럴 때는 어떻게 해야할까?보통의 경우라면 React에 Tailwind를 적용하기 위해 tailwind.config.js 파일을 생성
2.[Tailwind] 사용자 정의 색상 추가하기
프로젝트를 진행하다보면 임의의 색상을 추출해서 사용할 때가 있다.그런데 Tailwind는 미리 정의된 색상 외에는 빠르게 사용할 수가 없다.3.1.7버전에서는 arbitrary values에 변수를 넣어서 사용하는 방법 또한 없다.(최소 필자가 알기로는 그렇다)그러면
3.[Tailwind] 사용자 정의 애니메이션 추가하기
Tailwind를 사용해 프로젝트를 진행하던 도중, 애니메이션 효과를 넣고싶었다.그런데...공식 문서를 보니 애니메이션 종류가 꽤 한정적이다..!(v 3.1.7)즉, 커스텀해서 사용해야한다는 것인데...어떻게 해야할까?얼마전 포스트에서 Tailwind에 사용자 정의 색
4.[Tailwind] background-image의 linear-gradient 사용하기
CSS의 속성 중 background-image를 통해 linear-gradient를 사용할 수 있다.이는 이름 그대로 그라데이션 효과를 줄 수 있는데, Tailwind에서는 어떻게 사용하면 될까?사용법 자체는 공식 문서에 나와 있다. 그런데...원래는 % 단위를 활용
5.[Tailwind] 이미지 hover시 확대 효과
쇼핑몰 등의 웹사이트에서 이미지에 마우스를 올리면 이미지가 약간 확대되는 효과를 흔히 볼 수 있다.이 효과는 어떻게 만들면 될까?Tailwind 문법으로 작성했다고 해서 일반 CSS와 다른 것은 없다.필자는 div -> img 순서로 감싸줬다.div는 이미지가 보일 크
6.[Tailwind] 가상 클래스(pseudo class) odd, even 사용하기(ft.map 메서드)
CSS에서 nth-child(odd), nth-child(even)로 사용했던 홀수번, 짝수번 요소의 스타일 설정을 Tailwind에서는 어떻게 할까?순서에 따라 다른 스타일을 적용하고자 하는 그 태그에 odd와 even을 사용하면 된다.일반 CSS와 다를게 하나도 없
7.[Tailwind] Error : ruleSet[1].rules[1].oneOf[5].use[1], ruleSet[1].rules[1].oneOf[5].use[2]
필자가 Tailwind + Typescript + React를 사용해서 웹 페이지를 만들던 중 아래와 같은 에러를 마주했다.참고 이미지이 에러를 해결하는데 5일이 걸렸다. 아무리 봐도 이유를 몰랐기 때문에...필자가 작성한 코드 파일에서 문제가 생긴게 아닌 것 같기 때
8.[Tailwind] 반응형 breakpoint 설정시 주의 사항
프로젝트에서 반응형 웹사이트 제작 중에 추가적인 breakpoint를 만들고 싶었다.그래서 공식문서에 있는대로 만들었는데...이미 다 만들었던 반응형 컴포넌트들이 갑자기 작동을 안한다..!무슨 일이지?필자는 프로젝트 도중에 2sm 이라는 breakpoint를 추가로 만
9.[Tailwind] table 태그 테두리에 rounded 효과를 넣고 싶을 때
table 태그를 가지고 게시판을 만들다가 위 아래 모서리를 약간 둥글게 만들고 싶었다. 그런데 생각처럼 딱딱 만들어지지 않고, 시행착오를 거쳤다. 어떻게 구현했는지 기록하고자 한다.
10.[Tailwind] 반응형 breakpoint에 따른 className 동적 생성 방법
TailwindCSS는 breakpoint 사용이 매우 간편하기 때문에 반응형 UI를 간편하게 생성할 수 있다. 필자는 이를 활용하여 캐러셀 슬라이드를 만들고 있었다. 화면 크기에 따라 이미지 크기도 변경해야했기 때문에, breakpoint와 함께 width값을 동적으