tailwind

CSS 프레임워크

Posted by : yoo94 on Nov 18, 2024

Category : nextJs css

Tailwind CSS란?

Tailwind CSS: CSS 프레임워크. 미리 정의된 클래스를 사용하여 HTML 스타일을 쉽게 적용할 수 있음

예) bg-blue-500 클래스를 적용하면, 따로 CSS 스타일링 없이도 파란 배경을 만들 수 있음 예) px-4, mx-4 클래스를 적용하면, 따로 CSS 스타일링 없이도 padding, margin 관리 가능

클래스 기반: Utility-first라는 개념하에 클래스 이름으로 스타일링 가능. HTML과 CSS의 분리를 최소화하고 재사용성을 높임
커스텀 설정: tailwind.config.js 파일을 통해 사용자 정의 스타일 및 구성을 제공
일관된 디자인: 미리 정의된 클래스로 일관된 디자인 구현 가능
반응형 스타일링: 미디어 크기에 맞는 반응형 디자인을 지원하며, 클래스 접수로 편리하게 제어 가능
풍부한 자료: 거대한 커뮤니티와 풍부한 자료, 그리고 Tailwind를 이용한 여러 가지 컴포넌트

자주 사용하는 Tailwind CSS 클래스

Tailwind CSS 클래스에는 색상, 폰트, 여백, 길이, 그리드, 플렉스, 테두리 등 여러 가지 속성 정이 가능
bg-{color}: 배경색을 지정하는 클래스, 색상 코드 및 이름 정이 (예: bg-indigo-500)
text-{color}: 텍스트 색상을 지정하는 클래스, 색상 코드 및 이름 정이 (예: text-red-700)
font-{weight}: 폰트 굵기를 지정하는 클래스, 폰트 굵기 및 이름 정이 (예: font-bold, font-[700])
p-{size}, m-{size}: 패딩 및 마진을 지정하는 클래스, 각각의 패딩/마진 크기 정이 (예: p-2, m-2)
w-{size}, h-{size}: 너비 및 높이를 지정하는 클래스, 각각의 너비/높이 크기 정이 (예: w-1/2, h-64)
grid, flex: 그리드와 플렉스를 정이할 때 사용하는 클래스 (예: grid grid-rows-4)
rounded-{radius}: 요소를 둥글게 만드는 클래스 (예: rounded-lg)
border-{width}: 테두리의 두께를 정이할 때 사용하는 클래스 (예: border-4)

Next.js에서 Tailwind CSS 사용하기

설치 ```shell yarn add -D tailwindcss postcss autoprefixer npx tailwindcss init -p

2. PostCSS 설정 파일에 Tailwind 추가
```js
// postcss.config.js
module.exports = {
    plugins: {
    tailwindcss: {},
    autoprefixer: {},
    }
}

TailwindCSS를 적용할 템플릿 파일 경로를 tailwind.config.js 설정 파일에 명시한다.

/** tailwind.config.js */
module.exports = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Tailwind CSS를 사용하기 위한 CSS 파일을 생성하고 tailwindcss를 import 한다.

/* globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind 주요 개념

Tailwind CSS 공식 도큐먼트 참고: https://tailwindcss.com/docs/utility-first

Utility-First Fundamentals (유틸리티-퍼스트 기본 원칙)

TailwindCSS는 클래스 기반의 스타일링을 사용하며, 다양한 유틸리티 클래스를 통해 스타일 적용

bg-blue-500: 배경색을 파란색으로 지정 text-white: 텍스트 색상을 흰색으로 지정

p-4: 패딩을 크기 4로 지정

<div class="bg-blue-500 text-white p-4">Utility-First</div>

Handling Hover, Focus, and Other States (호버, 포커스 및 다른 상태 처리)

Tailwind CSS는 hover, focus 및 다른 상태에 대한 클래스를 제공하여 상호작용하는 스타일 처리 가능

hover:bg-red-700: 마우스 호버 상태에서 배경색 변경 focus:bg-red-700: 포커스시 배경색 변경 focus:outline-none: 포커스시 기본 아웃라인 제거

<button class="bg-red-500 hover:bg-red-700 focus:bg-red-700 focus:outline-none text-white p-3 rounded-full">
  Hover & Focus
</button>

Responsive Design (반응형 디자인)

Tailwind는 반응형 디자인을 위한 클래스를 제공하며, 화면 크기에 따라 스타일 조정 가능 ```html

Responsive

| 브레이크포인트 접두사 | 최소 너비  | CSS                         |
|------------------|---------|----------------------------|
| `sm:`             | 640px   | `@media (min-width: 640px)` |
| `md:`             | 768px   | `@media (min-width: 768px)` |
| `lg:`             | 1024px  | `@media (min-width: 1024px)`|
| `xl:`             | 1280px  | `@media (min-width: 1280px)`|



#### Dark Mode (다크모드)

- Tailwind는 다크 모드를 구현하기 위한 클래스를 제공하며, 다크 테마와 라이트 테마 간 전환을 쉽게 처리할 수 있음

dark:bg-gray-800: 다크모드에서 배경색을 어둡게 변경
dark:text-white: 다크모드에서 텍스트 색상 변경

```html
<div class="dark:bg-gray-800 dark:text-white p-4">Dark Mode</div>

Reusing Styles (스타일 재사용)

-Tailwind는 클래스를 조합해서 스타일을 재사용할 수 있으며, 사용자 정의 클래스를 생성할 수 있음

자주 사용하는 클래스 코드를 매번 컴포넌트마다 독같이 복사하는 것이 아니라, 하나의 클래스로 정리해서 재사용할 수 있음

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

@layer components {
  .btn-primary {
    @apply 
    py-2 
    px-4 
    bg-purple-500 
    text-white 
    font-semibold 
    rounded-full 
    shadow-md 
    hover:bg-purple-700;
  }
}

<button class="btn-primary">Save changes</button>

Adding Custom Styles (커스텀 스타일 추가)

tailwind.config.js 파일을 통해서 사용자 정의 스타일 및 커스텀 클래스를 추가할 수 있음

예시처럼 colors에 원하는 색상을 추가하여, Tailwind에서 사전에 정의한 색상이 아닌 사용자가 원하는 색상으로 커스텀 가능

예시: bg-blue: 기본 Tailwind 색상이 아닌, #1fb6ff 색상으로 설정됨

/** tailwind.config.js */
module.exports = {
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'pink': '#ff49db',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
    },
    extend: {
      spacing: {
        '128': '32rem',
      },
    },
  },
}

Functions & Directives (함수 및 디렉티브)

Tailwind에서는 테마 값을 동적으로 읽을 수 있는 theme() 함수와 미디어 쿼리를 동적으로 생성할 수 있는 screen() 함수를 제공

또한, Tailwind만의 규칙(@ 접두사)을 사용해서 조건에 따라 요소의 스타일을 조절 가능

@tailwind: HTML 요소에 Tailwind CSS 클래스를 동적으로 추가 가능
@-layer: CSS 규칙을 레이어별로 구성할 수 있음
@apply: CSS 클래스를 동적으로 적용할 수 있음
@config: Tailwind CSS 구성 옵션 변경 가능

About 유재석

개발자 유재석 입니다. Web Developer.

Email : jaeseok9405@gmail.com

Website : https://github.com/yoo94