首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

2020全球CSS报告,目前最流行的布局,最前沿的特性以及前沿的技术库

最重要的是,Tailwind CSS 突然出现,通过它的实用至上的 CSS 的类名使用,迫使我们重新考虑传统的语义类名称的设计。...~ (本文会举例个人觉得最值得讲的进行描述~,当然觉得整个报告都非常的迷人,都非常值得看,但是因为篇幅原因,对某些部分进行了删减,强烈建议去看完整版!!!...,仅仅用一行代码实现现在流行的,自适应垂直居中、三列布局、圣杯布局和双飞翼布局等等布局。...Tailwind CSS 等较新的参与者。...CSS 框架这里真的是神仙打架,又诞生了一些新的工具库,但是 Tailwind CSS 依旧处于不可撼动的地位 (想起了几年前还是 BootStrap 霸榜,不禁感叹自己真的老了老了。)

65410

什么用 JavaScript 来编写 CSS

作为替代,用 JavaScript 编写了所有的 CSS知道你在想什么:“为什么有人会用 JavaScript 编写 CSS 呢?!” 这篇文章就来解答这个问题。...CSS-in-JS 长什么样? 开发者们已经创建了不同风格的 CSS-in-JS。...为什么喜欢 CSS-in-JS? 主要是 CSS-in-JS 增强了的信心。可以在不产生任何意外后果的情况下,添加、更改和删除 CSS对组件样式的更改不会影响其他任何内容。...知道你在想什么:“Max,你也可以通过其他工具或严格的流程或大量的培训来获得这些好处。是什么CSS-in-JS 变得特别?”...CSS-in-JS 将所有这些好处结合到一个好用的包中并强制执行它们。它引导走向成功的关键:正确的事情很容易,做错事很难(甚至不可能)。 谁在使用 CSS-in-JS?

1.3K50

如何使用 Tailwind CSS 设计高级自定义动画

Tailwind CSS,一款流行的实用型CSS框架,提供了一套强大的工具,可以轻松地创建令人惊艳的动画效果。...在这篇文章中,我们将探索使用Tailwind CSS进行高级动画的令人兴奋的世界,并揭示一些令人惊叹的技巧,将使您的项目达到一个新的水平。...Transition 与 Transform Tailwind CSS 提供了一系列利用 CSS 过渡和变换的实用类。这些属性使您能够轻松创建平滑的动画和令人惊叹的变换效果,而无需花费太多的精力。...将动画与其他 Tailwind 功能(暗模式)结合使用 Tailwind CSS的动画功能可以与框架提供的其他功能无缝集成。...结束 上述设计的动画展示了使用CSSTailwind CSS框架可以实现的多样性和创造力。这些示例展示了各种动画效果,如旋转、弹跳、脉动、翻转和摆动。

86820

Astro v2升级v3版本踩坑记录

真是服了这个 Astro 老六了,跨版本升级居然有那么多破坏性更改,老版本建的项目直接不能用了。 可以正常启动,打开页面报错: ReferenceError An error occurred....React is not defined 除了要更新 Astro 版本之外,还要更新 React 和 Tailwind 集成: Yarn: # 升级到 Astro v3.x yarn add astro...@latest # 示例:升级 React 和 Tailwind 集成 yarn add @astrojs/react@latest @astrojs/tailwind@latest 更新中。。。...未经允许不得转载:Web前端开发资源网 » Astro v2升级v3版本踩坑记录 推荐阅读: 写一写今天用阿里云安装wdCP搭建网站踩的坑 利用CSS设置图片黑白/灰色效果,同时适用于整站变灰 Photoshop...保存ICO格式插件 ICOFormat.8bi 设置 letter-spacing 后文字不能居中的解决方法 给元素添加伪类 :before 不显示的解决方法

12510

当我 hackathon 时在做什么 (2)

书接上文:当我 hackathon 时在做什么(1)。 前文中提到,的第二个项目是个可视化的项目,名字叫 deneb。deneb 是天鹅座的一等星,也是夏季大三角和北十字两个星群的端点之一。...嗯,deneb - vega - altair,聪明的你一定想到了什么起这样一个名字: ? 为什么是 vega-lite? 在数据可视化这块,自己走了不少弯路。...如果你需要能够对可视化的图表简单的动画,plotly 也能胜任。 一度以为 plotly 是的真命天子,直到有一天敲开了 altair [4] 这个潘多拉魔盒。...第五次撞墙:IElixir 和 jupyter notebook 完成 ex_polars 就像打完自己的淮海战役一样, deneb 的过程是摧枯拉朽,几乎不费太大的力气。...最后,成功解决了问题,并给 IElixir 的作者提交了一个 PR(还有什么比一个对已有开源项目的 PR 更能彰显 OSS-a-thon 的意义的?): ?

2K10

快速掌握 Tailwind:最流行的原子化 CSS 框架

Tailwind 是流行的原子化 css 框架。 有多流行呢? 它现在有 68k star 了,要知道 express 才 60k: 那什么是原子化 css?...这个原子化 css 的概念还是很好理解的,但它到底有啥好处呢? 它解决了什么问题? 口说无凭,我们试下 tailwind 就知道了,它就是一个提供了很多原子 class 的 css 框架。...但是还要每次去查文档哪些 class 对应什么样式呀 这个可以用 tailwind css 提供的 vscode 插件来解决: 安装这个 Tailwind CSS IntelliSense 之后的体验是这样的...所以就给这个 css 框架起名叫 tailwind 了。 确实,也觉得用这种方式来写 css 更加省力、高效,不用写 class 名字了,代码更简洁了,还不容易样式冲突了。...tailwind 本质上就是一个 postcss 插件,通过 AST 来分析 css 代码,对 css 增删改,并且可以通过 extractor 提取 js、html 中的 class,之后基于这些来生成最终的

54230

当我 hackathon 时在做什么 (3)

的方法论 清晰可见的目标 喜欢在做一件事情前把目标能够表达清楚,然后脑海里有一个当我成功达到后这东西该长什么样的草图。...这个插件唯一的缺憾是无法使用自己定义的 custom.css,但不影响对 slides 做一个大致的预览。 ?...喜欢写一个简单的 Makefile 将其自动化,这样按需 make 即可: MARP=marp --theme $(ASSET_DIR)/custom.css TOP_DIR=slides SRC_DIR...比如我的这个: ? 工具本身并没有限制。...其实像 excalidraw 这样的好工具反而能解放的大脑,因为不再需要焦虑用什么样的图形才能更好地表达(使用 visio 或者类似工具时总有类似焦虑),也不再需要焦虑该为图形配什么样的颜色,因为

64720

什么要为开源社区贡献|你也应该这样

非常擅长电脑编程,童年的逃避最终成为了职业生涯的基石。在某种程度上,编程给了我一种掌控感,就像是的生活中所缺少的。 灵感来自一位火箭科学家 九岁的时候,的世界彻底改变了。...记得问,“你在玩什么游戏?” “还没给它起过什么名字呢,”他回答。不明白他的意思。 他为什么要叫它什么呢?然后他解释说,这是他自己用BASIC语言写的。 的大脑爆炸。...喜欢软件工程师的工作,但我的劳动成果是公司的。不像我朋友的父亲那样,把置于他的庇护之下。 不高兴,但与此同时,的岳父一直告诉,如果百分之百地喜欢的工作,就会付钱在那里工作。...他告诉,除了经济上的回报,工作不需要提供任何东西,的经历也证实了他的观点。 的雇主在推销产品,让股东和董事会成员满意。这就是世界的方式。为更大的善贡献是你在业余时间或退休后的事。...问问你能做什么绕了一圈。这个从火箭科学家那里学会了编程的男孩现在是一名高级软件工程师,他正在帮助年轻人学习编程的诀窍,以便他们能够挑战计算机科学的边界。

71620

Tailwind CSS 是目前世上最好的CSS框架,你赞同吗?

开篇 听说过Tailwind很长一段时间了,虽然它引起了的注意,但我一直没有机会使用它。 现在正在进行一个新项目,刚刚从JS和CCS转换到了Tailwind CSS。...使用Tailwind一段时间后,觉得是时候写一篇文章来分享目前所发现的东西了。那么,让我们开始吧。 如何理解Tailwind CSS Tailwind CSS不是典型的CSS框架。...凭借如此高度的灵活性,Tailwind CSS非常有用,可以与项目独特的视觉语言融合在一起,实现统一且一致的设计系统。 为什么选择Tailwind CSS?...1、提升开发速度和效率 通过使用其广泛的实用类集合,您可以快速开发和构建用户界面,避免从头开始创建自定义CSS的需要。通过这样,您可以专注于应用程序的基本功能和独特特性,同时节省时间。...认为Tailwind是一个非常有趣的选择,可以添加到任何项目中,特别是目前正在工作的这个项目,这是一个庞大的项目,有很多开发人员在上面工作,每个品牌都有不同的主题,认为从JS和CSS迁移到Tailwind

61330

什么我们不擅长 CSS

但对其他人来说,CSS 更像是把手伸进《沙丘》中的痛苦之箱,而某个产品经理却拿着匕首抵着他们的脖子,让他们不敢把手抽出来。 有几个原因可以解释为什么科技公司在 CSS 方面一直举步维艰。...由于缺乏对 CSS 的深入了解,又无法聘请到具备这方面知识的人才,人们不得不通过依赖 Bootstrap/Tailwind 或尝试使用 JavaScript 来完成所有工作,来避免编写 CSS。...那么,答案是什么呢? 我们希望我们的风格足够通用,可以在不同的语境中重复使用,但又不会太通用,以至于我们不得不在这些语境中不断重复自己的风格。...这就是为什么使用单独的标记层来定义上下文。 color-surface-brand-light 可能指向 slate-100 。...} } 文本容器 包含我们的引用块(blockquote)和图像标题(figcaption)的容器应用了一些内边距(padding),同时元素之间也有一些外边距(margin),并且在小屏幕上文本是居中

