TailwindCSS 从零开始 - 每个 Utility class 都支援响应式与伪类

手刻响应式网站，对我来说其实没有到很困难，但如果页面一多，时程又赶，就会很麻烦，而 Tailwind 有一个令人心动的特点就是，所有的 Utility class 都支援响应式。

怎麽写响应式断点

手刻响应式会使用下面的方式撰写：

@media query(max-width:XXXpx){
/** 响应式内容 */
}

甚至後来学 SCSS 的时候因为懒惰就另外写了一个元件，每次只要引入元件，在使用 @include 想要的尺寸就好，可是前端的世界没这麽好过，看看现在手机已经都快不像手机，都跟小电视一样，尺寸乱七八糟什麽都有，各家手机也都规则不一。

使用 bootstrap 设定响应式

後来学了 Bootstrap 後，算是在响应式有得到一点救赎，只在响应式不用去想断点，只要专心切板就好，我最常用的就是恼人的 table 了。

demo: https://codepen.io/hnzxewqw/pen/oNZyWKd

个人觉得 table 的部分算是已经够好用了，也算是清楚，但还是要相依在该规范中。

其他元件就要整个元件程序码完整架构，如：卡片

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

demo: https://codepen.io/hnzxewqw/pen/jOBKwPW

可以看到又出现跟之前说明的状况一样，因为 Bootstrap 是以定义好的元件方式载入画面，所以会需要依赖该框架的元件定义，才能完整呈现想要的画面。

如果要多张卡片呈现在画面的时候，就变成要外面再包更多的标签。

   <div class="row">
        <div class="col-md-3">
            ...
        </div>
    </div>

如果画面单纯就还好，可是如果今天画面越来越复杂的时候，在维护时光是找标签收尾可能都满难找到的。

Tailwind 是手机优先断点写法

跟 Bootstrap 一样是从手机优先来规划断点的，以卡片为例，今天透过 Utility-first 的方式来撰写三张卡片并排且加入断点。Tailwind 不需要相依在元件之下，就可以写出卡片效果以及断点。

官方也提供明确的断点写法，只要在想要做断点的前面加上断点缩写即可，例如：

<img class="w-16 md:w-32 lg:w-48" src="...">

是不是跟 Bootstrap 有异曲同工之妙，但是我只要加在想要的 element 上面就好了，也不用加了很多 .row 跟 .col。

伪类也是一样的方法

通常我们想要按钮有点互动效果，一般 CSS 也会写成：

h1{
  color: red;
}

h1:hover{
  color: blue;
}

但我使用 Tailwind 就只要写成

<h1 class="text-red-500 hover:text-blue-500">this is title</h1>

demo: https://codepen.io/hnzxewqw/pen/VwpdzYw

直观又好理解！

不只 hover，还有像是 focus、active...等。更多可以参考文件

最後综合一个响应式卡片与有伪类效果的练习

点选右侧的 codepen 可以看见响应式的效果喔！

demo: https://codepen.io/hnzxewqw/pen/dyvKzMy

参考资料

• TailwindCSS - Hover, Focus, & Other States