Tailwind CSS

Tailwind CSS는 유틸리티 퍼스트 CSS 프레임워크이다.
프레임워크 내에 정의된 클래스를 이용해서 빠르고 간편하게 디자인을 할 수 있다.

장점

1. 빠른 스타일링

• CSS파일을 따로 만들지 않아도 됨
• 클래스 명만 잘 조합하면 빠르게 스타일링 가능

2. 일관된 디자인

• 기본적으로 디자인토큰을 가지고 있어 일관된 디자인이 가능

단점

1. 가독성이 안 좋아질 수도 있다

• 많은 스타일을 적용하면 코드가 길어지며 가독성이 안 좋아질 수 있다

2. 지원하지 않는 CSS 스타일이 있을 때 별도의 CSS 파일을 생성해야 한다

Tailwind CSS 사용법

설치 (vite의 경우)

npm을 사용하여 설치해준다.

npm install tailwindcss @tailwindcss/vite

vite.config.js의 파일을 수정해준다

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite' // 추가

export default defineConfig({
  plugins: [
    tailwindcss(), // 추가
  ],
})

index.css 에 import 해준다

@import "tailwindcss";

이제 tailwindcss를 사용할 수 있다.

https://tailwindcss.com/docs/installation/using-vite
여기서 초기 설정을 확인할 수 있다.

스타일링

사이즈

• 넓이: w-1, w-12, w-1/2, w-full ...

• 높이: h-1, h-12 ...

• margin: m-1, m-auto ...

• padding: p-1 ...

색상

• 폰트: text-inherit, text-black, text-red-200 ...
• 배경: bg-inherit, bg-transparent, bg-blue-200 ...
• border: border-inherit, border-current ...
• outline: outline-white ...

디스플레이

• inline
• inline-flex
• grid
• flex
• table
  .
  .
  .

그 외

• flex-direction: flex-row ...
• gap: gap-1, gap-x-1 ...
• justify-content: justify-start, justify-end ...

이렇게 많은 태그들이 있다..
너무 많아서 공식 홈페이지를 참고하며 사용하면 될 것 같다.
https://tailwindcss.com/

참고 자료

https://tailwindcss.com/
https://velog.io/@ldlldl/Tailwind-CSS-%EC%A0%95%EB%A6%AC