loading...
Cover image for Tailwind CSS Resources you wish you had.

Tailwind CSS Resources you wish you had.

tracycss profile image Jane Tracy πŸ‘©πŸ½β€πŸ’» ・Updated on ・6 min read

Background story

This week I decided to take a look at Tailwind CSS and create a simple e-commerce website. The first thing I noticed is how well the documentation was written. Even if Tailwind is your first CSS framework, you will easily be able to navigate through different sectionsπŸ˜‰. Some areas like Navigation, they have uploaded a few video tutorials to help you create a nav with ease. All sections have code snippets with interactive widgets that show you how the UI component will look like in different screen sizes. Also, there is a customizing section that shows you how to apply custom styles, eg how to add specific rems, colors, font-size, insets, etc. The documentation made it easy for me to be able to code it faster. The best thing is, the framework doesn't limit you. People can't tell if you built your website from scratch or using the tailwind framework. Every site will still have their unique attributes depending on the designs and utility classes implemented.
Top to it off, Tailwind uses a mobile-first breakpoint system and only uses min-width instead of max-width. The classes you add for smaller breakpoints will be used in larger breakpoints. This took a minute to get used to it because I have always used max-width but I really love it now.
The most useful method that made my Html file clean and organized is using the @apply method. Instead of making the utility classes be all over the HTML file, I used them on the style.css file. It's like using mixin in SASS.

PS: Before you start with Tailwind CSS please make sure you understand Html and CSS first. This way, you won't get confused with utility classes and how to apply them. If you are more of a visual person and don't like learning through documentation as much, I would recommend the Net Ninja Tailwind CSS crash course. Shaun will take you through how to build a simple website from scratch with Tailwind. (I am a huge fan of his youtube channel, I can't believe his content is free.πŸ€—)
happy gif

Tailwind Css Resources

Let me list a few resources that I found helpful as I was learning. I hope you will add them to your list or keep using them if you have already.

1) TailwindInk

This is a color generator website that gives you complimentary colors when you choose your brand color. You can easily copy the color codes to your tailwind config js file.

TailwindInk

2) Tailblocks

This amazing project was created by Mert Cukuren, it has over 60+ UI blocks build with Tailwind are ready to use. Just click on the view code button and copy the code to your file. On top of this, the components are fully responsive and you can view how the blocks will look like on different screen devices. You can choose the color scheme you are using on your website. For example, In the image below you, will see I picked the blue color. The cherry on top is, You can switch on the dark mode and see how your block will look like.

Tailblocks website

3) Tailwind Starter Kit

This website has great components to help you start your site quickly. All you need to do is change it a little with the color and add/remove a few components of your choice. The documentation is easy to follow, it's unlikely you will be lost. The kit has a landing page, a dashboard, a profile page, and more.

Tailwind starter kit

4) Stitches

This is a template generator for Tailwind components. All you need to do is drag and drop the different UI blocks you want to use on your website and the site will generate the code for you. It's easy to use and straight forward. At times, you don't need to write all the code from scratch.

Stitches

5 Tailwind Typography Playgroung

This is an amazing website that you can check how your typography will look like before you actually code it. You can select the font family of your titles and text body to see if they match to your liking. If you are not too sure you can easily select a different font family. All the fonts used are available for free on the Google Font website.

Tailwind typography website

6) Tailwind Components

This is a free repository for community components using Tailwind CSS. There are various components like 404 pages, Notification dropdown, eCommerce product list page, and so many other components. You can also view how the components will look like on different screen sizes or breakpoints. You can also submit your own code components for others to use and share.

7) Tailwind weekly

This amazing site was great by Vivian Guillen, where he publishes newsletters about Tailwind CSS weekly. You don't have to worry about your email being spammed(I also hate that when it happens), the articles are released ones a week.

Tailwind weekly website

8 Tailwind run

This is like a live code editor for creating Tailwind UI blocks on the go. It's like using the Codepen but has Tailwind added for you already. You have the HTML file, where you can add your elements and utility classes and the config file to add any custom styles you want. If you want to practice Tailwind without opening your locally installed editor, this website is good for you.

Tailwind Run

9) Tailwind Gradient Generator

If you love gradients like me, you will find this website very useful. You can select different colors that you want to use (up to 3 colors) and choose the direction you want the gradient to go to and from. After that, the code is generated for you and you can copy it to your code in your editor. The hard work is done for you and makes the process easier.

