こんにちはせぃゆーです。
今回はあるものを開発中に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にはまだまだ設定や拡張機能があると思うので、少しずつ取り入れていこうと思います。
コメント