はじめに前回はtailwind.cssをビルドして生成する方法について説明しました。 まだの方はこちらを参考にしてください。 Tailwind CSSをカスタマイズしたい方にTailwind CSSのビルド方法について説明していきます。ターミナルからビルドしてtailwind.cssを作成する方法、package.jsonでコマンドを登録してビルドする方法、configオプションを使用してtailwind.config.jsの場所を認識させる方法について説明します。
![【Tailwind CSS】purgeしてtailwind.cssを圧縮しよう](https://cdn-ak-scissors.b.st-hatena.com/image/square/eb4be80db169a06718d6fdafeb7e75deb1587d92/height=288;version=1;width=512/https%3A%2F%2Fshuu1104.com%2Fwp-content%2Fuploads%2F2021%2F05%2Fowl-518838_1920.webp)
module.exports = { . . . variants: { extend: {}, }, plugins: [], + important: true, } こうすることで、className属性に指定したTailwind CSSが既存のスタイルの一部(あるいは全て)を上書きしてくれます。 Material UI便利ですよね。でも、使っているうちに既存のスタイルを少し修正したいときがあります。 例えばAvatarコンポーネントは、画像をいかにもアイコン風な感じに切り取ってくれる点が優秀だと感じていますが、もし既存のサイズより小さくカスタマイズしたい場合次のように書く必要があります。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く