[CSS] Tailwind CSS에 대해서

Frontend/CSS

[CSS] Tailwind CSS에 대해서

Rayi 2025. 2. 8. 04:51

Tailwind CSS는 CSS-in-JS 프레임워크의 일종으로, CSS 대신 클래스명을 제공하여 간단한 문자열 만으로도 HTML 스타일이 구현되는 유틸리티 우선 CSS 프레임워크(utiliy-first-css framework)입니다.

Tailwind CSS의 장점이라고 하면 기존의 많은 분량을 차지하는 CSS 스타일을 극단적으로 줄여 코드를 가볍게 만들 수 있다는 것입니다.

<style>
.cssStyle {
    position: fixed;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: row;
}
</style>

<body>
     <div class="cssStyle">this is css style</div>
</body>

<body>
    <div class="header fixed top-0 right-0 flex flex-row">
    	this is tailwind style
    </div>
</body>

단점은, 스타일이 커질수록 가독성이 떨어진다는 것입니다.

const inputLineStyle = `
  border-b border-gray
  bg-transparent
  text-2xl text-gray
  w-full h-16
  p-2
  focus:outline-none
`

사용하기

SolidJS 기준 아래 링크의 안내에 따라 진행하면 tailwindcss를 사용할 수 있습니다.

https://tailwindcss.com/docs/installation/framework-guides/solidjs

Install Tailwind CSS with SolidJS

Setting up Tailwind CSS in a SolidJS project.

tailwindcss.com

다만, TypeScript를 사용하는 경우 @tailwindcss/vite 패키지에 대한 type 정의가 따로 되어 있지 않기 때문에 임의로 type 정의를 해준 뒤 사용해야 합니다.

타입 정의는 src 폴더에 global.d.ts 파일을 만들어 아래와 같이 선언하여 사용할 수 있습니다.

declare module "@tailwindcss/vite" {
  const plugin: any; // Use a more specific type if available
  export default plugin;
}

vscode에서 작업중이라면, Tailwind CSS IntelliScene 플러그인을 설치하여 자동 완성 기능을 사용할 수 있습니다.

728x90