React, Tailwind CSS, TypeScript 기본 개념과 사용이유

프론트엔드란?

프론트엔드(Frontend)란 웹사이트나 앱에서 사용자가 직접 보고 상호작용하는
화면과 기능을 개발하는 영역입니다.

우리가 웹사이트에서 볼 수 있는 버튼, 메뉴, 이미지, 글, 입력창 등의 화면을
만들고 버튼을 클릭했을 때 화면이 바뀌거나 서버에서 데이터를 받아와
보여주는 등의 동작을 구현합니다.

쉽게 말하면,

프론트엔드 = 사용자가 직접 마주하는 웹사이트의 화면과 기능을 만드는 것

반대로 사용자가 직접 보지는 못하지만, 데이터를 저장하거나 로그인 정보를
처리하고 서버에서 필요한 데이터를 전달해주는 부분은 백엔드(Backend)라고 합니다.

예를 들어 로그인 기능을 생각해보면,

사용자가 아이디와 비밀번호를 입력하면
→ 프론트엔드에서 입력값을 서버에 전달하고
→ 백엔드에서 로그인 정보를 확인한 뒤
→ 그 결과를 다시 프론트엔드에 전달합니다.

즉, 프론트엔드와 백엔드는 서로 다른 역할을 담당하지만
하나의 서비스를 만들기 위해 서로 연결되어 동작합니다.

HTML, CSS, JavaScript

웹사이트의 기본적인 구성은 HTML, CSS, JavaScript 세 가지 기술을 통해
이루어집니다.

각각의 역할을 쉽게 비유하면

HTML = 뼈대
CSS = 디자인
JavaScript = 동작

이라고 할 수 있습니다.

HTML — 웹사이트의 구조

HTML(HyperText Markup Language)은 웹사이트의 구조와 내용을 구성합니다.

텍스트, 이미지, 버튼, 입력창, 제목 등 웹페이지에 어떤 요소가 존재하는지를
정의합니다.

예를 들어,

<h1>안녕하세요</h1>
<button>클릭</button>

위 코드에서는 제목과 버튼이라는 요소를 웹페이지에 만들어줍니다.

즉,

HTML = 웹사이트의 뼈대와 구성 요소를 만드는 역할

CSS — 웹사이트의 디자인

CSS(Cascading Style Sheets)는 HTML로 만들어진 요소를 꾸며주는 역할을 합니다.

텍스트의 색상이나 크기, 굵기, 정렬뿐만 아니라 요소의 위치, 간격, 크기,
배경색 등을 설정할 수 있습니다.

예를 들어 HTML로 버튼을 만들었다면 CSS를 이용해서 버튼의 색상, 크기,
모서리 모양, 위치 등을 변경할 수 있습니다.

즉,

CSS = 웹사이트의 디자인과 배치를 담당하는 역할

JavaScript — 웹사이트에 동작 추가

JavaScript는 웹사이트에 동적인 기능과 동작을 추가하는 프로그래밍 언어입니다.

HTML과 CSS가 웹페이지의 구조와 디자인을 담당한다면,
JavaScript는 사용자의 행동이나 데이터의 변화에 따라
웹페이지가 동작하도록 만들어줍니다.

예를 들어,

• 버튼을 클릭하면 메뉴가 나타남
• 입력한 값을 확인하고 오류 메시지를 보여줌
• 서버에서 데이터를 받아 화면에 표시함
• 특정 조건에 따라 화면의 내용을 변경함

등의 기능을 구현할 수 있습니다.

즉,

JavaScript = 사용자의 행동과 데이터의 변화에 따라 웹사이트가 동작하도록 만드는 역할

세 가지를 함께 보면

HTML, CSS, JavaScript는 서로 다른 역할을 가지고 있지만
함께 사용되어 하나의 웹사이트를 만듭니다.

HTML
→ 웹사이트의 구조와 내용을 만든다.

CSS
→ 만들어진 요소의 디자인과 배치를 담당한다.

JavaScript
→ 사용자의 행동에 따라 웹사이트가 동작하도록 만든다.

예를 들어 로그인 페이지를 만든다고 하면,

HTML
→ 아이디 입력창, 비밀번호 입력창, 로그인 버튼을 만든다.

CSS
→ 입력창과 버튼의 크기, 색상, 위치 등을 꾸민다.

