Tailwind CSS is a utility-first CSS framework that allows you to rapidly build modern websites without ever leaving your HTML. It is one of the most popular and widely used CSS frameworks in the web development community, with over 2.5 million downloads per month1. In this article, we will explore the roadmap for Tailwind CSS 2023, and how you can get started with learning and using this amazing tool.
What is Tailwind CSS?
Tailwind CSS is not a typical CSS framework that provides you with ready-made components like buttons, cards, or navbars. Instead, it gives you a set of low-level utility classes that you can combine and customize to create any design you want, directly in your HTML.
This is NOT Tailwind
<button class="btn btn-primary">Submit</button>
This is TailwindCSS
<button class="bg-cyan-500 hover:bg-cyan-700 text-white font-bold py-2 px-4 rounded">Submit</button>
Each class in Tailwind CSS corresponds to a single CSS property and value, such as bg-blue-500 for background-color: #4299e1; or py-2 for padding-top: 0.5rem; padding-bottom: 0.5rem; By using these classes, you can style any element with fine-grained control, without having to write any custom CSS.
Why use Tailwind CSS?
1. Fast and easy to use
You don’t have to spend time setting up complex build tools, writing long and repetitive CSS files, or maintaining a separate style guide. You can just start coding right away, and see the results instantly in your browser.
2. Flexible and customizable
You can create any design you can imagine, without being limited by the predefined components or styles of other frameworks. You can also tweak every aspect of Tailwind CSS to suit your needs and preferences.
3. Consistent and scalable
You can ensure that your website looks and behaves the same across different browsers, devices, and screen sizes, by using the responsive and stateful modifiers provided by Tailwind CSS. You can also avoid code duplication and keep your projects maintainable by creating reusable abstractions with Tailwind CSS.
4. Fun and creative
You can experiment with different combinations of utility classes, and discover new ways of styling your elements. You can also learn more about CSS properties and values, and how they affect the layout and appearance of your website.
Start with these resources
The official documentation
The official documentation of Tailwind CSS is the most authoritative source of information about the framework. It covers every aspect of Tailwind CSS in detail, with clear explanations, examples, and references. It also has a search function, a cheat sheet, and a FAQ section.Tailwind Labs YouTube Channel
The official YouTube channel of Tailwind CSS is a great way to learn about the framework visually. It features videos on how to use Tailwind CSS for various projects, such as landing pages, dashboards, forms, and more. It also has tutorials on how to use Tailwind UI, Tailwind JIT, and Tailwind Play.Practice on Tailwind Play
It is the official online playground for Tailwind CSS, you can experiment and tryout your design straight away. There is no need to install anything, just start coding.
Making Clones of your favorite website is important!
Making clones of your favorite websites is a great way to learn Tailwind CSS, because it helps you to:
Practice using the utility classes By recreating the design and layout of existing websites, you can learn how to apply the utility classes provided by Tailwind CSS to style any element. You can also experiment with different combinations of classes, and see how they affect the appearance and behavior of your components.
Improve your HTML and CSS skills By making clones of your favorite websites, you can also improve your HTML and CSS skills, and following best practices for web development.
Build your portfolio and showcase your work By making clones of your favorite websites, you can also build your portfolio and showcase your work to potential employers or clients. You can demonstrate your proficiency in using Tailwind CSS, as well as your creativity and attention to detail.
If you are looking for some examples of website clones made with Tailwind CSS, you can check out this GitHub repository, where you can find clones of websites like Twitter, WhatsApp, Tesla, and more.
Conclusion
Tailwind CSS is a utility-first CSS framework that enables you to rapidly build modern websites without ever leaving your HTML. It is fast, flexible, consistent, scalable, fun, and creative. In 2023, Tailwind CSS will be updated with new features and improvements that will make it even better.
If you liked this article do checkout my article on must have TailwindCSS plugins for faster workflow here. Share this article with your fellow devs and learners.
Top comments (4)
You should learn both. After a while, you will see the differences between the two.
Bootstrap is like painting with colors. There's a rigidness and structure. You also start seeing all sorts of "bootstrap" everywhere. And learning this will be helpful when...
You learn tailwind. It's more atomic blocks. You're no longer confined to the limits of bootstrap.
Or even go the reverse way. Learn all the pieces of tailwind and then move into the more structured world of bootstrap.
At the end of the day, it's all CSS. And chances are, you'll have to touch a bunch of CSS frameworks through your journey.
Bootstrap offers prebuilt UI components and themes, which makes it a great choice if designing isn't your strong skill or if you're looking for a quick website launch. But it limits your creativity as it has prebuilt component and it comes with large files size which will affect your performance if the website is at scale.
Tailwind requires a deeper understanding of CSS and the library lacks pre-built components but allows you to customize your own components and UI.
Regarding your Udemy question, the popular courses might be created when Tailwind was not a big thing, and the courses wants you to teach more on data flow and other tech and want to focus less on designing.
I would suggest that if you have good understanding of CSS then you should try Tailwind and I believe you will like it more, also you can try out component libraries which are built on top of Tailwind so its similar to bootstrap but with inclusion of Tailwind like Daisy UI and shadcnUI
If you want to learn more I will strongly recommend this video to figure out what UI technique works best for you : https://www.youtube.com/watch?v=CQuTF-bkOgc&ab_channel=Theo-t3%E2%80%A4gg
Do you think Panda CSS is the next step in the CSS frameworks story. It offers almost everything that tailwind can do, it comes out of the box with tools that most tailwind users download anyway (named differently in Panda but things like clsx, twMerge, cva), it uses object orientated utility declaration which is more readable than the long tailwind strings (subjective thing of course but its import to note that vanilla CSS uses this orientation anyways) and lastly it has a more capable config system that makes things like setting difference themes and making many conditional based styling very very easy.
Thank you! Excellent resources and a commonsense path to learning.