TailwindCSS Awesome
约 2 分钟阅读
标签：资源精选
- 渐变
- hypercolor.dev
- 生成器
- hypercolor.dev
- Loaders
- css/生成/platform
- nativewindGitHubnativewind/nativewind
- React Native
- jaredh159/tailwind-react-native-classnamesGitHubjaredh159/tailwind-react-native-classnames
- TailwindCSS + React Native
- npm - 80kB/24kB
- 30kB+
- deps 50kB
- 💡 在生成模板的时候也很好用
- 例如 satori vercel/satori/src/handler/tailwind.tsGitHub 文件vercel/satori/src/handler/tailwind.ts
- ben-rogerson/twin.macroGitHubben-rogerson/twin.macro
- babel marco 预生成
- tw-in-js/twindGitHubtw-in-js/twind
- 不依赖 tailwindcss, 使用 tw 实时生成
- +35kB/14kB
- unocss/unocssGitHubunocss/unocssunocss/unocss · MIT, TS · on-demand Atomic CSS engine.笔记：unocss
- nativewindGitHubnativewind/nativewind
- rogden/tailwind-config-viewerGitHubrogden/tailwind-config-viewer
- Tailwind 配置预览
- htmlstreamofficial/prelineGitHubhtmlstreamofficial/preline
- 基于 tw 的组件 - 依赖 JS
- 使用全局监听，通过 data-attr 控制
- defaultConfig.stub.jsGitHub 文件tailwindlabs/tailwindcss/stubs/defaultConfig.stub.js#L7
- shuffle.dev - 模板生成
- sw-yx/spark-joy/README.md#tailwind-component-librariesGitHub 文件sw-yx/spark-joy/README.md#tailwind-component-libraries
- javisperez.github.io/tailwindcolorshades
- 颜色生成
- tailwindlabs/prettier-plugin-tailwindcssGitHubtailwindlabs/prettier-plugin-tailwindcss
- prettier 名字排序
windicss/windicssGitHubwindicss/windicss- 类似 Tailwind+JIT
- 不依赖 PostCSS - 用于不想依赖 PostCSS 的场景
- 维护者后面可能会转向 unocss
- windicss.org/posts/sunsetting.html
- UI
- TailwindUI笔记TailwindUIhttps://tailwindui.com/ · tailwindcss 官方出的 ui 集合 · 收费查看源码 - 终身制，值得购买，作为支持 · 个人 - $299 · https://tailwindui.com/changelog打开：/notes/web/style/tailwindcss/tailwindui
- www.hyperui.dev
- flowbite笔记flowbitethemesberg/flowbite · MIT, TailwindCSS · 提供部分免费组件 · 商业类似于 TailwindUI · 商业 · Flowbite UI · Developer License - $269 · 参考 · https://flowbite.com打开：/notes/web/style/tailwindcss/flowbite
- 部分免费组件
- Plugin
- jamiebuilds/tailwindcss-animateGitHubjamiebuilds/tailwindcss-animate
- brandonmcconnell/tailwindcss-multiGitHubbrandonmcconnell/tailwindcss-multi
- group utility classes together
hover:multi-[bg-red-500;text-white]
- brandonmcconnell/tailwindcss-signalsGitHubbrandonmcconnell/tailwindcss-signals
- 把多种条件抽象为 signal 状态控制，其他元素通过 signal 状态来控制样式
- 依赖 style queries ，Chrome 111+
- brandonmcconnell/tailwindcss-mixinsGitHubbrandonmcconnell/tailwindcss-mixins
- 定义 mixin 让元素复用，减少重复代码
- aniftyco/awesome-tailwindcssGitHubaniftyco/awesome-tailwindcss
Components
- shadcn-ui/uiGitHubshadcn-ui/uishadcn-ui/ui · =Radix+Tailwind CSS · 基于 preset 的模板生成组件到本地 · 更多是强调怎么组织组件 · 依赖 · v4 支持多 icon 支持 @base-ui/react 了 · @radix-ui/primitive - 基础组件笔记：shadcn
- saadeghi/daisyuiGitHubsaadeghi/daisyuisaadeghi/daisyui · MIT, CSS · 基于 TailwindCSS 的一套 UI · 主题 · {primary,secondary,accent,neutral}-{,focus,content} · base-{100,200,300,content}笔记：daisy Tailwind Components
- cschroeter/park-uiGitHubcschroeter/park-ui
- markmead/hyperuiGitHubmarkmead/hyperui
- for marketing, ecommerce and application UI
- konstaui/konstaGitHubkonstaui/konsta
- iOS & Android 样式
- React,Vue,Sevlte 组件
- themesberg/flowbiteGitHubthemesberg/flowbitethemesberg/flowbite · MIT, TailwindCSS · 提供部分免费组件 · 商业类似于 TailwindUI · 商业 · Flowbite UI · Developer License - $269 · 参考 · https://flowbite.com笔记：flowbite
- 组件样式参考
- TailGrids/tailwind-ui-componentsGitHubTailGrids/tailwind-ui-components
- tailwindcomponents.com
- cruip/tailwind-landing-page-templateGitHubcruip/tailwind-landing-page-template
- 首页模板
- mertJF/tailblocksGitHubmertJF/tailblocks
- Ready-to-use Tailwind CSS blocks.
- uiverse.io
Projects
- vivek9patel/vivek9patel.github.ioGitHubvivek9patel/vivek9patel.github.io
- portfolio website of theme Ubuntu 20.04
- juliomrqz/statusfyGitHubjuliomrqz/statusfy
- Status Page Dashboard
- cruip/tailwind-dashboard-templateGitHubcruip/tailwind-dashboard-template
- demos.creative-tim.com/notus-react
- themesberg/tailwind-dashboard-windsterGitHubthemesberg/tailwind-dashboard-windster
关联信息
反向链接、本文链接的其他页面和外部资料。
站内链接
- flowbite笔记 · flowbite
themesberg/flowbite · MIT, TailwindCSS · 提供部分免费组件 · 商业类似于 TailwindUI · 商业 · Flowbite UI · Developer License - $269 · 参考 · https://flowbite.com
- TailwindUI笔记 · TailwindUI
https://tailwindui.com/ · tailwindcss 官方出的 ui 集合 · 收费查看源码 - 终身制，值得购买，作为支持 · 个人 - $299 · https://tailwindui.com/changelog
参考资料
GitHub30 条
- aniftyco/awesome-tailwindcssgithub.com/aniftyco/awesome-tailwindcss
- ben-rogerson/twin.macrogithub.com/ben-rogerson/twin.macro
- brandonmcconnell/tailwindcss-mixinsgithub.com/brandonmcconnell/tailwindcss-mixins
- brandonmcconnell/tailwindcss-multigithub.com/brandonmcconnell/tailwindcss-multi
- brandonmcconnell/tailwindcss-signalsgithub.com/brandonmcconnell/tailwindcss-signals
- cruip/tailwind-dashboard-templategithub.com/cruip/tailwind-dashboard-template
- cruip/tailwind-landing-page-templategithub.com/cruip/tailwind-landing-page-template
- cschroeter/park-uigithub.com/cschroeter/park-ui
- htmlstreamofficial/prelinegithub.com/htmlstreamofficial/preline
- jamiebuilds/tailwindcss-animategithub.com/jamiebuilds/tailwindcss-animate
- jaredh159/tailwind-react-native-classnamesgithub.com/jaredh159/tailwind-react-native-classnames
- juliomrqz/statusfygithub.com/juliomrqz/statusfy
- konstaui/konstagithub.com/konstaui/konsta
- markmead/hyperuigithub.com/markmead/hyperui
- mertJF/tailblocksgithub.com/mertJF/tailblocks
- nativewind/nativewindgithub.com/nativewind/nativewind
- rogden/tailwind-config-viewergithub.com/rogden/tailwind-config-viewer
- saadeghi/daisyuigithub.com/saadeghi/daisyui
- shadcn-ui/uigithub.com/shadcn-ui/ui
- sw-yx/spark-joy/README.md#tailwind-component-librariesgithub.com/sw-yx/spark-joy/blob/master/README.md
- TailGrids/tailwind-ui-componentsgithub.com/TailGrids/tailwind-ui-components
- tailwindlabs/prettier-plugin-tailwindcssgithub.com/tailwindlabs/prettier-plugin-tailwindcss
- tailwindlabs/tailwindcss/stubs/defaultConfig.stub.js#L7github.com/tailwindlabs/tailwindcss/blob/master/stubs/defaultConfig.stub.js
- themesberg/flowbitegithub.com/themesberg/flowbite
- themesberg/tailwind-dashboard-windstergithub.com/themesberg/tailwind-dashboard-windster
- tw-in-js/twindgithub.com/tw-in-js/twind
- unocss/unocssgithub.com/unocss/unocss
- vercel/satori/src/handler/tailwind.tsgithub.com/vercel/satori/blob/main/src/handler/tailwind.ts
- vivek9patel/vivek9patel.github.iogithub.com/vivek9patel/vivek9patel.github.io
- windicss/windicssgithub.com/windicss/windicss
其他外链10 条
- demos.creative-tim.com/notus-reactdemos.creative-tim.com/notus-react
- hypercolor.devhypercolor.dev/
- javisperez.github.io/tailwindcolorshadesjavisperez.github.io/tailwindcolorshades
- play.tailwindcss.com/OPAsySKNCdplay.tailwindcss.com/OPAsySKNCd
- shuffle.devshuffle.dev/
- tailwindcomponents.comtailwindcomponents.com/
- uiverse.iouiverse.io/
- windicss.org/posts/sunsetting.htmlwindicss.org/posts/sunsetting.html
- www.hyperui.devwww.hyperui.dev/
- www.tailwindcss-animated.com/configurator.htmlwww.tailwindcss-animated.com/configurator.html