Tailwind官方安裝說明 1. 安裝 TailwindCSS npm install -D tailwindcss postcss autoprefixer...
前言 今天是開發的Day4，重點為RWD版面以及V指令的複習。 實現內容 RWD修正 Tailwind：斷點、自定義變數 v-model指令 已解決問題...
前言 在開發前端頁面時我們有多種樣式開發的選擇，可以選擇傳統的CSS寫法、使用UI Framework或Utility-first Framework等，為了達...
如果真的有一步一步看過這個系列的教學文章，可以發現在 tailwindcss 的世界中，雖然可以很清楚的了解每一個元件的命名以及異議，例如：w-32 就表示寬度...
這篇文章將會著重於建立 App 的 UI 架構，會使用一開始建立專案設定的 nativewind 和 tailwindcss 來快速地設計和實現 UI。 設計...
在前幾日中，我們總共講解了六篇CSS的基本屬性，內容之多，但都僅是蜻蜓點水的帶過而已，可見CSS的上限非常之高，學習它必然是一段漫長之路。 以前在設計網頁時，我...
TailwindCSS 與 Headless UI 就像用原型食物去做烹煮，而不是經過非常多製程的加工食品。當我們使用它們時，我們得到的是最基本、最純粹的成分，...
Prepare 開始準備前端的工作，之前跑hello tauri的時候，我們用cargo tauri dev，這個會自己watch，所以我們不用寫cargo w...
本篇開箱是TailwindCSS預覽工具以及針對Tailwind CSS斷點設定擋調整 由於前兩篇是介紹WindowResize時要抓取的一些行為，這需求都...
開發工具和編碼習慣 在開始專案開發的過程中，我們會使用各種相依工具來輔助開發。這些工具有的是運行時必須的，例如 Vue，而有的則是僅在開發過程中使用，例如 ES...
這個單元將繼續使用 relative 與 absolute 來製作另外一種卡片排版。這是完整的樣子： 一開始宣告 div 標籤： <div class=...
在上一個單元完成了一個有圖片的卡片排版，接下來將這個卡片排版修改成圖片是用背景的方式呈現，最終的成果如： 首先，延續上一個單元所完成的宣告： <div...
在前端進行開發的時候我們經常面對在設計整個畫面的排版與樣式時，有UI design跟design吵，自己開發跟自己吵的狀況。 因為我們在開發時常常面對到css的...
這個單元繼續來介紹卡片排版的方式，前一個單元介紹了一種非常簡單的卡片排版，接下來要來介紹包含圖片的卡片排版方式。 一開始一樣宣告 div 標籤，與文字標籤： &...
這個單元將接續上一個單元製作的卡片排版來延伸。 一般來說使用卡片排版，會有好幾個卡片同時出現，接下來就繼續討論如何放入多個卡片排版。 一開始宣告最上層的 div...
選擇障礙 這個話題在 React 生態系裡面永遠討論不完，這次想分享我自己使用上的見解，別看我都在講些hook function的使用，css 我也是略懂略懂，...
「開發的時候多想想，可以走捷徑時絕對不會繞遠路」 本篇要來介紹一款前端CSS框架「Tailwind CSS」 Tailwind CSS 是什麼? 官方網站：ht...
現在有了 MUI ，還有跟其相搭配的 emotion，樣式的調整上已經很方便了，但是目前 NextJS 已經開始預設使用 React Server Compon...
在【Day - 2】時，我們已經順利的將專案執行起來，接下來就可以開始開發APP的頁面。但在進行開發之前，我希望在這30天的鐵人賽中，能夠專注在Ionic和Ch...
商業應用程式不同於網頁，具有相當多樣且細緻的互動設計，而且頁面的內容配置亦相對複雜，並且需要支援各種頁面上資料的同步呈現操作，例如訂單處理介面，就必須切割介面，...
這是「從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術」系列第 30 篇文章。 在這 30 天裡，我們一起...
今天僅僅針對 checkbox 與 radio 進行客製化展示，筆者認為這種小東西常常會忽略，而設計稿上突然出現客製化的元件會一時找不到方法進行修改，為了避免這...
鐵人賽 Day29自己做一個價值幾十萬的動態網站 第二十九課：後台介面與資料串接管理，Api爬梳nosql類資料 part2 前一天我們完成了簡單的資料串接，而...
心得感想 首先想跟自己說聲：辛苦了。這是我第一次參加鐵人賽，很高興自己堅持到最後。第一次參加有些東西可能詮釋沒有這麼到位，不過也算是訓練自己的表達與寫作能力。...
肉鬆
‧
2022-10-13
鐵人賽 Day27自己做一個價值幾十萬的動態網站 第二十七課：最後篇章也是最後TypeScript與後台介面架設介紹 再進入後台介面製作與講解前，我們可以先來了...
今天會帶大家實作一個主要效果：placeholder go up on focus，這是 google 登入畫面會使用的效果 首先建立基本架構，今天只以一個...
實戰演練 - Day6 我們昨天練習了 footer 區塊，學到元素內部間距用 padding，元素外部間距用 margin。瞭解元素標籤不要只使用 div，...
肉鬆
‧
2022-10-12
今天要製作簡單的登入格式，其中會使用到偽類以及先前沒講到的 peer，大家一起來實作看看吧！ 今天挑選的範例是 tailwind form 首先先建立基本架...
實戰演練 - Day5 我們昨天練習了景點列表，學到圖片放大或圓角外層要加上 overflow-hidden，圖片固定高度加上 object-cover 避免...
肉鬆
‧
2022-10-11
今天要實作的按鈕為～剛好看到有這麼炫砲的按鈕可以學習，就分享上來給大家～ 首先，就影片作者而言，今天示範的方法只是其中一種，使用 blur 的方式達成此種按鈕...
ch0902
Yihsuan
Mr. JK
Bucky
ttdragon0722
ysl0628
hello world
切版姐姐
機器人幽默研究員
Otto_auto
LucianoLee
peterlu
Jasper
momochenisme
EasonChang
linlaose
K.o
iThome鐵人賽
看影片追技術