Read on Twitter
As promised in my previous thread
Here’s a detailed guide on how (and when) to get started with #TailwindCSS
Thread 
Here’s a detailed guide on how (and when) to get started with #TailwindCSS
Thread
Before you get started, you need to know “Why Tailwind CSS?”
If you missed this previous thread of mine, I recommend reading this first
https://twitter.com/shrutibalasa/status/1345446561271013376?s=20
If you missed this previous thread of mine, I recommend reading this first
https://twitter.com/shrutibalasa/status/1345446561271013376?s=20
Tailwind CSS is a framework, and just like any other framework, it will help only if your foundation is strong. So don't get started with it if your basic CSS concepts are not strong.
You must first build some web pages using pure CSS, to appreciate the power of a framework
You must first build some web pages using pure CSS, to appreciate the power of a framework
If you have a new project on mind (small or big) that you haven't started working on yet, and don't have a very tight deadline for it, this is the best time to learn Tailwind CSS by implementing in your new project.
If you don't have a project on mind, please think of one
If you don't have a project on mind, please think of one
Once you are ready, go to http://tailwindcss.com and just watch the very first demo.
Scroll down and take time to experience the entire page with all the mind-blowing features and how they work. This gives you an idea of the possibilities and an estimate of how much to learn.
Scroll down and take time to experience the entire page with all the mind-blowing features and how they work. This gives you an idea of the possibilities and an estimate of how much to learn.
If you're more comfortable being introduced to it in a video format, you can watch this video on my channel
Tailwind CSS is a utility-first CSS framework. If you have any questions about this kind of approach to writing CSS (utility first approach), this post is a good read
https://blog.usejournal.com/utility-first-css-ridiculously-fast-front-end-development-for-almost-every-design-503130d8fefc
Otherwise, go on
https://blog.usejournal.com/utility-first-css-ridiculously-fast-front-end-development-for-almost-every-design-503130d8fefc
Otherwise, go on
Don't install Tailwind CSS on your system yet!
Go to http://play.tailwindcss.com and literally play with the utility classes.
Remove some classes, see what happens. Try modifying some of them. See if you can add more HTML elements with some of the classes already on that page.
Go to http://play.tailwindcss.com and literally play with the utility classes.
Remove some classes, see what happens. Try modifying some of them. See if you can add more HTML elements with some of the classes already on that page.
Now is the time to go to the official documentation and look at the installation guide.
If you are familiar with PostCSS or any of these frameworks, you can follow the steps and install it.
If not, read on
If you are familiar with PostCSS or any of these frameworks, you can follow the steps and install it.
If not, read on
With the latest version 2.0, it is possible to install Tailwind without any frameworks or PostCSS. Watch this video for a step by step guide to install the latest version without any hassle. This works best for small projects or for trying out Tailwind.
Don't want to go through the steps and manually install? Clone this boilerplate from GitHub and finish the setup with just 3 commands. https://github.com/ThirusOfficial/tailwind-css-starter/
Watch this playlist on @adamwathan's YouTube channel, and code along!
Watch as many videos until you get a hang of it, and then start building your own project. Come back to the videos or refer documentation when you get stuck
Watch as many videos until you get a hang of it, and then start building your own project. Come back to the videos or refer documentation when you get stuck
Don't skip these core concepts in the official website documentation. No need to dive in deep, but it's important to skim through the concepts once.
Need some more examples of building with Tailwind? Watch the existing videos in this playlist starting from creating a simple login form, to creating a portfolio website using Tailwind CSS.
And stay tuned for more examples coming soon. https://youtube.com/playlist?list=PLrC_WsW4VdT4k3LWVFpTGM4ryYlDnrEvz
And stay tuned for more examples coming soon. https://youtube.com/playlist?list=PLrC_WsW4VdT4k3LWVFpTGM4ryYlDnrEvz
