---
title: 元件庫 | Tailwind CSS
tags: tailwind
---

Tailwind 元件庫
===

在寫網頁或開發其他軟體的時候，這邊整理了一些元件庫和元件，優缺點也順便列一下：
<br>

> ### [元件庫介紹](#元件庫)
> - [Tailwind UI](#Tailwind-UI)
> - [Tailblocks](#Tailblocks)
> - [Tailwind Components](#Tailwind-Components)
> - [Tailwind Kit][TailwindKit]
> - [我們的元件庫](#我們的元件庫)
> ### 元件
> - 尚無內容

<br>

純 Tailwind 元件庫
---

### Tailwind UI
**[Tailwind UI]** 是官方的元件庫，而官方元件庫的元件就不少了，可能很多人也會想說：

> [name=搋兔 Tryto] 「啊 tailwind 既然這麼好用，那它怎麼不收費」[color=red]

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

- **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 伺服器問問題
- ... 還有其他的...

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

<br>

接下來這個東西，就是要獻給認真看到這裡的你！因為可能剛剛在 Tailwind 官方元件庫看到喜歡的模組但卻不是免費的 :cry: ，那你就要來看看 **Tailblocks** 啦~
<br>

---
### Tailblocks
**[Tailblocks]** 是第三方的元件庫，是一群熱愛 tailwind 的人一起在 github 弄出來的專案，他網站裡面有很超過 60 種的模板供你挑選，其中也有一些是 tailwind 官方收費類型的模板，他們也有做出來，只是是他們自己的風格，不是官方的，然後他們也很貼心地做出了 ==**檢視原始碼**== ，甚至程式碼連框都不用框，直接上面有 ==**一鍵複製**== XD。

<br>

那有好心人士也可以贊助一下 taiblocks 的開發者，這邊幫你附上[他的網站][Sponsor-of-Tailblocks] 。

<br>

---
### Tailwind Components
**[Tailwind Components][Tailwindcomponents]** 也是第三方的元件庫，有很多國外的作者會一直上傳自己做的最新的 Tailwind UI 樣本。Tailwind Components 同樣也有 ==**檢視原始碼**== 和 ==**一鍵複製**== 的功能，而且分類還非常的詳細哦， ==**目前最推的是去這裡找你想要的樣式。**==

<br>

<br>

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

<br>

<br>

整合式 Tailwind 元件庫
---

### Headless UI
**[headlessUI]** 是

<br>

--
### daisy UI
**[daisyUI]** 是

<br>

兔兔教元件庫
---
我們可能有計畫會發展出自己的元件庫，但這件事有待商討，只是兔兔一意孤行而已。
> [name=搋兔 Tryto]你也可以當作是愚人節企劃哦XD [color=red]

<br>
---
###### tags: `tailwind`

<!-- === 連結們 ============== -->
[Tailwind UI]: https://tailwindui.com/components
[Tailblocks]: https://tailblocks.cc
[Sponsor-of-Tailblocks]: https://www.patreon.com/bePatron?u=36210124
[Tailwindcomponents]: https://tailwindcomponents.com
[TailwindKit]:
https://www.tailwind-kit.com/components
[headlessUI]:
https://headlessui.dev
[daisyUI]:
https://daisyui.com

[官方免費元件]: https://tailwindui.com/preview

<!-- === CSS設定 ============== -->
<style>
a {
color:#0072E3;
text-decoration: none;
transition:color 0.75s;
}
a:hover {
color:#84C1FF;
text-decoration: none;
transition:color 0.75s;
}
.markdown-body mark {
border-radius: 5px;
color:#c7254e;
background-color:#f9f2f4;
}
</style>

<!-- === CSS：程式碼深色主題 ============== -->
<style>
.markdown-body pre {
background-color: rgb(31, 41, 55);
border: 1px solid #555 !important;
color: #CCCCCC;
border-radius:12px;
/*border-radius:0px;*/
}
.markdown-body pre .hljs-tag {
color: #BAE5FD;
}
.markdown-body pre .hljs-keyword {
color: #20D3EE;
}
.markdown-body pre .hljs-string {
color:#BEF263;
}
.markdown-body pre .hljs-comment {
color:#9CA3B0;
}
.markdown-body pre .hljs-attr {
color:#20D3EE;
}
.markdown-body pre .hljs-name {
color:#E87BF9;
}
.markdown-body pre .hljs-built_in {
color:#F76E79;
}
</style>