Tailwind CSS 커스터마이징

Tailwind CSS 커스터마이징

 

Tailwind CSS 커스터마이징 개요

Tailwind는 tailwind.config.js 파일을 통해 기본 스타일을 확장하거나 변경할 수 있습니다.

이를 활용하면 프로젝트에 맞는 색상, 폰트, 간격 등을 자유롭게 정의할 수 있습니다.

설정 파일 생성 및 기본 구조

Tailwind 설정 파일이 없다면 아래 명령어로 생성할 수 있습니다.

npx tailwindcss init

 

생성된 tailwind.config.js 파일의 기본 구조는 다음과 같습니다.

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

---

색상 커스터마이징

Tailwind에서 제공하는 기본 색상 외에도 프로젝트에 맞게 색상을 추가할 수 있습니다.

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#1D4ED8', // 브랜드 메인 색상
        secondary: '#9333EA', // 보조 색상
        customGray: {
          light: '#F3F4F6',
          DEFAULT: '#6B7280',
          dark: '#374151',
        },
      },
    },
  },
};

• 이제 Tailwind 클래스에서 bg-primary, text-secondary, text-customGray-dark 등의 커스텀 색상을 사용할 수 있습니다.

폰트 커스터마이징

Tailwind에서 폰트를 설정할 때, Google Fonts와 함께 사용할 수도 있습니다.

Google Fonts 적용

1. Google Fonts에서 원하는 폰트를 가져옵니다.
2. index.css 또는 _app.tsx에서 폰트를 불러옵니다.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');

1. tailwind.config.js에서 폰트를 설정합니다.

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Poppins', 'sans-serif'],
        heading: ['Montserrat', 'sans-serif'],
      },
    },
  },
};

• 이제 className="font-heading"과 같이 사용하면 Montserrat 폰트가 적용됩니다.

 

스페이싱(Spacing) 커스터마이징

Tailwind의 spacing 속성을 확장하여 여백과 패딩 값을 사용자 정의할 수 있습니다.

module.exports = {
  theme: {
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
    },
  },
};

• 이제 className="w-128 h-128"과 같은 Tailwind 클래스를 사용할 수 있습니다.

 

Tailwind 플러그인 사용하기

Tailwind는 공식 플러그인을 지원하며, 이를 활용하면 UI 스타일을 더욱 강화할 수 있습니다.

1. @tailwindcss/forms 플러그인

이 플러그인은 폼 요소를 Tailwind 스타일에 맞게 꾸며줍니다.

npm install @tailwindcss/forms

• tailwind.config.js에서 플러그인을 추가합니다.

module.exports = {
  plugins: [
    require('@tailwindcss/forms'),
  ],
};

• 이제 input 요소에 Tailwind 스타일이 기본적으로 적용됩니다.

2. @tailwindcss/typography 플러그인

블로그나 문서를 작성할 때, 가독성을 높이기 위해 사용할 수 있습니다.

npm install @tailwindcss/typography

• 설정 파일에 추가한 후 다음과 같이 사용합니다.

module.exports = {
  plugins: [
    require('@tailwindcss/typography'),
  ],
};

import React from 'react';

const Article = () => {
  return (
    <article className="prose lg:prose-xl">
      <h1>Tailwind CSS Typography 플러그인</h1>
      <p>이 플러그인은 문서 스타일을 더욱 깔끔하게 만들어줍니다.</p>
    </article>
  );
};

export default Article;

• prose 클래스를 추가하면 문서 스타일이 자동으로 적용됩니다.

 

개인 프로젝트에 Tailwind 브랜드화하기

개인 프로젝트에서 Tailwind를 브랜드화하려면 다음과 같은 요소들을 고려해야 합니다.

• 일관된 색상 팔레트 설정: tailwind.config.js에서 색상을 정의
• 커스텀 폰트 사용: 아이덴티티에 맞는 폰트 적용
• 디자인 시스템과의 통합: 디자인 시스템 문서와 Tailwind 클래스를 정리
• Tailwind 플러그인 활용: 프로젝트 성격에 맞는 플러그인 추가
• 컴포넌트 스타일 가이드 제작: UI 재사용성을 높이기 위해 공통 스타일 정의