JavaScript
→ 로그인 버튼을 눌렀을 때 입력값을 확인하고
  서버에 로그인 요청을 보낸다.

이처럼 세 기술은 서로 다른 역할을 담당하면서 하나의 웹페이지를 구성합니다.

그런데 React, TypeScript, Tailwind CSS는 왜 사용할까?

여기서 한 가지 의문이 생길 수 있습니다.

"HTML, CSS, JavaScript만 있으면 웹사이트를 만들 수 있는데,
왜 React나 TypeScript, Tailwind CSS를 사용할까?"

웹사이트의 규모가 커지면 화면과 기능이 복잡해지고 코드의 양도 많아집니다.

그러면 다음과 같은 문제들이 발생할 수 있습니다.

• 코드가 너무 많아져서 관리하기 어려워짐
• 비슷한 코드를 반복해서 작성하게 됨
• JavaScript에서 실수로 잘못된 타입의 데이터를 사용함
• CSS가 복잡해지면서 스타일을 관리하기 어려워짐

이러한 문제를 해결하고 안정적으로 개발을 하기 위해서 여러 기술들이 나오게 되었습니다.

React

기존 JavaScript로 화면을 만드는 방식

<button id="countButton">0</button>

const button = document.getElementById("countButton");

let count = 0;

button.addEventListener("click", () => {
  count++;
  button.textContent = count;
});

기존 JavaScript를 사용하면 위 코드처럼 getElementById 등을 이용하여 HTML의 요소를 가져온 후 해당 요소를 변경합니다.

작은 화면에서는 기존 방식을 사용해도 큰 문제가 없지만, 만약 여러 정보를 같이 수정해야 한다면 문제가 생깁니다.

예를 들어

사용자 정보
 ├─ 프로필
 ├─ 게시글
 ├─ 댓글
 └─ 좋아요

한 페이지에서 위와 같은 정보가 동시에 수정되어야 한다고 할 때 어떤 DOM을 찾아 수정할지 직접 관리해야 합니다.

이러한 문제를 React가 해결해줄 수 있습니다.

React는 이러한 화면을 직접 하나하나 수정하기보다는, 화면을 컴포넌트로 나누고 데이터의 변화에 따라 UI가 어떻게 보여야 하는지를 선언적으로 작성하는 방식을 사용합니다.

React란?

React는 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리입니다.

React에서는 하나의 큰 화면을 여러 개의 컴포넌트(Component) 로 나누어 관리합니다.

예를 들어 하나의 웹 페이지가 다음과 같이 구성되어 있다고 생각해봅시다.

페이지
 ├─ Header
 ├─ Sidebar
 ├─ PostList
 │   ├─ Post
 │   ├─ Post
 │   └─ Post
 └─ Footer

각 영역을 하나의 컴포넌트로 만들면 각각의 UI를 독립적으로 관리할 수 있고, 필요한 경우 다른 곳에서도 재사용할 수 있습니다.

React에서는 이러한 컴포넌트를 만들고 데이터를 전달하거나 변경하면서 화면을 구성합니다.

React를 이해하기 위해서는 다음과 같은 개념을 먼저 알아야 합니다.

• Component
• JSX
• Props
• State
• Event

Component

컴포넌트(Component)는 React에서 화면을 구성하는 하나의 독립적인 단위입니다.

예를 들어 웹 사이트의 상단에 있는 헤더를 컴포넌트로 만든다면 다음과 같이 작성할 수 있습니다.

function Header() {
  return <header>My Website</header>;
}

그리고 App 컴포넌트에서 Header를 사용할 수 있습니다.

function App() {
  return (
    <>
      <Header />
      <main>내용</main>
    </>
  );
}

이처럼 하나의 큰 화면을 여러 개의 컴포넌트로 나누어 관리할 수 있습니다.

컴포넌트로 화면을 나누면 각각의 UI를 독립적으로 관리할 수 있고, 동일한 UI가 필요한 경우 재사용할 수도 있습니다.

예를 들어 게시글 하나를 Post 컴포넌트로 만들면 여러 게시글에서 같은 컴포넌트를 사용할 수 있습니다.

App
 ├─ Header
 ├─ PostList
 │   ├─ Post
 │   ├─ Post
 │   └─ Post
 └─ Footer

