tailwind 환경 설정

-

tailwind 환경설정

client 폴더에 tailwind.config.cjs 파일 생성

// const { fontFamily } = require('tailwindcss/defaultTheme');

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  // darkMode: 'class',
  darkMode: ['class'],
  theme: {
    fontFamily: {
      sans: ['Inter', 'sans-serif'],
      mono: ['Roboto Mono', 'monospace'],
    },
    // fontFamily: {
    //   sans: ['Söhne', 'sans-serif'],
    //   mono: ['Söhne Mono', 'monospace'],
    // },
    extend: {
      width: {
        authPageWidth: '370px',
      },
      keyframes: {
        'accordion-down': {
          from: { height: 0 },
          to: { height: 'var(--radix-accordion-content-height)' },
        },
        'accordion-up': {
          from: { height: 'var(--radix-accordion-content-height)' },
          to: { height: 0 },
        },
      },
      animation: {
        'fade-in': 'fadeIn 0.5s ease-out forwards',
        'accordion-down': 'accordion-down 0.2s ease-out',
        'accordion-up': 'accordion-up 0.2s ease-out',
      },
      colors: {
        gray: {
          20: '#ececf1',
          50: '#f7f7f8',
          100: '#ececec',
          200: '#e3e3e3',
          300: '#cdcdcd',
          400: '#999696',
          500: '#595959',
          600: '#424242',
          700: '#2f2f2f',
          800: '#212121',
          850: '#171717',
          900: '#0d0d0d',
        },
        green: {
          50: '#f1f9f7',
          100: '#def2ed',
          200: '#a6e5d6',
          300: '#6dc8b9',
          400: '#41a79d',
          500: '#10a37f',
          550: '#349072',
          600: '#126e6b',
          700: '#0a4f53',
          800: '#06373e',
          900: '#031f29',
        },
        'brand-purple': '#ab68ff',
        'presentation': 'var(--presentation)',
        'text-primary': 'var(--text-primary)',
        'text-secondary': 'var(--text-secondary)',
        'text-secondary-alt': 'var(--text-secondary-alt)',
        'text-tertiary': 'var(--text-tertiary)',
        'text-warning': 'var(--text-warning)',
        'ring-primary': 'var(--ring-primary)',
        'header-primary': 'var(--header-primary)',
        'header-hover': 'var(--header-hover)',
        'header-button-hover': 'var(--header-button-hover)',
        'surface-active': 'var(--surface-active)',
        'surface-active-alt': 'var(--surface-active-alt)',
        'surface-hover': 'var(--surface-hover)',
        'surface-hover-alt': 'var(--surface-hover-alt)',
        'surface-primary': 'var(--surface-primary)',
        'surface-primary-alt': 'var(--surface-primary-alt)',
        'surface-primary-contrast': 'var(--surface-primary-contrast)',
        'surface-secondary': 'var(--surface-secondary)',
        'surface-secondary-alt': 'var(--surface-secondary-alt)',
        'surface-tertiary': 'var(--surface-tertiary)',
        'surface-tertiary-alt': 'var(--surface-tertiary-alt)',
        'surface-dialog': 'var(--surface-dialog)',
        'surface-submit': 'var(--surface-submit)',
        'surface-submit-hover': 'var(--surface-submit-hover)',
        'surface-destructive': 'var(--surface-destructive)',
        'surface-destructive-hover': 'var(--surface-destructive-hover)',
        'surface-chat': 'var(--surface-chat)',
        'border-light': 'var(--border-light)',
        'border-medium': 'var(--border-medium)',
        'border-medium-alt': 'var(--border-medium-alt)',
        'border-heavy': 'var(--border-heavy)',
        'border-xheavy': 'var(--border-xheavy)',
        /* These are test styles */
        border: 'hsl(var(--border))',
        input: 'hsl(var(--input))',
        ['switch-unchecked']: 'hsl(var(--switch-unchecked))',
        ring: 'hsl(var(--ring))',
        background: 'hsl(var(--background))',
        foreground: 'hsl(var(--foreground))',
        primary: {
          DEFAULT: 'hsl(var(--primary))',
          foreground: 'hsl(var(--primary-foreground))',
        },
        secondary: {
          DEFAULT: 'hsl(var(--secondary))',
          foreground: 'hsl(var(--secondary-foreground))',
        },
        destructive: {
          DEFAULT: 'hsl(var(--destructive))',
          foreground: 'hsl(var(--destructive-foreground))',
        },
        muted: {
          DEFAULT: 'hsl(var(--muted))',
          foreground: 'hsl(var(--muted-foreground))',
        },
        accent: {
          DEFAULT: 'hsl(var(--accent))',
          foreground: 'hsl(var(--accent-foreground))',
        },
        card: {
          DEFAULT: 'hsl(var(--card))',
          foreground: 'hsl(var(--card-foreground))',
        },
      },
      borderRadius: {
        lg: 'var(--radius)',
        md: 'calc(var(--radius) - 2px)',
        sm: 'calc(var(--radius) - 4px)',
      },
    },
  },
  plugins: [
    require('tailwindcss-animate'),
    require('tailwindcss-radix')(),
    // require('@tailwindcss/typography'),
  ],
};


