반응형 Tailwind4 tailwind CSS에 template literals 사용시 주의점. 사진과 같이 아이콘을 원 형태로 배치를 하고 싶어서 li 각 요소마다 rotate를 걸어주고, 각도는 다 다르게 설정을 하고 싶었다. 아래와 같이 코드를 작성하니 전혀 동작을 하지 않았다. 각도(변수 deg)를 계산하여 생성하고 rotate-[각도 deg]를 className에 넣고 싶었다. deg를 console로 찍어보니 잘 생성되고 있고, 혹시나 hoisting 때문에 안 되는 것인가 싶어서 deg값이 있을 때 li 요소를 생성하게 했는데 되지 않았다. const iconSet: string[] = [ "home-outline", "person-outline", "settings-outline", "mail-outline", "videocam-outline", "key-outline", "game-.. 2022. 3. 8. tailwind를 이용하여 active 유지하기 Active시 css를 유지하고 싶었다. 즉, 클릭하면 menu가 나타나고 다시 클릭하면 menu가 사라지게 하고 싶었다. 위와 같이 작성을 하면, Icon에 클릭을 유지하는 동안만 active css로 변하고, 클릭을 제거하면 다시 이전 css로 돌아온다. tailwind css만으로 active를 유지하고 싶어서, 구글링을 how to maintain active with tailwind로 했지만 찾지를 못했다. 고민하다가, 아래와 같은 방법으로 문제를 해결하였다. 좋은 방법인지는 모르겠지만, 혹시 tailwind CSS만으로 아래와 같은 기능이 구현 가능하다면 가르침 부탁드립니다. useState를 이용하여 active 값을 관리하고, Icon 클릭 시 active 값을 변하게 하였다. 그리고, 삼.. 2022. 3. 6. tailwind와 ionicons를 같이 쓰는 법. 요즘 tailwind의 매력에 푹 빠져있다. 기존에 쓰고 있던 ionicons를 같이 쓰고 싶어서, 사용법에 대해 구글링을 하였지만, 찾지를 못하였다. 이 글은 공식적인 사용 방법이 아닌 내가 찾은 사용법을 설명하고자 한다. 이로 인해 문제가 생긴다면 책임은 못 집니다. 먼저 Ionicons는 아래 사이트에서 이용 가능합니다. https://ionic.io/ionicons Ionicons: The premium icon pack for Ionic Framework Ionicons is an open-sourced and MIT licensed icon pack. ionic.io ionicons를 tailwind와 사용하기 위해서 기존 tailwind 방식대로 className에 코드를 넣으면 작동을 하지.. 2022. 3. 5. css 공부하며 몰랐던 것 정리. Button w-6 말고, py-2, px-6을 이용하자. 한줄에 여러개의 element가 있으면, item-center를 쓰자. 2022. 3. 4. 이전 1 다음 반응형
