学习 Tailwind CSS，将站长 CodeLauncher 的官网仿了一遍

[Yuxiaoy]

预览地址： https://f7qvd.csb.app/

CodeSandbox 地址： https://codesandbox.io/s/codelauncher-f7qvd

CodeLauncher 官网： https://cl.v2ex.pro/

除因设置网站背景图片采用了内联样式，其他均使用 Tailwind CSS 完成，包含响应式实现。

[initd]

我仿的 apple.com
地址 apui.netlify.app
然后断了俩月, 再写没激情写下去了,
自己对很多方面都不懂, 现在也不懂,
比如 组件的分发, 发布, treeshaking
然后看了一堆 web 组件的知识,
怎么做一个跨框架的 UI 库,
Web 原生, 不怎么行,
Lit 感觉可以, 有不渲染到 shadowroot 的选项
可以方便的样式透传
现在学习 CSS, Tailwind CSS 厉害在它的原子化样式思想
但用这个写 UI 库, 一太繁琐( 有些参数只引入变量, 没有引入效果)
二, 没法加深对 CSS 的理解. 就怕知其然不知其所以然.
tw css 的类名掩盖了细节.初学网页布局, 还是要多看 CSS

[MemoryCorner]

@initd 图不错

[B3C933r4qRb1HyrL]

@initd 坚持下去，主要是多来点图

[loading]

我没实际用过 tailwind ，但我看到过一句话说，这个要记 class name ，而 css 也要记，如果都已掌握了 css 就没必要学这个了。不知道 lz 对这观念有什么意见？

例如 class="font-12“和 style="font:12px"

[Yuxiaoy]

@loading 掌握原生 CSS 跟是否需要学习 CSS 框架并没有直接的关系。多数场景下使用框架可以提高开发效率。
至于 class name ，我目前写了几个站，感觉记起来挺快的。如果之前有过写 bootstrap 的经验，学起来会更容易。

[initd]

用 Material Design 的 UI 库， 尤其消磨热情。Google 一套 Web 产品也是 MD ，开源出来的也是 MD ，但是一看那个组件实例，立马用都不想用。紫白配色，蓝白配色。所以自己真想锤一个 UI 库出来。不要太多的 JS 逻辑。 只是 html +CSS 的组合。有纯 CSS 的 UI 库，真写起应用还挺费精力的。

[agdhole]

@initd #6 https://m3.material.io/ md3 进化不少了，但是 ui 库要适配还早

[cond0r]

@initd #1 24 寸的 imac 果然不小

[kunkunzhang]

@loading 写起来很快

[loading]

@Yuxiaoy #5
@kunkunzhang #9
我选择去学习 TW 代码，完善我的 css 技能，我在小型项目中用过 bootstrap 和 bluma ，基本都是要对着手册查询名称，对于一些非传统型的页面并不能放飞自我，只是有一些方便，如果从口写项目，还是直接 css 方便，现在我用 scss 了挺好。
对于快速项目，一是由公司说了算，二是自己选也会选 vue.js+element 那种框架，到时再查手册。对于 tw 这种，我看看手册和代码了解一下就好了，就像会编程后再临时浅用一下其他语言是很容易的。

[gromit1337]

他那个站的标签是贴合内容的，主标题，副标题，段落，图片

[Livid]

谢谢。

正好借这个机会向大家请教一个问题：

我在实现这个网站的过程中遇到一个问题，就是目前左边侧栏的 4 个链接，在 Windows 的 Chrome 浏览器上，如果快速切换，就会出现整页的闪烁现象。

但是我发现 @Yuxiaoy 用 Tailwind CSS 实现的版本就不会有这个问题。

具体会是什么导致的这个闪烁呢？

CodeLauncher 网站的静态站用的是 Zola 渲染，部署在 Vercel 上。

网站的源代码在这里：

https://github.com/v2ex/launcher-website

Zola 静态站渲染工具：

https://www.getzola.org/

[Showfom]

@initd #1 你这放公网也太侵权了，建议把 Apple 改成 Banana

[Livid]

这个闪烁问题在其他一些同样是 Chromium 内核的浏览器却不会有，比如 Edge 和 Brave 里就不会。

[dddz97]

@initd 我在地铁上打开…吓一跳

[Girlphobia]

@Livid @Yuxiaoy
试了很多次，我这里并不能稳定复现这个问题，所以刚刚对 https://f7qvd.csb.app/ 与 https://cl.v2ex.pro/ 两个网站对比，在 Chrome devtools 里面跑了一些 profiling ，有一些结果。

先说事实：
- 楼主的网站是个 SPA ，而 CodeLauncher 的网站是个传统的一个链接就是一个 HTML 的加载方式。楼主的 SPA 不需要在一个页面上点击链接时重新加载 HTML 。
- 两个网站在高强度点击链接切换页面的时候，都会有 ~50ms Composite Layer 的 long task ，同时伴有掉帧（ Dropping frames ，我也不知道为什么居然会掉帧）。
- 两个网站使用同一个大号背景图（大小 2600x2000 ）。如果使用 Layers (Paint Profiling) 分析页面绘制，效果相近，都会有一个较长的绘制背景图的时间。

再说推论：
SPA 切换页面时不需要重绘背景图，所以肯定不会闪。CodeLauncher 网站只要第一次访问过，后续图片资源也是从 disk cache 里读，所以（理论上）也不会闪。但是，如果出现了未知的掉帧，刚好在读 disk cache 时，或者整张图片解码之前卡了，那么网页就会是白屏（？）

这个奇怪问题实在是超出了我的 debug 技能。

[nijux]

window chrome 查看 https://cl.v2ex.pro/ 网站源码 那些链接地址会这样啊

<a href="/" class="sidebar-item">CodeLauncher</a>

<a href="&#x2F;use-cases&#x2F;" class="sidebar-item active">Use Cases</a>

<a href="&#x2F;roadmap&#x2F;" class="sidebar-item">Roadmap</a>

<a href="&#x2F;blog&#x2F;" class="sidebar-item">Blog</a>

[Yuxiaoy]

@Livid 我使用的 react 和 react-router ，虽然有路由功能，但是由前端实现的。原始的网站为后端渲染，所有某些场合会有闪烁现象。

[Livid]

@nijux 谢谢反馈。这里应该是 Zola 的某个 escape 问题。我现在来修复一下。

[seven123]

@initd #1 好家伙上班时间给我直接社死