Tailwind CSS v3.0 发布

🔗 Tailwind CSS Blog

Tailwind CSS v3.0 发布了数量惊人的新功能，并带来了一个全新的 文档网站。你可通过如下两个视频快速了解一些新功能。

📺 Introducing Tailwind CSS v3.0
📺 What's new in Tailwind CSS v3.0

新功能和改进

• Just-in-Time, all the time — 构建更快，浏览器性能更好。
• Every color out of the box — 包括所有的扩展调色板颜色。
• Colored box shadows — 有趣的发光和反射效果，以及彩色背景上更自然的阴影。
• Scroll snap API — 用于纯 CSS 的滚动抓取，全面可组合。
• Multi-column layout — 多栏布局，你终于可以建立你一直梦想的在线报纸了。
• Native form control styling — 使复选框、单选按钮和文件上传符合你的品牌风格。
• Print modifier — 直接从你的 HTML 中控制你的网站在别人打印时的样子。
• Modern aspect ratio API — 现代化的长宽比 API，不需要 padding hacks 了，除非你需要支持 Safari 14。
• Fancy underline styles — 好看的下划线样式。
• Play CDN — 新的 Just-in-Time engine 被压缩到一个 CDN 脚本中，可以直接在浏览器中运行。
• 还有包括支持触摸动作、文本缩进、滚动的更多内容。

#TailwindCSS

📮 频道 @AppPie

Preline UI — 开源的 Tailwind CSS UI 组件

🔗 Web | GitHub

Preline UI 是一套开源的、基于 Tailwind CSS 框架的预建 UI 组件。

特点

⦁ 250多个组件实例：设计精美、专业制作的组件，遵循所有可访问性的最佳实践，易于定制。
⦁ 支持 React, Vue, 和HTML：与 React、Vue 兼容，如果你愿意自己编写任何必要的 JS，也可以使用 vanilla HTML。
⦁ 完全响应式布局：每个实例都是完全响应式的，经过精心设计和实施，在任何屏幕尺寸下都看起来很好。

开始使用

参考 文档 快速开始。

开源许可证

Preline UI 是在 MIT 许可下发布的。

#TailwindCSS

📮 频道 @AppPie

Tailwind UI Templates — 由 Tailwind CSS 团队打造的精美 Next.js 模板

🔗 Web

使用 React 和 Next.js 构建的令人惊艳、易于定制的网站模板。

特点

⦁ 用现代技术构建：每个模板都是一个结构良好的 Next.js 项目，给你一个高效和愉快的代码库。
⦁ 易于定制：所有的东西都是用实用类 (utility classes) 来设计的，只要在你的编辑器中打开标记，就可以改变你想要的东西。
⦁ 由专家构建：所有的代码都遵循 Tailwind CSS 的最佳实践，因为它是由创建和维护该框架的同一个团队编写的。

模版

Tailwind UI Templates 目前有 5 个模版。

1. Salient — 一个漂亮的 SaaS 着陆页，宣布你的下一个大想法。
2. Transmit — 一个适合任何节目的干净而专业的播客模板
3. Syntax — 使用此文档模板对您的用户进行风格教育。
4. Keynote — 用这个醒目的模板启动你的下一次会议，让人眼前一亮。
5. Primer — 为你的第一个课程或电子书提供一个惊人的着陆页。

价格

单独购买每个模版需要 $99，也可以购买 Tailwind UI 终身服务 获取。

#TailwindCSS #Nextjs

📮 频道 @AppPie

TailwindCSS Snippets — 为 Tailwind CSS 制作的动画片段集合

🔗 Web｜GitHub

一系列 Tailwind CSS 的动画片段，主要是悬浮动画和加载动画。

#TailwindCSS #GitHub

📮 频道 @AppPie

#Resources

UI Colors —— Tailwind CSS 颜色生成器 & 编辑工具

UI Colors 是一个创建、编辑、预览、导出和保存 Tailwind CSS 颜色的工具。

尽管默认的 Tailwind CSS 颜色很棒，但有时需要一个自定义的颜色系列，比如想要使用品牌颜色，UI Colors 旨在让定制 Tailwind CSS 颜色变得简单快捷。

特点

• 创建颜色集合 —— 基于十六进制颜色或选取颜色
• 批量编辑整个颜色集合 —— 例如减少饱和度
• 微调个别颜色以达到完美
• 显示 UI 示例
• 导出代码
• 保存更改

注意部分功能需要 Pro 版本。 来源

#Color #TailwindCSS

📮 频道 @AppPie

#Developers

OpenStatus —— 开源的网站和 API 监控平台

🔗 GitHub | Web

OpenStatus 是一个开源的合成监控平台，具有漂亮的状态页面和事件管理。该项目正在公开构建，供所有人查看其进展。它支持监测 API、DNS、域名、SSL、SMTP、Ping、Web 页面等各种类型的服务，并提供稳定性和可靠性报告。

技术栈

• 使用 Next.js 构建
• 使用 Tailwind CSS 进行样式设计
• 集成 shadcn/ui、tinybird、turso、drizzle 和 clerk 等工具

要开始使用，需要 Node.js >= 20.0.0 和 pnpm >= 8.6.2。

#GitHub #Monitoring #Nextjs #TailwindCSS #OpenSource

📮 频道 @AppPie

#DeveloperTools

Headless UI v2.0 for React 发布

Headless UI v2.0 为 React 开发者带来了许多新特性和改进，旨在简化开发流程并增强用户界面的灵活性和可访问性。

这个版本带来了许多优秀的新功能，包括：

• 内置的锚点定位
• 新的 checkbox 组件
• HTML 表单组件
• 改进的悬停、聚焦和活动状态检测
• 组合框列表虚拟化
• 新网站和改进的文档

来源

#TailwindCSS #HeadlessUI #React

📮 频道 @AppPie

#Developers

Animata：粘贴即用的交互动画和视觉效果库

🔗 GitHub

Animata 是一个免费开源的精选动画库，收集了来自互联网的交互动画和视觉效果，支持无缝复制粘贴到你的项目中。

特点

• 免费开源，手工精选
• 使用 React、Framer Motion 和 Tailwind CSS 构建
• 即用即粘贴
• 可自定义设计

使用方式

无需安装依赖，类似 shadcn/ui，直接复制代码到项目中使用

项目要求

• TailwindCSS（必需）：样式支持
• Framer Motion（可选）：复杂动画
• Lucide Icons/Radix Icons（可选）：图标支持

注意：Animata 不是完整的 UI 库，而是一个可以增强项目设计的动画和效果集合。可以与其他 UI 库或设计系统配合使用（需要配置 TailwindCSS）。

许可证

MIT license。

#GitHub #TailwindCSS #OpenSource #Animation

📮 频道 @AppPie

#Developers

Eldora UI: 基于 React, Tailwind CSS 的开源动画组件

🔗 GitHub

Eldora UI 提供了一系列开源动画组件，使用 React、Typescript、Tailwind CSS 和 Framer Motion 构建。完全开源，且可以根据需要进行定制。

探索组件

访问 eldoraui.site/components 查看文档。

许可证

MIT 许可证。

#React #TailwindCSS #GitHub #OpenSource

📮 频道 @AppPie

tailwindcss-animate —— 为 Tailwind CSS 创建优美动画的插件

🔗 GitHub

安装

通过 npm 安装，并在 tailwind.config.js 文件中添加插件：

npm install -D tailwindcss-animate

使用方法

详见 README 中的文档部分。

许可证

MIT license。

#GitHub #TailwindCSS #OpenSource #Animation

📮 频道 @AppPie