1. custom color 설정하는 방법.

Tailwind CSS에서 커스텀 컬러 설정하기

// tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,jsx,ts,tsx}"
  ],
  theme: {
    extend: {
      colors: {
        'cusColor1': '#0802A3', // 로고, 뒤로가기 등등
        'cusColor2': '#91D54E', // 달력 이모티콘
        'cusColor3': '#FF7676', // 진짜 제일 많이쓰는 색깔
        'cusColor4': '#FFCD4B', // 우리가 설정한 노란색
        'cusColor5': '#40AEFF', // 우리가 설정한 파란색
        'cusColor6': '#C6F895', // 프로그레스 바 색상
      }
    },
  },
  plugins: [],
}

1. custom font 사용 방법

Tailwind에서 custom fonts사용하기

// index.css ( global.css 라고들 한다 )

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

/* 공통 디자인만 여기에 적으면 될 듯? */

@font-face {
    font-family: 'cusFont1';
    src: url(/fonts/HSSantokki-Regular.ttf);

    font-family: 'cusFont2';
    src: url(/fonts/NanumSquare_acB.ttf);

    font-family: 'cusFont3';
    src: url(/fonts/NanumSquare_acR.ttf);

    font-family: 'cusFont4';
    src: url(/fonts/Ownglyph_2022_UWY_Si_Woo-Rg.ttf);

    font-family: 'cusFont5';
    src: url(/fonts/SDSamliphopangcheTTFBasic.ttf);

    font-family: 'cusFont6';
    src: url(/fonts/Yeongdo.ttf);
}

// tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,jsx,ts,tsx}"
  ],
  theme: {
    extend: {
      colors: {
        'cusColor1': '#0802A3', // 로고, 뒤로가기 등등
        'cusColor2': '#91D54E', // 달력 이모티콘
        'cusColor3': '#FF7676', // 진짜 제일 많이쓰는 색깔
        'cusColor4': '#FFCD4B', // 우리가 설정한 노란색
        'cusColor5': '#40AEFF', // 우리가 설정한 파란색
        'cusColor6': '#C6F895', // 프로그레스 바 색상
      },
      fontFamily: {
        cusFont1: ['cusFont1'], // 산토끼체
        cusFont2: ['cusFont2'], // 나눔 스퀘어 BOLD
        cusFont3: ['cusFont3'], // 나눔 스퀘어 REGULAR
        cusFont4: ['cusFont4'], // 온글잎 시우체
        cusFont5: ['cusFont5'], // 호빵체
        cusFont6: ['cusFont6'], // 영도체
      }
    },
  },
  plugins: [],
}

1. tailwind 동적 스타일링 적용

tailwind 동적 스타일링 적용