V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
Yuxiaoy
V2EX  ›  分享创造

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

  •  
  •   Yuxiaoy · 2022-01-22 17:38:22 +08:00 · 5088 次点击
    这是一个创建于 796 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

    25 条回复    2022-03-13 15:11:44 +08:00
    initd
        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
    MemoryCorner
        2
    MemoryCorner  
       2022-01-22 21:44:53 +08:00   ❤️ 1
    @initd 图不错
    cuvii
        3
    cuvii  
       2022-01-22 21:48:10 +08:00
    @initd 坚持下去,主要是多来点图
    loading
        4
    loading  
       2022-01-22 22:43:51 +08:00
    我没实际用过 tailwind ,但我看到过一句话说,这个要记 class name ,而 css 也要记,如果都已掌握了 css 就没必要学这个了。不知道 lz 对这观念有什么意见?

    例如 class="font-12“和 style="font:12px"
    Yuxiaoy
        5
    Yuxiaoy  
    OP
       2022-01-22 23:13:19 +08:00
    @loading 掌握原生 CSS 跟是否需要学习 CSS 框架并没有直接的关系。多数场景下使用框架可以提高开发效率。
    至于 class name ,我目前写了几个站,感觉记起来挺快的。如果之前有过写 bootstrap 的经验,学起来会更容易。
    initd
        6
    initd  
       2022-01-22 23:27:51 +08:00
    用 Material Design 的 UI 库, 尤其消磨热情。Google 一套 Web 产品也是 MD ,开源出来的也是 MD ,但是一看那个组件实例,立马用都不想用。紫白配色,蓝白配色。所以自己真想锤一个 UI 库出来。不要太多的 JS 逻辑。 只是 html +CSS 的组合。有纯 CSS 的 UI 库,真写起应用还挺费精力的。
    agdhole
        7
    agdhole  
       2022-01-22 23:40:56 +08:00
    @initd #6 https://m3.material.io/ md3 进化不少了,但是 ui 库要适配还早
    cond0r
        8
    cond0r  
       2022-01-23 00:45:00 +08:00   ❤️ 2
    @initd #1 24 寸的 imac 果然不小
    kunkunzhang
        9
    kunkunzhang  
       2022-01-23 06:10:54 +08:00 via Android
    @loading 写起来很快
    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 这种,我看看手册和代码了解一下就好了,就像会编程后再临时浅用一下其他语言是很容易的。
    gromit1337
        11
    gromit1337  
       2022-01-23 16:47:32 +08:00
    他那个站的标签是贴合内容的,主标题,副标题,段落,图片
    Livid
        12
    Livid  
    MOD
       2022-01-23 16:49:38 +08:00
    谢谢。

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

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

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

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

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

    网站的源代码在这里:

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

    Zola 静态站渲染工具:

    https://www.getzola.org/
    Showfom
        13
    Showfom  
       2022-01-23 16:54:25 +08:00
    @initd #1 你这放公网也太侵权了,建议把 Apple 改成 Banana
    Livid
        14
    Livid  
    MOD
       2022-01-23 16:58:31 +08:00
    这个闪烁问题在其他一些同样是 Chromium 内核的浏览器却不会有,比如 Edge 和 Brave 里就不会。
    dddz97
        15
    dddz97  
       2022-01-23 17:31:33 +08:00 via iPhone
    @initd 我在地铁上打开…吓一跳
    Girlphobia
        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 技能。
    nijux
        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="&#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
        18
    Yuxiaoy  
    OP
       2022-01-23 20:08:29 +08:00
    @Livid 我使用的 react 和 react-router ,虽然有路由功能,但是由前端实现的。原始的网站为后端渲染,所有某些场合会有闪烁现象。
    Livid
        19
    Livid  
    MOD
       2022-01-24 08:00:07 +08:00
    @nijux 谢谢反馈。这里应该是 Zola 的某个 escape 问题。我现在来修复一下。
    seven123
        20
    seven123  
       2022-01-24 13:37:11 +08:00
    @initd #1 好家伙上班时间给我直接社死
    zhea55
        21
    zhea55  
       2022-01-24 15:23:19 +08:00
    @Livid

    linux firefox 也会有这个闪烁问题。


    我猜,应该是链接跳转以后。

    页面先渲染了一个很大的空白 div ,然后再渲染内容。


    只是渲染引擎速度比较快,所以一闪而过。


    本质还是因为渲染了那个空白 div 。
    madantech
        22
    madantech  
       2022-01-27 15:57:11 +08:00
    我也在用 tailwindcss ,也付费了 tailwindui

    这是我最近做的网站: https://www.seemsrare.org

    用上 tailwindcss ,感觉我这后端码农也能简单快速做出页面了
    233373
        23
    233373  
       2022-03-13 12:03:42 +08:00
    @madantech 大佬 tailwindui 买的是多钱的套餐呢?
    madantech
        24
    madantech  
       2022-03-13 14:54:25 +08:00
    @233373
    COMPLETE PACKAGEBUNDLE: 279$
    233373
        25
    233373  
       2022-03-13 15:11:44 +08:00
    @madantech 我准备先熟悉熟悉,然后会用了之后再买,同是后端,感觉调样式什么的太难了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5417 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 38ms · UTC 06:48 · PVG 14:48 · LAX 23:48 · JFK 02:48
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.