Day 03 HTML/CSS 使用 tailwindcss 遇到的小问题

tailwindcss 是新世代的框架，常常拿来跟 Bootstrap 比较
套句老师上课说的话，单纯比较框架之间的好坏是没有意义的
只要评估你现在做的专案适合哪个就使用哪个吧!
那问题来了? 我怎麽知道我现在要做的专案适合哪个框架呢?

Bootstrap vs tailwindcss

先来简单看看两者的差异：

• Bootstrap 给你组合好的东西，整组包好给你。
  ex:直接帮你写好一个 nav-bar 或是侧边选单。
• tailwindcss 给你小零件，一堆小工具。
  ex:将每个 css 属性都包装成一个个的 class，让你组合，像是在玩积木一样。

而笔者的小组正在做的专案是复刻网站，需要高度客制化，加上笔者自己也想玩玩看这个框架，所以我们最後选择使用 tailwindcss 来切版。
因为如果使用 Bootstrap 提供的 Components 来客制化会需要加上很多的 important! 来修改，
不符合我们现在的情况，本篇会着重在介绍笔者使用 Tailwind 写专案所遇到的问题。

安装 tailwindcss

刚开始听说 tailwindcss 不好安装，确实笔者也花了一点时间安装，
最後笔者参考官网以及以下连结顺利安装。
Tailwind 官网
How to install Tailwind CSS v2.0 using Ruby on Rails

笔者在安装时因为前面的套件都是使用 yarn add 去安装，
听老师说同个专案安装套件时 yarn 跟 npm 不要混用会比较好，混用会产生一些奇怪的档案以及可能会发生问题。
所以笔者一开始是使用 yarn add 取代 npm install 去做安装，
後半段因为笔者是使用 rails 来做专案，所以使用 @import 取代 @tailwind，
@import 则参考官网下面的连结，写在 app/javascript/stylesheets/application.scss 内。

安装好之後发现 tailwindcss 似乎有内建 CSS reset，最基本的样式都没了，导致一开始还没开始切版时不方便测试功能。
这时候可以照官网提供的方法把 CSS reset 拿掉，在 corePlugins 内新增 preflight: false。

tailwind.config.js

module.exports = {
  corePlugins: {
   preflight: false,
  }
}

原本以为拿掉之後应该就没有问题了，但後续在切版的时候发现设定单边的 border 时会无法正常设定，
因此最後还是把 CSS reset 给加回来，不仅可以让 border 正常设定，也让网页能够统一各家浏览器的样式。

扩充功能

如果想对原本的样式扩充记得要用 extend。
笔者做专案做到一半要 merge 时，发现自己的样式跟其他组员的样式会冲到，造成版面坏掉。
原本以为是冲突解错，花了很多时间在看冲突。
後来想起老师的话，要静下心来看 console，有错误的话终端机会用它的方式跟你对话。
於是我发现我用 tailwindcss 提供的颜色居然吃不到，後来看到组员有用到自订颜色的功能，
但因为没有在外面包一层 extend，导致颜色只剩下他制定的那几种可以用，
原本 tailwindcss 提供的颜色都被覆盖掉了，这个故事给我自己一个很大的警惕就是发生错误时要先看 console，
这是电脑跟你沟通的一个桥梁！
例如我想客制化一个浅灰色时，可以照以下范例来写：

范例

tailwind.config.js

module.exports = {
  corePlugins: {
  },
  purge: [],
  darkMode: false,
  theme: {
    extend: {
      colors: {
        gray: {
          lightgray: '#222222',
        },
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

@apply

是目前比较常用的功能，可以组合多个 CSS 在一个 class 内，类似 funciton 把东西都包好，方便使用。

范例

加在 class 里可以直接让 div 吃到 @apply 後面的 CSS，让 HTML 的 code 看起来更简洁。
记得要在 JS 档 import 你写的scss 档，不然会吃不到你写的样式。

app/javascript/styles/comment.scss

.commentinnerbg {
  @apply flex flex-col justify-center items-center bg-white w-20 h-20 shadow-md
}

app/javascript/styles/index.js

import "./comment";

...html.erb

<div class="commentinnerbg">
</div>

最後提供一些 tailwindcss 相关的网站：
[1]Tailwind UI：跟 Bootstrap 一样帮你刻好很多 components，是要付费的。
[2]Tailwind CSS Components：同上，不过是免费的。
[3]tailwindplay：可以直接在网页上试玩 tailwindcss。