Published on

TailwindCSS 资源推荐

Authors
  • avatar
    作者
    狂奔滴小马

前言

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

推荐内容

  1. Tailwind CSS IntelliSense

    s12340601052022

    VScode 插件,官方维护,提供代码自动补全,语法高亮,代码样式显示等。

  2. Headless UI

    s10095501052022

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

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

  4. Tailwind Elements

    s10414901052022

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

  5. Tailwind-kit

    s11292201052022

    提供丰富的组件和模板,支持一键拷贝。

  6. Vue-tailwind

    s10305601052022

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

  7. Vechai ui

    s10473101052022

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

  8. Mamba ui

    s13252001052022

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

  9. Tailblocks

    s11422301052022

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

  10. Wicked blocks

    s12532901052022

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

  11. Tailwind components

    s11001801052022

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

  12. Tailwind toolbox s12471901052022

    有些跟 Tailwind components 类似,你可以直接在上面搜索组件库或者网站,并且可以直接拷贝或下载代码.

  13. Typography

    文章排版插件——增加一个prose 的 class, 使文章详情页有一个好看的排版。

  14. Tailwindcss-forms

    表单插件——增加了表单的默认样式,使修改表单样式变得简单。

  15. tailwindcolorshades

    s13195001052022

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

最后

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

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

补充

daisyui

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

截屏2022-01-10 下午5.36.58.png

runjs-cool
关注微信公众号,获取最新原创文章(首发)View on GitHub