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

Posted on by:

tracycss profile

Jane Tracy πŸ‘©πŸ½β€πŸ’»

@tracycss

I am a User Interface Designer learning web development. I don't know what I am doing but I am trying my best to grow as a self taught developer. Welcome to my newbie tech journey.πŸ‘©β€πŸ’»

Discussion

markdown guide
 

I came across this
Www.Tailwindtoolbox.com

 

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

 

Tailwindbox too.

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

Wickedtemplates.com

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.πŸ™‚

 
 

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?

 
 

Thank you so much for sharing these resources with me.

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

 

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 :)

 

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

 

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!

 

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. πŸŒŸπŸ™‚

 

Your Content IS amazing Keep Adding This Type of content

 
 
 
 

Great article! Thanks for sharing

 
 

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.

 

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

 

Nice resources to consider! Thank you for the article!

 

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

 

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!

 

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

 

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

 

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

 

Great collection, thanks for sharing

 

Hope the tools will be useful at some point :)

 

Hey nice consolidation. Thanks

 

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

 

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

 
 

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

 

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. πŸ™‚

 
 

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