前面講了這麼多簡單的觀念與使用方法,接下來的幾篇都會是搭配 JIT 模式的實作練習,就來做一個簡易的價目表卡片吧!
建立專案架構
- 設定
body
背景色,使用自定義的方式來寫,bg-[#colorCode]
。 - 在
body
的下層使用一個區塊元素定義整個標題的架構。 - 使用
flex
屬性包住標題與按鈕,使其橫向並排,用justify-between
與item-start
屬性使其兩個元素向上又左右對齊。 - 在
1280px
以上螢幕使用最大寬度為1280px
,原因是人眼的角度為 120 度,若頁面太寬,是不好瀏覽的。 - 並且 h1 的樣式給了一個
letter spacing
的屬性,讓標題文字寬度可以變寬,顯得更顯眼也好比較好閱讀。
1 | <body class=" bg-[#eee]"> |
這時就會得到以下結果,
有發現到
button
在 TailwindCSS 樣式跟傳統 CSS 的樣式不太一樣,是沒有預設樣式的。
按鈕樣式
前面有提到 JIT 模式的好處,不需要看額外配置檔的預設樣式有哪些偽類或偽元素沒有新增,而是直接加上去就可以了。
除了最簡單的背景基本樣式以及 active
樣式外,這邊比較特別的是有加上一個 duration
的樣式,如果沒有 JIT 的話,前面要加上 transition
這個屬性,才會知道要用此樣式,但在 JIT 模式後,就會知道要使用 transition
這個效果,不需要另外寫。
1 | <button |