Zenn
🐕‍🦺

【自分用】よく使うTilwindCSSまとめ

2024/01/09に公開
Tailwind CSS
tech

Font Size

text-⚫︎⚫︎(sm,base,lg,xl...)
module.exportsでカスタマイズしてから使うのがおすすめ

例
module.exports = {
  theme: {
    fontSize: {
      sm: '0.8rem',
      base: '1rem',
      xl: '1.25rem',
      '2xl': '1.563rem',
      '3xl': '1.953rem',
      '4xl': '2.441rem',
      '5xl': '3.052rem',
    }
  }
}

Flex→垂直中央揃え（コピペ推奨）

flex items-center
(justify-between,justify-aroundもセットで使うことが多い）

padding margin

p-2（上下左右にパディング2px）
pr-2（右にパディング2px）
pl-2（左にパディング2px）
py-2（上にパディング2px）
pb-2（下にパディング2px）
px-2（左右にパディング2px）
py-2（上下にパディング2px）

マージンは「p」→「m」にして記述。結構xy使う。

Width・Height

w-1 width: 0.25rem; /* 4px /
h-1 height: 0.25rem; / 4px */
これを基準に、倍々にして設定したいwidthを記述する。

またレスポンシブデザインでよく使うvw,vhはこちら
w-screen /* width: 100vw; /
h-screen / height: 100vh; */

Border　roudeius

rounded-⚫︎⚫︎(sm,base,lg,xl...)
roundedだけでも丸くなる（0.25rem; /* 4px */）
まんまるにするにはrounded-full

Box Shadow

shadow-⚫︎⚫︎(sm,md,base,lg,xl...)

Opacity

opacity-30 　/* opacity: 0.3 */
（hover:opacity-100 もセットに使うことも多い）

form&button（コピペ推奨）

<form className="text-center ">
          <input type="text" className="border border-gray-400 rounded p-1 focus:outline-none" />
          <input type="submit" className="bg-transparent hover:bg-blue-500 text-white font-semibold hover:text-white py-1 px-2 border border-white hover:border-transparent rounded"  />
</form>


ボタン自体の色は透明なので、ページの背景色色のボタンができる

Discussion