[멋쟁이사자처럼 - 프론트엔드 스쿨 TIL] Tailwind CSS (1)

Today I Learn - 2024-05-22

* Tailwind CSS ?

- Utility-first(유틸리티 기반)의 CSS프레임워크

- 완제품 형태가 아니라 필요한 부품을 조립하는 방식

- 디자인 및 개발의 자율도가 높아져 창의성과 재사용성, 생산성 등을 높일 수 있다.

---

* Tailwind CSS 설치 & 셋팅

* 참고 : https://tailwindcss.com/docs/installation

Installation - Tailwind CSS

---

* 기본 테마 확장

- 테마 옵션 기본값은 유지하면서 사용자가 정의한 값을 추가하여 사용할 수 있다.

- tailwind.config.js 파일에 extends 필드를 이용

// tailwind.config.js

module.exports = {
   ...,
   theme: {
     colors: {
       'green': '#03cf5d',
       'silver': '#999999',
       'balckDard': '#333333'
     },
   },
   ...
}

---

* Tailwind CSS 반응형 디자인

- 반응형 유틸리티 베리언트(variants)를 사용하여 반응형 컴포넌트를 구현

- breakpoints 마다 조건부로 적용

- 모바일 퍼스트(mobile first)

// tailwind.config.js

module.exports = {
   ...,
   theme: {
     screens: {
       'sm': '480px',
       'md': '640px',
       'lg': '768px',
       'xl': '1024px'
     }
   },
   ...
}

<div class="bg-blue-200 sm:bg-yellow-300 md:bg-orange-400 lg-bg-purple-300 xl-pink-200">
  <p>내용입니다</p>
</div>

---

* 사용자 정의 속성 값

- Tailwind CSS에 사용하고자 하는 유틸리티가 없을 때 대괄호 표기법을 사용해 커스텀 CSS를 작성할 수 있다.

<div class="h-screen flex justify-center items-center bg-[#ffaaaa]">
  <p>내용입니다.</p>
</div>

참고 : https://tailwindcss.com/docs/adding-custom-styles

Adding Custom Styles - Tailwind CSS

---

Tailwind CSS는 처음보는 내용이라 신기했다. CSS파일도 왔다갔다 안해서 좋고... 뭔가 편한거 같으면서도 뭔가 스타일링 하는 맛이 안난다고 해야되나... 🤨🤨🤨

잘 사용하면 좋은 프레임워크 같지만.... 클래스이름 긴게 너무 불편하다... 스타일링도 뭔가 한정되어보이고... 

모집공고에 자주 보이니 그래도 친해지도록 노력해야겠다. 😅