Open12

TailwindCSS のよく使うStylingチートシート/Tips🌟

CSS
Tailwind CSS
styleing
tailwindcsstips
tailwindtips
ピン留めされたアイテム
まさぴょん🐱まさぴょん🐱

Postion関連📝

要素を中央に配置する

<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20">_

absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20
まさぴょん🐱まさぴょん🐱

FlixBox

Flex 中央寄せ

<div className='flex items-center justify-center'>

Flex 縦並び

<div className='flex flex-col'>

Flex 折り返す

<div className='flex flex-wrap gap-[10px] w-[270px] mt-[20px]'>

between

<div className="flex justify-between">
まさぴょん🐱まさぴょん🐱

Font系

文字の色, 太さ, フォント変更

<p className="font-['Roboto'] font-bold text-[#FF454D]">

文字を折り返させない

whitespace-nowrap	// white-space: nowrap;
まさぴょん🐱まさぴょん🐱

display系

  • display: none;だけhidden
  • それ以外は、元々と同じ名前での指定

display: none;

<div className='hidden'>

display: flex;

<div className='flex'>

display: grid;

<div className='grid'>
まさぴょん🐱まさぴょん🐱

カード型など

<div className='h-[270px] w-[270px] cursor-pointer rounded-[5px] border-none object-cover shadow-md transition-transform duration-200 ease-in-out'>

影の部分

shadow-md transition-transform duration-200 ease-in-out
まさぴょん🐱まさぴょん🐱

×ボタンを作成する

通常のCSS

width: 20px;
height: 20px;
font-weight: bold;
background-color: #AFAEB3;
color: #fff;
border-radius: 100%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
position: relative;
top: 30px;
left: 250px;

TailwindCSS

<div
  className='relative left-[250px] top-[30px] flex h-[20px] w-[20px] cursor-pointer items-center justify-center rounded-[100%] bg-[#AFAEB3] font-bold text-[#fff]'
  onClick={() => deleteFile()}
>
  ×
</div>
まさぴょん🐱まさぴょん🐱

overflow: スクロール実装📝

基本的なOverflowクラス

  • overflow-auto: コンテンツが要素の範囲を超える場合にスクロールバーを表示。

    <div class="overflow-auto h-32">
  <!-- 長いコンテンツ -->
</div>

    （CSS: overflow: auto;）

  • overflow-hidden: コンテンツが範囲を超える場合に切り取る（スクロールバー非表示）。

    <div class="overflow-hidden h-32">
  <!-- 長いコンテンツ -->
</div>

    （CSS: overflow: hidden;）

  • overflow-visible: コンテンツが範囲を超えても切り取らず表示。

    <div class="overflow-visible">
  <!-- 飛び出すコンテンツ -->
</div>

    （CSS: overflow: visible;）

  • overflow-scroll: 常にスクロールバーを表示（コンテンツ量に関係なく）。

    <div class="overflow-scroll h-32">
  <!-- コンテンツ -->
</div>

    （CSS: overflow: scroll;）

X軸・Y軸を個別に制御

  • X軸:
    • overflow-x-auto
    • overflow-x-hidden
    • overflow-x-visible
    • overflow-x-scroll
  • Y軸:
    • overflow-y-auto
    • overflow-y-hidden
    • overflow-y-visible
    • overflow-y-scroll

例:

<div class="overflow-x-auto overflow-y-hidden h-32 w-64">
  <!-- 横スクロールのみ有効、縦は隠す -->
</div>

スクロールバーのカスタマイズ（Tailwindの制限）

TailwindCSS自体にはスクロールバーのスタイルを直接カスタマイズするユーティリティが標準では含まれていません。スクロールバーの見た目を変えるには、以下のようにカスタムCSSを組み合わせるか、Tailwindのプラグインを使用します。

カスタムCSSの例

<div class="overflow-auto h-32 scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-100">
  <!-- コンテンツ -->
</div>

/* tailwind.config.jsでカスタムユーティリティを追加 */
module.exports = {
  theme: {
    extend: {
      scrollbar: ['rounded'],
    },
  },
  plugins: [
    require('tailwind-scrollbar'),
  ],
};

tailwind-scrollbarプラグインをインストールすると、以下のようなクラスが使えます：

  • scrollbar
  • scrollbar-thin
  • scrollbar-none
  • scrollbar-thumb-{color}
  • scrollbar-track-{color}

実例

以下のコードで、縦スクロール可能なボックスを作成：

<div class="overflow-y-auto h-48 w-64 p-4 bg-gray-100">
  <p>長いコンテンツ...</p>
  <!-- 繰り返しコンテンツ -->
</div>
  • h-48: 高さを制限してスクロールを誘発。
  • overflow-y-auto: 縦方向のスクロールバーを必要に応じて表示。

注意点

  • ブラウザ互換性: overflow関連のユーティリティはすべてのモダンブラウザで動作しますが、スクロールバーのカスタマイズはWebkitベース（Chrome、Safariなど）やFirefoxに依存します。
  • レスポンシブデザイン: 必要に応じてブレークポイントを活用。
    <div class="overflow-auto md:overflow-hidden">
  <!-- モバイルではスクロール、デスクトップでは隠す -->
</div>
  • プラグイン: スクロールバーの詳細なスタイルが必要なら、tailwind-scrollbarやカスタムCSSを検討。