TailwindCSS 从零开始 - 切一个响应式留言按钮画面

rwd button

前面了解基础的使用後，来实战一个简单的留言按钮与如何变成响应式的呈现。

基础架构

有大头照
有留言区按钮

进行切版

跟 Bootstrap 有点像，最外层使用 .container 订调介面为满版。
制定灰色底色区块，并且要符合整个页面宽，使用 .w-full 语法，透过提示工具可以看到 .w-full = width:100%，为了要让大头照跟留言按钮横向呈现，在给予一个 .flex 语法。
大头照部分使用 picsum 的随机图片，并且设定外层有白框，使用 .border-white .border-2 两个语法。
按钮部分使用 .flex-1，其作用是让按钮自适应缩放，不受初始大小影响。
按钮加上当有 hover 时，背景色可以变换，只要写上 hover:bg-gray-300 就可以罗！

 <div class="container mx-auto mt-3">
  <h1 class="block text-gray-800 text-xl py-5 font-bold">写一个留言按钮</h1>
  <div class="w-full px-4 py-3 flex box-border rounded-lg bg-gray-400">
    <div
      class="w-12 mr-3 flex-shrink-0 rounded-full border-white border-2 overflow-hidden"
    >
      <img src="https://picsum.photos/200/200?random=1" alt="" />
    </div>
    <button class="flex-1 bg-gray-200 rounded-full hover:bg-gray-300">
      <p class="text-left pl-3 text-gray-600  text-md">在想些什麽...</p>
    </button>
  </div>
</div>

这样就切完了，满单纯也简单，而且可以快速的达到想要的效果。

加上自订义的属性

虽然 TailwindCSS 已经有预设一些样式的状态，但并不是每个都有支援，假设现在 PM 说：客户想要在按钮外面加上外框，并且要在点击时出现。

这时候我就要去找 variants 预设中这个 ringWidth 的 Utility，然後发现初始设定并没有 active 这个属性。

ringWidth: ['responsive', 'focus-within', 'focus'],

这时候就可以自行扩增其属性，可以到 tailwind.config.js 中的 extends，加上这个属性，

module.exports = {
  purge: ['./**/*.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {
      ringWidth: ['active'], //加在这里
    },
  },
  plugins: [],
}

加好之後记得要重新编译 TailwindCSS。

此时，就会看到我只有打 ac，就会出现对应的选项。

active

再来就只要加上 active 後，ring 的宽度即可。

 <button class="flex-1 bg-gray-200 rounded-full hover:bg-gray-300 active:ring-4">
  <p class="text-left pl-3 text-gray-600  text-md">在想些什麽...</p>
</button>

然後加好之後，在滑鼠点击时，就会出现外框了。

ring

加上响应式

前面有提到 TailwindCSS 任何的 Utility 都可以加上响应式。假设我在不同断点要呈现外框都是不同颜色，可以这样写

  <div class="container mx-auto mt-3">
  <h1 class="block text-gray-800 text-xl py-5 font-bold">写一个留言按钮</h1>
  <div
    class="w-full px-4 py-3 flex box-border rounded-lg bg-gray-400 sm:bg-red-400 md:bg-yellow-400 lg:bg-green-400 xl:bg-blue-400"
  >
    ...
  </div>
</div>

然後就会看到当解析度不同的时候会呈现不同的颜色。