[NextJs] TailwindCss component

이전 글에서는 NextJs에 TailwindCss를 적용해보았다.

가독성과 재사용성 문제를 개선하기 위해 components를 사용해보자!

https://mingmeng030.tistory.com/275

[NextJs] NextJs에 TailwindsCss 적용 하기

 

 

보통 자주 사용되는 수직 정렬, 수평 정렬 등을 inline으로 적용하면 아래처럼 꽤 길어진다.

// css
margin : 0 auto;

//tailwindCss
<div classname="mx-auto my-0"></div>

// css
display: flex;
justify-content: center;
align-items: center;

//tailwindCss
<div classname="flex items-center justify-center"></div>

 

tailwindCss의 components 를 작성해보자

global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .flexcenter {
    @apply flex items-center justify-center;
  /* display: flex;
     justify-content: center;
     align-items: center;
  */
  }
  .margincenter {
    @apply mx-auto my-0;
    /* margin : 0 auto; */
  }
  .flexwrap {
    @apply flex flex-wrap;
    /* display: flex;
       flexwrap :wrap; 
    */
  }
}

 

components 적용 전

<div className="flex items-center justify-center mx-auto my-0 mt-[50px] w-4/5"></div>


<div className="mx-auto my-0 w-4/5">
  <div className="flex flex-wrap">
  ...
  </div>
</div>

component 적용 후

<div className="flexcenter margincenter mt-[50px] w-4/5"></div>

<div className="margincenter w-4/5">
  <div className="flexwrap">
  ...
  </div>
</div>

global.css 에 작성했기 때문에 별다른 import없이 바로 적용하면 된다.

module.css 를 사용할 때는 className={`${styles.container}`} 와 같이 사용하는게 꽤 번거로웠는데

확실히 TailwindCss를 적용한 후에 개발의 질이 수직 상승했다..🥹🥹🥹