src/blog/2022-08-17-tailwind-framer-motion-template-and-tailwind-jobs/index.mdx
import { adamwathan } from "@/app/blog/authors"; import { Figure } from "@/components/figure.tsx"; import { Image } from "@/components/media"; import Link from "next/link";
import tailwindJobs from "./tailwind-jobs.jpg"; import card from "./card.jpg"; import pocketPreview from "./pocket-preview.png";
export const meta = {
title: "New Tailwind CSS + Framer Motion template and Tailwind Jobs",
description: All about the brand new Tailwind UI template we just shipped, the official Tailwind CSS job board, and a bunch of new projects coming out in the next few weeks.,
date: "2022-08-19T12:45:00.000Z",
authors: [adamwathan],
image: card,
excerpt: (
<>
All about the brand new Tailwind UI template we just shipped, the official Tailwind CSS job board, and a bunch of
new projects coming out in the next few weeks.
</>
),
};
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!
Since the <Link href="/blog/2022-06-23-tailwind-templates-and-all-access">Tailwind UI site templates and all-access</Link> release back in June we've been doing a lot of maintenance-focused stuff, like processing <Link href="https://github.com/search?q=is%3Aclosed+org%3Atailwindlabs+archived%3Afalse+sort%3Acreated-desc+is%3Apublic+closed%3A%3E%3D2022-06-23+-author%3Aapp%2Fdependabot+-author%3Aapp%2Fgithub-actions+-author%3Aapp%2Fdepfu&type=Issues">over 350 GitHub issues and pull requests</Link> and updating all of the new templates we released to use <Link href="https://nextjs.org/blog/next-12-2">Next.js 12.2</Link> and the new <Link href="https://nextjs.org/docs/app/api-reference/next-config-js/images">next/future/image</Link> component.
We did find time to ship a few new things in there too though!
About a week ago we shipped a brand new Tailwind UI template, built with Next.js and (of course) Tailwind CSS.
We're calling it <Link href="https://tailwindui.com/templates/pocket">Pocket</Link>, and it's a mobile app landing page loaded with tons of fun animations and interactions, powered by <Link href="https://www.framer.com/motion/">Framer Motion</Link> which is basically the coolest library anyone has ever made.
<Link href="https://tailwindui.com/templates/pocket"> <Image alt="Learn about the Pocket template" src={pocketPreview} /> </Link>Be sure to check out <Link href="https://pocket.tailwindui.com/">the live preview</Link> 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.
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.
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.
Take a look at <Link href="https://tailwindui-template-wip-saas-02-7i25puvq2-tailwindlabs.vercel.app/">this earlier version of the template</Link> 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.
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.
And like all of our templates, if you've got a <Link href="https://tailwindui.com/all-access">Tailwind UI all-access</Link> license, it's included alongside all of our other components and templates at no extra cost.
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.
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, <Link href="https://jobs.tailwindcss.com/">check out Tailwind Jobs</Link> to learn more about it.
<Link href="https://jobs.tailwindcss.com"> <Image alt="Tailwind Jobs" src={tailwindJobs} /> </Link>We broke ground on the codebase on July 14th, and launched the site to companies on August 2nd. We built it with <Link href="https://laravel.com/">Laravel</Link>, <Link href="https://inertiajs.com/">Inertia</Link>, <Link href="https://reactjs.org/">React</Link>, and of course Tailwind CSS. Pretty amazing what you can build with tools like these in just 20 days!
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.
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!
But man a lot of people hate wrestling with CSS, even if they're not writing it every single day.
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.
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.
We've got a bunch of cool stuff in the works that will be coming out in the next few weeks:
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.