學習如何用 TailwindCSS | React | React Router 來做一個動態導覽列

JayLinXR

發佈於軟體開發

更新於 2024/05/17發佈於 2023/05/17閱讀時間約 1 分鐘

動態導覽列為增加使用者經驗UX，要如何在Tailwind CSS上實現呢?這次JayLin來帶大家做一個動態導覽列(Animation Navigation)

學習重點

TailwindCSS Animation class
position 運用
和建制組件 Component

影片教學

總結

此為案例實戰，透過這個案例讓大家能更深入了解TailwildCSS運用

額外資源教學

如果你對基礎有不了解地方可以前往以下去學習，Tailwind CSS 初學課程教學 - https://vocus.cc/article/64643471fd897800017d35e1

JayLinXR IG: https://www.instagram.com/jaylin_xr/

留言

留言分享你的想法！

JayLinXR

13會員

39內容數

設計 + 程式，是一個出版對設計和程式的學習影片和教學文章，目的是為了讓大家能加快學習最新技術以及設計相關題目去思考如何改變產品的設計體驗。請追蹤JayLinXR獲得最新消息: https://www.youtube.com/@jaylinxr

JayLinXR的其他內容

2024/05/22

使用 React Marquee 創建流暢的跑馬燈效果

React Marquee是一個輕量級的React library，可以在網頁上創建流暢的跑馬燈效果。本文提供快速教學和講解，教大家如何安裝、使用React跑馬燈library官方網站。另外，也分享了額外的資源和相關教學文章。希望透過以上講解和影片教學，能幫助大家瞭解這個library。

2024/05/22

使用 React Marquee 創建流暢的跑馬燈效果

2024/05/03

Vite前端工具加入Tailwindcss教學

本文介紹如何使用Vite建立前端開發初始檔案，並加入Tailwindcss的教學。透過指令和配置檔，讓你能快速建立個人專案的開發環境，並學習如何加入全域的Tailwindcss樣式。還有影片教學、資源連結和更多相關教學文章等，幫助你進一步學習。

2024/05/03

Vite前端工具加入Tailwindcss教學

2024/04/27

使用Vite工具創建開發初始檔案的教學

這一集用最新的Vite工具去創建初始檔案。Vite用於創建和構建Web應用程序，具有快速的啟動時間、即時熱更新、小型體積、支持多種框架和可擴展性等優點。

2024/04/27

使用Vite工具創建開發初始檔案的教學

看更多

你可能也想看

Andy Tsou的沙龍

[Tailwind CSS] 把我的樣式還來

情境前陣子使用 Tailwind CSS 開發的正舒服時，遇到一個常見的需求。為了營運方便，網頁常常會留一個區域給客戶使用，客戶可以編輯 HTML 來達到想要的效果這樣的好處是，客戶可以馬上應對業務需要，IT也不用重新佈署程式壞處是要考量資安，不過都是內部來源，出、入口增加檢核，好好

#TailwindCSS#ShadowDOM#Vue

2023/12/24

Andy Tsou的沙龍

[Tailwind CSS] 把我的樣式還來

#TailwindCSS#ShadowDOM#Vue

2023/12/24

技術叢林

什麼是Tailwind CSS？輕鬆認識Tailwind CSS

本篇是Tailwind CSS系列文章的第一篇，就用輕鬆的閒聊方式來認識一下Tailwind CSS，讓你知道它的魅力所在。Tailwind CSS是一種「Utility-First」的CSS設計模式，提供非常多預先定義好的class給開發者使用，直接加在HTML上就能直接使用，協助開發者更快的開發

#開發#TailwindCSS#CSS

2023/10/24