Tailwind CSS 설정 파일인 tailwind.config.cjs의 내용입니다. 이 파일은 Tailwind CSS가 프로젝트의 CSS를 생성할 때 사용하는 모든 커스텀 설정과 테마 확장, 플러그인 등을 정의합니다.

Tailwind CSS는 유틸리티 우선(utility-first) CSS 프레임워크로, HTML에서 직접 클래스 이름을 조합하여 빠르게 UI를 구축할 수 있게 해줍니다. 이 설정 파일은 Tailwind CSS가 생성할 유틸리티 클래스의 종류와 값을 제어합니다.

Tailwind CSS 설정 파일의 구성 요소 설명

1. content

JavaScript
content: ['./src/**/*.{js,jsx,ts,tsx}'],
  • 용도: Tailwind CSS가 사용되지 않는 CSS를 제거(Purge)할 파일을 지정합니다. Tailwind CSS는 기본적으로 매우 큰 유틸리티 클래스 세트를 제공하지만, content 배열에 지정된 파일들을 스캔하여 실제로 HTML/JS/TS 파일에서 사용된 클래스만 최종 빌드에 포함시킵니다. 이를 통해 최종 CSS 파일 크기를 크게 줄일 수 있습니다.
  • './src/**/*.{js,jsx,ts,tsx}': src 폴더 아래의 모든 하위 폴더에서 .js, .jsx, .ts, .tsx 확장자를 가진 파일들을 대상으로 스캔하라는 의미입니다.

2. darkMode

JavaScript
darkMode: ['class'],
  • 용도: 다크 모드(Dark Mode)를 활성화하는 방법을 지정합니다.
  • ['class']: HTML <html> 요소나 특정 부모 요소에 dark 클래스가 추가되었을 때 다크 모드 스타일을 적용하라는 의미입니다. 예를 들어, <html class="dark">이면 다크 모드 스타일이 활성화됩니다.
  • 주석 처리된 darkMode: 'class'와 기능적으로 동일하며, 배열 문법은 향후 확장성을 위해 사용될 수 있습니다.

3. theme

