Tailwind CSS — Tailwind Elements

Tailwind Elements 介紹與實作

📢 Tailwind CSS 系列文章共 3 篇，此篇為第 3 篇

若對 Tailwind CSS 沒有基礎概念，可以參考：
📝 Tailwind基礎這篇：Tailwind CSS 介紹與實作

📋 目錄

1. 簡單介紹與安裝
2. [實作]基本說明
3. [實作]Tailwind CSS 混搭 Tailwind Elements 修改樣式
4. [實作]參考文件收集參數

簡單介紹與安裝

Tailwind Elements 是非 Tailwind CSS 官方團隊，將 Bootstrap 組件使用 Tailwind CSS 重新創建。Tailwind Elements 提供各樣項目所需的所有基本元素，像是表單、卡片、按鈕和數百種其他元素。

🧰 本篇文章採用做中學模式做介紹

安裝

在安裝 Tailwind Elements 前，要先安裝好 Tailwind CSS。

Tailwind CLI安裝方法：
先建立一個資料夾，並在終端機 cd 到資料夾內輸入下方指令：

npm init
npm install -D tailwindcss
npx tailwindcss init

生成一個 tailwind.config.js 檔案
接著安裝 Tailwind Elements，終端機輸入下方指令：

npm install tw-elements

在 tailwind.config.js 中加入

module.exports = {
  content: [
    "./src/**/*.{html,js}",
    "./node_modules/tw-elements/dist/js/**/*.js"
  ],
  plugins: [require("tw-elements/dist/plugin.cjs")],
  darkMode: "class"
};

在專案中加入 src 資料夾，並在其中加入 input.css 還有 index.html 檔案input.css 中加入：

@tailwind base;
@tailwind components;
@tailwind utilities;

index.html 中加入：

package.json 中的 script 加入：

"build-css": "tailwindcss build -i src/input.css -o dist/output.css"

加入 basic checkbox 範例

Tailwind CSS Checkbox Form - Free Examples & Tutorial

再到終端機下 npm run build-css 指令
打開視窗查看可看到下方畫面：

這樣代表 Tailwind Elements 已成功被套用🐥

[實作]基本說明

🦖 專案建立好，接下來會是做中學的模式🛠

Record 專案畫面左方有選單，右上方有四個表單欄位，右下方有個資料表。雖然此系列與練習著重在 CSS 的設定，而非操作功能的開發，但考量到使用 Tailwind Elements 套件，收集參數部分有參考其設計的 function，故點按送出按鈕即可將設定的資料夾入下方資料表。

[實作]Tailwind CSS 混搭 Tailwind Elements

先調整左側的RWD。整個藍色區塊的大小，原本的寬度設定為w-20，藉由 md:w-60 在 768px 以上會變寬。

有關 icon 搭配標題的 show/hide
以 Home 部分為例：

可以用 md:hidden hidden md:block 去切換
完成的畫面如下：

接著實作右上方，加上表格四個表單欄，有日期、項目、時間長度、其他。分別對應到 Date Picker, Muti Select, Single Select, Input。

舉其中的日期 Date Picker 做說明：

官網的範例樣式如下：

可以參考文件做樣式修改

Tailwind CSS Datepicker - Free Examples & Tutorial

若要改 Date Picker 的 header 背景顏色，在對應的 class 加上：
data-te-class-datepicker-header=”xs:max-md:landscape:h-full h-[120px] px-6 bg-primary-500 flex flex-col rounded-t-lg dark:bg-zinc-800"

其中 primary-500 是採用 Tailwind Elements 的配色

[實作]參考文件收集參數

按下送出按鍵，要收集使用者設定的參數。這部分以多選的 Multi Select 做說明。

參考 Tailwind Elements 文件的說明

Tailwind CSS Select - Free Examples & Tutorial

UMD(Universal Module Definition)模式，加上 te 。

實作完成後的成果如下：

此篇文章記錄 Tailwind CSS 搭配 Tailwind Elements 實作。附上 Record 專案的 GitHub 檔案連結 🔗 ，專案資料夾名稱：tailwind-elements-record 。有任何指點或建議都可以在下方留言～

⛄ Tailwind CSS can be very efficient for developers.