TailwindCSSのカスタマイズ

3125 ワード
tailwindcss tailwindcss テキストリンク

はじめに

普段tailwindを使っていますが、カスタムする機会がありました。
業務でmin-width-10remを使いたいと思いましたが、、、
tailwindCSSには2つしかありません。カスタムをする必要があります。

修正方法

まずtailwind.config.jsを開き、追加したいものを以下のように書きます。
extendがないとデフォルトの値は消え、使用できない。

tailwind.config.js
module.exports = {
 theme={
  extend:{ 
   minWidth: {
    '40': '10rem',
   }
  }
 }
}

使用例

image.tsx
<div className = {'min-w-40'}>
 <img src = 'https://qiita.jpg' alt='qiita'>
</div>

まとめ

module.exports>theme下でカスタマイズ可能

tailwind.config.js
module.exports = {
 theme={
  extend:{ // extendによりデフォルトのCSSは保たれる
   minWidth: {
    // ここにカスタムしたい内容を入れる
   }
  }
 }
}