TailWindCSS

roroism 2024. 1. 2. 16:46

# TailWindCSS

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

## CSS 프레임 워크란?

- CSS 프레임워크는 레이아웃 및 여러 컴포넌트 구성, 브라우저 호환성을 보장하는데 소요되는 시간을 최소화하기 위해 여러 웹 개발/디자인 프로젝트에 적용할 수 있는 CSS 파일 모음입니다.
- 더 빠르게 애플리케이션을 스타일링 하는데 도움을 줍니다.

### CSS FRAMEWORK 종류 for React JS

1. Material UI
2. React Bootstrap
3. Semantic UI
4. Ant Design
5. Materialize
.
.

## Tailwind CSS의 장점

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

1. 그러기에 빠른 스타일링 작업이 가능하며
2. class 혹은 id 명을 작성하기 위한 고생을 하지 않아도 된다.
3. 유틸리티 클래스가 익숙해지는 시간이 필요할 수 있지만 Tailwind CSS IntelliSense 플러그인이 제공돼서 금방 익숙해질 수 있습니다.

## Tailwind CSS 플러그인(VSCode)

### Tailwind CSS IntelliSense 플러그인

html 작성 시, 입력한 문자로 시작하는 클래스명들을 보여줍니다.

### Tailwind CSS Explorer 플러그인

vscode에서 tailwind 클래스명들을 속성별로 검색 확인할 수 있습니다.

### Tailwind Docs 플러그인

Tailwind CSS Explorer과 비슷한 플러그인입니다.

vscode에서의 바로 확인하는 것이 아니라 검색한 클래스의 설명이 기입된 공식 사이트 페이지를 오픈합니다.

### Headwind 플러그인

지정한 클래스를, 속성별로 재배열 시켜줘서 클래스 파악에 도움 줍니다.

예시코드

<div class="bg-red-500 container text-white mx-auto">Mint-Coding</div>
<!-- 위코드를 아래처럼 재배열합니다. -->
<div class="container mx-auto text-white bg-red-500">Mint-Coding</div>

## CRA에 TailWindCSS 적용하기

https://tailwindcss.com/docs/guides/create-react-app

Install Tailwind CSS with Create React App - Tailwind CSS

Setting up Tailwind CSS in a Create React App project.

tailwindcss.com

참고