HTML/CSS 使用 Tailwind CSS 遇到的小問題

#tailwindcss
邱子修
技術文章
HTML/CSS 使用 Tailwind CSS 遇到的小問題

Tailwind CSS 是新世代的框架，常常拿來跟 Bootstrap 比較

套句老師上課說的話，單純比較框架之間的好壞是沒有意義的

只要評估你現在做的專案適合哪個就使用哪個吧!

那問題來了? 我怎麼知道我現在要做的專案適合哪個框架呢?

Bootstrap vs Tailwind CSS

先來簡單看看兩者的差異：

  • Bootstrap 給你組合好的東西，整組包好給你。 ex:直接幫你寫好一個 nav-bar 或是側邊選單。
  • Tailwind CSS 給你小零件，一堆小工具。 ex:將每個 css 屬性都包裝成一個個的 class，讓你組合，像是在玩積木一樣。

而筆者的小組正在做的專案是復刻網站，需要高度客製化，加上筆者自己也想玩玩看這個框架，所以我們最後選擇使用 Tailwind CSS 來切版。
因為如果使用 Bootstrap 提供的 Components 來客製化會需要加上很多的 important! 來修改，
不符合我們現在的情況，本篇會著重在介紹筆者使用 Tailwind CSS 寫專案所遇到的問題。

安裝 Tailwind CSS

剛開始聽說 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。

本文節選自 iThome 鐵人賽阿修 Day 03 HTML/CSS 使用 tailwindcss 遇到的小問題

👩‍🏫 課務小幫手：

✨ 想掌握 Tailwind CSS 觀念和原理嗎？

我們有開設 💠 升級前端技術從 Tailwind CSS 開始 課程唷 ❤️️