Tailwind CSS

Tailwind CSS는 CSS 프레임워크중 하나로, 부트스트랩과 마찬가지로 m-1, flex등과 같은 미리 세팅된 유틸리티 클래스를 활용하여 HTML 코드 내에서 스타일링을 할 수 있다.

Tailwind CSS의 장점

1. Utility-First 컨셉

Tailwind CSS의 Utility-First 컨셉은 Tailwind CSS의 메인 컨셉이자, 가장 큰 장점으로 매우 쉽고 빠르게 원하는 디자인을 할 수 있게 해준다.
HTML

<div class="form-box">
	<input type="email" class="form-input" placeholder="Email" />
	<button class="form-button">
		Sign in
	</button>
</div>

CSS

.form-box {
	padding : 20px;
}
.form-input {
	padding: 15px 10px;
    border: 1px solid lightgray;
    border-radius: 8px;
}
.form-button {
	padding: 15px 20px;
    background: aquablue;
    border: none;
    border-radius: 8px;
    color: white;
}

이러한 비교적 복잡하고, HTML과 CSS를 모두 사용하는 코드에서

<div class="p-3">
	<input class="p-2 border border-gray-300 rounded-md" placeholder="Email">
  	<button class="py-2 px-4 rounded-md text-white bg-aquablue">
   		Sign in
  	</button>
</div>            

직접 CSS를 작성할 필요가 없이 코드를 작성할 수 있게 된다.
HTML-CSS를 왔다갔다하며 코드를 작성할 필요가 없어질 뿐만 아니라, 클래스명을 다시 찾아보거나 할 불편함이 없어지며, 익숙해지면 코드를 작성하는 시간이 확연히 줄어든다는 장점이 있다.

2. 일관된 디자인

모든 곳에서 동일한 색상, 사이즈, 간격 등의 유틸리티 클래스를 사용하기 때문에 스타일을 통일하기에 용이하다.

3. JavaScript 코드와의 분리

Tailwind CSS는 JavaScript 코드와 완전히 분리되어 있다. 그러므로 프로젝트 진행 도중 JavaScript 프레임워크를 변경하여도 큰 추가 작업 없이 기존의 HTML 코드를 그대로 쓸 수 있다.

Tailwind CSS의 단점

1. 코드의 난독성

class에 들어가는 내용의 길이가 지나치게 길어져서 보기에 어려워진다. 대부분의 클래스명이 CSS의 기존 속성과 비슷하여 사용하기에 어렵지는 않지만, 처음 Tailwind를 사용할 땐 코드가 보기 어려울 수도 있다는 단점이 있다.

2. JavaScript 코드 사용 불가

클래스명을 분기 처리하여 동적으로 스타일링을 설정할 수는 있지만 styled-components와 같이 JavaScript 변수 값에 따라 가로 길이를 설정하는 등의 구현은 가능하기는 하지만 무척 번거로운 설정이 필요하다는 단점이 존재한다.

Tailwind CSS 설치

npm install tailwindcss@latest postcss@latest autoprefixer@latest

1. 다음 명령어를 터미널에 입력하면 사용중인 프로젝트에서 Tailwind CSS를 사용할수 있게 된다.

@tailwind base;
@tailwind components;
@tailwind utilities;

2. 메인 CSS파일에 해당코드를 추가하여 Tailwind CSS 스타일을 추가한다.
   react를 사용할 경우
   import "tailwindcss/tailwind.css"; 를 이용하여 JavaScript코드에서 직접 import 할수도있다.
3. purge옵션을 통해 파일 크기를 최적화한다. 빌드할 때 사용하지 않는 클래스들이 제거되어 파일크기를 최적화 할 수 있다.

// tailwind.config.js
module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}'],
  ...
}

Tailwind CSS 사용

Tailwind CSS의 클래스들

• py-2 : padding-top : 0.5rem, padding-bottom: 0.5rem으로 설정한다.
• font-semibold : font-weight를 600으로 설정한다.
• rounded-lg : border-radius를 0.5rem으로 설정한다.
  그 외에 다양한 클래스들은 공식문서를 참조하면 좋다

Tailwind CSS 공식문서 : https://tailwindcss.com/