Tailwind CSS소개
많은 사이드 프로젝트를 하다 보니
시간의 구애를 많이 봤고
그러다 css framework를 찾아보았고
그중에 요새 떠오르는 tailwindcss를 공부해보기로 했다.
1) Tailwind CSS
한마디로 정의하면 아래와 같다.
HTML을 떠나지 않고 빠르게 빌드하는 모던 웹사이트
미리 정의된 css를 사용하는 것.
2) 만족도
년도 별로 사용량이 올라가는 걸 볼 수가 있다.
그것은 그만큼 대세가 된다는 말인 거 같다.
만족도가 올라간 것에 대한 장점은 다음과 같다.
1. 오직 html 문서만 보면 된다.
2. 클래스 이름을 고민할 필요가 없고, 협업에 있어서도 문제가 없다!
3. 유지보수에 용이하다!
3) 순위
순위는 만족도 관심도 사용량 인지도를
총틀어서 매긴 것 같다.
4) 유로컴포넌트
https://tailwindui.com/all-access
Tailwind UI - Official Tailwind CSS Components & Templates
Beautiful UI components and templates by the creators of Tailwind CSS.
tailwindui.com
tailwindui에서는 컴포넌트를 사용할 수 있도록 UI를 제공 한다.
아직 배우는 단계에서는 별로 알 필요는 없고
나중에 습득이 됐을 때
과연 월 정액을 끊고 내가 이것을 잘 활용할지
생각해봐야겠다.
기본 예제 다뤄보기
Tailwind CSS를 사용하면 기본 스타일링이 안됩니다.
tailwind용 css reset이 적용돼있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="space-y-8 bg-red-200">
<div class="w-96 h-10 bg-white shadow rounded">
w-96
</div>
<div class="w-80 bg-white shadow rounded">
w-80
</div>
<div class="w-72 bg-white shadow rounded">
w-72
</div>
<div class="w-64 bg-white shadow rounded">
w-64
</div>
<div class="w-60 bg-white shadow rounded">
w-60
</div>
<div class="w-56 bg-white shadow rounded">
w-56
</div>
<div class="w-52 bg-white shadow rounded">
w-52
</div>
<div class="w-48 bg-white shadow rounded">
w-48
</div>
</div>
</body>
</html>
<script src="https://cdn.tailwindcss.com"></script>
이한 줄만 넣으면 세팅이 완료된다.
위에 코드를 설명하면 이제부터
익혀야 할 것들이 발생한다.
초반에는 공식문서를 보면서 코딩을 하고 익히겠지만.
나중에 습득되면 그냥 css 코딩하듯이 자연스럽게
나오는 순간 엄청난 속도와 간편함과 편리함을
장착할 거 같다.