theme 섹션은 Tailwind CSS의 기본 디자인 토큰(색상, 폰트, 간격, 크기 등)을 **확장(extend)**하거나 **덮어쓰기(override)**하는 데 사용됩니다.

  • fontFamily

    JavaScript
    fontFamily: {
  sans: ['Inter', 'sans-serif'],
  mono: ['Roboto Mono', 'monospace'],
},
    • 기본 폰트 패밀리 설정을 덮어씁니다. sans (sans-serif 폰트), mono (monospace 폰트)에 사용할 폰트를 정의합니다. 여기서는 sans 폰트로 'Inter'를, mono 폰트로 'Roboto Mono'를 지정했습니다.
    • 주석 처리된 부분은 Söhne 폰트를 사용하려 했던 이전 설정입니다.

  • extend extend 섹션은 Tailwind CSS의 기본 테마를 유지하면서 새로운 값이나 기존 값을 추가할 때 사용됩니다. 기존 값을 완전히 덮어쓰지 않습니다.

    • width

      JavaScript
      width: {
  authPageWidth: '370px',
},
      • w-authPageWidth와 같은 커스텀 유틸리티 클래스를 생성하여 370px의 너비를 쉽게 적용할 수 있도록 합니다.

    • keyframes

      JavaScript
      keyframes: {
  'accordion-down': { /* ... */ },
  'accordion-up': { /* ... */ },
},
      • CSS @keyframes 규칙을 정의합니다. 여기서는 아코디언 컴포넌트의 펼치고 닫는 애니메이션에 사용될 accordion-down과 accordion-up 키프레임을 정의합니다.
      • var(--radix-accordion-content-height)는 Radix UI 라이브러리에서 동적으로 제공하는 CSS 변수입니다.

    • animation

      JavaScript
      animation: {
  'fade-in': 'fadeIn 0.5s ease-out forwards', // 이 부분은 'fadeIn' 키프레임 정의가 없어서 문제가 될 수 있습니다.
  'accordion-down': 'accordion-down 0.2s ease-out',
  'accordion-up': 'accordion-up 0.2s ease-out',
},
      • 위에서 정의한 keyframes를 사용하여 애니메이션 유틸리티 클래스를 정의합니다.
      • 예를 들어, animate-accordion-down 클래스를 사용하면 아코디언이 0.2초 동안 부드럽게 펼쳐지는 애니메이션이 적용됩니다.
      • fade-in: 이 부분은 주석으로 처리되어 있지만, fadeIn이라는 키프레임이 keyframes 섹션에 정의되어 있지 않아 작동하지 않을 수 있습니다.

    • colors

      JavaScript
      colors: {
  gray: { /* ... */ },
  green: { /* ... */ },
  'brand-purple': '#ab68ff',
  'presentation': 'var(--presentation)',
  // ... (이 외 다양한 커스텀 색상 변수들)
  border: 'hsl(var(--border))',
  input: 'hsl(var(--input))',
  // ... (기타 Radix UI/shadcn/ui 관련 색상 변수들)
},
      • 기본 Tailwind 색상 팔레트를 확장하거나 새로운 색상을 정의합니다.
      • gray, green: 커스텀 회색과 녹색 계열의 색상 팔레트를 정의했습니다. 예를 들어, text-gray-20, bg-green-500과 같은 클래스를 사용할 수 있습니다.
      • brand-purple: 고유한 브랜드 색상(bg-brand-purple)을 정의했습니다.
      • var(--...): 대부분의 색상들은 CSS 커스텀 프로퍼티(CSS 변수)를 참조하도록 설정되어 있습니다. 이는 주로 테마 변경(예: 다크 모드/라이트 모드)을 쉽게 구현하기 위함입니다. CSS 변수를 사용하여 색상을 중앙에서 관리하고, JavaScript나 CSS를 통해 이 변수 값만 변경하면 전역적으로 색상이 바뀝니다.
      • hsl(var(--...)): hsl() 함수를 사용하여 CSS 변수에 저장된 HSL(색상, 채도, 명도) 값을 색상으로 변환합니다. 이는 주로 shadcn/ui와 같은 컴포넌트 라이브러리에서 유연한 테마 시스템을 구축하는 데 사용됩니다.

    • borderRadius

      JavaScript
      borderRadius: {
  lg: 'var(--radius)',
  md: 'calc(var(--radius) - 2px)',
  sm: 'calc(var(--radius) - 4px)',
},
      • border-radius 속성을 위한 커스텀 값을 정의합니다.
      • --radius라는 CSS 변수를 기반으로 lg, md, sm 크기의 border-radius 유틸리티 클래스(예: rounded-lg)를 생성합니다. 이것 또한 테마 유연성을 위한 방법입니다.

4. plugins

JavaScript
plugins: [
  require('tailwindcss-animate'),
  require('tailwindcss-radix')(),
  // require('@tailwindcss/typography'),
],
  • 용도: Tailwind CSS에 추가 기능을 제공하는 플러그인을 활성화합니다.
  • require('tailwindcss-animate'): CSS 애니메이션 유틸리티를 쉽게 추가할 수 있도록 해주는 플러그인입니다. animate-in, fade-in 등과 같은 클래스를 사용할 수 있게 됩니다.
  • require('tailwindcss-radix')(): Radix UI 컴포넌트와 Tailwind CSS를 함께 사용할 때 유용한 플러그인입니다. Radix UI 컴포넌트의 특정 상태(예: data-state="open")에 따라 스타일을 적용할 수 있도록 도와줍니다.
  • require('@tailwindcss/typography') (주석 처리됨): 이 플러그인은 마크다운 콘텐츠와 같이 일반적인 HTML 요소에 대한 아름다운 타이포그래피 스타일을 자동으로 적용해 주는 기능을 제공합니다. 현재는 사용하지 않도록 주석 처리되어 있습니다.

결론

이 tailwind.config.cjs 파일은 프로젝트의 시각적 디자인을 정의하고 관리하는 데 핵심적인 역할을 합니다.

  • Tailwind CSS가 빌드 시 포함할 파일 범위를 지정하고,
  • 다크 모드를 클래스 기반으로 활성화하며,
  • 프로젝트의 기본 폰트, 색상 팔레트, 크기, 애니메이션 등을 커스터마이징하고 확장합니다.
  • 특히, var(--...)와 hsl(var(--...))를 통해 CSS 변수를 적극적으로 활용하여 동적인 테마 변경 및 Radix UI와 같은 라이브러리와의 통합을 용이하게 합니다.
  • 추가적인 Tailwind CSS 플러그인을 통해 애니메이션 및 특정 컴포넌트 라이브러리(Radix UI)와의 연동을 강화합니다.

이 설정 파일을 통해 개발자는 Tailwind CSS의 강력한 유틸리티 클래스 시스템을 활용하여 프로젝트의 디자인 시스템을 효율적으로 구축하고 유지보수할 수 있습니다.




