Tailwind CSS
流行的CSS框架,以实用优先(utility-first)的设计理念著称,其默认样式风格在AI生成UI中被广泛复现,形成所谓'Tailwind Default Aesthetic'
核心事实
时间轴 (近 90 天)
Tailwind CSS和Excalidraw等开源工具都曾以Show HN形式首次亮相
NativeWind 将 Tailwind CSS 的原子类写法移植到 React Native,让开发者用 className 语法编写移动端样式
原子化 CSS 或预生成的静态样式表将样式工作前置到构建阶段,浏览器解析和匹配效率更高
Heroicons 由 Tailwind CSS 团队维护,提供 Outline 和 Solid 两套风格
Tailwind的默认调色板和shadcn/ui等流行组件库的默认样式加固了AI生成界面的视觉趋同
该模板基于 Next.js、shadcn/ui、Tailwind CSS 和 TypeScript 技术栈构建
Tailwind CSS 于 2017 年首次发布,引入了基于 design tokens 的设计系统级约束
Tailwind CSS 的 JIT(Just-In-Time)编译引擎于 2021 年在 v2.1 中作为实验性功能引入,随后在 v3.0 中成为默认模式
Tailwind CSS v4.0 于 2024 年底发布,用 Rust 和 Lightning CSS 重写核心引擎,实现高达 10 倍的性能提升,并引入基于 CSS 原生功能的配置方式
目前尚未有官方声明详细说明 Tailwind CSS 的开源策略是否会发生变化
还有 30 条时间轴事件
全部知识事实 (20)
v0是Vercel推出的AI UI生成工具,生成基于shadcn/ui和Tailwind CSS的React组件代码
80%已验证Tailwind CSS是一套原子化CSS框架,通过预定义的功能类直接在HTML中编写样式
80%已验证shadcn/ui 基于 Tailwind CSS 与 Radix UI 构建
70%已验证shadcn/ui是基于Radix UI原语和Tailwind CSS构建的组件库,其核心理念是将组件源码直接复制到项目中而非作为npm依赖安装
70%已验证Tailwind CSS是由Adam Wathan创建的原子化CSS框架,自2017年发布以来成为前端生态的主流选择
65%已验证V0生成的代码基于React和Tailwind CSS
65%待验证OpenSlide使用Tailwind CSS、Shadcn UI、Framer Motion等React生态库
95%待验证Tailwind CSS的颜色系统基于感知均匀性原则构建了50-950数值体系,每种颜色包含11个色阶(50、100、200……900、950)
95%待验证Tailwind provides the @apply directive and component encapsulation to address the code reuse problem
85%待验证Tailwind CSS combines the atomic CSS philosophy with modern tooling such as PostCSS and JIT compilation
85%待验证2017年Adam Wathan推出了Tailwind CSS,采用原子化CSS(Utility-First CSS)方法
85%待验证推荐的前端技术栈组合为React + Next.js、Tailwind CSS、Framer Motion + GSAP、Three.js
85%待验证The most common argument against Tailwind is that it makes HTML bloated and hard to read because elements carry many utility class names
80%待验证Critics argue that Tailwind essentially shoves styles back into HTML, violating the 'Separation of Concerns' principle
80%待验证Tailwind的设计团队在构建调色板时参考了CIELAB等感知均匀色彩空间的研究成果,对每个色阶进行了人工校准
80%待验证Tailwind CSS has become the default choice for many new front-end projects
70%待验证Lovable默认使用React前端框架加Supabase后端服务加Tailwind CSS样式框架这套标准组合
60%待验证Design Token 已成为 Figma、Tailwind CSS 等主流工具的标准实践
60%待验证Tailwind CSS 在 Stack Overflow 2023 年开发者调查中位列最受欢迎 CSS 框架第一
60%待验证Tailwind CSS和Excalidraw等开源工具都曾以Show HN形式首次亮相
50%