TailwindCSS
含有「TailwindCSS」共 8 篇內容
全部內容
發佈日期由新至舊
這次的side bar不一樣了，上一次我好像做的太簡單了，所以完讀率只有14%，我好難過啊（；´д｀）ゞ，所以我這準備的內容有多一點。
這次的目標
按鈕的排版
按鈕滑過去會有顏色變化
Side bar能夠展開
箭頭能夠移動至被選擇的物件上
宣告
這次我創了兩個檔案 SideBa
先從react開始：
其實市面上有許多前端框架像是react,angular,vue...
至於為什麼我會選擇react…
本文介紹如何使用Vite建立前端開發初始檔案，並加入Tailwindcss的教學。透過指令和配置檔，讓你能快速建立個人專案的開發環境，並學習如何加入全域的Tailwindcss樣式。還有影片教學、資源連結和更多相關教學文章等，幫助你進一步學習。
data-* attributes 是 HTML 內建的屬性，可將網頁的狀態與元素進行綁定。而Tailwind CSS 在 3.2 版更新中推出使用 data-* attributes 自訂樣式的功能，讓樣式設定可以更動態多變。
感謝分享！看完介紹會覺得能用clsx就盡量用，data-attribute 的原生寫法完全不吸引人XD
情境
前陣子使用 Tailwind CSS 開發的正舒服時，遇到一個常見的需求。
為了營運方便，網頁常常會留一個區域給客戶使用，客戶可以編輯 HTML 來達到想要的效果
這樣的好處是，客戶可以馬上應對業務需要，IT也不用重新佈署程式
壞處是要考量資安，不過都是內部來源，出、入口增加檢核，好好
CAN I USE
解決方法
加入 SCSS 或是 CSS
在 SCSS 檔案中加入以下這段 Code
$max:20;
@for $i from 1 through $max {
body.below-safari14 {
.flex-row {
&.flex-n
本篇是Tailwind CSS系列文章的第一篇，就用輕鬆的閒聊方式來認識一下Tailwind CSS，讓你知道它的魅力所在。Tailwind CSS是一種「Utility-First」的CSS設計模式，提供非常多預先定義好的class給開發者使用，直接加在HTML上就能直接使用，協助開發者更快的開發
介紹 Tailwind CSS 工具並提供如何使用的方法