Tailwind gradient  website

10 Awesome Tailwind CSS

This is a great Github repo that I recommend you have always in your back pocket as you learn or build projects with Tailwind. There have amazing resources that are 90+ to help you not to struggle that much as you build different sites. I a sure you, your productivity level will be double if you use the resources written in the repository. If some of the resources I haven't added them here, you will definitely find them there. Some of the resources include:

  • IDE Extensions
  • Plugins
  • Tools to help you start your projects
  • UI Components and Templates to kick start your projects
  • Starters and Themes
  • Tailwind Open-Source Projects to contribute to.
  • Tailwind Learning resources to help you in your journey.

In conclusion

Tailwind is an amazing CSS framework that you should consider to use in your next project. There are so many resources you can use to help kick start your project but I hope the list above helps in any way. Don't forget to share the post with your friends and other code newbies learning CSS frameworks.

Also, there is an amazing community-created called Devs helping Dev made by Ro. You can join the Discord. The channel focuses on mental health for developers and you can get support from peers who are going through the same. With many people being jobless or changing your career to tech, you will find this community caring and helpful in your journey. Hope to see you there. Twitter handle @devshelpingdevs πŸ₯°

If you find this post useful share it with your peers or beginners who learning Tailwind CSS. You can also buy me coffee. πŸ™‚

Buy Me A Coffee

xo xo gif

Discussion

pic
Editor guide
Collapse
michaelandreuzza profile image
michael-andreuzza

I came across this
Www.Tailwindtoolbox.com

Collapse
mateo profile image
Mateo

Good add

Collapse
tracycss profile image
Jane Tracy πŸ‘©πŸ½β€πŸ’» Author

Let me check it out. Thanks for sharing it. πŸ™‚

Collapse
michaelandreuzza profile image
michael-andreuzza

Tailwindbox too.

And if I am allowed I show you mt Tailwind templates, there's also free ones.

Wickedtemplates.com

Thread Thread
tracycss profile image
Jane Tracy πŸ‘©πŸ½β€πŸ’» Author

That's awesome, it's a great website.
Other resources I haven't added are available on the Awesome Tailwind CSS resources listed as number 10.
It's a great GitHub repo with 100+ useful links and tools. Check it out.πŸ™‚

Thread Thread
michaelandreuzza profile image
michael-andreuzza

Will deffinately do!

Collapse
soulsbane profile image
Paul Crane

Great list! I'm in the middle of playing with Tailwind. I saw this tool on reddit but the one you posted Tailwind Ink seems to be a beefed up version. Cool stuff!

Collapse
tombohub profile image
tombohub

Check out Palettolithic, similar like TailwindInk

Collapse
tracycss profile image
Jane Tracy πŸ‘©πŸ½β€πŸ’» Author

I will. Thanks for sharing it, Tom :)

Collapse
tracycss profile image
Jane Tracy πŸ‘©πŸ½β€πŸ’» Author

Thanks for sharing, other color generated tool are in the Awesome tailwind GitHub repository listed as resource number 10. Go check the repo out, has 100+ resources. πŸŒŸπŸ™‚

Collapse
shah78677 profile image
Mir Quadri

Great article. I have a question. I have never used Tailwind before but I am a Pro at Bootstrap. I have a couple websites that are running bootstrap. Suppose I wanted to update the websites to use tailwind, will that cause too many compatibility issues? Or will it be a smooth transition?

Collapse
tracycss profile image
Collapse
shah78677 profile image
Mir Quadri

Thank you so much for sharing these resources with me.

Thread Thread
tracycss profile image
Jane Tracy πŸ‘©πŸ½β€πŸ’» Author

I am glad it was useful. Hope you share it with others too. πŸ™‚πŸŒŸ

Collapse
codingfix1 profile image
codingfix

Nice article, thank you! Me too started to love and use Tailwind and I've found this really useful tool: nerdcave.com/. Jay Elaraj is the authir and he has just updated it to the last version of Tailwind. To me is a must :)

Collapse
tracycss profile image
Jane Tracy πŸ‘©πŸ½β€πŸ’» Author

Amazing. Thank for sharing the tool. πŸŒŸπŸ™ŒπŸ½

Collapse
kevnk profile image
Kevin Kirchner

Here's the tailwind color palette generator I prefer: grayscale.design

