Tailwind Weekly #87: templates are here baby ๐Ÿ˜Ž!

Hello folks!

The templates update for Tailwind UI is here and it's awesome ๐Ÿคฉ. I particularly love the podcast website design, I think it would also look good as a blog.

Read the news section for more details on the rest!

Now onto our usual content ๐Ÿ˜‰.

โญ We're thinking of adding job postings in future issues so if you're looking for talented Tailwind CSS developers, here's the info.

๐ŸŒŸ News

This week the Tailwind Labs team released a special update for Tailwind UI, 5 new template designs made with Next.js and coded like a production website, here's the list:

  • Syntax โ€” a documentation site template powered by Stripeโ€™s new Markdoc library thatโ€™s perfect for things like open-source projects or product documentation.
  • Primer โ€” a landing page template for ebooks and courses that bakes in a lot of the best practices weโ€™ve learned releasing our own info products.
  • Salient โ€” a stunning but simple SaaS marketing website you can quickly adapt for your next idea without burning time you wish you were spending on the actual product.
  • Keynote โ€” a beautiful conference website design that works just as well for small local gatherings as it does for international events.
  • Transmit โ€” an awesome podcasting template with a custom persistent audio player that you can wire up to your own RSS feed in no time.

They cost $99 each but you can get all of them plus all the other Tailwind UI stuff for a single all-access forever price of $299.

Quoting Adam:

"Itโ€™s a one-time purchase of $299. No subscription, no upgrade costs โ€” if we add something new to Tailwind UI, itโ€™s yours, forever"

๐Ÿคฉ Sponsors

The sponsor of this issue is the DevTools for Tailwind CSS browser extension. The DevTools for Tailwind bring back designing and debugging in your browser. Intellisense autocompletion, full JIT engine support in minified production sites, and more. Get a 20% discount if you use the code TAILWIND-WEEKLY during the checkout.

We convert your design to Tailwind CSS. Focus on your business logic. Leave the markup code in our capable hands. Just fill out our 3-minute questionnaire and get a quote in 24 hours.

๐Ÿ“š Learning

Master the :nth-child() Pseudo-Class

Another awesome video from CSS Weekly! With this one, you'll learn all about :nth-child selectors, how they work, what kind of math works with them, and even how to use negative numbers! ย All packed in a less than 15 minutes video!

How to send e-mails in Laravel with Tailwind CSS

This article really caught my eye because it's such a unique use case. The most interesting thing is that the author doesn't use Maizzle and decided to use his own approach. Long story short he created a separate tailwind config file just for his emails and he's inlining the generated CSS on the email template. Pretty standard stuff but with Tailwind!

๐Ÿ’… Showcase


Who said a recruitment agency's website has to be boring! This week's showcase has very good-looking real-people shots, elegant typography, and vibrant colors. I love the hero image hover animation, and the whole shapes and lines combination, kudos to the designer!

๐ŸŽ Resource

Tailwind DX

This was on my radar a couple of days ago. Tailwind DX is a Chrome Devtools extension for Tailwind CSS developers. I see it as standard devtools but on steroids, you can change values based on tailwind's config and toggle individual classes too. The video explains it a lot better. Overall, a very good tool to have on your arsenal. ย 

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

Polypane is a great tool for testing your projectโ€™s responsive design and accessibility. The best thing about it is that it helps me catch visual bugs in seconds rather than hours. Definitely worth the money for the time I have saved.

I highly recommend LambdaTest as your cross-browser testing tool, with it you can test on IE11, Safari, and most mobile browsers, it also has a very easy-to-use interface, itโ€™s very fast, and they have a lot of automated testing features too. You can use the coupon code TAILWIND15 for 15% off the annual plan.

There's a reason over 2.6 million people start their day with Morning Brew โ€” the daily email that delivers the latest news from Wall Street to Silicon Valley. Business news doesn't have to be dry and dense...make your mornings more enjoyable, for free.

If you want the latest crypto news but you don't want it to be dry and confusing, join the 60,000 people who read the CoinSnacks weekly newsletter for free every week. Itโ€™s what you need to knowโ€ฆ without the fluff.

โœŒ๏ธ Partners

This Week In React: the best of React & React-Native news. Sebastien filters the noise, and you save time!

TypeScript Weekly: the best TypeScript links every week, right in your inbox.

ES.next News: learn about the latest in JavaScript and cross-platform tools

Want to share something with the TailwindCSS community? You can submit a link or message me on Twitter @vivgui.

Want to support the newsletter? You can buy me a coffee with the link below ๐Ÿ˜.

Stay up to date with the Tailwind CSS ecosystem


Join other subscribers today.