技術 Day19 - 全都是假的 - 偽元素

偽元素 昨日我們介紹了偽類，與偽類不同的偽元素則是以兩個冒號 :: 作為前綴詞宣告使用，後面接偽元素名稱。 ::before 與 ::after 藉由 ::b...

技術 React 走出新手村 — 樣式的選擇

選擇障礙 這個話題在 React 生態系裡面永遠討論不完，這次想分享我自己使用上的見解，別看我都在講些hook function的使用，css 我也是略懂略懂，...

技術 Day25 -【實戰演練】Taiwan NO.1 Tour - 類別選單

實戰演練 - Day2 我們昨天練習了 header 區塊，今天開始進入 main 的區塊，網頁大致分為 header、main、footer 三大區塊，而網...

技術 筆記 - Laravel 中引入 TailwindCSS

Tailwind官方安裝說明 1. 安裝 TailwindCSS npm install -D tailwindcss postcss autoprefixer...

技術 Day 16 使用Next.js, Tailwind CSS 和 Supabase 做一個影像畫廊 image gallery app (8) -- 顯示 Supabase 資料在螢幕上

繼續加其他文字資料到圖卡上，增加圖片 title 到圖卡上。在 /components/ImageCard.js 加上下列指令。 <div classNa...

技術 Day20—開發日記（四）Tailwind自定義斷點、v-model雙向綁定

前言 今天是開發的Day4，重點為RWD版面以及V指令的複習。 實現內容 RWD修正 Tailwind：斷點、自定義變數 v-model指令 已解決問題...

技術 tailwindcss - 從零開始學 - Day11 - 卡片排版

在上一個單元完成了一個有圖片的卡片排版，接下來將這個卡片排版修改成圖片是用背景的方式呈現，最終的成果如： 首先，延續上一個單元所完成的宣告： <div...

技術 【Day10】前端撰寫（7）CSS框架

在前幾日中，我們總共講解了六篇CSS的基本屬性，內容之多，但都僅是蜻蜓點水的帶過而已，可見CSS的上限非常之高，學習它必然是一段漫長之路。 以前在設計網頁時，我...

技術 加入 Tailwind

現在有了 MUI ，還有跟其相搭配的 emotion，樣式的調整上已經很方便了，但是目前 NextJS 已經開始預設使用 React Server Compon...

技術 開發工具與相依套件安裝

開發工具和編碼習慣 在開始專案開發的過程中，我們會使用各種相依工具來輔助開發。這些工具有的是運行時必須的，例如 Vue，而有的則是僅在開發過程中使用，例如 ES...

技術 [Day18]TailwindCSS介紹和安裝

前言 在開發前端頁面時我們有多種樣式開發的選擇，可以選擇傳統的CSS寫法、使用UI Framework或Utility-first Framework等，為了達...

技術 D6 為自己的開發鮮豔上色，先用Tailwindcss來塗上喜歡的顏色

在前端進行開發的時候我們經常面對在設計整個畫面的排版與樣式時，有UI design跟design吵，自己開發跟自己吵的狀況。 因為我們在開發時常常面對到css的...

技術 tailwindcss - 從零開始學 - Day10 - 卡片排版

這個單元繼續來介紹卡片排版的方式，前一個單元介紹了一種非常簡單的卡片排版，接下來要來介紹包含圖片的卡片排版方式。 一開始一樣宣告 div 標籤，與文字標籤： &...

技術 tailwindcss - 從零開始學 - Day12 - 卡片排版

這個單元將繼續使用 relative 與 absolute 來製作另外一種卡片排版。這是完整的樣子： 一開始宣告 div 標籤： <div class=...

技術 Day 17 - 建立 Weather App UI 架構

這篇文章將會著重於建立 App 的 UI 架構，會使用一開始建立專案設定的 nativewind 和 tailwindcss 來快速地設計和實現 UI。 設計...