實作 Button | 點燈坊

Tailwind CSS 可對 <button> 加以 Style 而更加美觀。

Version

Tailwind CSS 2.0.3

Button

簡單 Button 但有 Tailwind 加以 style。

<template>
  <button type="button" class="px-2.5 py-1.5 border border-gray-300 shadow-sm text-xs font-medium text-gray-700 rounded bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
    Submit
  </button>
</template>

設定 button style：

• px-2.5：設定 horizontal padding
• py-1.5：設定 vertical padding
• border：設定 border
• border-gray-300：設定 border 顏色
• shadow-sm：設定輕微 shadow
• text-xs：設定 text 大小
• font-medium：設定 text 粗細
• text-gray-700：設定 text 顏色
• rounded：設定圓角
• bg-white：設定背景顏色
• hover:bg-gray-50：設定 hover 時背景顏色
• focus:outline-none：設定 focus 時沒有 outline
• focus:ring-2：設定 focus 時 ring 寬度
• focus:ring-offset-2：設定 focus 時 ring offset
• focus:ring-indigo-500：設定 focus 時 ring 顏色

Conclusion

• Button 經過 Tailwind 修飾過較為美觀，重點是還可輕易改變其 style