15110

记一次失败的 AI 辅助编程全历程

前言 最近公司的一个新项目上马,被安排来项目初始化,前端初始化的时候使用了 Vue3 + Tailwind CSS + NaiveUI,在搞基础布局的主题变化时出现了本次插曲。...但是不希望这样写,因为 dark 模式下 UI 按钮组件默认的底色就是所需的,所以我没理由再去强调 dark 模式下的底色是什么只需要使用类似 light:!...在直接提问这个思路下又尝试问过如下几个问题: Tailwind CSS 中与 dark:bg-whtie 对立的表达是什么 Tailwind CSS 怎样才能使得 bg-white 仅对 light...variants 这项配置,于是: ryomahan  [7:09 PM] variants 是什么 ClaudeAPP  [7:09 PM] variants 是 Tailwind CSS 一个很强大的功能...(因为发现它的上个回答并没有生效所以我希望它能够自动修改,结果新生成的内容依旧是没用的) Tailwind CSS variants 的作用是什么(这里觉得还需要再理解一下实现原理) dark class

58550

tailwindcss书写前端样式

公司开发了自己的组件库,组件的样式基于tailwindcss进行开发,所以近期项目重构时,技术组长要求使用tailwindcss,说实话一开始是排斥的,心想着tailwindcss最后不也是解析成css...现将tailwindcss的总结整理如下: Tailwind CSS什么优点? 为什么要使用tailwindcss,人家肯定是有优点。我们才使用的嘛。优点如下: 可定制化程度极高。...但是这个问题在 Tailwind CSS 完全不存在。Tailwind CSS 没有自以为是的封装任何样式给你。 不需要在写 css。 使用 Tailwind CSS,基本可以不用再写 css。...Tailwind CSS 写了几个页面,到目前为止,还没有写过一行 css。 不需要再为 class 取个什么名字而苦恼。...响应式设计 Tailwind CSS 遵循移动优先的设计模式。断点系统很灵活。也是目前所有 css 框架里的最好的。比如你要实现一个媒体查询,根据不同的屏幕宽度实现不同的图片宽度。

