✏️
Tailwind를 현업에서 많이 사용한다고 들었는데,
단순히 "별도의 CSS 파일을 만들지 않고 HTML 상에서 스타일을 줄 수 있다."라는 것만 들었을 때는
오히려 HTML 부분 코드가 복잡해질 것 같고, 장점이 크게 와닿지 않았다,,,
그렇다면 한 번 써보고 판단하기 레츠고0️⃣ Tailwind CSS ?
Tailwind 는 classname 을 통해 스타일을 HTML 에 직접 적용할 수 있게 해주는 CSS 프레임워크다.
🟢 장점
- classname 네이밍 고민을 안 해도 된다!
(제가 느낀 가장 큰 장점) - 별도의 css 파일을 만들지 않아도 되기 때문에 style 을 주기 위한 파일 이동이 없다.
🔴 단점
- HTML 코드가 조금 복잡해져서 가독성이 떨어질 수 있다.
- 익숙하지 않을 때는 원하는 속성 검색에 시간이 걸릴 수 있다.
=> Tailwind 는 사람마다 느끼는 장단점이 큰 것 같아 한 번 사용해보시고, 선택하는 것을 추천!
1️⃣ 설치
Tailwind CSS 공식 문서에 설치 방법이 자세히 나와있다!
2️⃣ 사용법
-
별도의 css를 정의할 필요 없이 이미 정의되어 있는 classname 을 추가해주면 된다.
- 주로 약자 형태로 되어있으며, '이름을 모르겠다!' 하시면 공식 문서에 검색해보면서 사용하시면 된다.
return ( <p className="text-[#123456] mt-4 bg-blue">예시<p> ) -
tailwind.config 파일에서 원하는 커스텀 color 등을 추가해 사용할 수 있다.
theme: { extend: { //extend 안에 작성하면 기본으로 정의된 tailwind color도 사용 가능 colors: { gray: { 100: "#F8FAFB", //text-gray-100 이런 식으로 사용 가능! 200: "#EBEBEB", }, }, }
➕ Tip 
vscode를 사용중이면 Tailwing CSS IntelliSense 확장 프로그램 왕 추천!
띄어쓰기 한 칸 하고, 입력하면 자동 완성이 돼서 더욱 편하게 Tailwind 사용이 가능라다.
(custom 으로 설정한 친구들도 자동 완성됨!)📎 참고
하잉