Tailwind CSS 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
Tailwind CSS 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
Tailwind CSS 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 MIT
开发语言 HTML/CSS
操作系统 跨平台
软件类型 开源软件
所属分类 Web应用开发CSS框架
开源组织
地区 不详
投 递 者 王练
适用人群 未知
收录时间 2017-11-29

软件简介

Tailwind 是一个用于快速 UI 开发的实用工具集 CSS 框架,设计理念是以实用为先,它提供了高度可组合的应用程序类,可帮助开发者轻松构建复杂的用户界面。它还提供了一个从实用模式中提取组件的工具,响应式风格可以满足不同设备上的开发。

BootstrapFoundationBulma 等框架不同,Tailwind CSS 并不是 UI 套件,因为它没有没有内置的 UI 组件,也没有默认的主题,完全需要开发者根据自身情况来定制设计。

Tailwind 仅仅是一个 CSS 框架,它还是构建设计系统的引擎。

const colorPalette = {
  // ...
  'grey-lighter': '#f3f7f9',
  // ...
}

module.exports = {
  // ...
  backgroundColors: colorPalette,
  borderColors: {
    default: colorPalette['grey-lighter'],
    ...colorPalette,
  },
  // ...
}

示例:

下面是一个用 Tailwind 构建联系人卡片组件的例子,无需写一行 CSS :


<div class="bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden">
  <div class="sm:flex sm:items-center px-6 py-4">
    <img class="block h-16 sm:h-24 rounded-full mx-auto mb-4 sm:mb-0 sm:mr-4 sm:ml-0" src="https://avatars2.githubusercontent.com/u/4323180?s=400&u=4962a4441fae9fba5f0f86456c6c506a21ffca4f&v=4" alt="">
    <div class="text-center sm:text-left sm:flex-grow">
      <div class="mb-4">
        <p class="text-xl leading-tight">Adam Wathan</p>
        <p class="text-sm leading-tight text-grey-dark">Developer at NothingWorks Inc.</p>
      </div>
      <div>
        <button class="text-xs font-semibold rounded-full px-4 py-1 leading-normal bg-white border border-purple text-purple hover:bg-purple hover:text-white">Message</button>
      </div>
    </div>
  </div>
</div>
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论

点击加入讨论🔥(10)
发表了资讯
2021/12/13 22:15

淘系前端架构周刊:ahooks 3.0 发布、Tailwind CSS v3.0

昭昭前事,惕惕后人。 🗞 News ahooks 3.0 发布 ahooks 作为 React 社区中优质可靠的 Hooks 库,经过近两年多的迭代,在国内外社区都获得了很多同学的认可,时至今日 ahooks 发布 3.0 版本,为我们带来了以下新特性: 全面支持 SSR 全新的 useRequest 所有的输出函数引用是固定的,避免闭包问题 DOM 类 Hooks 支持 target 动态变化 更合理的 API 设计 解决了在严格模式(Strict Mode)下的问题 解决了在 re...

1
4
发表了资讯
2021/12/13 07:50

Tailwind CSS v3.0 正式发布

Tailwind CSS v3.0 已正式发布,新版本在性能和工作流优化方面带来了巨大的提升,同时还增加了大量新特性。 Tailwind CSS v2.0 主要更新内容: 默认启用 Just-in-Time — 闪电般的快速构建时间、可堆叠的变体、支持生成任意样式、更好的浏览器性能 开箱即用的各种颜色 — 包括所有扩展调色板颜色,如青色、玫瑰色、紫红色和青柠色,以及五十度的灰白色 彩色的边框阴影 — 有趣的发光和反射效果,以及为彩色背景添加更自然的阴影...

8
10
发表于大前端专区
2021/06/20 07:31

Tailwind CSS 2.2 发布,快速构建 UI 的 CSS 框架

Tailwind CSS 2.2 正式发布,该版本是有史以来功能最丰富的 Tailwind 版本之一,该版本更新内容如下: 全新改进的Tailwind CLI 我们以性能优先的思维方式从头开始重写了 Tailwind CLI 工具,同时还增加了对一堆新功能的支持: npx tailwindcss -o dist/tailwind.css --watch --jit --purge="./src/**/*.html" 以下是一些亮点: 无需安装或配置——只需 npx tailwindcss -o output.css 就能从任何地方编译 Tailwind。甚至可以使用...

0
2
发表于大前端专区
2021/01/28 07:15

Tailwind CSS v2.0

Tailwind CSS v2.0 已于两个月前发布,其开发团队表示从 1.0 到 2.0 的 18 个月里,他们发布了 9 个小版本,增加了不少新功能,例如占位符样式、屏幕阅读器可见性、CSS 网格、过渡、变换、动画、布局工具、集成 tree-shaking 以及渐变等等。 Tailwind CSS v2.0 主要更新内容: 全新的调色板:提供了 220 种颜色和一个新的工作流来建立属于自己的颜色方案 支持深色模式:当启用黑暗模式时,新版本支持更便捷地动态更改设计 新增 ...

11
15
发表于大前端专区
2019/05/30 07:16

Tailwind CSS v1 发布,没有 UI 组件的 UI 开发框架

Tailwind CSS v1 发布了,这是项目首个主要版本,距离首次发布已经打磨了 2 年时间。Tailwind 是一个用于快速 UI 开发的实用工具集 CSS 框架,设计理念以实用为先,它提供了高度可组合的实用程序类,可帮助开发者轻松构建复杂的用户界面。它还提供了一个从实用模式中提取组件的工具,响应式风格可以满足在不同设备上的开发。 与 Bootstrap、Foundation 和 Bulma 等框架不同,Tailwind CSS 并不是 UI 套件,因为它没有内置的 UI...

6
42
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表了博客
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
发表了问答
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
10 评论
70 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部
返回顶部
顶部