本物の Bootstrap ボタン

disabled 状態

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

disable 状態

概要

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

差異や変更点など

Success と Warning の disabled 用の彩度だけ落としたカラーが TailwindCSS のデフォルトにないのでそこだけ似ていない
Bootstrap 版は押下時の反応がないので、TailwindCSS 版では押下時に枠が出るようにした
↑の関係で focus 時の枠を細めに変更
warning ,info の hover, focus 時 Bootstrap は僅かに明るくする仕様だが、分かりにくいので暗くするように変更
Bootstrap では btn クラスと btn-primary のように 2 つの組み合わせで表現する仕組みだが、ここでは1つのクラスにまとめている（後半で分けるケースも一応検討している）

各ボタンスタイルの詳細

@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-2
      focus:outline-none
      focus:ring-offset-0
      focus:ring-blue-300
      active:ring-4
      active:ring-blue-300
      disabled:bg-blue-300
      disabled:active:ring-0
      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-2
      focus:outline-none
      focus:ring-offset-0
      focus:ring-gray-300
      active:ring-4
      active:ring-gray-300
      disabled:bg-gray-300
      disabled:active:ring-0
      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-2
      focus:outline-none
      focus:ring-offset-0
      focus:ring-emerald-200
      active:ring-4
      active:ring-emerald-200
      disabled:bg-emerald-200
      disabled:active:ring-0
      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-2
      focus:outline-none
      focus:ring-offset-0
      focus:ring-red-300
      active:ring-4
      active:ring-red-300
      disabled:bg-red-300
      disabled:active:ring-0
      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-2
      focus:outline-none
      focus:ring-offset-0
      focus:ring-yellow-200
      active:ring-4
      active:ring-yellow-200
      disabled:text-gray-400
      disabled:bg-yellow-200
      disabled:active:ring-0
      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-2
      focus:outline-none
      focus:ring-offset-0
      focus:ring-cyan-300
      active:ring-4
      active:ring-cyan-300
      disabled:text-gray-400
      disabled:bg-cyan-300
      disabled:active:ring-0
      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-200
      focus:bg-gray-200
      focus:ring-2
      focus:outline-none
      focus:ring-offset-0
      focus:ring-gray-300
      active:ring-4
      active:ring-gray-300
      disabled:text-gray-400
      disabled:bg-gray-50
      disabled:active:ring-0
      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-600
      focus:bg-gray-600
      focus:ring-2
      focus:outline-none
      focus:ring-offset-0
      focus:ring-gray-400
      active:ring-4
      active:ring-gray-400
      disabled:bg-gray-500
      disabled:active:ring-0
      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-2
      focus:outline-none
      focus:ring-offset-0
      focus:ring-inherit
      active:ring-4
      active:ring-inherit
      disabled:text-gray-400
      disabled:active:ring-0
      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
      focus:ring-offset-0
      active:ring-4
      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
      active: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
      active: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
      active: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
      active: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
      active: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
      active: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-200
      focus:bg-gray-200
      focus:ring-gray-300
      active: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-600
      focus:bg-gray-600
      focus:ring-gray-400
      active: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
      active:ring-inherit
      disabled:text-gray-400
      disabled:active:ring-0
    ;
  }
}

テスト

disable 状態