[Tailwind] Global css 전역스타일 설정

 

 

Global CSS

이번에 개인프로젝트를 하면서 tailwind를 사용하게 되었습니다.

 

많은 컴포넌트를 제작하며 동일한 스타일을 반복적으로 지정해주는 것은 효율적이지못하다고 판단하여

 

global css를 통해 스타일을 지정할 수 있도록 구현해보았습니다. 

 

 

먼저 global.css 파일에 아래 코드처럼 스타일을 변수에 저장할 수 있습니다.

 

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

@layer base {
    .componentTitle {
        font-size: xx-large;
    }
}

 

 

현재 componentTitle이라는 스타일을 생성하여 font-size를 xx-large로 지정해놨습니다.

 

이를 적용시키고자 하는 태그의 className에 적용해주면 원하는대로 global css를 사용할 수 있습니다.

 

 

global css에서 지정한대로 적용된 font-size

 

이번 코드개선으로 반복되는 스타일을 global css에 선언해두고 사용한다면

 

코드의 가독성과 유지보수성에서 유리한 장점을 챙겨갈 수 있다는 것을 배웠습니다.

 

여러분도 global css로 깔끔한 코딩 해보시면 좋겠습니다!