はじめに
こんにちは、スタートアップでフロントエンドエンジニアをしているひろです
。
今回はフロントエンドの開発でよく使われている Tailwind CSS について自分がよくするカスタマイズをまとめてみました。
なにかの参考にして頂けたら幸いです。
（久しぶりの投稿なので優しい目で見てもらえたら幸いです〜！！
）
目次
1.カラーパレットの追加
2.コンテンツの高さ、幅の指定したい時
3.クラスのまとめ、設定
4.プラグインの設定と個人的によく使うもの
1. カラーパレットの追加
プロジェクトによってスタイルガイドやデザインなどにあるベースカラーとなるものを指定する時は、
下記のようにtailwind.config.js に追加したいカラーコードなどを追加します。
tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
navy: {
50: '#EFF6FF',
100: '#D5DFF0',
200: '#B4C8EA',
},
yellow: '#EAAC2F',
}
},
}
}
追加したカラーコードは下記のように背景色、テキストカラーなどを指定するときに使用できます。
html
<div class="bg-navy-100">
<p class="text-yellow">yellow text</p>
</div>
2. コンテンツの高さ、幅の指定したい時
ヘッダーやナビゲーションを固定値にして表示させたいときなどに使用します
こちらもtailwind.config.js に指定したいサイズでheightやwidthに追加します。
tailwind.config.js
module.exports = {
theme: {
extend: {
height: {
'header': '4rem'
'main': 'calc(100vh - 4rem)'
},
width: {
'side': '8rem'
'main': 'calc(100vw - 8rem)'
}
},
}
}
html
<div class="h-header"></div>
<div class="h-main">
<div class="w-side"></div>
<div class="w-main"></div>
</div>
3. クラスのまとめ、設定
よく使うボタンや外部ライブラリーで追加したものにスタイルを追加したい時などに使用します。（下記はreact-mentionsをカスタムした際の一部です。）
@applyでtailwindのクラスをまとめて使うことができます。
button.css
@layer base {
.btn-default {
@apply inline-flex items-center px-4 py-2 text-base font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50;
}
.btn-primary {
@apply inline-flex items-center px-4 py-2 text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700;
}
}
mention.css
@layer base {
.mentions {
@apply my-1 mx-0;
}
.mentions__mention {
@apply text-sm text-navy-800 bg-navy-800 underline rounded border-2 border-navy-800;
}
}
html
<button class="btn-default">btn-default</button>
<button class="btn-primary">btn-primary</button>
4. プラグインの設定と個人的によく使うもの
プラグインの設定では下記のようにpluginsに設定します。
tailwind.config.js
module.exports = {
plugins: [
require('@tailwindcss/line-clamp'),
],
}
html
<p className="line-clamp-3 w-20 texy-base">
1行目 テキストテキストテキスト
2行目 テキストテキストテキスト
3行目 テキストテキストテキスト
4行目 テキストテキストテキスト
</p>
実際の表示のキャプチャー
プラグインが適用されて三行目で3点リーダーになっています。
個人的によく使うプラグイン
フォーム
三点リーダー
リント
最後に
以上です。最後まで読んでいただきありがとうございます。
不明点や間違っている点があればコメントでおしらせください。