TailwindCSSでTwitterの色を使いたい

こんにちはせぃゆーです。

今回はあるものを開発中にTailwindCSSでTwitterのアイコンの色を表現しようとしてtailwind.config.jsを編集した話です。

私自身そこまで理解しているわけではないので、詳細は公式日本語版(https://tailwindcss-ja.entap.app/)をご覧くださいあくまで私の環境でできたやり方です。

TailwindCSSには色のバリデーションとしてtext-blue-500やtext-red-500といったtext-○○-××が存在し、色が設定されています。(textの部分もborderやbgなどがあります。)

しかしTwitterのアイコンの色である’#1DA1F2’は存在していません。

もちろんcssファイルを編集してcolor:#1DA1F2でも問題はないのですが、せっかくなのでTailwindを拡張してみようと思います。

デフォルトのtailwind.config.js

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

修正後のtailwind.config.js

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
        // ここを追加
        colors: {
            'twitter': '#1DA1F2',
        }
        // ここまで
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

下記の3行が追加されています。

colors: {
    'twitter': '#1DA1F2',
}

修正後に再度ビルドするとtext-twitterクラスが作られます。

text-twitterクラスをそのままhtmlのclassに指定してあげれば色が変わります。

<svg class="">
    <title>Twitter</title>
    <path ... />
</svg>
<svg class="text-twitter">
    <title>Twitter</title>
    <path .../>
</svg>

またbg-twitterクラスも作成されているようなので背景色などにも使えます。

今回はまだ内容をほとんど把握していないですが、TailwindCSSで独自の色を作成することができました。

tailwind.config.jsにはまだまだ設定や拡張機能があると思うので、少しずつ取り入れていこうと思います。