React / 스타일링 (3) - tailwindcss

Tailwind CSS

가장 대표적인 Utility-First CSS 프레임워크로, 이미 작성된 CSS코드가 클래스로 지정되어 있어 이를 조합하여 사용하는 방식이다.

 

*Utility-First CSS : 미리 세팅된 유틸리티 클래스를 활용하여 HTML코드 내에서 CSS를 적용시키는 것을 뜻 한다.

*유틸리티 클래스 : 공통적으로 사용되는 속성을 모아서 클래스로 만든 것이다. 중복된 코드를 방지할 수 있고 효율적으로 사용할 수 있다.

 

 

Tailwind CSS의 장단점

장점

• CSS 코드를 직접 작성하지 않아도 됨 => 개발속도가 빨라짐
• 체계적이고 일관된 디자인 사용 가능

단점

• 초기 설정이 복잡함
• 코드의 가독성이 안좋아짐 (특히 애니메이션 등을 적용 할 때는 정말 코드가 복잡해지고 더러워질 수 있다)
• css의 크기가 커질 수 있음 (내가 사용하지 않는 클래스들도 다 포함되어있음) 

 

 

---

 

 

사용 준비

1. 설치 (Tailwind CSS v3 )

1) v3으로 의존성 설치

v3에서는 설정 파일(tailwind.config.js)를 생성해 사용자 정의를 할 수 있기 때문에 설정 파일을 생성해줘야 한다.

- PostCSS : JS기반 플러그인으로 CSS를 파싱/변환함

- Autoprefixer : PostCSS용 플러그인, 브라우저 접두사(Vendor Prefix. '-webkit-', '-moz-', '-ms-', '-o-')를 자동으로 추가해줌

  (transition:transform 1s; 만 작성할 경우 -webkit-transition, -moz-transition 등 자동으로 삽입해줌)

## 설치
npm install tailwindcss@3 postcss autoprefixer

## 설정 파일 만들기
npx tailwindcss init -p

 

2) 설정 파일(tailwind.config.js) 수정

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

 

3) ./src/index.css의 기존내용 삭제 후 @tailwind 지시문 추가

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

 

4) 이때 @tailwind에서 경고가 뜬다면 3. 익스텐션 설치에 있는 익스텐션들을 설치해주면 된다.

 

 

---

 

2. 설치 (Tailwind CSS v4의 경우)

++ Vite 플러그인과 PostCSS 플러그인을 동시에 쓰면 충돌할 수 있다고 한다. 둘 중 vite 플러그인을 쓰는 방식으로 재수정하였다.

 

 

1) 터미널에 설치

npm install tailwindcss @tailwindcss/vite

 

2) vite.config.js에 플러그인 추가

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [ tailwindcss() ],
})

 

3) ./src/index.css의 기존내용 삭제 후 @tailwind 지시문 추가

@import 'tailwindcss';

 

 

---

 

 

3. 익스텐션 설치

1) PostCSS Language Support

https://marketplace.visualstudio.com/items/?itemName=csstools.postcss

PostCSS Language Support - Visual Studio Marketplace

 

2) Tailwind CSS IntelliSense

클래스를 자동완성해주는 익스텐션

https://marketplace.visualstudio.com/items/?itemName=bradlc.vscode-tailwindcss

Tailwind CSS IntelliSense - Visual Studio Marketplace

 

설치 후 편하게 자동완성을 적용하기 위해서는 다음과 같이 추가 설정이 필요하다

(난 그냥 안되는 줄 알았는데 className=" 에서 한번 띄어쓰기를 해야 자동완성이 생긴다고 한다...)

 

Mac : alt+Shift+p

Window : ctrl+Shift+p

를 누른 후 open user Settings(JSON)으로 들어간다.

 

가장 최상위 {} 안에 다음 항목을 추가한다.

  // tailwindcss
  "editor.quickSuggestions": {
    "strings": true
  },
  "files.associations": {
    "*.js": "javascript",
    "*.css": "tailwindcss"
  },

 

그래도 적용이 안된다면 vscode를 종료 후 다시 시작하면 잘 적용이 된다.

 

 

 

---

 

 

 

사용방법

 

 

공식문서 : https://tailwindcss.com/docs/installation/using-vite

공식문서에서 클래스를 찾아서 사용하면 된다.

 

어마어마한 클래스들...

 

 

예시 1

import './App.css';

function App() {
  return (
    <div className="h-screen flex justify-center items-center">
      <div className="text-3xl text-blue-700 font-bold underline">
        Vite + React
      </div>
    </div>
  );
}

 

이 때 h-screen은 height : 100vh를 뜻하며, h-[100vh]처럼 쓸 수도 있고,

text-blue-700은 text-[#1447e6] 와 같은 형식으로도 대신 작성할 수도 있다.

 

 

 

 

 

 

 

참고
- tailwind css 설치 : 
1. https://www.fdaytalk.com/npx-tailwindcss-init-npm-error-could-not-determine-executable-to-run/
2. https://www.inflearn.com/community/questions/1518289/tailwind-css-%EB%B2%84%EC%A0%BC-%EB%8B%A4%EB%A6%84%EB%AC%B8%EC%A0%9C?srsltid=AfmBOooQa_OwWVkRR8qKJ62N-dqazbGelwnTQnL14baezBbRCgg9RZda
3. https://tailwindcss.com/docs/installation/using-vite
- 자동완성 : https://frontend-development.tistory.com/96