🪂Tailwind CSS：2023 现代化的 CSS 框架与生态盘点

一、简介

Tailwind CSS 在近年来的快速发展中，Tailwind CSS 不仅成为前端开发者钟爱的工具，还形成了一个多样化的生态系统。

二、核心特性

三、官方内容

🚀 Tailwind CSS 网站

🎉 Tailwind CSS 仓库

🎡 Tailwind CSS 游乐场

四、Tailwindcss 集成

💓 Tailwind CSS CLI 编译

💯 Tailwind CSS PostCSS 集成

🌹Tailwind CSS 与 Remix

🍀Tailwind CSS 与 Next.js

🌾Tailwind CSS 与 Nuxt.js

🍹Tailwind CSS 其他框架和语言

五、丰富的 UI

UI 库	说明
🍄 tailwindui	快速的构建你的下一个创意。
🍇 headlessui	完全无样式，完全无障碍的 UI 组件，本设计的与 Tailwind CSS 完美集成。
🍈 shadcnUI	无障碍可定制的组件库，精美的设计并且可复制到你自己的应用程序中，帮你构建组件库。
🍉 daisyui	给 Tailwind CSS 添加组件类名，让你可以更快的创建漂亮的网站。
🍊seamless-ui	使用 简单 HTML 和 Tailwind CSS 制作下一代用户界面。

UI 库	说明
🍋vue-tailwind	使用 Tailwind CSS 的 Vue 可配置 class UI 组件库。
🍌 Equal UI	Equal UI 是一个基于 Tailwind CSS 提供支持的 Vue3 UI 组件库。
🍍 wireui	一组用于 TallStack 项目的可重复使用的 UI 组件库。
🍎 tailwind-react-ui	使用 Tailwind CSS 使用 React 使用组件和 UI 框架。
🥝 skeleton	Svelte 和 Tailwind CSS 的 UI 工具箱
🦀 tailwindcss-radix	用于样式化 Radix 状态的实用程序和变体。
🦞 windmillui	用于快速、无障碍开发漂亮界面的 UI 组件库。
🏀 pines	一个包含动画、滑块、工具提示、手风琴、模态框等组件的 一组 UI 元素，可以复制并粘贴到任何 Alpine 和 Tailwind CSS 项目中。
🪆 Preline UI	Preline UI 是一组开源的预构建 UI 组件，基于实用程序优先的 Tailwind CSS 框架。
🛼 Feliz.DaisyUI	Feliz 对 DaisyUI Tailwind CSS 组件库的封装。
🗂️ indielayer	基于 Tailwind CSS 的 Vue3 和 Nuxt UI 库。🚀 快速构建和原型化 Web 应用程序。
🚩 sailboatui	Sailboat UI 是一个现代的 Tailwind CSS UI 组件库。从 150 多个开源的 Tailwind CSS 组件开始，轻松构建您的产品。
🌄 mambaui	Mamba UI 是一个基于 Tailwind CSS 的免费开源 UI 组件和模板集合。
🦚 floatui	使用 Tailwind CSS 构建，漂亮且具有响应式的 React 和 Vue UI 组件和模板。
🐬 hyperui	HyperUI 是一个包含免费 Tailwind CSS 组件的集合，可用于您的下一个项目。通过各种组件，您可以构建下一个营销网站、管理仪表盘、电子商务商店等等。
🐿️ oruga	Oruga UI 就像一只毛毛虫，简约而功能齐全。它在您手中蜕变成一只蝴蝶。
🐭windmillui React	WindmillReact UI 是一个基于 Tailwind CSS 的组件库, 适用于 React 框架。
🐥ripple-ui	Ripple UI 是一组用于构建现代界面的组件和实用工具的集合，基于 Tailwind CSS 构建。
🐟nature-ui	Nature UI 是一个基于 React 的模块化组件库，内置对 Tailwind CSS 的支持。
🦗konsta	使用 Tailwind CSS 制作的移动端 UI 组件。
👣rewinds	Rewinds 是一个使用 React、Radix UI、Zod、Conform、Prisma ORM、MySQL 在 PlanetScale、Verce 等平台上构建的 Remix Tailwind` 技术栈。
💝dev.ui	DevUI 是一套免费开源的、可访问和可定制的 React 组件和模板，可以加速开发过程。

六、项目推荐

项目	说明
🎑 tailwindcss-neumorphism	使用 Tailwind CSS 生成令人舒服 UI 的 CSS 代码。
🎁soft-ui-dashboard-tailwind	令人舒服的 UI 仪表板 Tailwind - 免费开源的 TailwindCSS 仪表板。
🎊oku-nuxt3-template	Nuxt 3 最佳起始仓库，Tailwindcss，Sass，Headless UI，Vue，Pinia，Vite，Eslint，i18n，Naive UI。
🪁web-ui-clones	使用 TailwindCSS 克隆各种（知名） 网站。
🎭ChatGPT-PerfectUI	用 Vue3 + Vite + Tailwindcss 复刻 ChatGPT！体验一模一样的 web-app。
🧸purple-admin-ui	基于 Tailwind CSS 的 Blazor 组件库。

七、相关工具

工具	说明
🏗️Tailwind CSS IntelliSense	Tailwind CSS IntelliSense 通过为 Visual Studio Code 用户提供自动完成、语法高亮和代码检查等高级功能，增强了 Tailwind 开发体验。
🏝️tailwind-config-viewer	一款用于可视化本地 Tailwind CSS 配置文件的界面工具。

八、插件支持

插件名称	说明
🪴 tailwindcss-animate	一个用于创建漂亮动画效果的 Tailwind CSS 插件。
🌲tailwindcss-gradients	一个用于生成渐变背景效果的 Tailwind CSS 插件。
🌳tailwindcss-forms	一个为表单样式提供基本样式，使表单元素易于通过实用工具进行覆盖修改的插件。
🌴tailwindcss-line-clamp	一个提供了在固定行数后视觉上截断文本的实用工具的插件。
🌵tailwindcss-typography	一个 Tailwind CSS 文字排版工具。
🍁tailwindcss-container-queries	一个为容器查询提供实用工具 Tailwind CSS v3.2+ 的插件。
🪺tailwindcss-aspect-ratio	一个为元素提供可组合的 API，用于设置固定的纵横比的插件。
🪸nightwindcss	一个自动的、可定制的、可覆盖的 Tailwind 暗模式插件。

九、设计资源

资源地址	说明
☸️Tailwind CSS UI	一个 Tailwind 创建飘动动画的设计资源。
⚛️Tailwind CSS	从你的 Tailwind 配置文件中直接生成样式和其他很酷的内容。
🌈Heroicons	Heroicons 图 Figma 设计资源。

十、图标

图标	说明
☃️heroicons	由 Tailwind CSS 的制作者提供，精美手工制作的 SVG 图标。

十一、小结

Tailwind CSS 使用原子类，可配置化以及 JIT 特点， 灵活丰富，生态已经比较成熟，各种 UI 组件库已经非常多，它轻量级且高效, 且能方便的集成到现代前端框架中，快速开发。本文整理一些优质 Tailwind CSS 项目、插件、UI 组件库等等，如果还没有入门或者使用，它应该可以帮助到你。最后希望这篇文章可以可以帮助更多的读者。