1. Tailwind CSS

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

홈페이지에서는 Tailwind CSS를 다음과 같이 소개합니다.

‘HTML을 떠나지 않고 빠르게 빌드하는 모던 웹사이트’라는 문구인데요. 말 그대로 CSS 문서로 가지 않고 오직 HTML 문서 내에서 웹 사이트 구축이 가능하게 만드는 것이 Tailwind의 목표라고 할 수 있습니다. 이것을 실현하기 위한 기법이 utility-first 입니다.

Utility-First는 Tailwind CSS의 핵심 철학으로, 작은 단위의 유틸리티 클래스들을 조합해서 스타일링하는 방식입니다. 미리 구현된 CSS를 사용하는거죠!

사이트에 들어가시면 이 문구 바로 아래 있는 사용 예를 보실 수 있습니다. CSS를 해보신 분이라면 해당 예만 보고도 어떻게 사용하는지 짐작하실 수 있으실 것입니다. 그정도로 쉽고, 빠르게 웹사이트 구축이 가능하다는 것이죠.

만족도와 사용량을 보더라도 Tailwind의 관심도가 얼마나 올라가고 있는지를 볼 수 있습니다.

https://2024.stateofcss.com/ko-KR/tools/#css_frameworks

2022년 카카오엔터테인먼트를 비롯한 여러 기업들이 Tailwind를 도입했다고 발표한 바 있습니다. 어떠한 점이 만족도를 높게 할까요?

1. 오직 HTML 문서만 보면 된다. 공식문서도 그렇게 만들어져 있다!
2. 클래스 이름을 고민할 필요가 없고, 협업에 있어서도 문제가 없다!
3. 유지보수에 용이하다!

2. AI 시대의 Tailwind CSS

최근 ChatGPT, Claude와 같은 AI 도구들이 웹 개발에서 큰 역할을 하고 있습니다. 흥미롭게도 이러한 AI들은 대부분 Tailwind CSS를 기준으로 코드를 생성합니다.

이는 Tailwind의 유틸리티 클래스가