Tailwind CSS のカラーパレットを拡張する方法

はじめに

バージョン情報

• tailwindcss：2.1.1
• postcss：8.2.8
• autoprefixer：10.2.5

カラーパレットを拡張するための設定ファイル

// tailwind.config.js
module.exports = {
  // 追加
  theme: {
    extend: {
      colors: {
        // 'カラー名': 'カラーコード'
        'dark-green': '#06bbbc',
      },
    },
  },
};

拡張したカラーパレットを使用する方法

ネストしてカラー名をカスタマイズすることも可能

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        // 例
        primary: {
          light: '#59d3d4',
          DEFAULT: '#06bbbc',
          dark: '#008c8d',
        },
      },
    },
  },
};

• text-primary
• text-primary-light
• text-primary-dark

【注意】カラーパレットを上書きすることも可能

// tailwind.config.js
module.exports = {
  // 追加
  theme: {
    colors: {
      // 'カラー名': 'カラーコード'
      'primary-green': '#06bbbc',
    },
  },
};

最後に

参考文献

• Customizing Colors - Tailwind CSS