[React] TailWindCSS

1- TailWindCSS란?

HTML 안에서, CSS 스타일을 만들 수 있게 해주는 CSS 프레임 워크이다.

 

CSS 프레임 워크란?

레이아웃 및 여러 컴포넌트 구성, 브라우저 호환성을 보장하는데 소요되는 시간을 최소화하기 위해 여러 웹 개발/디자인 프로젝트에 적용할 수 있는 CSS 파일 모음이다.

 

CSS 프레임워크 for React JS

• Tailwind CSS
• Material UI
• React Bootstrap
• Semantic UI
• Ant Design
• Materialize

Tailwind CSS의 장점

https://tailwindcss.com/

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

부트스트랩과 비슷하게 m-1, flex와 같이 미리 세팅된 utility class를 활용하는 방식으로 HTML에서 스타일링을 할 수 있다.

• 빠른 스타일링 가능
• class 혹은 id 명이 미리 지정돼있음
• utility class가 익숙해지는 시간이 필요할 수 있지만 플러그인이 제공돼서 금방 익숙해질 수 있다. (Tailwind CSS IntelliSense)

 

2- CRA에 TailWindCSS 세팅하기

Install Tailwind CSS with Create React App - Tailwind CSS

1. Tailwind CSS 설치 

• npm install -D tailwindcss
• npx tailwindcss init

2. tailwind.config.js 파일에 경로 설정해주기

content: [
	"./src/**/*.{js,jsx,ts,tsx}",
],

3. CSS에 directives 추가해주기

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

4. 사용하기 (JSX 안에서)

<h1 className="text-3xl font-bold underline">
  Hello world!
</h1>

3- TailWindCSS로 스타일링 해주기

className 안에 적용할 스타일을 적어준다.

 

<div className={`flex items-center justify-between w-full px-4
      py-1 my-2 text-gray-600 bg-gray-100 border rounded`}>

div {
	display: flex;
	align-items: center;
	justify-contents: space-between;
	width: 100%;
	padding-left: 1rem;
	padding-right: 1rem;
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
  	--tw-text-opacity: 1;
  	color: rgb(75 85 99 / var(--tw-text-opacity));
	--tw-bg-opacity: 1;
  	background-color: rgb(243 244 246 / var(--tw-bg-opacity));
	border-width: 1px;
	border-radius: 0.25rem;
}

위 아래가 동일한 결과를 나타낸다. TailWind CSS는 자동완성 기능도 지원하고, hover하면 어떤 CSS인지도 알려주기 때문에 금방 익숙해질 수 있을것같다. 그리고 엄청 간편하다 👍