使用 Tailwind CSS 进行 Dev.to 克隆

TLDR；
Github repo链接
直播https://devto-tailwind.netlify.app/
GIF

图像

我们将讨论以下主题

• 什么是顺风？（回顾）
• 我建造了什么？
• 时间
• 自定义添加tailwind.js

什么是顺风？（回顾）

Tailwind CSS 是一个高度可定制的底层 CSS 框架，它提供了构建定制设计所需的所有基础模块，无需费力覆盖任何烦人的固有样式。这个定义取自这里。

该文档非常出色，我亲自阅读完了该文档。

我建造了什么？

在成功复制YouTube之后，我决定将Dev 复制到。我觉得已经足够接近了。这只是网站的桌面版本。

进步

• 第一阶段 正如我一直以来所喜欢的那样，我从布局开始。
• 第 2 阶段NavBar
• 第 3 阶段SideBar
• 第四阶段Listings
• 第五阶段我最喜欢的一个，Et Voila!

时间

总共消耗的时间为（使用 wakatime 计算）

自定义添加tailwind.js

这是开发过程中使用的自定义颜色。

dev: {
        gray: "#1a2634",
        body: "#0d1219",
        text: "#f9fafa",
        link: "#dde0e2",
        teal: "#1CB3A6",
        tealPri: "#26d9ca",
        hoverTags: "#868EE7",
        searchBox: "#2E3A48",
      }

奖金gif：p

和平✌🏻，
罗希特·吉拉。