本物の Bootstrap ボタン

disabled 状態

TailwindCSS による Bootstrap ライクなボタンサンプル

disable 状態

概要

Bootstrap のボタンデザイン再現の過程で TailwindCSS でどの様な設定が必要なのか、どんな特徴があるのか、をつかむのが目的。

Success と Warning の disabled 用の彩度だけ落としたカラーが TailwindCSS のデフォルトカラーに無いのでイマイチ似てないが他は近いはず。（TailwindCSS に用意されているカラーは彩度と明度が一緒にグラデーションしている感じのカラーなので彩度だけ下げた様なカラーがない）

Bootstrap では btn クラスと btn-primary のように 2 つの組み合わせで表現する。恐らく btn でボタン形状やパディング等を、btn-primary の方でカラー関係を指定していると思われるが、アウトラインボタンの場合 btn-primary の代わりに btn-outline-primary、またサイズ違いの場合 btn btn-primary btn-sm の様な指定になるため、厳密にどの様にプロパティーの分担をしているのかはもっと細やかな検証が必要になるが、当然それは目的では無いのでやらない。

ちなみに Bootstrap の warning ,info は hover と focus 時に明るくなるが、分かりにくいので他のボタン同様暗くなるようにしている。

各ボタンスタイルの詳細

@layer components {
  .btn-primary {
    @apply
      rounded-md
      text-base
      text-white
      bg-blue-500
      border-blue-500
      hover:bg-blue-700
      focus:bg-blue-700
      focus:ring-4
      focus:outline-none
      focus:ring-blue-300
      disabled:bg-blue-300
      py-1.5
      px-3
      my-1
      mx-0.5
    ;
  }
}

@layer components {
  .btn-secondary {
    @apply
      rounded-md
      text-base
      text-white
      bg-gray-500
      border-gray-500
      hover:bg-gray-600
      focus:bg-gray-600
      focus:ring-4
      focus:outline-none
      focus:ring-gray-300
      disabled:bg-gray-300
      py-1.5
      px-3
      my-1
      mx-0.5
    ;
  }
}

@layer components {
  .btn-success {
    @apply
      rounded-md
      text-base
      text-white
      bg-emerald-600
      border-emerald-600
      hover:bg-emerald-700
      focus:bg-emerald-700
      focus:ring-4
      focus:outline-none
      focus:ring-emerald-200
      disabled:bg-emerald-200
      py-1.5
      px-3
      my-1
      mx-0.5
    ;
  }
}

@layer components {
  .btn-danger {
    @apply
      rounded-md
      text-base
      text-white
      bg-red-600
      border-red-600
      hover:bg-red-700
      focus:bg-red-700
      focus:ring-4
      focus:outline-none
      focus:ring-red-300
      disabled:bg-red-300
      py-1.5
      px-3
      my-1
      mx-0.5
    ;
  }
}

@layer components {
  .btn-warning {
    @apply
      rounded-md
      text-base
      text-black
      bg-yellow-400
      border-yellow-400
      hover:bg-yellow-500
      focus:bg-yellow-500
      focus:ring-4
      focus:outline-none
      focus:ring-yellow-200
      disabled:text-gray-400
      disabled:bg-yellow-200
      py-1.5
      px-3
      my-1
      mx-0.5
    ;
  }
}

@layer components {
  .btn-info {
    @apply
      rounded-md
      text-base
      text-black
      bg-cyan-400
      border-cyan-400
      hover:bg-cyan-500
      focus:bg-cyan-500
      focus:ring-4
      focus:outline-none
      focus:ring-cyan-300
      disabled:text-gray-400
      disabled:bg-cyan-300
      py-1.5
      px-3
      my-1
      mx-0.5
    ;
  }
}

@layer components {
  .btn-light {
    @apply
      rounded-md
      text-base
      text-black
      bg-gray-50
      border-gray-50
      hover:bg-gray-100
      focus:bg-gray-100
      focus:ring-4
      focus:outline-none
      focus:ring-gray-300
      disabled:text-gray-400
      disabled:bg-gray-50
      py-1.5
      px-3
      my-1
      mx-0.5
    ;
  }
}

@layer components {
  .btn-dark {
    @apply
      rounded-md
      text-base
      text-white
      bg-gray-900
      border-gray-900
      hover:bg-gray-700
      focus:bg-gray-700
      focus:ring-4
      focus:outline-none
      focus:ring-gray-400
      disabled:bg-gray-500
      py-1.5
      px-3
      my-1
      mx-0.5
    ;
  }
}

@layer components {
  .btn-link {
    @apply
      rounded-md
      text-base
      text-blue-600
      underline
      hover:text-blue-800
      focus:text-blue-800
      focus:ring-4
      focus:outline-none
      focus:ring-inherit
      disabled:text-gray-400
      py-1.5
      px-3
      my-1
      mx-0.5
    ;
  }
}

btn クラスと btn-*** クラスに分けるとしたら

btn クラス相当部分

この HTML では本物の Bootstrap も読み込んでいるので実際にはプリフィックスとして t を付けています。 e.g.:btn → tbtn

@layer components {
  .btn {
    @apply
      rounded-md
      text-base
      focus:ring-4
      focus:outline-none
      py-1.5
      px-3
      my-1
      mx-0.5
      ;
}

btn-***（カラバリ系）

@layer components {
  .btn-primary {
    @apply
      text-white
      bg-blue-500
      border-blue-500
      hover:bg-blue-700
      focus:bg-blue-700
      focus:ring-blue-300
      disabled:bg-blue-300
      ;
  }

  .btn-secondary {
    @apply
      text-white
      bg-gray-500
      border-gray-500
      hover:bg-gray-600
      focus:bg-gray-600
      focus:ring-gray-300
      disabled:bg-gray-300
    ;
  }

  .btn-success {
    @apply
      text-white
      bg-emerald-600
      border-emerald-600
      hover:bg-emerald-700
      focus:bg-emerald-700
      focus:ring-emerald-200
      disabled:bg-emerald-200
    ;
  }

  .btn-danger {
    @apply
      text-white
      bg-red-600
      border-red-600
      hover:bg-red-700
      focus:bg-red-700
      focus:ring-red-300
      disabled:bg-red-300
    ;
  }

  .btn-warning {
    @apply
      text-black
      bg-yellow-400
      border-yellow-400
      hover:bg-yellow-500
      focus:bg-yellow-500
      focus:ring-yellow-200
      disabled:text-gray-400
      disabled:bg-yellow-200
    ;
  }

  .btn-info {
    @apply
      text-black
      bg-cyan-400
      border-cyan-400
      hover:bg-cyan-500
      focus:bg-cyan-500
      focus:ring-cyan-300
      disabled:text-gray-400
      disabled:bg-cyan-300
    ;
  }

  .btn-light {
    @apply
      text-black
      bg-gray-50
      border-gray-50
      hover:bg-gray-100
      focus:bg-gray-100
      focus:ring-gray-300
      disabled:text-gray-400
      disabled:bg-gray-50
    ;
  }

  .btn-dark {
    @apply
      text-white
      bg-gray-900
      border-gray-900
      hover:bg-gray-700
      focus:bg-gray-700
      focus:ring-gray-400
      disabled:bg-gray-500
    ;
  }

  .btn-link {
    @apply
      text-blue-600
      underline
      hover:text-blue-800
      focus:text-blue-800
      focus:ring-inherit
      disabled:text-gray-500
    ;
  }
}

テスト

disable 状態