Tailwind CSS 설치 & 사용방법

Tailwind CSS 란?

Tailwind CSS 는 Utility-First 접근 방식을 사용하는 CSS 프레임워크 입니다.
컴포넌트 스타일링 보다는 단일 목적의 유틸리티 클래스를 활용하는 스타일을 정의 합니다.

Utility-First란?

여러 개의 작은 유틸리티 클래스들을 조합하여 원하는 스타일을 만드는 방식입니다.
[유틸리티 클래스]는 일반적으로 단일 스타일 속성을 설정하는 짧고 간결한 클래스 입니다.

설치 과정

1. 프로젝트 생성

> npm create vite@latest my-project -- --template react
> cd my-project

1. Tailwind CSS설치

> npm install -D tailwindcss postcss autoprefixer
> npx tailwindcss init -p

1. 템플릿 경로 구성

export default {
	content: [
		"./index.html",
		"./src/**/*.{js,ts,jsx,tsx}",
	],
	them: {
		extend: {},
	},
	plugins: [],
}

1. CSS에 Tailwind 지침을 추가합니다.

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

1. 빌드

> npm run dev

1. 간단예제

// src/App.js
import React from 'react';

function App() {
  return (
    <div className="bg-blue-500 text-white p-4 rounded">
      안녕하세요~!
    </div>
  );
}

export default App;

TailwindCSS 장단점

장점

1. CSS 코드를 직접 작성하지 않아도 된다.
2. 그만큼 개발 속도가 빠르다.
3. 체계적이고 일관된 디자인 사용이 가능 하다.

단점

1. 초기 설정이 조금 복잡할 수 있다.
2. 코드가 안 이뻐짐.
3. CSS 크기가 커질 수 있다.

VScode 의 추천 익스텐션

Tailwind CSS IntelliSense 익스텐션 입니다.
자동완성을 도와줍니다.