Tailwind CSS 사용하기

📌 Tailwind CSS

: 유틸리티 기반의 CSS 프레임워크

• 미리 정의된 클래스를 활용해 빠르고 쉽게 스타일링할 수 있다.
• tailwindcss가 정해놓은 클래스 이름을 가져다가 쓰면 되기 때문에 네이밍에 대한 고민을 하지 않아도 된다.
• 컴포넌트마다 CSS 파일을 생성하지 않아도 된다.

 

 

⏩ 설치

• 크로스 브라우징을 대응 해주는 postcss autoprefixer를 함께 설치

npm install -D tailwindcss postcss autoprefixer

 

• Tailwind CSS 패키지를 함께 설치할 경우
  https://tailwindcss.com/docs/guides/vite

pnpm add postcss autoprefixer tailwindcss postcss-import -D

 

 

 

✅ 사용

1. Tailwind CSS 설정 파일 생성

npx tailwindcss init

2. tailwind.config.js 파일에서 템플릿 경로를 설정

module.exports = {
  // 템플릿 파일의 경로 설정
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

 

 

3. '@tailwind' 지시문을 메인 CSS 파일에 추가하여 Tailwind CSS 스타일 추가

• src/styles.css 파일을 생성하고 아래 내용 추가

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

 

 

4. `tailwind.config.js` 파일에서 Tailwind CSS의 설정을 커스터마이즈

• 기존 스타일에 추가로 값을 넣어줄 경우에는 extend 객체 안에 넣어줘야 한다. 
• 새롭게 재설정 하는 경우에만 extend 객체 밖에서 작성한다.

module.exports = {
  theme: {
    extend: {
      colors: {
        customColor: '#123456',
      },
    },
  },
  plugins: [],
}

 

 

5. Tailwind CSS 클래스 사용

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1 className="text-4xl font-bold text-blue-500">
          Hello, Tailwind CSS!
        </h1>
      </header>
    </div>
  );
}

 

 

6. 빌드 프로세스에서 Tailwind CSS 적용

• postcss.config.js 파일 설정
• 빌드 과정에서 Tailwind를 사용하여 CSS 파일을 처리

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ],
}

 

 

---

 

 

* Tailwind CSS 자동 업데이트 

• Tailwind CSS를 사용하여 CSS 파일을 처리하고 실시간으로 변경 사항을 감지하여 자동으로 업데이트하는 기능

npx tailwindcss -i ./src/styles.css -o ./dist/output.css --watch

 

 

 

* IntelliSense 설치

• Tailwind CSS의 VS Code extension
• 자동완성 기능, 오류나 잠재적인 버그를 강조해주고 클래스 이름에 hover 시 해당 CSS를 보여주는 등의 기능 지원

Tailwind CSS IntelliSense - Visual Studio Marketplace

 

 

---

 

Installation - Tailwind CSS

 

Tailwind CSS 사용법, 장점과 단점

 

Hello Tailwind CSS! | 장점, 단점, 사용법 | Wonny Log