TailwindCSSをインテグレートする

PrexUIKitは、TailwindCSSを使用してスタイリングされています。

インテグレート方法

カスタマイズなしでデフォルトのスタイルを使用できます。アプリケーションのエントリーポイントの先頭に以下を配置するだけで、コンポーネントがすぐに使用可能になります。

import "@prex0/uikit/styles.css";

TailwindCSS Config

ダークモードの設定によっては、tailwindの設定にsafelist: ['dark']を追加する必要があるかもしれません。

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{ts,tsx}'],
  darkMode: ['class'], 
  safelist: ['dark'], 
  theme: {
    fontFamily: {
      sans: ['Inter', 'sans-serif'],
    },
  },
  plugins: [],
};

Toggling light / dark mode

カラーモードを扱う方法は多数あります。 Prex UIKitでは、ルートのhtmlタグにdarkというクラス名を追加することで、カラーモードを切り替えできます。

Colorscheme override

@tailwind base;
 
@layer base {
  :root {
    --text-prex-inverse: theme(colors.gray.50);
    --text-prex-foreground: theme(colors.gray.950);
    --text-prex-foreground-muted: theme(colors.gray.600);
    --text-prex-error: theme(colors.rose.600);
    --text-prex-primary: theme(colors.indigo.600);
    --text-prex-success: theme(colors.lime.600);
    --text-prex-warning: theme(colors.orange.600);
    --text-prex-disabled: theme(colors.gray.400);
    --bg-prex-default: theme(colors.gray.50);
    --bg-prex-default-hover: theme(colors.gray.200);
    --bg-prex-default-active: theme(colors.gray.300);
    --bg-prex-alternate: theme(colors.gray.200);
    --bg-prex-alternate-hover: theme(colors.gray.300);
    --bg-prex-alternate-active: theme(colors.gray.400);
    --bg-prex-inverse: theme(colors.gray.100);
    --bg-prex-inverse-hover: theme(colors.gray.200);
    --bg-prex-inverse-active: theme(colors.gray.300);
    --bg-prex-primary: theme(colors.indigo.600);
    --bg-prex-primary-hover: theme(colors.indigo.700);
    --bg-prex-primary-active: theme(colors.indigo.800);
    --bg-prex-secondary: theme(colors.slate.200);
    --bg-prex-secondary-hover: theme(colors.slate.300);
    --bg-prex-secondary-active: theme(colors.slate.400);
    --bg-prex-error: theme(colors.rose.600);
    --bg-prex-warning: theme(colors.orange.600);
    --bg-prex-success: theme(colors.lime.300);
    --bg-prex-default-reverse: theme(colors.gray.950);
  }
 
  .dark {
    --text-ock-inverse: theme(colors.gray.950);
    --text-ock-foreground: theme(colors.gray.50);
    --text-ock-foreground-muted: theme(colors.gray.400);
    --text-ock-error: theme(colors.rose.400);
    --text-ock-primary: theme(colors.indigo.400);
    --text-ock-success: theme(colors.lime.400);
    --text-ock-warning: theme(colors.orange.400);
    --text-ock-disabled: theme(colors.gray.600);
    --bg-ock-default: theme(colors.gray.950);
    --bg-ock-default-hover: theme(colors.gray.800);
    --bg-ock-default-active: theme(colors.gray.700);
    --bg-ock-alternate: theme(colors.gray.800);
    --bg-ock-alternate-hover: theme(colors.gray.700);
    --bg-ock-alternate-active: theme(colors.gray.600);
    --bg-ock-inverse: theme(colors.gray.900);
    --bg-ock-inverse-hover: theme(colors.gray.800);
    --bg-ock-inverse-active: theme(colors.gray.700);
    --bg-ock-primary: theme(colors.indigo.400);
    --bg-ock-primary-hover: theme(colors.indigo.300);
    --bg-ock-primary-active: theme(colors.indigo.200);
    --bg-ock-secondary: theme(colors.slate.800);
    --bg-ock-secondary-hover: theme(colors.slate.700);
    --bg-ock-secondary-active: theme(colors.slate.600);
    --bg-ock-error: theme(colors.rose.400);
    --bg-ock-warning: theme(colors.orange.400);
    --bg-ock-success: theme(colors.lime.700);
    --bg-ock-default-reverse: theme(colors.gray.50);
  }
}