全新 Tailwind CSS + Framer Motion 模板和 Tailwind 招聘

Adam Wathan

今天我们又为你带来了一些更新,包括我们已发布的一些很酷的功能,以及一些正在开发但即将发布的其他功能!

🌐 Got another update for you today on some cool things we've shipped, and some other things that are in the works but shipping soon!

自从今年六月 Tailwind UI 网站模板和全访问权限 发布以来,我们一直在做许多维护相关的工作,比如处理 超过 350 个 GitHub 问题和拉取请求,并更新我们发布的所有新模板以使用 Next.js 12.2 和新的 next/future/image 组件。

不过,我们也抽出时间在其中添加了几个新东西!

🌐 We did find time to ship a few new things in there too though!


Tailwind + Framer Motion = Pocket

大约一周前,我们发布了一个全新的 Tailwind UI 模板,该模板使用 Next.js 和(当然)Tailwind CSS 构建。

🌐 About a week ago we shipped a brand new Tailwind UI template, built with Next.js and (of course) Tailwind CSS.

我们称它为 Pocket,这是一个移动应用的登录页面,充满了各种有趣的动画和交互,使用 Framer Motion驱动,这基本上是有史以来最酷的库。

Learn about the Pocket template

一定要查看 实时预览以获得完整体验——截图无法表现所有最酷的部分,例如页面加载时绘制的图表、功能部分中动画化的移动设备界面以及受《青蛙过河》启发的用户评价动画。

关于这个模板有个有趣的故事——当我们最初设计并制作它的时候,实际上并没有计划做任何动画或交互。我们在 Figma 中完成了一个静态设计,大家都非常兴奋,然后按照计划把整个东西搭建好,本来打算三周半前就发布它。

🌐 Funny story about this template — when we initially designed it and built it we actually didn't plan to do anything in terms of animations or interactions. We put together a static design in Figma that we were all really excited about, then built the whole thing out with a plan to ship it like three and a half weeks ago.

但是一旦我们在浏览器里看到了完成的模板,它就感觉有点僵硬。在 Figma 里看起来很棒,因为你习惯了一切都是静态的,但一旦我们在实际中看到它,它更像是一个截图之类的东西,而不是真正的、可互动的网站。

🌐 But once we had the finished template in the browser it just kinda felt stiff. It looked great in Figma where you sort of expect everything to be still and static, but once we could see it in real life it felt more like a screenshot or something instead of a real, interactive website.

看看 模板的早期版本,也许你就明白我的意思了。

我们决定将发布时间推迟几周,同时尝试一些可以使其更具活力的方法。在尝试了各种不同的想法之后,最终形成了今天的样子。

🌐 We decided to delay the release for a couple of weeks while we experimented with some things we could do to breathe some life into it, and after trying a bunch of different ideas ended up with what we have today.

我对这本书的成果非常满意,而且我认为如果你想学习如何使用 Framer Motion 实现我们最终设计的一些酷炫效果,这个代码库是一个非常值得研究的案例。

🌐 I'm super stoked about how this one turned out, and I think the codebase is a really interesting case study to pour over if you want to learn how to use Framer Motion to pull off some of the cool effects we landed on.

就像我们所有的模板一样,如果你拥有 Tailwind UI 全访问 许可,它将与我们所有其他组件和模板一起免费提供,无需额外费用。


Tailwind 工作(Tailwind Jobs)

我们考虑构建一个官方的 Tailwind CSS 招聘平台已经有两年了,最终在最近几周决定尝试一下,看看效果如何。

🌐 We've tossed around the idea of building an official Tailwind CSS job board for about two years, and finally made the decision in the last few weeks to give it a shot and see what happens.

如果你是一家使用 Tailwind 的公司,正在寻找前端工程师,或者你是一名想在使用 Tailwind 的公司工作的开发者, 查看 Tailwind 工作岗位以了解更多信息。

Tailwind Jobs

我们在7月14日开始开发代码库,并在8月2日向公司推出了网站。我们使用 LaravelInertiaReact,当然还有Tailwind CSS来构建它。像这样的工具在短短20天内就能打造出如此惊人的成果,真是令人惊叹!

我们仍在确定定位以及如何让这里成为使用 Tailwind 的公司寻找前端人才的最佳平台,所以如果你在公司有招聘需求并且有任何反馈或想法,给 Peter 发封邮件 — 他负责这个项目,并且正在寻找可以交流的人。

🌐 We're still figuring out the positioning and what we can do to make it the best place for companies using Tailwind to find front-end talent, so if you do any hiring at your company and have any feedback or ideas, shoot Peter an email — he's taking the lead on this project and is looking for people to talk to about it.

举个例子,我们正在尝试弄清楚的一件事是,如何让人明白工作不必严格地“整天用 Tailwind CSS 做样式”才算合适——世界上真正这样的工作其实并不多,我们公司内部甚至也没有这样的职位,而我们公司本身就是 开发 Tailwind CSS 的!

🌐 One thing we're trying to figure out for example is how to make it clear that jobs don't have to be strictly "styling things with Tailwind CSS all day" to be a good fit — there's really not a lot of jobs like that in the world, we don't even have any jobs like that here at the company that actually makes Tailwind CSS itself!

但是,即使不是每天都写 CSS,很多人也讨厌与 CSS 较劲。

🌐 But man a lot of people hate wrestling with CSS, even if they're not writing it every single day.

有大量的开发者会感到非常兴奋,因为每当他们确实需要进行一些样式设计时,他们可以使用 Tailwind 而不是一些自定义的 CSS 杂乱代码来完成。

🌐 There's ton of developers out there who would be ecstatic to know that whenever they do have to do some styling, they'll get do it with Tailwind instead of some custom CSS spaghetti.

我们希望招聘平台能够成为 React 开发者、Vue 开发者、Laravel 开发者、Rails 开发者等等的聚集地 - 只要该开发者能够在需要设计某些内容时使用 Tailwind,那么它就非常适合 Tailwind Jobs。

🌐 We want the job board to be a place to find React developers, Vue developers, Laravel developers, Rails developers, whatever — as long as the person would get to use Tailwind when it's time to style something, it's a good fit for Tailwind Jobs.


工作正在进行中……(Work in progress...)

我们正在开发一系列很酷的东西,将在接下来的几周内推出:

🌐 We've got a bunch of cool stuff in the works that will be coming out in the next few weeks:

  • 我们差不多已经完成了 Heroicons v2.0,还有一个 新网站也将随之推出
  • 一个非常漂亮的 个人网站模板即将出现在 Tailwind UI 上
  • Headless UI v1.7 几乎准备好发布了
  • 我们为 Tailwind UI 设计了一系列新组件,并将于下周开始构建。

所以请在几周后关注另一次更新,会有更多新内容!在大型模板/全访问版本发布之后,我很高兴可以从创建全新产品转向,将今年余下的时间专注于进一步优化 Tailwind CSS 和 Headless UI,并为 Tailwind UI 添加大量超棒的新内容。

🌐 So look for another update in a couple weeks with a bunch more stuff! With the big templates/all-access release behind us I'm excited to switch gears from creating brand new products and spend the rest of the year focused on making Tailwind CSS and Headless UI even better, and adding tons of awesome new stuff to Tailwind UI.

TailwindCSS 中文网 - 粤ICP备13048890号