따라서 컴포넌트는 React에서 화면을 작은 단위로 나누고 관리하기 위한 기본적인 단위라고 할 수 있습니다.

JSX

React에서 컴포넌트를 작성하다 보면 JavaScript 코드 안에서 HTML과 비슷한 문법을 사용하는 것을 볼 수 있습니다.

function Greeting() {
  return <h1>Hello!</h1>;
}

이처럼 JavaScript 안에서 HTML과 비슷한 문법으로 UI를 작성할 수 있도록 해주는 것이 JSX입니다.

JSX에서는 {}를 이용하여 JavaScript의 값을 화면에 사용할 수도 있습니다.

const name = "홍길동";

function Greeting() {
  return <h1>안녕하세요, {name}님!</h1>;
}

위 코드에서 {name}에는 JavaScript의 name 변수에 저장된 값이 들어갑니다.

즉, JSX를 사용하면 JavaScript의 데이터와 UI를 한 곳에서 자연스럽게 표현할 수 있습니다.

Props

컴포넌트를 여러 곳에서 재사용하려면 컴포넌트마다 다른 데이터를 전달할 수 있어야 합니다.

React에서는 Props를 이용하여 컴포넌트에 데이터를 전달할 수 있습니다.

예를 들어 사용자 이름을 보여주는 Profile 컴포넌트를 만든다고 해봅시다.

function Profile({ name }) {
  return <h1>{name}</h1>;
}

그리고 컴포넌트를 사용할 때 name을 전달할 수 있습니다.

function App() {
  return (
    <>
      <Profile name="홍길동" />
      <Profile name="김철수" />
    </>
  );
}

그러면 같은 Profile 컴포넌트를 사용하면서도 서로 다른 이름을 보여줄 수 있습니다.

App
 │
 ├─ name="홍길동" → Profile
 │
 └─ name="김철수" → Profile

이처럼 Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하기 위해 사용하는 값입니다.

이를 통해 하나의 컴포넌트를 여러 데이터에 맞게 재사용할 수 있습니다.

State

Props가 컴포넌트 외부에서 전달받는 값이라면, State는 컴포넌트가 직접 관리하는 값입니다.

예를 들어 버튼을 클릭할 때마다 숫자가 증가하는 카운터를 만들어보겠습니다.

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

여기서

const [count, setCount] = useState(0);

은 세 부분으로 나누어 볼 수 있습니다.

count
→ 현재 State의 값

setCount
→ State의 값을 변경하는 함수

useState(0)
→ State의 초기값을 0으로 설정

버튼을 클릭하여 setCount를 실행하면 State가 변경되고, React는 변경된 값을 바탕으로 화면을 다시 렌더링합니다.

사용자가 버튼 클릭
        ↓
   setCount() 실행
        ↓
     State 변경
        ↓
  컴포넌트 다시 렌더링
        ↓
  변경된 화면 표시

이처럼 React에서는 State를 통해 화면에 표시되는 변경되는 값을 관리할 수 있습니다.

예를 들어 로그인 여부, 모달의 열림 여부, 입력값, 카운터 값 등 사용자와 상호작용하면서 변경되는 값을 State로 관리할 수 있습니다.

이벤트 처리

웹 페이지에서는 사용자의 여러 행동을 처리해야 합니다.

예를 들어 버튼을 클릭하거나, 입력창에 글자를 입력하거나, 마우스를 움직이는 등의 행동이 있습니다.

React에서는 이러한 사용자 행동을 이벤트(Event) 를 이용하여 처리할 수 있습니다.

function Button() {
  const handleClick = () => {
    console.log("버튼이 클릭되었습니다.");
  };

  return (
    <button onClick={handleClick}>
      클릭
    </button>
  );
}

onClick은 버튼이 클릭되었을 때 실행할 함수를 지정하는 React의 이벤트 처리 방식입니다.

기존 JavaScript에서는 다음과 같이 이벤트를 등록했습니다.

button.addEventListener("click", handleClick);

React에서는 JSX에서 다음과 같이 작성할 수 있습니다.

<button onClick={handleClick}>
  클릭
</button>

이벤트와 State를 함께 사용하면 사용자의 행동에 따라 화면을 변경할 수 있습니다.

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <button onClick={handleClick}>
      {count}
    </button>
  );
}

위 코드에서는 사용자가 버튼을 클릭하면 이벤트가 발생하고, setCount를 통해 State가 변경됩니다.

