Padding

FontSize

Font Weight

Margin

Text Alignment

Algin Items

|class名|Properties| |---|---|---| |items-start| align-items:flex-start;|配置コンテナの先頭側の端に寄せられる |items-end|align-items: flex-end;|配置コンテナの末尾側の端に寄せられる |items-center|align-items: center;|フレックスアイテムのマージンボックスは、交差軸上の中央に配置される。アイテムのcross-sizeがフレックスコンテナより大きい場合は、両方向へ均等にはみ出す |items-baseline|align-items: baseline;| |items-stretch|align-items: stretch;|アイテムのマージンボックスのcross-sizeが、幅や高さの制約の範囲内でラインと同じになるように拡張される

<div class="flex items-stretch">
  <div class="py-4">01</div>
  <div class="py-12">02</div>
  <div class="py-8">02</div>
</div>

TODO: items-startは寄せられるとは書いてあるものの、実例ではその挙動がわからなかったので確認

Space Between

小要素間のスペースを制御するためのユーティリティ

space-{x|y}-{amount}

<div calss="flex space-x-4"
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

<div calss="flex flex-col space-y-4"
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Text Color

色の指定、省略

Border Radius

角の丸み指定、省略

• rounded-{}
  • rounded-none
  • rounded-sm
  • rounded-md
  • rounded
  • etc ...

Border Width

枠線の太さ

• border-{}

サンプル

border-b-2...下に2px border-blue-500...2pxにblue-500の色付け

Top / Right / Bottom / Left

位置決めされた要素の配置を制御する。リンク参照。形式は、{top|right|bottom|left|inset}-0の形。insetは、top,right,bottom,leftの一括指定を示す 項目リンクの画像をみつつ、クラスが推測できるようになるといいかもしれない

left-0 top-0とみたら、左から0の上から0の座標と読み替えると良い

<div calss="relative h-32 w-32" ...>
  <div class="abusolute left-0 top-0 h-16 w-16">01</div>
</div>

// `inset-x-0`でright:0;left:0を指定

<div calss="relative h-32 w-32" ...>
  <div calss="absolute inset-x-0 top-0 h-16>"02</div>
</div>

<div calss="relative h-32 w-32" ...>
  // ↓サイズ指定はいらいない(?)
  <div class="abusolute inset-0">05</div>
</div>

Ring Width

ボックスシャドウを使ったアウトラインリング

• ring-{}
  • ring-0
  • ring-1
  • ring-2
  • ring

Responsive Design

sm:だと、このブレークポイントより上の..という意味を指す

以下の例の場合

• 接頭辞なしのtext-center -> モバイル適用
• sm:text-left -> smより大きい場合適用

<div class="text-center sm:text-left" />

上記のような接頭辞のないユーティリティをモバイルのターゲットにして、より大きなブレークポイントで上書きする書き方が良いみたい。

Sample

接頭辞なしは、モバイル適用と意識しておくとレスポンシブなtailwindcssを読み解くことができそう

<div class="sm:hidden">
 // モバイルより大きい場合、hidden
<div>
<div class="hidden sm:block">
 // モバイルでdisplay:hidden
</div>

Handling Hover, Focus, and Other States

hoverしたときに、bg-sky-700に状態変化する

<button class="bg-sky-600 hover:bg-sky-700">
  Save chages
</button>

Hover, focus, and active

基礎的な前提

擬似クラスの確認

サンプル

outline-none

<button class="bg-violet-500 hover:bg-violet-400 active:bg-violet-600 focus:outline-none focus:ring focus:ring-violet-300 ...">
  Save changes
</button>

要件

• hoverすると、少し暗くなる
• 押下すると枠線強調表示

<button
  type="button"
  className="py-2.5 px-5 mb-2 text-sm font-medium text-center text-white bg-purple-700 hover:bg-purple-800 dark:bg-purple-600 dark:hover:bg-purple-700 rounded-full focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-900"
>
  Purple
</button>

Dark Mode

以下のようにdarkvariantを利用する

dark:bg-slate-900

FontFamily

module.exports = {
  content: ['./src/index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      fontFamily: {
        'sans': ['sans-serif'],
        'relics': ['Times New Roman', 'MS PGothic'],
        'ui': ['system-ui', '-apple-system']
      }
    }
  },
  plugins: [],
};

const defaultTheme = require("tailwindcss/defaultTheme");

module.exports = {
  content: ['./src/index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      fontFamily: {
        sans: ["Noto Sans JP", ...defaultTheme.fontFamily.sans],
      },
    }
  },
  plugins: [],
};

Position

|クラス名|Properties|説明| |static|position: static;| |fixed|position: fixed;|固定 |absolute|position: absolute;| |relative|position: relative;| |sticky|position: sticky|

staticで基準の領域を示し、abusoluteで相対的なdivを配置する例

<div class="static ...">
  <p>Static parent</p>
  <div class="abusolute bottom-0 left-0 ...">
    <p>Abusolute child</p>
  </div>
  </div>
</div>J

Flex

例

<div class="flex">
  <div calss="flex-none"
</div>

• 参考

Pointer Events

Transitions & Animation

Transition duration

duration-{amount}という記法。CSSの遷移の期間を制御するユーティリティ。大きいほど遅くなる。(例えばボタンをホバーしたらボタンが大きくなる。大きくなるまでの時間のことを指す。)

Transition Timing Function

速度感のイメージをつかみたい場合は本リンクを参照

例

<button class="transition duration-150 ease-in-out">A</button>

transformとtransition

サンプル解説

button

※1 input type="search"でも、本オプションはデフォルトで利用するべき

Header

以下のようなヘッダーを作る時

flex-colで以下のように全体的に領域を切る

[header]
[content]
[footer]

|Logo|SearchBox menu1 menu2 menu3|BellIcon|

eslint-plugin-tailwindcss

ソート規則

• サイズ、テーマ、状態の順に記載する

疑問点

• aria-live="assertive"の意味