[CSS] Tailwind CSS 그게 뭔데!!🎨

저는 소프트웨어마이스터고등학교 4개가 모이는 토크콘서트를 얼마 전 다녀왔습니다 그 곳에서 친구들과 명함을 주고 받다가 친구의 명함에 Tailwind CSS라는 것이 있는 것을 보곤 무엇인지 궁금증이 들어 이렇게 글을 써보게 되었습니다

---

📌 Tailwind CSS란?

Tailwind CSS는 사용자(개발자)가 앱을 더 빠르고 쉽게 만들 수 있도록 설계된 유틸리티 우선 프레임 워크입니다

이미 만들어진 유틸리티 클래스를 이용하기 때문에 시간을 많이 절약할 수 있습니다

유틸리티란?

유틸리티는 특정한 작업이나 기능을 수행하도록 설계된 작은 코드 조각을 의미합니다. CSS에서는 요소의 스타일을 간단하게 정의하는 단일 속성 클래스를 지칭하며, 이를 통해 반복적인 스타일링 작업을 간편하게 처리할 수 있습니다.

Tailwind CSS

ex)

// css
.container {
    border: 1px solid tomato;
    background-color: white;
}

<main>
	<div className=".container" />
</main>


// tailwind
<main>
	<div className="border-1 border-solid border-tomato bg-white" />
</main>

---

📌 장점

• 클래스 이름을 고민할 필요 없습니다
• 반응형 웹을 쉽게 디자인할 수 있습니다
• 따로 커스텀도 가능합니다 (기존 테마 확장, 새로운 속성 추가)
•  공식 문서가 친절하고 학습하기 쉽게 잘 되어 있다고 합니다

📌단점

• 가독성이 떨어질 수 있습니다
• 용량이 커질 수 있습니다
• 우선순위 문제가 될 수 있습니다
• 다른 CSS 프레임워크 처럼 완성된 컴포넌트를 손쉽게 제공하여 사용할 수는 없습니다

---

🎯 사용법

npm install -D tailwindcss

이 방법으로 먼저 tailwind css를 설치해줍니다

 

npx tailwindcss init

이렇게 해서 파일을 자동 생성해줍니다

 

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

CSS 프로젝트 파일에 저걸 추가해주면 위 예시처럼 사용하면 됩니다

 

주요 유틸리티 클래스

 

• 색상: text-red-500, bg-blue-200, border-green-600 등
• 배경색: bg-gray-100, bg-yellow-500 등
• 간격 (마진/패딩): m-4, p-2, mx-auto, px-4 등
• 텍스트: text-lg, font-bold, uppercase, italic 등
• 레이아웃: flex, grid, block, inline-block, hidden 등
• 정렬: justify-center, items-center, content-start 등
• 반응형 디자인: sm:text-sm, md:text-lg, lg:flex 등

 

---

글을 마치며 

오늘은 매우 편리한 CSS 프레임 워크인 Tailwind CSS에 대해서 알아봤는데 저 프레임워크를 이용해서 더 좋은 코드를 작성할 수 있을 것 같아 너무 좋았습니다 여러분들도 저 프레임워크를 잘 활용해서 좋은 코드를 작성할 수 있었으면 좋겠습니다