State가 변경되면 React가 변경된 값을 화면에 반영합니다.

React의 기본적인 흐름

지금까지 살펴본 내용을 하나의 흐름으로 정리하면 다음과 같습니다.

사용자의 행동
     ↓
   Event
     ↓
  State 변경
     ↓
컴포넌트 다시 렌더링
     ↓
변경된 데이터에 맞게 UI 업데이트

또한 컴포넌트 사이에서는 Props를 이용하여 데이터를 전달할 수 있습니다.

                 React
                   │
              Component
              /       \
             /         \
          Props        State
           ↓             ↓
      데이터 전달      상태 관리
             \         /
              \       /
                JSX
                 ↓
                UI
                 ↑
               Event
                 ↑
            사용자 행동

결국 React는 화면을 직접 찾아 하나씩 수정하는 방식보다는 컴포넌트로 화면을 구성하고, Props와 State 등의 데이터를 기반으로 UI를 표현하는 방식으로 웹 UI를 관리할 수 있도록 도와줍니다.

TypeScript

앞에서 JavaScript는 웹사이트의 동작과 기능을 담당한다고 배웠습니다.

그렇다면 JavaScript로 웹사이트를 계속 개발하면
모든 문제가 해결될까요?

JavaScript는 자유롭게 작성할 수 있다는 장점이 있지만,
프로젝트의 규모가 커지면 데이터의 형태를 관리하기 어려워질 수 있습니다.

JavaScript의 타입

JavaScript에서는 변수를 선언할 때 변수에 어떤 종류의 데이터가 들어가는지 미리 작성하지 않아도 됩니다.

let age = 17;

age = "17";

위 코드에서는 처음에 age에 숫자 17을 저장했지만, 이후에는 문자열 "17"을 저장할 수도 있습니다.

JavaScript에서는 이러한 방식이 가능합니다.

작은 프로그램에서는 큰 문제가 되지 않을 수도 있지만, 프로젝트의 규모가 커지면 개발자가 의도하지 않은 데이터가 사용되어 오류가 발생할 가능성이 높아집니다.

예를 들어 숫자를 사용해야 하는 곳에 문자열이 들어간다면 프로그램이 예상과 다르게 동작할 수 있습니다.

이러한 문제를 줄이기 위해 사용하는 것이 TypeScript입니다.

---

TypeScript란?

TypeScript는 JavaScript에 타입 시스템을 추가한 프로그래밍 언어입니다.

JavaScript와 비슷한 문법을 사용하면서도 변수나 함수 등에 어떤 종류의 데이터가 사용되는지 명확하게 지정할 수 있습니다.

let name: string = "Yeondon";
let age: number = 18;
let isStudent: boolean = true;

여기서 string, number, boolean은 데이터의 종류를 나타내는 타입(Type)입니다.

• string → 문자열
• number → 숫자
• boolean → 참 또는 거짓

이처럼 TypeScript에서는 변수에 어떤 종류의 데이터가 들어가는지 명확하게 나타낼 수 있습니다.

예를 들어 age를 number 타입으로 지정했다면,

let age: number = 17;

age = "17"; // 오류

문자열을 넣으려고 할 때 오류를 알려줍니다.

즉, TypeScript를 사용하면 코드를 실행하기 전에 잘못된 타입을 사용하는 실수를 발견할 수 있습니다.

---

함수에 타입 지정하기

TypeScript에서는 변수뿐만 아니라 함수의 매개변수와 반환값에도 타입을 지정할 수 있습니다.

function add(a: number, b: number): number {
  return a + b;
}

위 코드에서 a와 b는 number 타입이어야 하고, 함수의 결과도 number 타입이어야 합니다.

따라서 다음과 같이 잘못된 값을 전달하면 오류가 발생합니다.

add(10, "20"); // 오류

이처럼 함수가 어떤 데이터를 받아서 어떤 데이터를 반환하는지 코드만 보고도 알 수 있습니다.

---

객체에 타입 지정하기

TypeScript에서는 객체가 어떤 구조를 가지고 있어야 하는지도 정의할 수 있습니다.

interface User {
  name: string;
  age: number;
}

const user: User = {
  name: "Yeondon",
  age: 18
};

