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.🤗)
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.
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.
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.
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.
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.
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.
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.
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.
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. 🙂
Top comments (50)
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 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!
Check out Palettolithic, similar like TailwindInk
I will. Thanks for sharing it, Tom :)
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. 🌟🙂
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. 🌟🙌🏽
It will be a smooth transition.
Check out links like
appseed.us/developer-tools/bootstr...
github.com/awssat/tailwindo
Awesome post.🙂
Check the list of Tailwind CSS components and Tailwind CSS Tutorial that can be useful.👍
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. 🙂🌟
Your Content IS amazing Keep Adding This Type of content
Thank you so much. I will ❤️
Let me check it out. Thanks for sharing it. 🙂
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. 🙂
Thank you Jane! This is very helpful.
I am glad it was helpful. Remember to share with your dev friends, they may find it helpful too :)
Some comments may only be visible to logged-in visitors. Sign in to view all comments.