현재 오즈코딩스쿨 강의를 통해 프론트엔드를 학습하고 있습니다.
본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.

1. tailwindcss

Tailwind CSS는 유틸리티 퍼스트(Utility-First) 방식의 CSS 프레임워크이다.
즉, 개발자가 직접 스타일을 정의하지 않고, 미리 정의된 클래스를 조합해서 UI를 빠르게 구성할 수 있도록 도와주는 도구이다.

📌 유틸리티 퍼스트(Utility-First)
유틸리티 퍼스트(Utility-First)는 UI 요소에 스타일을 적용할 때, 미리 정의된 작은 유틸리티 클래스를 사용하는 방식이다. 예를 들어, Tailwind CSS는 bg-blue-500, p-2와 같은 클래스들을 제공하여 빠르게 디자인을 구성할 수 있게 한다. 이 접근법은 빠른 개발과 일관된 스타일을 제공하지만, HTML이 다소 복잡해질 수 있다. 이를 해결하려면 PurgeCSS로 사용하지 않는 클래스를 제거할 수 있다.

1) Tailwind CSS 설치과정 (코드와 함께 작성해주세요.)

a. tailwindcss 설치

Tailwind CSS 공식사이트 링크

npm create-react-router@latest my-project

---

npm install -D tailwindcss postcss autoprefixer

npm install tailwindcss@3 postcss autoprefixer

강의에서 3버전을 사용하고있어서 @3을 붙여줘야합니다.

b. config 파일 생성

npx tailwindcss init -p

c. tailwind.config.js 파일 content 작성

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

d. index.css 코드 작성

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

만약 위 코드를 index.css 넣었는데 이렇게 뜬다면

• 익스텐션 PostCSS Language Support 설치
  
  
  
• 익스텐션 Tailwind CSS IntelliSense 설치 (자동완성기능)
  
  두가지 다 설치!! 만약 둘다 설치했는데 해결이 안되면
  설정 > File Associations > Item : *.css , Value : tailwindcss 추가
  

3) Tailwind CSS 예시

a. 홈페이지에 지정된 값을 넣을 때

import './App.css'

function App() {
  return (
    <div className='flex justify-center items-center h-screen'>
      <div className='text-5xl text-sky-600'>안녕하세요</div>
    </div>
  )
}

export default App

b. 내가 지정하고 싶을 때 대괄호-[]

import './App.css'

function App() {
  return (
    <div className='h-[700px]'>
      <div className='text-[150px] text-[rgb(88,200,170)]'>안녕하세요</div>
    </div>
  )
}

export default App

3) Tailwind CSS의 장단점

a. 장점

• 빠른 개발 속도 – HTML 안에서 바로 스타일을 지정할 수 있어 개발 속도가 빠르다.

• 일관된 디자인 유지 – 정해진 규칙 내에서만 스타일을 적용하기 때문에 디자인이 일관된다.

• 불필요한 CSS 제거 가능 – 빌드 시 사용하지 않는 클래스는 자동으로 제거되어 결과물이 가볍다.

b. 단점

• 클래스가 HTML 안에 너무 많이 붙어서 코드가 복잡해질 수 있다.

• 처음 접할 때는 클래스 이름이 생소해서 익숙해지기까지 시간이 걸릴 수 있다.