### 不太一樣：
1.[預設顏色多樣性](https://www.tailwindcss.cn/docs/customizing-colors)
2.[dark mode](https://www.tailwindcss.cn/docs/dark-mode)
3.其他

### 安裝：
1.node.js
2.[選擇適當的框架](https://tailwindcss.com/docs/installation/framework-guides)
[安裝指引](https://www.tailwindcss.cn/docs/installation)
[vue3 tailwindcss3 設定參考文件](https://hsuchihting.github.io/vue-js/20220130/1190658877/)
3.vscode 延伸模組 [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)

### 練習：[線上練習網址](https://play.tailwindcss.com/)

#### range slider
[HTML css](https://www.w3schools.com/howto/howto_js_rangeslider.asp)
[bootstrap](https://getbootstrap.com/docs/5.0/forms/range/)

	test
	<div>
		<label class="label">Interest rate (2.5%)</label>
		<input
			type="range"
			min="0.1"
			max="30"
			step="0.1"
			class="w-full h-4 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
		/>

		<label class="label">Duration (25 years)</label>
		<input
			type="range"
			min="3"
			max="35"
			step="1"
			class="w-full h-4 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
		/>

		<div class="text-gray-600 dark:text-gray-300 mt-2">
			<div class="text-gray-400">Your monthly payment</div>
			<Price :price="500" class="text-3xl" />
		</div>
	</div>

#### 自訂的tailwind css
範例放在以下3列的下方(.css檔)
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .label {
    @apply block mb-1 text-gray-500 dark:text-gray-300 font-medium
  }

  .input {
    @apply block w-full p-2 rounded-md shadow-sm border border-gray-300 dark:border-gray-600 text-gray-500
  }

  .input-error {
    @apply text-sm text-red-500 dark:text-red-400
  }

  .input-filter-l {
    @apply placeholder:text-gray-400 dark:placeholder:text-gray-600 border border-gray-200 dark:border-gray-700 rounded-t-md rounded-l-md rounded-b-md rounded-r-none text-sm font-medium text-gray-600 dark:text-gray-400 dark:bg-gray-800
  }

  .input-filter-r {
    @apply placeholder:text-gray-400 dark:placeholder:text-gray-600 border border-l-0 border-gray-200 dark:border-gray-700 rounded-t-md rounded-l-none rounded-b-none rounded-r-md text-sm font-medium text-gray-600 dark:text-gray-400 dark:bg-gray-800
  }

  .btn-normal {
    @apply bg-gray-600 hover:bg-gray-500 text-white font-medium p-2 rounded-md
  }

  .btn-primary {
    @apply bg-indigo-600 hover:bg-indigo-500 text-white font-medium p-2 rounded-md
  }

  .btn-outline {
    @apply p-2 rounded-md border shadow-sm border-gray-300 dark:border-gray-800 hover:border-gray-400 hover:bg-gray-50 dark:hover:border-gray-700 dark:hover:bg-gray-800
  }
}

### 240428 俊良師的google表單功能教學反饋

傻子的笨方法 [範例檔google spreadsheet 開放到5/11](https://docs.google.com/spreadsheets/d/1CAJMB74S9AAafabWWEqyJFMEraW1VnzZNH7-_Ls4f_0/edit#gid=1050742609)
**這個只是有點繞遠路的替代方案，因為有看到實際的結果，也許較易理解，但執行效率較差，如果有呈現表格的需求可參考看看，不然還是得花時間把俊良師的code啃好啃滿，才能功德圓滿**

有時，js程式功力不足，但又急著產出結果，或許可以試試搭配google spreadsheet的函數使用，但每新增一筆，又再插入一次相關的函數，這樣的作業又很煩。雖然google spreadsheet有類似copydown的外掛，但畢竟是別人寫的，如有機敏資料恐有疑慮。如果要用code插入函數(formula)需要用相對位置來寫，所以需要用到 [indirect()函數](https://support.google.com/docs/answer/3093377?hl=zh-Hant)，因為是填表新增一筆資料後就需自動在該筆(row)資料的相關欄位補入設定的函數，所以要放在俊良師的function onFormSubmit(e) {} 裡面，以下僅就function來說明。

function onFormSubmit(e) {
// 前面容省略，請0428出席的夥伴參考俊良師授權釋出的程式

 // 整理line 通知 訊息 //放在這一行的上面

// column I rowID ， 這個偷懶的方式，雖然在"020_data_filter"頁籤內可以使用，但不算是好寫法，因為產生的id非唯一(unique)，較精準的寫法應參考俊良師的maxSn()的寫法。此處函數 要改成 r1c1模式
// 置入col_i formula
  let colIFormula='row()-1';
  ws.getRange(rowIndex,9,1,1).setFormula(colIFormula);

  // 置入col_j formula
  let colJFormula='=if(left(INDIRECT("R[0]C[-5]",false),4)="客製配鏡",1,if(left(INDIRECT("R[0]C[-5]",false),4)="眼鏡維修",2,if(left(INDIRECT("R[0]C[-5]",false),4)="專業驗光",3,if(left(INDIRECT("R[0]C[-5]",false),4)="預約取件",4,5))))';
  ws.getRange(rowIndex,10,1,1).setFormula(colJFormula);

  // 置入col_k formula
  let colKFormula='=choose(INDIRECT("R[0]C[-1]",false),90,10,60,10,30)';
  ws.getRange(rowIndex,11,1,1).setFormula(colKFormula);

  // 置入col_l formula
  let colLFormula='=text(INDIRECT("R[0]C[-6]",false),"yyyy/mm/dd")&" " & left(INDIRECT("R[0]C[-5]",false),5)&":00"';
  ws.getRange(rowIndex,12,1,1).setFormula(colLFormula);

  // 置入col_m formula
  let colMFormula='=text(INDIRECT("R[0]C[-1]",false)+time(0,INDIRECT("R[0]C[-2]",false),0),"yyyy/mm/dd HH:mm:ss")';
  ws.getRange(rowIndex,13,1,1).setFormula(colMFormula);
    
    
// rane().getValues()會自動取到M欄 ... 以下俊良師的程式相關變數需要作因應調整  



}

萬一表單已經在跑，發現需要新增問題，如果不想砍舊的已填報結果，建議把問題新增在最後，不然接收填報結果的google spreadsheet欄位會亂掉，新舊資料的整理易出問題。
請參閱範例檔中的頁籤"020_data_filter"，依所需，調整欄位項目及順序。
[filter()函數](https://myapollo.com.tw/blog/google-sheets-filter/)
[xlookup()函數](https://vocus.cc/article/632b046dfd897800013c7741)