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
'Frontend > CSS' 카테고리의 다른 글
| [CSS][Tailwind] 기타 Tailwind를 사용할 때 알아두면 좋은 것들 (0) | 2025.09.07 |
|---|---|
| [CSS][Tailwind] Tailwindcss에서 theme 사용하기 (0) | 2025.04.28 |
| [CSS] Macaron js에 대해서 (0) | 2024.07.01 |
| [CSS] CSS 속성 종류 정리 (0) | 2024.06.18 |
| [CSS] CSS로 외부 파일 경로 설정하기 (0) | 2024.06.17 |