上一個單元了解了為何要使用 tailwindcss 與其好處,接下來第一件事情一定是建立專案,要使用 tailwindcss 的方式有很多種,最快的方式就是直接...
前言 前端網頁開發至今發展 20 餘年,在 2023 年的今日如果還是想要從事網頁開發,到底該從何下手呢?還是一樣從 HTML、CSS 與 JavaScrip...
如果真的有一步一步看過這個系列的教學文章,可以發現在 tailwindcss 的世界中,雖然可以很清楚的了解每一個元件的命名以及異議,例如:w-32 就表示寬度...
在真正進入到網頁排版之前,還必須弄清楚一些事情,這個單元先從一個簡單的按鈕開始,透過製作一個按鈕,進而推展到製作各種組件,最後才是排版。 首先一開始,先寫一個按...
上一個單元已經學會了如何安裝與設定一個新的專案,在進入真正的 UI 開發之前,如果只是想要單純測試某些 UI 樣板,而又不想使用上一個單元的方式建立專案,則可以...
這個單元要來製作一個簡單的 header,使用上一個單元學習到的按鈕元件,這邊一口氣直接先放上三個按鈕: <div> <a class=&...
其實 tailwindcss 寫久了,就會發現原始碼會充滿著 css 的樣式屬性,在維護上不是那樣方便。但現在也有非常多基於 tailwindcss 的框架,這...
這個單元要來練習建立一個橫幅排版,最終希望的完成品會呈現如: 首先,一樣先建立基礎的排版: <section class="">...
這個單元將接續上一個單元製作的卡片排版來延伸。 一般來說使用卡片排版,會有好幾個卡片同時出現,接下來就繼續討論如何放入多個卡片排版。 一開始宣告最上層的 div...
這個單元會延續上一個單元來繼續製作,在上一個單元完成了一個非常簡單的 header 呈現方式,但還少了非常重要的 RWD 排版: <header clas...
這個單元繼續來介紹其它好用的插件,下拉式選單插件。 首先一樣在專案目錄下安裝: npm install tailwindcss-dropdown 然後在 ta...
上一個單元介紹了左右兩側的排版,這個單元要來介紹三列式的排版,並且三列都各自獨立有自己的滑動視窗,完成之後會呈現這個樣子: 首先,老樣子,宣告 div 的架構...
在上一個單元了解到如何建立一個基本款的表格樣式,在表格的顯示方式,如果表格的行或列的數目太多,會希望在滑動的時候卡住某一行或某一列定住在原位置不動,就像使用 G...
這個單元要來介紹 tailwindcss 的設定檔案。 在專案結構中有一個檔案為 tailwind.config.js: /** @type {import('...
在上一個單元完成了一個有圖片的卡片排版,接下來將這個卡片排版修改成圖片是用背景的方式呈現,最終的成果如: 首先,延續上一個單元所完成的宣告: <div...
接下來這個單元要開始來討論 Dashboard 排版製作的方法,因為這是很常見的排版方式,這個單元將會完成這個排版的樣子,會呈現一個左右兩側的排版方式: 一開...
接下來這個單元來製作一個簡單的卡片排版: 先宣告一些基本的排版: <a href="/"> <div class=...
這個單元來實作登入畫面這個單元來實作登入畫面,最後希望完成的畫面如: 首先一開始宣告整個架構的 div 標籤: <div> <div&g...
這個單元來討論 hover 的進階用法,在之前的 Day4 - 一個簡單的按鈕 已經了解到當滑鼠移動到會產生事件行為需要使用 hover:,後面可以接上任何的屬...
這個單元要來繼續完成 Dashboard 排版,上一個單元完成了以下的排版方式: <div class="flex h-screen"...
雖然在 tailwindcss 可以製作出豐富的 UI 元件,但還是有許多已經寫好的元件可以直接使用,不需要重複製作輪子。 這個單元將討論 tailwindcs...
這個單元繼續討論表單的元件,checkbox。 首先先宣告一個基本的 checkbox: <input type="checkbox"...
這個單元來討論一些關於表單 input 的一些進階用法。 回到 tailwindcss - 從零開始學 - Day16 直接使用其最後的完整表單 input 樣...
在上一個單元最終完成的表單輸入欄位樣式為: <input class="w-full rounded-lg border border-gray...
這個單元繼續來討論表單的進階用法。 一個基礎的表單的 checkbox ,可能會這樣宣告: <div class="flex min-h-scr...
這個單元繼續來介紹卡片排版的方式,前一個單元介紹了一種非常簡單的卡片排版,接下來要來介紹包含圖片的卡片排版方式。 一開始一樣宣告 div 標籤,與文字標籤: &...
這個單元將繼續使用 relative 與 absolute 來製作另外一種卡片排版。這是完整的樣子: 一開始宣告 div 標籤: <div class=...
這個單元要開始來討論表單的製作方式,最後呈現的樣子: 先宣告一個最基本的表單輸入框: <input class="f" type=&...
這個單元要來介紹表格的基本做法,首先,先宣告一個最基本的表格: <table> <thead> <tr>...
前面兩個單元討論了如何建構出表單內的欄位,但目前只有討論到 input 與 checkbox,這個單元將會討論所有欄位的寫法。 在 Day16 討論過的 inp...