カスタマイズする

createTailwindConfig()を利用することでお使いの環境、色などに適応させることができます。

const { light, dark } = require('@charcoal-ui/theme')
const { createTailwindConfig } = require('@charcoal-ui/tailwind-config')

/**
 * @type {import('tailwindcss/tailwind-config').TailwindConfig}
    */
module.exports = {
    darkMode: false,
    content: ['./src/**/*.tsx', './src/**/*.html'],
    presets: [
    createTailwindConfig({
        version: 'v3',
        theme: {
        ':root': light,
        '@media (prefers-color-scheme: dark)': dark,
        },
    }),
    ],
}

createTailwindConfigには以下のオプションを渡すことができます。

ThemaMap について

charcoal は Tailwind.css の通常のダークモード（dark:〇〇 系のクラス ）をサポートしません。
なぜなら charcoal における「色」は、同じ名前でも light テーマと dark テーマで違うカラーコードであり得るからです。
これを表現するために@charcoal-ui/tailwind-config ではtheme というオプションを受け取ります。

以下の例は :root（つまり通常ケース）では light テーマを、システムの設定がダークモードである場合は dark テーマを使用するものです。

createTailwindConfig({
    version: 'v3',
    theme: {
        ':root': light,
        '@media (prefers-color-scheme: dark)': dark,
    },
})

themeオプションを設定する場合、ダークテーマ対応を行わないサービスであっても:rootに必ず自身のプロダクトのカラーテーマを渡す必要があります。

theme をこのように書くと、 このような CSS Variables を生成します。

/* 以下はイメージです */

:root {
  --tailwind-color-background1: #fff;
  --tailwind-color-background2: #f5f5f5;
  /* ... */
}

@media (prefers-color-scheme: dark) {
  :root {
    --tailwind-color-background1: #1f1f1f;
    --tailwind-color-background2: #000000;
    /* ... */
  }
}

このとき、以下のように書く必要はありません。
キーが @media で始まる場合はビルド時に:root が補われます。

{
    theme: {
        // これは間違い！！
        '@media (prefers-color-scheme: dark)': {
            ':root': dark
        },

        // 正しくはこう
        '@media (prefers-color-scheme: dark)': dark
    }
}

themeのキーとして通常のセレクタを指定することもできます。
これによりダークモードの切り替えがDOMの状態に依存するケースにも対応します。localStorage などで JS での切り替えを実装しているアプリケーションはこのような手法が好ましいでしょう。

createTailwindConfig({
    version: 'v3',
    theme: {
        ':root': light,
        'html[data-theme="dark"]': dark,
    },
})

/* 以下はイメージです */

:root {
  --tailwind-color-background1: #fff;
  --tailwind-color-background2: #f5f5f5;
  /* ... */
}

html[data-theme='dark'] {
  --tailwind-color-background1: #1f1f1f;
  --tailwind-color-background2: #000000;
  /* ... */
}