你好编码员!

本文提供了一个精选列表,其中包含使用 Tailwind(一种流行且时尚的 CSS 框架)样式的开源 React 项目。本文中提到的所有产品都可以从 Github 下载(没有注册锁),并在商业产品中不受限制地使用。对于新手来说,React 是一个由 Facebook 创建并积极支持的 JS 库。

感谢阅读! - 内容由 Admin Dashboards 提供。

---

• 🔥Material Tailwind React- 现场演示

• ✨Windmill React Tailwind- 产品页面

• ✨Notus React Tailwind- 产品页面

• ✨Material Tailwind Kit React- 产品页面

• ✨Windy- 由 Tailwind 提供支持的 React UI 套件

• ✨ FlowBite Tailwind 组件 - 免费 UI 套件

• 🔥 更多开源React Dashboards🚀🚀 |开发者

---

Disclosure - 这篇文章包含附属链接。

如果您使用这些链接购买东西(您无需支付额外费用),我可能会获得佣金、产品或服务。 谢谢!

---

🔥 材料顺风反应

Material Tailwind Dashboard React 是一个免费的管理模板,基于两种流行的前端技术:Tailwind CSS 和 React。它旨在简化开发人员的工作,并带有受 Google 材料设计启发的全新设计。它的所有组件都经过精心打造,彼此完美契合,同时与材料概念保持一致。

---

• Material Tailwind React- 产品页面

• Material Tailwind React- 现场演示

---

[](https://res.cloudinary.com/practicaldev/image/fetch/s--KktY9GTO--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws .com/uploads/articles/wudh5ylou3umjub6oami.gif)

---

✨ Windmill React Dashboard

Windmill Dashboard 带有一个极快的 UI,带有 Tailwind、PWA 支持以及对 Charts.js 和 Heroicons 的集成。

可访问性优先 - 该产品是为聆听真正的屏幕阅读器而开发的,焦点陷阱和键盘导航随处可用。

🦮 完全可访问(使用屏幕阅读器开发)

🌗 启用深色主题(根据主题加载甚至不同的图像)

🧩 多个(自定义)组件

⚡ 代码拆分

UI:Tailwind CSS、Windmill React UI(组件库)

PWA-ready:提供离线优先和类似应用程序的体验

---

[](https://res.cloudinary.com/practicaldev/image/fetch/s--Q-VOJb--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3 .amazonaws.com/uploads/articles/xjohkcdady571fftq8vf.png)

---

✨ Notus React Tailwind

Notus React 由超过 100 个单独的前端组件构建而成,让您可以自由选择和组合。所有组件都可以采用不同的颜色,您可以使用 Tailwind CSS 类轻松修改这些颜色。如果你喜欢明亮清新的颜色,你会喜欢这个免费的 Tailwind CSS 模板!它具有大量组件,可以帮助您创建令人惊叹的网站。

• Notus React Tailwind- 产品页面

• Notus React Tailwind- 现场演示

---

[](https://res.cloudinary.com/practicaldev/image/fetch/s--NazL8eE3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws .com/uploads/articles/qwnrmodpotw5xtdwflp3.png)

---

✨ Material Tailwind Kit React

Material Tailwind Kit React 是一个免费的开源 UI 工具包,基于两种流行的前端技术:Tailwind CSS 和 React。它旨在简化开发人员在创建直观界面的过程中的工作。

Material Tailwind Kit React 具有 120 多个独立组件,让您可以自由选择和组合。这意味着有数千种可能的组合。所有组件也可以采用颜色变化,您可以使用 react.js 道具轻松修改。

• Material Tailwind Kit React- 产品页面

• Material Tailwind Kit React- 现场演示

---

[](https://res.cloudinary.com/practicaldev/image/fetch/s--DR2sNslA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads .s3.amazonaws.com/uploads/articles/3yvxzjponcsta0i8g41v.png)

[](https://res.cloudinary.com/practicaldev/image/fetch/s--haF4X9en--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws .com/uploads/articles/64iuxj96wvns7yovdn5y.png)

---

✨有风

官方说明 - Windy 的设计初衷就是易于安装并用于让您的网站快速启动和运行。通过重用 Windy 的组件和 Tailwind 微类来扩展或自定义您的应用程序布局。

• Windy- 产品页面

• Windy- Github repo

---

[](https://res.cloudinary.com/practicaldev/image/fetch/s--6GhEXXNu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws .com/uploads/articles/8fgxmjvb35ggwv5pow1t.jpg)

---

感谢阅读! 更多资源,请访问:

---

• React 模板- Creative-Tim 设计的产品

• 免费Next JS 模板- 精选列表 |开发者