댓글

댓글 쓰기

이 블로그의 인기 게시물

아파치 보안관련 기본설정

-
 🔧 기본 설정 항목들 1. ServerTokens & ServerSignature 설명 : Apache가 클라이언트에게 서버 정보를 얼마나 제공할지 결정함. 보안 권장 설정 : ServerTokens Prod ServerSignature Off Prod : 버전 정보 없이 "Apache"만 반환. Off : 에러 페이지나 디렉토리 목록에 서버 정보 숨김. 2. Timeout 설명 : 클라이언트와의 연결에 대해 Apache가 기다리는 시간. 권장 설정 (성능 및 DoS 방지): Timeout 30 기본값 60초 → 30초로 줄이면 유휴 연결을 빠르게 정리 가능. 3. KeepAlive & MaxKeepAliveRequests 설명 : 하나의 TCP 연결로 여러 요청을 처리할 수 있게 함. 권장 설정 : KeepAlive On MaxKeepAliveRequests 100 KeepAliveTimeout 5 KeepAliveTimeout 은 너무 길면 자원 낭비. 일반적으로 2~5초 권장. 4. 디렉토리 보호 설정 <Directory /var/www/html>     Options -Indexes     AllowOverride None     Require all granted </Directory> -Indexes : 디렉토리 인덱싱 비활성화. -  AllowOverride None : .htaccess 비활성화하여 보안 강화. Apache에서 HttpOnly 쿠키 설정하기 ✅ 방법 1: Apache에서 Set-Cookie 에 HttpOnly 추가하기 <IfModule mod_headers.c> Header edit Set-Cookie ^(.*)$ "$1;HttpOnly;Secure" </IfModule> 🔎 설명: mod_headers 모듈을 사용하여 모든 Set...
자세한 내용 보기

티베로 이관 작업 절차

-
티베로 이관 작업 절차 /* 기존 DB 환경 파악 신규 DB설치시 NLS_CHARACTERSET, DB_BLOCK_SIZE 기존과 동일해야 데이터 import 시 오류없이 import 된다. */ /*1.  터미널에서 기존 db 접속후 환경 파악 */ /* 티베로 db 접속 */ /* tbsql 사용자/패스워드@sid */ tbsql sys/tibero@SID /* DB_BLOCK_SIZE 확인 */ SHOW PARAMETER DB_BLOCK_SIZE SQL> SHOW PARAMETER DB_BLOCK_SIZE NAME                         TYPE     VALUE ---------------------------- -------- ---------------------------------------- DB_BLOCK_SIZE                INT32    8192 /* CHARACTER_SET 확인 */ SQL>  SELECT * FROM SYS._VT_NLS_CHARACTER_SET; CHARACTERSET_NAME NCHAR_CHARACTERSET_NAME ----------------- ----------------------- MSWIN949          UTF16 /*2. 테이블 스페이스 생성 스크립트 실제테이블 스크립트 용량 계산 추출 */ set linesize 1000 set pagesize 50000 set trimspool on spool create_tablespace.sql SELECT 'create tablespace ' || TABLESPACE_NAME || ' datafile ''' || ...
자세한 내용 보기

윈도우 네트워크 리소스 사용권한 오류

-
이미지
윈도우에서 네트워크 공유 오류 처리 이 네트워크 리소스를 사용할 권한이 없는 것 같습니다. 이 서버의 관리자에게 문의하여 액세스 권한이 있는지 확인하십시시오. 이렇게 메세지 뜨고 공유가 안될경우 cmd 콘솔창을 띄워서 기존에 등록되어 있는 연결정보를 다 삭제 하고 다시 접속하면 연결이 된다. 연결된 정보 확인 cmd 창에서  net use C:\Windows\System32>net use 새 연결 정보가 저장됩니다. 상태         로컬      원격                      네트워크 ------------------------------------------------------------------------------- OK                     \\192.168.6.20\IPC$       Microsoft Windows Network 명령을 잘 실행했습니다. 확인후 연결 끊기 net use /delete * 실행후 y를 눌러서 계속하면 현재 연결을 끊어 버립니다. 연결을 끊고 다시 네트워크 접속을 하면 정상적으로 접속이 됩니다. 전체가 아니고 해당 연결만 삭제 하는 방법은 net use /delete \\공유폴더명 위와 같이 하여도 해결이 안 될 경우 자경증명 관리자에서 저장된 자격증명 삭제하기 윈도우 키를 누른후 자격 증명 관리자 실행   자격증명 관리자 메뉴에 들어가서 Windows 자격증명 메뉴를 클릭하여 오류가 나는 아이피를 선택하여 제거 하고 다시 접속합니다.
자세한 내용 보기