@realbase/tailwind-config

@realbase/tailwind-config

RealBase 프로젝트에서 공통으로 사용하는 Tailwind CSS 프리셋입니다. web/native 환경별 구성을 제공합니다.

설치

pnpm add -D @realbase/tailwind-config tailwindcss postcss autoprefixer

사용법

Next.js(Web)

tailwind.config.ts

import web from "@realbase/tailwind-config/web";

export default web;

src/app/globals.css 등에 기본 변수와 유틸을 정의해 두면 색상 토큰이 작동합니다.

React Native(예: Expo)

tailwind.config.ts

import native from "@realbase/tailwind-config/native";

export default native;

특징

• 공통 프리셋(base) + 환경별 확장
• Web: 컨테이너, radius 토큰, 아코디언 애니메이션, tailwindcss-animate 플러그인 포함
• Native: 최소 설정으로 RN 전용 사용성 확보
• 다크 모드: class 기반

content 경로

기본값은 src/**/*.{ts,tsx} 입니다. 필요 시 프로젝트에서 오버라이드하세요.

import web from "@realbase/tailwind-config/web";

export default {
  ...web,
  content: ["src/**/*.{ts,tsx}", "content/**/*.{md,mdx}"],
};