It is a luminance-based palette generator as well but allows you more control over each color.

Collapse
tracycss profile image
Jane Tracy πŸ‘©πŸ½β€πŸ’» Author

That's great, thanks for sharing Kelvin. πŸ™‚πŸŒŸ

Collapse
mihir9376 profile image
mihir9376

Your Content IS amazing Keep Adding This Type of content

Collapse
tracycss profile image
Jane Tracy πŸ‘©πŸ½β€πŸ’» Author

Thank you so much. I will ❀️

Collapse
p014ri5 profile image
Prasad Narkhede

This is great! Convinced me to use Tailwind CSS and leave Bootstrap πŸ˜‚

Collapse
tracycss profile image
Jane Tracy πŸ‘©πŸ½β€πŸ’» Author

Hahaha, You should differently try it. You will love the flexibility.

Collapse
thisisgarv profile image
Garv Nanwani

Great collection, thanks for sharing

Collapse
tracycss profile image
Jane Tracy πŸ‘©πŸ½β€πŸ’» Author

Hope the tools will be useful at some point :)

Collapse
ashimb profile image
A5h1m

Hey nice consolidation. Thanks

Collapse
tracycss profile image
Jane Tracy πŸ‘©πŸ½β€πŸ’» Author

Glad to help. Hope you will use the tools as you build your projects in Tailwind :)

Collapse
applicafroguy profile image
Sivuyile Magutywa

Thank you for sharing, I've been using Tailwindcss for over a year and I've never seen some of these tools.

Collapse
tracycss profile image
Jane Tracy πŸ‘©πŸ½β€πŸ’» Author

I hope you will find the tools useful :)

Collapse
juliomoreyra profile image
JulioMoreyra

Great article! Thanks for sharing

Collapse
tracycss profile image
Jane Tracy πŸ‘©πŸ½β€πŸ’» Author

Glad it will help you in any way :)

Collapse
johnnyjamesnavarro profile image
Johnny Navarro

This is really amazing! I have just started using Tailwind about a couple of months ago and I only knew about Tailblocks, thanks a lot!

Collapse
tracycss profile image
Jane Tracy πŸ‘©πŸ½β€πŸ’» Author

That's awesome ✨, hope you share it with others. They might find the tools useful πŸ”¨ πŸ”§.

Collapse
schmanat profile image
Manuel Schneider

Thanks for sharing. Antoher usefull resource is heroicons.dev/
You can copy the icon as SVG Code.

Collapse
tracycss profile image
Jane Tracy πŸ‘©πŸ½β€πŸ’» Author

Yes, It's useful, I have included the Awesome Tailwind CSS GitHub repo that has 100+ tools and resources. You should check it out, number 10 on the resource list. πŸ™‚

Collapse
llagerlof profile image
Lawrence Lagerlof

+1 for tailwind.run Thank you!!

Collapse
tracycss profile image
Jane Tracy πŸ‘©πŸ½β€πŸ’» Author

It's really awesome, I enjoy using it :)

Collapse
efleurine profile image
Emmanuel

Jeez this is one of the most important read for this week.

Collapse
tracycss profile image
Jane Tracy πŸ‘©πŸ½β€πŸ’» Author

Thank you Emmanuel. I appreciate it. Hoped it helped 🌟

Collapse
linhtch90 profile image
Linh Truong Cong Hong

Nice resources to consider! Thank you for the article!

Collapse
tracycss profile image
Jane Tracy πŸ‘©πŸ½β€πŸ’» Author

I am glad the tools will be useful to you at any point. Share it to your fellow devs they might need it. πŸŒŸπŸ’―πŸ™‚

Collapse
diakunwadee profile image
Kunwadee L.

Thank you Jane! This is very helpful.

Collapse
tracycss profile image
Jane Tracy πŸ‘©πŸ½β€πŸ’» Author

I am glad it was helpful. Remember to share with your dev friends, they may find it helpful too :)

Collapse
andrewbaisden profile image
Andrew Baisden

More good resources I much prefer Tailwind over Bootstrap these days.

Collapse
errkav profile image
errkav

great article! thank.

Collapse
tracycss profile image
Jane Tracy πŸ‘©πŸ½β€πŸ’» Author

Glad it will be useful. Share it with others as they learn Tailwind, to have an easier time. πŸ™‚πŸŒŸ