Tailwind CSS란?

https://tailwindcss.com/

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

 

 CSS 프레임 워크

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

종류로는 Material UI, React Bootstrap, Semantic UI, Ant Design, Materialize 등이 있다.

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

 

 Tailwind CSS의 장점

부트스트랩과 비슷하게 m-1, flex와 같이 미리 세팅된 Utility Class를 활용하는 방식으로 HTML에서 스타일링 가능하다.

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

 

 설치 및 초기설정 방법

https://tailwindcss.com/docs/installation

Installation: Tailwind CLI - Tailwind CSS

먼저 Tailwind CSS를 터미널에서 설치해주고 tailwind.config.js를 생성해주기 위해 아래와 같이 입력한다.

npm install -D tailwindcss
npx tailwindcss init

생성된 tailwind.config.js 파일에 path들을 추가해준다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

그리고 CSS 파일에 @tailwind 지시를 추가한다.

// App.css

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

그리고 Utility class를 HTML에 바로 작성해주면 된다. 리액트에서는 className안에 작성한다.