Tailwind CSS를 알아보자
Tailwind CSS를 실제 프로젝트를 하면서 적용해본 적은 없는데
생각보다 찬양하는 사람들도 많고 그렇게 편하다고 하길래 한 번 공부해봤다.
하지만 공부라기보단Tailwind CSS 찍먹 포스트
Tailwind CSS 🌊
HTML 문서 내에서 웹 사이트 구축이 가능하게 만드는 것이 목표!
이것을 실현하기 위한 기법이 utility-first이다. 미리 구현된 css를 사용한다는 것!
장점
1. Next.js에서 CSS-in-JS 보다 도입이 쉽다.
React의 스타일 툴로 많이 사용되는 Styled-components나 Emotion은 CSS-in-JS로 CSS 코드처럼 보이지만, 사실 JavaScript 코드이고, 브라우저에서 JavaScript 파일이 읽혀야지만 CSS 적용이 된다. 서버사이드 렌더링을 하는 Next.js 경우 이러한 CSS-in-JS툴을 사용하려면 별도의 설정을 해주어야 사용이 가능한데, Tailwind CSS는 순수 CSS로 파일을 생성해주기 때문에 JavaScript에 의존하지 않아도 된다. (서버사이드 렌더링의 장점을 살릴 수 있다.)
2. 클래스명을 고민하지 않아도 된다.
클래스명을 짓는 일은 은근 까다로운 일이고, 프로젝트가 커질 수록 클래스명을 기억하는 것이 쉽지 않은데, Tailwind CSS는 미리 클래스명이 지정되어 있고, 그것을 가져다 쓰는 것이라 클래스명을 지을 필요가 없다. 그래서 클래스명 고민하는 시간을 아낄 수 있고, 클래스명이 충돌돼서 예기치 못하게 다른 스타일이 적용된다던가 하는 일이 발생하지 않는다.
단점
1. 코드가 못생겼다.
보통 CSS를 작성할 때는 한 속성 다음에 줄바꿈을 해서 세로로 볼 수 있도록 코드를 짜는데, 스타일링 코드를 HTML 안에 작성하다 보니 옆으로 길어져서 코드가 가독성이 떨어진다. 물론, 프리티어 등을 통해 보완할 수 있겠지만 개인적으로 일반 CSS 파일처럼 파악이 쉽게 되지 않는 느낌이 있었다. 예를 들어, input 요소에는 hover, focus, disabled 등 속성 선택자들이 많은데, 이걸 한 줄에 죽 적으니 정말 코드 가독성이 떨어진다.
2. 초기 러닝커브가 있다.
클래스 명으로 CSS를 지정하다 보니 일반 CSS 코드 말고 Tailwind CSS의 CSS 코드를 익혀야 한다. 그래서 처음에 익숙해질 때 까지 시간이 조금 걸릴 것 같다. 물론 CSS와 매우 유사하게 되어 있어서 빠르게 익힐 수 있지만, 처음 사용할 때는 조금 불편하다. Tailwind CSS에서 공식적으로 제공하는 VS code Extension인 "Tailwind CSS IntelliSense"를 설치하면 좀 더 쉽게 사용할 수 있다.
그래서 결론적으로 왜 Tailwind를 쓰냐?? (feat. 카카오 페이지)
💡 CSS-in-JS 방식과 유사하게 HTML 요소 자체에 디자인을 명시하기 때문에 기능 코드와 디자인 코드의 파편화를 막되, 유틸리티(utility)라는 개념을 통해 가독성을 해치는 부분을 최소화할 수 있다.https://fe-developers.kakaoent.com/2022/221013-tailwind-and-design-system/
실습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<title>Document</title>
</head>
<body>
<main class="w-full h-screen flex bg-gray-500 justify-center items-center">
<div class="w-[300px] h-[480px] bg-white rounded p-4">
<h3 class="text-lg font-bold mt-3">HI, RIN ✨</h3>
<h5 class="text-sm font-light text-gray-500">Study Front-end</h5>
<h2 class="text-base font-bold my-5">Study Log 🗂️</h2>
<div class="gap-4 flex mb-3">
<div class="w-full h-[80px] bg-blue-400 rounded-md text-white flex justify-center items-center">TypeScript</div>
<div class="w-full h-[80px] bg-yellow-400 rounded-md text-white flex justify-center items-center">React</div>
</div>
<div class="gap-4 flex">
<div class="w-full h-[80px] bg-orange-400 rounded-md text-white flex justify-center items-center">State Mgt LIB</div>
<div class="w-full h-[80px] bg-purple-400 rounded-md text-white flex justify-center items-center">CSS</div>
</div>
<div class="flex justify-center items-center flex-col p-4">
<p class="text-lg font-black"내가 궁금하다면?</p>
<p class="text-5xl my-1">🤔</p>
<a href="https://github.com/" class="mt-1">Github ↗</a>
</div>
</div>
</main>
</body>
</html>흠.. 아주 간단하게 느낌파악할 정도로 대충 짜봤는데 나는 개인적으로 불호^^
확실히 편리하고 빠르다는 게 느껴지긴 하지만 가독성이 안 좋은 것 같다 ㅠㅠ
