Tech Stack/TailWind

[Tailwind CSS] 04. 색상, 배경, 글자 크기, 폰트 굵기

[Tailwind CSS] 04. 색상, 배경, 글자 크기, 폰트 굵기지난 글에서는 Tailwind CSS의 핵심 개념인 Utility Class에 대해 알아보았습니다. 이번 글에서는 실제 화면에서 가장 자주 사용하는 색상, 배경색, 글자 크기, 폰트 굵기 관련 클래스를 정리해보겠습니다.화면의 분위기는 대부분 색상과 글자 스타일에서 결정됩니다. Tailwind를 사용할 때도 bg-, text-, font- 계열 클래스만 잘 이해해도 훨씬 빠르게 UI를 만들 수 있습니다.1. 이번 글에서 배울 클래스이번 글에서 다룰 Tailwind 클래스는 크게 네 가지입니다.분류예시역할배경색bg-blue-600, bg-slate-50요소의 배경색 지정글자색text-white, text-slate-700텍스트 색상 지정글..

2026. 5. 21. 19:21

Tech Stack/TailWind

[Tailwind CSS] 03. Utility Class 개념 이해하기

[Tailwind CSS] 03. Utility Class 개념 이해하기지난 글에서는 Vite + React 프로젝트에 Tailwind CSS를 설치하는 방법을 알아보았습니다. 이번 글에서는 Tailwind를 사용할 때 가장 중요한 개념인 Utility Class에 대해 정리해보겠습니다.Tailwind를 처음 보면 클래스 이름이 길고 많아 보여서 어렵게 느껴질 수 있습니다. 하지만 규칙을 알고 보면 대부분의 클래스는 하나의 스타일 역할을 가진 작은 조각입니다.1. Utility Class란?Utility Class는 하나의 역할만 담당하는 작은 CSS 클래스입니다. 예를 들어 배경색을 바꾸는 클래스, 글자색을 바꾸는 클래스, 여백을 주는 클래스가 각각 따로 존재합니다.클래스역할bg-blue-600배경색을..

2026. 5. 19. 23:03

Tech Stack/TailWind

[Tailwind CSS] 02. Vite + React 프로젝트에 Tailwind 설치하기

[Tailwind CSS] 02. Vite + React 프로젝트에 Tailwind 설치하기지난 글에서는 Tailwind CSS가 무엇인지, 기존 CSS 방식과 어떤 차이가 있는지 알아보았습니다. 이번 글에서는 직접 Vite + React 프로젝트에 Tailwind CSS를 설치하는 과정을 정리해보겠습니다.Tailwind는 CDN으로도 간단히 테스트해볼 수 있지만, 실제 프로젝트나 포트폴리오에서는 설치형으로 사용하는 것이 좋습니다. 빌드 과정에 포함되어야 사용하지 않는 스타일을 줄이고, 프로젝트 구조 안에서 안정적으로 관리할 수 있기 때문입니다.1. 이번 글에서 만들 프로젝트 구조이번 글에서는 가장 많이 사용하는 조합 중 하나인 Vite + React + Tailwind CSS 기준으로 진행합니다.Vit..

2026. 5. 18. 23:07

Tech Stack/TailWind

[Tailwind CSS] 01. Tailwind CSS란? 왜 많이 사용할까?

[Tailwind CSS] 01. Tailwind CSS란? 왜 많이 사용할까?웹 화면을 만들다 보면 버튼, 카드, 입력창, 목록, 반응형 레이아웃처럼 반복해서 꾸며야 하는 요소가 많습니다. 처음에는 CSS 파일을 직접 만들어서 하나씩 스타일을 작성하지만, 프로젝트가 커질수록 CSS가 점점 길어지고 관리하기 어려워집니다.이런 문제를 해결하기 위해 많이 사용하는 도구가 바로 Tailwind CSS입니다. Tailwind는 미리 정해진 작은 클래스들을 조합해서 화면을 만드는 CSS 프레임워크입니다.1. Tailwind CSS란?Tailwind CSS는 Utility-First CSS Framework입니다. 여기서 Utility란 하나의 역할만 담당하는 작은 CSS 클래스를 의미합니다.예를 들어 일반 CSS..

2026. 5. 17. 23:50