首页 > 其他分享 >TailwindCSS 资源推荐

TailwindCSS 资源推荐

时间:2022-10-07 18:32:08浏览次数:55  
标签:代码 Tailwind 推荐 样式 TailwindCSS 组件 拷贝 可以 资源

前言

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

推荐内容

  1. Tailwind CSS IntelliSense
  2. TailwindCSS 资源推荐_自定义

  3. VScode 插件,官方维护,提供代码自动补全,语法高亮,代码样式显示等。
  4. Headless UI
  5. TailwindCSS 资源推荐_前端_02

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

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

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

  15. 提供丰富的组件和模板,支持一键拷贝。
  16. Vue-tailwind
  17. TailwindCSS 资源推荐_自定义_06

  18. Vue.js UI 组件库,提供比较丰富的组件,可以从网站上看到组件 UI 是有哪些原子类样式组成, 并且组件可以自定义设置样式。
  19. Vechai ui
  20. TailwindCSS 资源推荐_前端_07

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

  24. 支持组件和模板代码拷贝,包括 html、react 和 vue、有了这个网站,再也不用为设计网站而烦恼。
  25. Tailblocks
  26. TailwindCSS 资源推荐_好用_09

  27. 60 + 不同的代码块,随时可以使用方向键快捷切换,特别适合门户网站。
  28. Wicked blocks
  29. TailwindCSS 资源推荐_好用_10

  30. 可视化拖拽编辑器,可以说是 Tailwind 低代码平台, 可以直接修改元素样式,可以直接下载代码。
  31. ​Tailwind components​
  32. TailwindCSS 资源推荐_css_11

  33. 一个自由分享的网站,你可以直接在上面搜索组件库或者网站,并且可以直接拷贝代码。
  34. Tailwind toolbox
  35. TailwindCSS 资源推荐_前端_12

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

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

最后

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

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

补充

daisyui

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

TailwindCSS 资源推荐_自定义_14

标签:代码,Tailwind,推荐,样式,TailwindCSS,组件,拷贝,可以,资源
From: https://blog.51cto.com/u_15757429/5734860

相关文章

  • Kubernetes资源管理方式和Namespace、pod、label、deployment、service资源介绍
    kubernetes的本质上就是一个集群系统,用户可以在集群中部署各种服务,所谓的部署服务,其实就是在kubernetes集群中运行一个个的容器,并将指定的程序跑在容器中。kubernetes......
  • C/C++基于朋友圈的商品推荐系统
    C/C++基于朋友圈的商品推荐系统基于朋友圈的商品推荐【课题内容和要求】模拟基于朋友圈的商品推荐,可以用于任何电商,如淘宝、京东等。假设目前用户有100人,每人均有自己......
  • Kubernetes--LoadBalancer类型的Service资源和ExternalName Service
    LoadBalancer类型的Service资源NodePort类型的Service资源虽然能够于集群外部访问得到,但外部客户端必须得事先得知NodePort和集群中至少一个节点的IP地址,且选定的节点发......
  • .NET 开源项目推荐之 直播控制台解决方案 Macro Deck
    流媒体是一个吸引数亿万玩家的严肃行业。最受欢迎的游戏锦标赛的转播获得了数百万的观看次数,从商业角度来看,这也使游戏行业变得有趣。在直播圈有个很受欢迎的直播控制台程......
  • 推荐一款id生成器: Hashids
    唯一id生成的方式有很多种,比较常见的有以下几种方式:语言自带功能,如Java中的UUID,常用于后端第三方工具提供,如npm中的nanoid,常用于前端Twitter开源的Snow......
  • Visual Studio Code +PHP开发 推荐插件
    1、PHPIntelephense:超好用php智能代码提示器,支付代码提示、查找定义、类搜索等功能,非常强大2、PHP接口注释插件:安装好后可以使用“/**”快捷键+Tab自动生成接......
  • 文件资源管理器卡死、无响应解决办法
    问题  外接移动硬盘断连了,导致出现许多的问题。其一是经常打开文件管理器的时候弹窗如下的错误。  其二是经常文件资源管理中卡死,并且在任务管理器中无法重启任务也......
  • js数组去重大全,推荐收藏
    情境:将数组vararr=[1,1,‘true’,‘true’,true,true,15,15,false,false,undefined,undefined,null,null,NaN,NaN,‘NaN’,0,0,‘a’,‘a’,{},{}];中重复的值......
  • 书单推荐|书籍是人类的良师益友
    你知道吗?除了我们都熟知的9月10日教师节外,还有一个节日属于所有的老师!1994年,联合国教科文组织和世界劳工组织联合发布了《关于教师地位的建议书》,这份文件是全世界关于教......
  • Kubernetes--NodePort类型的Service资源
    NodePort类型的Service资源NodePort即节点Port,通常在安装部署Kubernetes集群系统时会预留一个端口范围用于NodePort,默认为30000~32767之间的端口。与ClusterIP类型的可省......