TailwindCSS 资源推荐

前言

TailwindCSS 发布了 3.0， 功能也越来越好用，那么是否有与之相关的组件库呢 ？ 每个项目都有 awesome ，TailwindCSS 也有 awesome-tailwindcss, 你可以在这里找到插件、工具、 组件资源库、以及脚手架和学习资源。但上面的资源太多了，下面是我将推荐我个人认为比较好用的资源。

推荐内容

2. Tailwind CSS IntelliSense



3. VScode 插件，官方维护，提供代码自动补全，语法高亮，代码样式显示等。
5. Headless UI



6. 官方维护的组件库，支持 React 和 Vue，在官网可以直接看到效果，可以直接拷贝代码，可以说非常好用，缺点就是组件太少。
8. Heroicons



9. 官方维护的图标库，24*24 标准大小，可以一键拷贝 JSX 和 SVG，非常好用，缺点就是目前只有 230 个图标，不过我们优先可以从这里复制，没有再去 iconfont 上找。
11. Tailwind Elements



12. 类似 Bootstrap 组件库，使用 Tailwind CSS 重新创建，但是有更好的设计和更多的功能。具有 500+ 组件，若不需要 JS， 可以直接拷贝 HTML 到你的任意项目中。
14. Tailwind-kit



15. 提供丰富的组件和模板，支持一键拷贝。
17. Vue-tailwind



18. Vue.js UI 组件库，提供比较丰富的组件，可以从网站上看到组件 UI 是有哪些原子类样式组成， 并且组件可以自定义设置样式。
20. Vechai ui



21. React.js UI 组件库，内置暗黑模式，提供比较丰富的组件，可以从网站上看到组件 UI 是有哪些原子类样式组成， 并且组件可以自定义设置样式。
23. Mamba ui



24. 支持组件和模板代码拷贝，包括 html、react 和 vue、有了这个网站，再也不用为设计网站而烦恼。
26. Tailblocks



27. 60 + 不同的代码块，随时可以使用方向键快捷切换，特别适合门户网站。
29. Wicked blocks



30. 可视化拖拽编辑器，可以说是 Tailwind 低代码平台， 可以直接修改元素样式，可以直接下载代码。
32. ​​Tailwind components​​



33. 一个自由分享的网站，你可以直接在上面搜索组件库或者网站，并且可以直接拷贝代码。
35. Tailwind toolbox



36. 有些跟 Tailwind components 类似，你可以直接在上面搜索组件库或者网站，并且可以直接拷贝或下载代码.
37. Typography​文章排版插件——增加一个prose 的 class, 使文章详情页有一个好看的排版。
38. Tailwindcss-forms表单插件——增加了表单的默认样式，使修改表单样式变得简单。
40. tailwindcolorshades



41. 一个好用的 tailwindcolor 颜色生成器，输入品牌色，自动生成色卡和 tailwindcolor 配置，上图我输入了花瓣网和掘金的品牌色。

最后

以上就是推荐的全部内容，如果有小伙伴们有好用的 Tailwind 资源可以在评论区留言。

希望这篇文章对大家有所帮助，也可以参考我往期的文章或者在评论区交流你的想法和心得，欢迎一起探索前端。

补充

daisyui

基于 tailwind css 但是你的html 可以不那么臃肿，只需要 使用btn card 这些样式，就可以生成组件样式，并且样式支持高度自定义和多皮肤