Latest Post: Integrating Large Language Models into Frontends

Resources To Boost Your Productivity With Tailwind in 2024

Learn advanced Tailwind concepts and discover resources to go faster as a web developer.

2 min read
Web design mockups on a dual monitor setup

TailwindCSS, a utility-first CSS framework, is a very trendy way of writing CSS. It’s been around for a while now and at the rate it’s going, it looks like it’s going to be around for a long time. With these resources you can take your Tailwind skills to another level, learn best practices and prototype and style things much faster. We are going to see advanced documentation, component libraries and ready-made code snippets from Tailwind.

If you prefer the video format, you have a video version of this article on my YouTube channel. Just activate the English subtitles and enjoy the video.

Tailwind Tricks

🔗 https://tailwind-tricks.vercel.app/

Tailwind Tricks is a project I started some time ago in which I teach advanced TailwindCSS concepts. I try to keep it updated with the things that are being accepted. Find out how to use container queries, :has, peer, and much much more in this documentation.

Tailwind Components

🔗 https://tailwindcomponents.com/

Tailwind Components is a web page where you will have access to a lot of Tailwind components to copy and paste into your pages. It is true that there are a lot of ugly components from the optical point of view, but there are some real gems as well.

bg.ibelick

🔗 https://bg.ibelick.com/

If you want to have original backgrounds in your pages made with TailwindCSS, at bg.ibelick you will find dozens of patterns to copy and paste. Very useful!

Flowbite

🔗 https://flowbite.com/

Flowbite is a well-known library in the TailwindCSS world. Many times I go to the page to take some of the elements (the classes) and that’s it, but if you want the dynamism, you can install the library. It is compatible with most JavaScript frameworks.

Tailblocks

🔗 https://tailblocks.cc/

A hidden gem that I cannot recommend enough. It has more than 50 Tailwind components, fully responsive and adaptable to the color you want. It is a great resource to have in your bookmarks.

If you are a Tailwind lover, you will love these resources! Check out also this amazing template that I have created with Next.js and TailwindCSS!

Next.js Banner Image
Do you want to prototype your ideas faster?

Check out my latest Nextjs 15 template! Done with framer motion, shadcn, support for several languages, newsletter, etc!

Learn More

FAQ about TailwindCSS and how it can improve our productivity


Share article