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

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

はじめに

どーも、入田 / ぐるたか @guru_taka です!
Tailwind CSS には、デフォルトで濃薄含む様々な色が登録されていますが、実際にはデフォルトに存在しない色を使用したいケースも多々あるはずです
そこで、今回は Tailwind CSS のカラーパレットを拡張する方法を紹介します。
参考:Customizing Colors - Tailwind CSS

バージョン情報

  • tailwindcss:2.1.1
  • postcss:8.2.8
  • autoprefixer:10.2.5

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

Tailwind CSS にカラーパレットを拡張する時は、Tailwind CSS の設定ファイル tailwind.config.js に記述します。
具体的なコードは以下の通りです。
// tailwind.config.js module.exports = { // 追加 theme: { extend: { colors: { // 'カラー名': 'カラーコード' 'dark-green': '#06bbbc', }, }, }, };
上記のように theme > extend > colors に、'カラー名': 'カラーコード' を記述しましょう。

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

拡張したカラーパレットは、text-カラー名(例:text-dark-green)や bg-カラー名(例:bg-dark-green)のように記述することで、使用できます。

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

ここまで、カラー名とカラーコードが 1 対 1 で登録されていましたが、ネストしてカラー名を拡張することも可能です。
コードは以下のようになります。
// tailwind.config.js module.exports = { theme: { extend: { colors: { // 例 primary: { light: '#59d3d4', DEFAULT: '#06bbbc', dark: '#008c8d', }, }, }, }, };
使用例は以下の通りです。
  • text-primary
  • text-primary-light
  • text-primary-dark
このように DEFAULTprimary 単体でのカラーを意味します。

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

カラーパレットを拡張するのではなく、上書きすることも可能です。以下のように theme > colors に、'カラー名': 'カラーコード' を記述しましょう。
// tailwind.config.js module.exports = { // 追加 theme: { colors: { // 'カラー名': 'カラーコード' 'primary-green': '#06bbbc', }, }, };
この場合、デフォルトのカラーパレットが上書きされてしまい、text-white などのデフォルト色が使えなくなります。ご注意ください。

最後に

以上になります。カラーパレットを拡張することで、Tailwind CSS による開発効率が上がります。参考になれば幸いです!
ここまでご覧いただき、ありがとうございました!

株式会社キカガク コンテンツマーケティング責任者
入田 / ぐるたか
twitter: @guru_taka

参考文献

RSS フィードで fwywd の技術記事を購読しよう

fwywd(フュード) のシェアボタンにある RSS フィードを利用すれば、新しい記事が出るたびに自動的に通知を無料で受け取ることができます。
Slack への連携はたったの5分で行うことができ、以下の記事でその手順を具体的に紹介しています。
ぜひ、fwywd(フュード) が日々更新する技術記事をキャッチアップしていただけると嬉しいです。
subscribe-rss-feed

fwywd では開発メンバーを募集しています

recruitment
fwywd では採用試験を無料で公開しています。
採用への応募の有無を問わず、Web アプリケーションの開発を学びたい多くの方にとって有益な試験内容となるように設計しています。 ぜひ、fwywd の面白い採用試験を覗いてみてください。