【Tailwind】カラーテーマをカスタマイズする方法

Tailwindでは、text-blackのように指定することでカラーを反映させることができます。

指定できるカラーはデフォルト状態でさまざまなカラーが用意されており、その一覧はこちらに記載があります。

当然開発を行なっていく中で上記のデフォルトのカラー以外を使用したい場面が出てきます。

Tailwindではカラーテーマーをカスタマイズする方法が提供されているので、その設定方法を備忘録として残します。

設定方法

tailwind.config.tsに追加したいカラーを設定していきます。

theme > extend > colors内に追加したいカラーを設定します。

例えば、下記のように設定すると、button-primaryというカラーに #090a0a を設定できます。

tailwind.config.ts
1import type { Config } from 'tailwindcss'
2
3const config: Config = {
4  ...省略...,
5  theme: {
6    extend: {
7      ...省略...,
8      colors: {
9        button: {
10          primary: '#090a0a',
11        },
12      },
13    },
14  },
15}
16export default config