User라는 타입을 만들고 name은 문자열, age는 숫자여야 한다고 정의했습니다.

따라서 객체를 잘못 작성하면 오류를 확인할 수 있습니다.

const user: User = {
  name: "Yeondon",
  age: "18" // 오류
};

이처럼 TypeScript를 사용하면 객체가 어떤 데이터를 가지고 있어야 하는지 명확하게 정의할 수 있습니다.

---

왜 TypeScript를 사용하는가?

그렇다면 JavaScript만 사용해도 웹사이트를 만들 수 있는데, 왜 굳이 TypeScript를 사용하는 것일까요?

1. 실수를 미리 발견할 수 있다

TypeScript는 변수, 함수, 객체 등에 지정된 타입을 확인하기 때문에 잘못된 타입을 사용하는 실수를 개발 과정에서 발견할 수 있습니다.

프로그램을 실행한 뒤 오류를 발견하는 것보다 코드를 작성하는 과정에서 문제를 발견하고 수정하는 것이 훨씬 편리합니다.

2. 코드 자동완성과 가독성이 좋아진다

타입을 명확하게 지정하면 변수나 객체에 어떤 데이터가 들어가는지 쉽게 알 수 있습니다.

또한 VS Code와 같은 개발 도구에서는 이러한 타입 정보를 활용하여 자동완성이나 오류 표시 등의 기능을 제공하기 때문에 코드를 작성하기도 편해집니다.

3. 큰 프로젝트에서 유지보수하기 편하다

프로젝트의 규모가 커지면 여러 사람이 함께 코드를 작성하고, 기존 코드를 수정하는 일이 많아집니다.

이때 변수나 함수가 어떤 타입의 데이터를 사용하는지 명확하게 정해져 있다면 다른 사람이 작성한 코드를 이해하고 수정하기 쉬워집니다.

따라서 TypeScript는 단순히 오류를 줄이기 위한 도구가 아니라 프로젝트가 커졌을 때 코드를 안정적으로 관리하기 위한 기술이라고 할 수 있습니다.

---

React와 TypeScript

TypeScript는 React와 함께 사용하는 경우가 많습니다.

React에서는 Props를 통해 컴포넌트에 데이터를 전달하는데,
TypeScript를 사용하면 Props로 어떤 데이터가 들어와야 하는지
미리 정의할 수 있습니다.

Tailwind CSS

앞에서 CSS는 HTML로 만들어진 요소의 디자인과 배치를 담당하는 역할이라고 설명했습니다.

CSS를 사용하면 글자의 색상이나 크기, 요소의 크기와 위치, 여백, 배경색 등 웹사이트의 다양한 스타일을 설정할 수 있습니다.

그렇다면 CSS를 작성할 때도 더 편하게 사용할 수 있는 방법이 있을까요?

여기서 등장하는 것이 Tailwind CSS입니다.

---

기존 CSS 작성 방식

일반적으로 CSS를 사용할 때는 HTML과 CSS를 별도의 파일에서 작성합니다.

예를 들어 버튼을 하나 만든다고 하면,

<button class="button">클릭</button>

CSS에서는 button이라는 클래스를 만들고 원하는 스타일을 작성합니다.

.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
}

이렇게 HTML에서는 어떤 클래스를 사용할지 지정하고, CSS에서는 해당 클래스에 어떤 스타일을 적용할지 작성합니다.

이 방식은 CSS의 기본적인 작성 방법이며, 웹사이트를 만드는 데 충분히 사용할 수 있습니다.

하지만 프로젝트의 규모가 커지면 CSS 파일에 작성해야 하는 스타일이 많아지고, 비슷한 스타일의 클래스를 반복해서 만들게 되는 경우가 있습니다.

이러한 문제를 조금 더 편하게 해결할 수 있도록 만들어진 것이 Tailwind CSS입니다.

---

Tailwind CSS란?

Tailwind CSS는 미리 만들어진 Utility Class를 조합하여 HTML에서 직접 스타일을 작성할 수 있도록 도와주는 CSS 프레임워크입니다.

예를 들어 Tailwind CSS를 사용하면 버튼을 다음과 같이 작성할 수 있습니다.

<button class="bg-blue-500 text-white px-4 py-2">
  클릭
</button>

별도의 CSS 파일에서 .button이라는 클래스를 만들지 않고 HTML의 class에 여러 클래스를 작성했습니다.

