学习 Tailwind CSS，将站长 CodeLauncher 的官网仿了一遍
Yuxiaoy · 2022-01-22 17:38:22 +08:00 · 5415 次点击这是一个创建于 1017 天前的主题，其中的信息可能已经有所发展或是发生改变。
预览地址： https://f7qvd.csb.app/
CodeSandbox 地址： https://codesandbox.io/s/codelauncher-f7qvd
CodeLauncher 官网： https://cl.v2ex.pro/
除因设置网站背景图片采用了内联样式，其他均使用 Tailwind CSS 完成，包含响应式实现。
 |
1
initd 2022-01-22 19:47:48 +08:00  1
我仿的 apple.com
地址 apui.netlify.app 然后断了俩月, 再写没激情写下去了, 自己对很多方面都不懂, 现在也不懂, 比如 组件的分发, 发布, treeshaking 然后看了一堆 web 组件的知识, 怎么做一个跨框架的 UI 库, Web 原生, 不怎么行, Lit 感觉可以, 有不渲染到 shadowroot 的选项 可以方便的样式透传 现在学习 CSS, Tailwind CSS 厉害在它的原子化样式思想 但用这个写 UI 库, 一太繁琐( 有些参数只引入变量, 没有引入效果) 二, 没法加深对 CSS 的理解. 就怕知其然不知其所以然. tw css 的类名掩盖了细节.初学网页布局, 还是要多看 CSS |
 |
2
MemoryCorner 2022-01-22 21:44:53 +08:00 1
@initd 图不错
|
|
3
B3C933r4qRb1HyrL 2022-01-22 21:48:10 +08:00
@initd 坚持下去，主要是多来点图
|
 |
4
loading 2022-01-22 22:43:51 +08:00
我没实际用过 tailwind ，但我看到过一句话说，这个要记 class name ，而 css 也要记，如果都已掌握了 css 就没必要学这个了。不知道 lz 对这观念有什么意见？
例如 class="font-12“和 style="font:12px" |
 |
5
Yuxiaoy OP @loading 掌握原生 CSS 跟是否需要学习 CSS 框架并没有直接的关系。多数场景下使用框架可以提高开发效率。
至于 class name ，我目前写了几个站，感觉记起来挺快的。如果之前有过写 bootstrap 的经验，学起来会更容易。 |
|
6
initd 2022-01-22 23:27:51 +08:00
用 Material Design 的 UI 库， 尤其消磨热情。Google 一套 Web 产品也是 MD ，开源出来的也是 MD ，但是一看那个组件实例，立马用都不想用。紫白配色，蓝白配色。所以自己真想锤一个 UI 库出来。不要太多的 JS 逻辑。 只是 html +CSS 的组合。有纯 CSS 的 UI 库，真写起应用还挺费精力的。
|
 |
7
agdhole 2022-01-22 23:40:56 +08:00
@initd #6 https://m3.material.io/ md3 进化不少了，但是 ui 库要适配还早
|
 |
9
kunkunzhang 2022-01-23 06:10:54 +08:00 via Android
@loading 写起来很快
|
|
10
loading 2022-01-23 06:28:04 +08:00
@Yuxiaoy #5
@kunkunzhang #9 我选择去学习 TW 代码，完善我的 css 技能，我在小型项目中用过 bootstrap 和 bluma ，基本都是要对着手册查询名称，对于一些非传统型的页面并不能放飞自我，只是有一些方便，如果从口写项目，还是直接 css 方便，现在我用 scss 了挺好。 对于快速项目，一是由公司说了算，二是自己选也会选 vue.js+element 那种框架，到时再查手册。对于 tw 这种，我看看手册和代码了解一下就好了，就像会编程后再临时浅用一下其他语言是很容易的。 |
 |
11
gromit1337 2022-01-23 16:47:32 +08:00
他那个站的标签是贴合内容的，主标题，副标题，段落，图片
|
 |
12
Livid MOD 谢谢。
正好借这个机会向大家请教一个问题： 我在实现这个网站的过程中遇到一个问题，就是目前左边侧栏的 4 个链接，在 Windows 的 Chrome 浏览器上，如果快速切换，就会出现整页的闪烁现象。 但是我发现 @Yuxiaoy 用 Tailwind CSS 实现的版本就不会有这个问题。 具体会是什么导致的这个闪烁呢？ CodeLauncher 网站的静态站用的是 Zola 渲染，部署在 Vercel 上。 网站的源代码在这里： https://github.com/v2ex/launcher-website Zola 静态站渲染工具： https://www.getzola.org/ |
|
14
Livid MOD 这个闪烁问题在其他一些同样是 Chromium 内核的浏览器却不会有，比如 Edge 和 Brave 里就不会。
|
 |
16
Girlphobia 2022-01-23 17:39:09 +08:00 2
@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 技能。 |
 |
17
nijux 2022-01-23 19:17:47 +08:00 1
window chrome 查看 https://cl.v2ex.pro/ 网站源码 那些链接地址会这样啊
<a href="/" class="sidebar-item">CodeLauncher</a> <a href="/use-cases/" class="sidebar-item active">Use Cases</a> <a href="/roadmap/" class="sidebar-item">Roadmap</a> <a href="/blog/" class="sidebar-item">Blog</a> |
|
18
Yuxiaoy OP @Livid 我使用的 react 和 react-router ，虽然有路由功能，但是由前端实现的。原始的网站为后端渲染，所有某些场合会有闪烁现象。
|
 |
21
zhea55 2022-01-24 15:23:19 +08:00
@Livid
linux firefox 也会有这个闪烁问题。 我猜，应该是链接跳转以后。 页面先渲染了一个很大的空白 div ，然后再渲染内容。 只是渲染引擎速度比较快，所以一闪而过。 本质还是因为渲染了那个空白 div 。 |
 |
22
madantech 2022-01-27 15:57:11 +08:00
我也在用 tailwindcss ，也付费了 tailwindui
这是我最近做的网站: https://www.seemsrare.org 用上 tailwindcss ，感觉我这后端码农也能简单快速做出页面了 |
Select Language