26720

Tailwind CSS 辩论:又一款被网络纯粹主义者贬低的酷工具

本周早些时候,Matt Rickard 写了一篇题为“为什么 Tailwind CSS 胜出”的文章,该文章登上了 Hacker News 的首页。...“已经写了将近 20 年的 CSS,它很糟糕,总是难以维护,你的也是一样,”他说。“至少 Tailwind 标准化了糟糕的东西。”...可以证明处理 CSS 文件的困难——最近,正在研究的 Web 2.0 技术博客 ReadWriteWeb 的多个CSS文件,并惊讶于那些文件有多么复杂。...“看到其他工程师,不论级别如何,都陷入了糟糕的 CSS 中,所以对他们来说,也许 Tailwind 看起来像是一种救星,”他在他的文章中写道。“但是 CSS 现在更好了。...也许他们会在完成了使用 Next.js 和 Tailwind 这些酷工具的一天的有偿工作之后这样

12910

【总结】1839- 原子CSS引擎——unocss

什么是unocss unocss是一个即时的原子CSS引擎,它可以让你用简短的类名来控制元素的样式,而不需要写复杂的CSS代码。 当然,原子样式也有很多选择,最著名的就是 Tailwind。...但由于Tailwind 会生成大量样式定义,会导致全量的 CSS 文件往往体积会多至数 MB,从而有性能上有一些不足 ❝扩展:什么是原子化 原子化CSS是一种CSS架构方式,其支持小型、单一用途的类,其名称基于视觉功能...更加通俗的来讲,原子化CSS是一种新的CSS编程思路,它倾向于创建小巧且单一用途的class,并且以视觉效果进行命名。...它可以让你的CSS更一致,因为它遵循一套预设的规则和变量。 它可以让你的CSS更灵活,因为它支持自定义工具类,变体,指令和图标。 它可以让你的CSS更易于维护,因为它避免了样式冲突和重复代码。...❝unocss支持用预设单位(预设单位是rem),也可以自定义单位 ❞ 自定义规则 在vscode中我们都会有用到快捷键一键生成代码,unocss也不例外,假如你有个盒子,里面的内容需要垂直居中,那么就可以定义为