각 클래스는 특정한 하나의 스타일을 담당합니다.

• bg-blue-500 → 배경색
• text-white → 글자색
• px-4 → 좌우 여백
• py-2 → 위아래 여백
  이처럼 여러 클래스를 조합하여 하나의 디자인을 만들 수 있습니다.

---

Utility Class란?

Tailwind CSS의 핵심 개념 중 하나가 Utility Class입니다.

Utility Class는 하나의 클래스가 하나의 스타일이나 작은 기능을 담당하도록 만들어진 클래스입니다.

예를 들어,

<div class="text-center mt-4">
  안녕하세요
</div>

여기서

text-center → 글자를 가운데 정렬
mt-4       → 위쪽 여백 추가

와 같이 각각의 클래스가 하나의 역할을 담당합니다.

이러한 작은 스타일들을 필요한 만큼 조합하여 원하는 디자인을 만들 수 있습니다.

즉,

Utility Class = 하나의 스타일을 담당하는 작은 CSS 클래스

라고 생각할 수 있습니다.

---

반응형 디자인

웹사이트는 컴퓨터뿐만 아니라 태블릿이나 스마트폰에서도 사용됩니다.

따라서 화면의 크기에 따라 웹사이트의 모습이 달라지도록 만드는 반응형 디자인(Responsive Design)이 중요합니다.

기존 CSS를 사용한다면

<div class="text">
  안녕하세요
</div>

.text {
  font-size: 14px;
}

@media (min-width: 768px) {
  .text {
    font-size: 18px;
  }
}

@media (min-width: 1024px) {
  .text {
    font-size: 24px;
  }
}

위 코드를 보면 기본적으로 글자 크기를 14px로 설정하고, 화면의 너비가 768px 이상이면 18px, 1024px 이상이면 24px로 변경하고 있습니다.

이를 Tailwind CSS로 작성하면 다음과 같습니다.

<div class="text-sm md:text-lg lg:text-2xl">
  안녕하세요
</div>

Tailwind CSS에서는 md, lg와 같은 반응형 접두사를 사용하여 화면 크기에 따른 스타일을 클래스만으로 지정할 수 있습니다.

기본 화면 → 작은 글자
md        → 중간 크기의 글자
lg        → 큰 글자

즉, 별도의 미디어 쿼리를 직접 작성하지 않고도 화면 크기에 따른 스타일을 쉽게 적용할 수 있습니다.

---

왜 Tailwind CSS를 사용하는가?

그렇다면 기존 CSS로도 웹사이트를 만들 수 있는데, 왜 Tailwind CSS를 사용하는 것일까요?

1. CSS를 빠르게 작성할 수 있다

Tailwind CSS에서는 자주 사용하는 스타일이 Utility Class로 제공되기 때문에 CSS 코드를 직접 작성하는 시간을 줄일 수 있습니다.

<button class="bg-blue-500 text-white px-4 py-2 rounded-lg">
  클릭
</button>

위처럼 필요한 스타일을 클래스 조합만으로 빠르게 적용할 수 있습니다.

2. HTML과 스타일을 한눈에 확인할 수 있다

Tailwind CSS에서는 HTML의 class를 확인하면 해당 요소에 어떤 스타일이 적용되어 있는지 쉽게 확인할 수 있습니다.

별도의 CSS 파일을 찾아가서 어떤 클래스에 어떤 스타일이 적용되어 있는지 확인하는 과정을 줄일 수 있습니다.

3. 반응형 디자인을 쉽게 구현할 수 있다

sm, md, lg와 같은 반응형 접두사를 사용하면 화면 크기에 따라 다른 스타일을 적용할 수 있습니다.

따라서 모바일, 태블릿, 데스크톱 등 다양한 화면 크기에 대응하는 웹사이트를 편리하게 만들 수 있습니다.

4. 스타일을 일관되게 관리하기 쉽다

Tailwind CSS는 정해진 클래스와 디자인 시스템을 기반으로 스타일을 작성하기 때문에 프로젝트 전체에서 비슷한 방식으로 스타일을 적용하기 쉽습니다.

---

결국 Tailwind CSS는 CSS를 없애는 기술이 아니라 CSS를 더 빠르고 일관된 방식으로 작성할 수 있도록 도와주는 도구라고 할 수 있습니다.