全新 Tailwind CSS + Framer Motion 模板和 Tailwind Jobs

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!

自 6 月份 Tailwind UI site templates and all-access 发布以来,我们一直在进行大量以维护为重点的工作,例如处理 over 350 GitHub issues and pull requests 并更新我们发布的所有新模板以使用 Next.js 12.2 和新的 next/future/image 组件。

¥Since the Tailwind UI site templates and all-access release back in June we've been doing a lot of maintenance-focused stuff, like processing over 350 GitHub issues and pull requests and updating all of the new templates we released to use Next.js 12.2 and the new next/future/image component.

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

¥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 提供支持,这可以说是迄今为止最酷的库了。

¥We're calling it Pocket, and it's a mobile app landing page loaded with tons of fun animations and interactions, powered by Framer Motion which is basically the coolest library anyone has ever made.

Learn about the Pocket template

请务必查看 the live preview 以获得完整体验 - 屏幕截图会遗漏所有最酷炫的部分,例如页面加载时绘制的图表、功能部分中的移动设备动画 UI,以及受 Frogger 启发的推荐动画。

¥Be sure to check out the live preview for the full experience — screenshots miss all the coolest parts, like the graph that draws in on page load, the animated mobile device UI in the features section, and the Frogger-inspired testimonials animation.

关于这个模板的有趣故事 - 当我们最初设计和构建它时,我们实际上并没有计划在动画或交互方面做任何事情。我们在 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.

查看 this earlier version of the template,也许你就会明白我的意思。

¥Take a look at this earlier version of the template and maybe you'll see what I mean.

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

¥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 all-access 许可证,它将与我们所有其他组件和模板一起免费提供。

¥And like all of our templates, if you've got a Tailwind UI all-access license, it's included alongside all of our other components and templates at no extra cost.


Tailwind 工作(Tailwind Jobs)

¥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 的公司工作的开发者,请访问 check out Tailwind Jobs 了解更多信息。

¥If you're a company that uses Tailwind and are looking for front-end engineers or you're a developer who wants to work at a company that uses Tailwind, check out Tailwind Jobs to learn more about it.

Tailwind Jobs

我们于 7 月 14 日破土动工,并于 8 月 2 日向企业用户发布了该网站。我们使用 LaravelInertiaReact,当然还有 Tailwind CSS 构建了它。仅用 20 天就能用这些工具构建出如此多的功能,真是令人惊叹!

¥We broke ground on the codebase on July 14th, and launched the site to companies on August 2nd. We built it with Laravel, Inertia, React, and of course Tailwind CSS. Pretty amazing what you can build with tools like these in just 20 days!

我们仍在摸索定位,并努力使其成为使用 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...)

¥Work in progress...

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

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

因此,几周后我们将再次更新,其中包含更多内容!随着大型模板/全访问版本的发布,我很高兴能从开发全新产品转向在今年余下的时间专注于改进 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 v4.1 中文网 - 粤ICP备13048890号