iT邦幫忙

2021 iThome 鐵人賽

2
Modern Web

排版神器 Tailwind CSS~和兔兔一起快速上手漂亮的元件開發!系列 第 32

Day 31:「不夠吃了...哪裡還有紅蘿蔔?」- Tailwind 和 Vue 的資源分享

大家有體會到自己建立元件的樂趣嗎?

如果沒有也沒關係~
因為接下來會分享一些相關資源哦!

其實兔兔知道的資源並不是很多啦,因為兔兔的東西都會自己重造輪子 XD

不過就是還是把我知道的都分享這樣~

carrotPoint Tailwind 元件庫

你可能覺得造元件很煩,要注意到的東西太多了,不過其實啊,有許多現成元件可以使用哦!

Tailwind UI

Tailwind UI 是官方的元件庫,而官方元件庫的元件就不少了,可能很多人也會想說:

「啊 Tailwind 既然這麼好用,官方還附元件庫,那它怎麼不收費啊?」

沒錯 ,它就是這麼好用還不收錢,其實它有收費機制,只是它是有繳會員費 (我看好像是永久的) 的話,就可以存取元件庫裡的所有元件,但是也有分等級的,比如說:

  • Application UI 會員方案

    • 會費 $149 USD
    • 可以存取 Application UI 類 的所有模組
    • 可免費存取新上市的 Application UI 類模組
    • 可加入官方的 Discord 伺服器問問題
    • ... 還有其他的...
  • Marketing 會員方案

    • 會費 $149 USD
    • 可以存取 Marketing 類 的所有模組
    • 可免費存取新上市的 Marketing 類模組
    • 可加入官方的 Discord 伺服器問問題
    • ... 還有其他的...
  • Application UI + Marketing 的終極方案

    • 會費 原 $289,現在 $249 USD
    • 可以存取所有模組 ( Application UI + Marketing )
    • 可免費存取所有新上市的模組 ( Application UI + Marketing )
    • 可加入官方的 Discord 伺服器問問題
    • ... 還有其他的...

但是不用覺得煩惱,官方不是所有的原件都是付費的, 也有很多免費的元件 ,要錢的通常都是比較商業用途一些的設計,簡單常用的設計都還是免費的。
 

Tailblocks

如果剛剛在 Tailwind 官方元件庫看到喜歡的模組但卻不是免費的,那你就要來看看 Tailblocks 啦~

Tailblocks 是第三方的元件庫,是一群熱愛 Tailwind 的人一起弄出來的專案,它的網站裡面有很超過 60 種的模板供你挑選,其中也有一些是 Tailwind 官方收費類型的模板,他們也有還原出來,只是做的是他們自己的風格,不是官方的。


 

Tailwind Components

Tailwind Components 也是第三方的元件庫,有很多國外的作者會一直上傳自己做的最新的 Tailwind UI 樣本。它的分類非常的詳細哦,很推薦推去這裡找你想要的元件樣式。


 

Tailwind Kit

Tailwind Kit 也是第三方的元件庫,目前元件數量還算不多,但分類也蠻細的,一個分類進去後還有分成不同用途的原件。一樣都有提供原始碼直接讓你複製,但值得一提的是它的某些元件有提供深色模式的功能在裡面,也可以直接切換看效果,網站也還有提供 寫好的 Tailwind 網頁範例模板讓你複製去修改。


 

carrotPoint Tailwind 相關工具

Shades Generator for Tailwind

Shades Generator for Tailwind 是一個在 Tailwind 要自訂色彩時非常實用的工具,進入網站時只要輸入你想要的顏色的色碼,它會為你建立好一整個依照那個顏色所排出的色系,只要按複製後,就可以直接貼到 Tailwind 的配置檔了,非常方便!


 

Creator

Creator 是一個非常好用的 Tailwind 專案建立工具,已經預先把一些常見的前端框架都加入指令,只需要網站上按一按,再複製貼上,起始專案就會自己建立了,超級方便。

(哇你這兔,業配自己的東西都不臉紅的)



 

carrotPoint Vue 資源

Vue 的資源網路上其時就非常多了,不過這邊還是提幾個我覺得不錯的!

Vue 學習資源

  • 重新認識 Vue.js - 大家俗稱的 Vue 008,Kuro 的這本書有鐵人賽的文章,也有我現在分享的網路版,但網路版只有前四個章節,所以還是推薦各位買書哦,這也是對作者的一個支持。
  • Vue 官方文件 - 其實看官方的就很棒啦~官方文件的解釋就已經都非常詳細了,可以多去翻翻。
  • Vue - The Complete Guide - 這是一門評價還不錯的 udemy 課程,講解的算是詳細,老師的發音也還算標準,有打折時可以買買看哦~ (只是這課程主力是教 Vue 2,而兔兔寫的都是 Vue 3)
     

大概就是這樣了吧,
是不是知道的比你們還少呢 XD

有知道不錯的資源可以留言在底下給我哦,我也想知道還有哪些不錯的資源我要收藏起來~


關於兔兔們:


上一篇
Day 30:「很刺眼,這樣太亮了啦!」- 深色模式切換開關
系列文
排版神器 Tailwind CSS~和兔兔一起快速上手漂亮的元件開發!32

尚未有邦友留言

立即登入留言