본문 바로가기
LIBRARY/tailwind-styled-components

tailwind-styled-components

멍식이 2022. 5. 18. 12:24

✅ 왜 쓰게 되었는가 

 

tailwind-css 를 배우고 적용시키는 공부를 하던 중, tailwind를 쓰기 전 styled-components 를 쓸 땐 몰랐던 단점을 알게 되었다. 

 

<>
    <nav className="relative flex items-center justify-between w-full py-2 bg-white shadow-md position-absolute navbar-expand-lg h-1/6">
      <div className="flex items-center navbar-collapse collapse grow" id="navbarSupportedContentYavMenu">
        <ul className="grid grid-cols-6 gap-4 mr-auto navbar-nav lg:flex lg:flex-row">
          <li className="pl-4 ml-5 cols-1 ">
            <a className ="block py-2 pr-2 font-bold transition duration-150 ease-in-out nav-link lg:px-2 text-rose-300 hover:text-rose-400 focus:text-rose-400" href="/Main" data-mdb-ripple="true" data-mdb-ripple-color="light">Home</a>
          </li>
          <li className="gap-4">
            <a className="block py-2 pr-2 font-bold transition duration-150 ease-in-out nav-link lg:px-2 text-rose-300 hover:text-rose-400 focus:text-rose-400" href="/Prologue" data-mdb-ripple="true" data-mdb-ripple-color="light">Prologue</a>
          </li>
          <li className="gap-4">
            <a className ="block py-2 pr-2 font-bold transition duration-150 ease-in-out nav-link lg:px-2 text-rose-300 hover:text-rose-400 focus:text-rose-400" href="/Wines" data-mdb-ripple="true" data-mdb-ripple-color="light">Wines</a>
          </li>          
          <li className="gap-4 mr-60">
            <a className="block py-2 pr-2 font-bold transition duration-150 ease-in-out nav-link lg:px-2 text-rose-300 hover:text-rose-400 focus:text-rose-400" href="/myPage" data-mdb-ripple="true" data-mdb-ripple-color="light">MyPage</a>
          </li>
          <ul className='grid grid-cols-2 place-content-end ml-60'>
            <ul>
              <li className="block ml-10">
                <button type="button" className="block ml-10 px-6 py-2 text-xs font-medium leading-tight text-blue-400 uppercase transition duration-150 ease-in-out border-2 border-blue-400 rounded hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0">Log in</button>
              </li>
            </ul>
            <ul className="block mr-10">
              <li class="block pt-1 pb-1 py-2 px-2">
                <button type="button" className="px-6 py-2 text-xs font-medium leading-tight text-white uppercase transition duration-150 ease-in-out bg-blue-400 rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg">Resister</button>
              </li>
            </ul>   
          </ul>                                        
        </ul>
      </div>                            
    </nav>
  </>

 

😶😶😶😶😶😶😶😶😶😶😶😶😶😶😶😶😶😶😶😶😶

❔❔❔❔❔❔❔❔❔❔❔❔❔❔❔❔❔❔❔❔❔❔❔❔❔❔❔❔❔❔

 

지저분하다. 정말.. 따로 css 와 분리하지 않고 바로 적용할 수 있다는게 tailwind의 장점이긴한데.. 

이건 좀 아니지않나싶다. 

 

그래서 찾은게 tailwind-styled-components 이다. 

 

 

⛏ 설치하는 방법 

 

Using npm

 

npm i -D tailwind-styled-components

 

Using yarn

 

yarn add -D tailwind-styled-components

 

 

✅ styled-component 와 함께쓰면 css 파일을 따로 분리시키지 않고 바로 쓸 수 있는 장점이 사라지는거아닌가?

 

아니다.

 

1. styled-components를 쓸 때 

 

const Box = styled.div`
  background-color: &{(props) => props.bgColor};
  width: 100px;
  height: 100px;
`

const Circle = styled(Box)`
  border-radius: 50px;
`;

function App() {
  return (
    <Father>
      <Box bgColor="teal" />
      <Box bgColor="orange" />
      <Circle bgColor="red" />
    </Father>
  );
}

 

2. tailwind-styled-components를 쓸 때 

 

const Box = tw.div`
  w-40
  h-40
`;
 
 const Circle = tw(Box)`
  rounded-full
`;

function App() {
  return (
    <>
      <Box className="bg-slate-400" />
      <Box className="bg-orange-400" />
      <Circle className="bg-blue-400" />
    </>
  );
}

 

styled-components 에서 사용하던 props를 사용하지 않아도된다!! 

 

 

❕ 추가로 알면 좋은 styled-components / tailwind-styled-components 사용법

 

1. styled-components : as 

 

as를 사용하여 엘리먼트를 다른 엘리먼트로 교체할 수 있다.

 

const BtnOne = styled.button`
  color: white;
  background-color: tomato;
  border: 0;
  border-radius: 15px;
`;

function App() {
  return (
    <Father>
      <BtnOne as="a" href="/">
        클릭버튼
      </BtnOne>
    </Father>
  );
}

 

이렇게하면 버튼이지만 anchor 태그의 기능을 하게 된다. 다양하게 응용이 가능하다.

 

💥 tailwind-styled-component 에선 안된다 .. 구글링 열심히 해봤는데 답을 못찾았다. 찾는데로 수정해야겠다.

 

2. animation

 

-(1) styled-components

 

import styled, {keyframes} from "styled-components"

 

styled-components 에서 animation을 사용하기 위해선 keyframes 가 필요하다.

 

 

const rotationAnimation = keyframes`
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
`

const BoxTwo = styled.div`
  height: 200px;
  width: 200px;
  background-color: tomato;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: ${rotationAnimation} 1s linear infinite;
  span {
    font-size: 36px;
  }
`;

 

애니메이션을 넣기 위해 사용하는 것이다.

 

-(2) tailwind 

 

 

이렇게 기본적인것은 className 만 적어주면 되게끔 만들어져있다. 

세세하게 다루게 되면 커스터마이징을 해야한다.

 

추가로 styled-components, tailwind-styled-components 둘 다 자식을 선언할 수가 있다.

 

const BoxThree = tw.div`
  h-52
  w-52
  bg-lime-500
  flex
  justify-center
  content-center
  span {               //자식 선언
    text-4xl
  }
`;

<BoxThree className="animate-spin">
  <span>💕</span>
</BoxThree>

 

3. hover

 

 

-(1) styled-components

 

const BoxTwo = styled.div`
  height: 200px;
  width: 200px;
  background-color: tomato;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: ${rotationAnimation} 1s linear infinite;
  span {
    font-size: 36px;
    &:hover {
      font-size: 80px;
    }
  }
`;

 

자식 태그에 호버를 줄 때 & 을 이용하면 된다.

 

-(2) tailwind

 

<BoxThree>
  <span className="hover:text-8xl">💕</span>
</BoxThree>

 

tailwind 에선 자식 클래스도 바로 타겟팅을 해주는 것 같다. 그래서 바로 적용!

 

티스토리툴바