42110

Tailwind CSS (可能)是名过其实的

毫无疑问,这个流行的实用优先 CSS 框架具备诸多优点。很可能你对它的惊艳和强大早有耳闻,因为很多开发者正是这么想的。 但关于这个框架,我们还有很多要说的。 什么Tailwind CSS?...我们会很快想到这和内联 CSS 是非常相似的,这或许也能解释为什么 Tailwind 的开发者会在文档的开头部分就提及这个问题。...你不能把 CSS 的所有功能”塞到“ class 这一个 HTML 标签属性里,Tailwind 也不能。这样只会让 HTML 结构越发臃肿。...border-red-400 border-2; } 但比起传统编写 CSS(或者 SASS 等其它预处理器)的方式,看不出这样什么优点。...花费时间和精力学习 Tailwind 的语法和类名,你会逐渐忘记其背后的语法:也即原生 CSS 的语法。如果的开发者在一个更大的项目中使用 Tailwind 长达一年,他们将会逐渐忘记原生 CSS

2K20

什么反对用异常流程控制?

这种似乎失控的编码方式,让想到了邪恶的“GoTo”语法,很多编程语言里都有它, 但是都不建议你用它。因为邪恶的不是GoTo本身,而是滥用GoTo的我们。...题眼基本表达了的论点,随着本文的深入会对该论点加一个约束条件。现在容开始论证它~ 都说抛异常很重,到底重在哪里? 不整虚的,我们用测试数据来说话。...当接口应答只是true/false的时候,抛异常会是个很匪夷所思的设计; 当下层方法不断的抛出各种异常,然后汇总到拦截器里处理时,或者需要对异常拆开判断,再自定义成合理的应答话术;或者将好不容易区分开的不同异常...的态度 任何的系统架构设计,都是在不断的在做天人交战,利弊权衡。鲜有绝对的对与错,只有在当前组织环境内相对的合理与不合理。对于异常用作流程控制这件事,是投反对票。

3.8K21
领券