깜놀하는 해므찌로

tailwind 컬러 등록 자동화 예시 / generateColor 본문

IT

tailwind 컬러 등록 자동화 예시 / generateColor

agnusdei1207 2023. 6. 15. 17:30
반응형
SMALL
npm install --force @nextcss/color-tools

1. 설치

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,ts}"],
  theme: {
    extend: {
      colors: {
        primary: generateColors("#001650"),
      },
    },
  },
  plugins: [],
};

function generateColors(color) {
  const { toneMap } = require("@nextcss/color-tools");
  return {
    DEFAULT: color,
    ...toneMap(color),
  };
}

2. tailwind.config.js 내부에 컬러 생성 메소드 선언 및 호출

 

 

반응형
LIST

'IT' 카테고리의 다른 글

ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(Standalone[LoginPage])[Store -> Store -> Store -> Store -> InternalStateOperations -> InternalDispatcher -> PluginManager -> PluginManager]: NullInjectorError: No provider for Plug..  (0) 2023.06.16
select drop down css 커스텀 예시  (0) 2023.06.15
IONIC ion modal custom radius 속성 주기 예시 / angular ionic  (0) 2023.06.14
Angular router config 활용 예시  (0) 2023.06.14
HTML Semantic tag / Angular - tailwind @apply 사용 예시  (0) 2023.06.14
'IT' Related Articles more