📌 테일윈드 란? (Tailwind CSS)
Tailwind는 유틸리티 우선(Utility-First) CSS 프레임워크입니다.
여기서 "유틸리티 클래스"란, 버튼이나 모달 같은 요소를 구성하는 것이 아니라,
빨간색 글자 색상이나 XL 사이즈 글자 크기처럼 각각의 CSS 속성과 값을 의미합니다.
즉, "유틸리티 우선"이라는 것은 Bootstrap처럼 미리 정의된 스타일을 사용하는 것이 아니라,
사용자가 원하는 대로 각 속성 값을 적용할 수 있다는 뜻입니다.
Bootstrap은 미리 정의된 클래스명만 사용할 수 있지만,
Tailwind는 대괄호([])를 사용하여 사용자 정의 클래스명을 직접 지정할 수 있습니다.
예를 들어, bg-[color]와 같이 사용할 수 있습니다.
Tailwind에서 정의된 클래스를 사용하면, 실제로 사용한 클래스만 포함된 CSS 파일이 생성됩니다.
이렇게 하면 필요한 스타일만 포함되어 최적화된 CSS를 만들 수 있습니다.
즉, 코드에 사용한 클래스들만 빌드된다는 점이 특징입니다.
📌 React에 Tailwind CSS 사용
Tailwind CSS는 많은 유틸리티 클래스로 구성된 프레임워크입니다.
제공되는 유틸리티 클래스들을 조합하여 CSS 코드 작성 없이 class 속성에서 스타일링을 할 수 있습니다.
예를 들어 <div className="bg-red-500 text-xl">Hello</div> 같이
class 속성에 Tailwind의 클래스명을 넣어서 해당 요소의 배경색이나 글꼴 크기를 지정할 수 있다는 거죠.
이렇게 하면 스타일을 빠르게 적용할 수 있습니다.
✅ Tailwind 라이브러리 설치
React에서 Tailwind를 사용하려면 autoprefixer도 함께 설치해야 합니다.
- autoprefixer : CSS를 최적화하고 압축하며 불필요한 공백을 제거
- tailwindcss : Tailwind 라이브러리 사용
npm i tailwindcss autoprefixer
📜 Tailwind CSS 전역사용 파일 (main.css 설정)
'📁components/📜main.css' 새 파일 생성
Tailwind는 전역 방식으로 사용됩니다. 전역 스타일을 정의할 CSS 파일이 필요합니다.
최상위 CSS에 Tailwind 지시문을 추가합니다.
이렇게 설정하면 Tailwind CSS를 전역적으로 사용할 수 있습니다.
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
📜 Tailwind CSS 적용 (최상단 컴포넌트에서 import 설정)
'📁components/📜main.tsx' ➡️ import 해서 사용
'📁components/📜main.tsx' 최상위 컴포넌트에서
생성한 Tailwind CSS 파일을 import 합니다.
이렇게 하면 자식 컴포넌트에서도 Tailwind CSS를 사용할 수 있습니다.
import './main.css';
사용예시
// ▶ 📁components/📜main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './app';
import './main.css'; // ▶ Tailwind CSS 가져오기
const root = ReactDOM.createRoot(document.querySelector("#reactRoot") as HTMLElement);
root.render(
<App/>
)
📜 PostCSS 설정 파일 (postcss.config.js)
'📜postcss.config.js' 새 파일 생성
root(최상위) 경로에 'postcss.config.js' 새 파일을 만든 후, 아래와 같이 코드를 작성합니다.
이 설정 파일은 autoprefixer를 사용하여 Tailwind가 제대로 동작하도록 합니다.
- autoprefixer : CSS가 다양한 브라우저에서 잘 작동하도록 도와주는 도구
- tailwindcss : 사용할 Tailwind CSS 라이브러리
- plugins : 두 도구(autoprefixer 와 tailwindcss) 연결
import autoprefixer from 'autoprefixer';
import tailwindcss from 'tailwindcss';
export default {
plugins: [
autoprefixer,
tailwindcss
]
}
✅ Tailwind 라이브러리 초기화
다음 명령어를 입력하면 Tailwind 설정 파일인 '📜tailwind.config.js' 가 생성됩니다.
Tailwind CSS를 쉽게 설정하고, PostCSS와 함께 사용할 수 있도록 기본 파일을 만들어 줍니다.
npx tailwindcss init -p📜 Tailwind CSS 설정 파일 (tailwind.config.js)
Tailwind CSS를 원하는 파일에서 사용할 수 있습니다.
- content : Tailwind CSS가 적용될 파일을 지정하는 옵션
/** @type {import('tailwindcss').Config} */
export default {
content: [
'./components/**/*{.jsx,.tsx}'
],
theme: {
extend: {},
},
plugins: [],
}'./components/**/*{.jsx,.tsx}'
components 폴더 아래의 모든 하위 폴더에서
.jsx 와 .tsx 로 끝나는 파일에 Tailwind CSS를 적용
📜 Tailwind CSS 사용 (자식 컴포넌트)
'📁components/📜app.tsx'
부모 컴포넌트인 '📁components/📜main.tsx' 에서 Tailwind CSS를 import 했기 때문에,
자식 컴포넌트인 '📁components/📜app.tsx' 에서도 Tailwind CSS 클래스를 사용할 수 있습니다.
Tailwind에서 글꼴 크기를 적용할 때는 text-{size} 형식의 className을 사용합니다.
className='Tailwind정의된스타일클래스명'
// 예시: className='text-xl bg-blue-500'
사용예시
// ▶ 📁components/📜app.tsx
import React from 'react';
export default function (){
return <div>
<div className='text-lg bg-red-700 inline-block w-[100px] h-96'>Hello 1</div>
<div className='text-xl bg-blue-500'>Hello 2</div>
</div>
}➕ Tailwind 임의의 값 사용 ([ ] 직접 속성 제작)
대괄호([ ]) 안에 원하는 픽셀 값을 넣으면,
Tailwind가 자동으로 해당 값을 CSS 속성으로 변환해 빌드합니다.
이를 통해 원하는 값으로 스타일을 즉석에서 설정할 수 있습니다.
<div className="w-[500px]"></div>
✅ VSCode 플러그인
- Tailwind CSS IntelliSense
- Tailwind CSS Highlight Intellisense
🔎 Tailwind CSS IntelliSense
VSCode에서 Tailwind 클래스명을 속성별로 검색하고 확인할 수 있습니다.
코드에 작성한 클래스명에 마우스를 올리거나 입력하면 세부 설명이 표시됩니다.
이 플러그인은 Tailwind의 자동완성을 도와줍니다.
🔎 Tailwind CSS Highlight Intellisense
이 플러그인은 Tailwind가 적용된 클래스가 있을 경우 점선으로 표시합니다.
어떤 코드에 Tailwind가 적용되었는지 쉽게 확인할 수 있으며,
동일 클래스 내 여러 스타일을 구분하여 읽을 수 있도록 도와줍니다.
