I've been hearing about how cool Tailwind CSS is, for quite sometime now so I decided to use it in a project I wanted to work on.
When I went to the installation page on the official Tailwind website, I realized that the guide could be a little overwhelming for people who are just starting out. With this guide, I aim to make the installation process a little simpler.
Ways to get Tailwind CSS up and running in your project:
1. Tailwind Play - If you want to dive straight into writing code without having to worry about integrating Tailwind on your machine, this is the best option for you. You can start tinkering with your code and see what it does simultaneously. Also, with this option you don't have to dread writing that first line of code(like I do), since it already has a sample code for you to play with.🙂
2. Using Tailwind via CDN - This is a great option for setting up Tailwind locally in no time. You just have to write a single line of code under the <head> section of your .html file and you can start working on your project straight away.
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
This does have a few limitations to it though, and therefore the Tailwind website doesn't recommend using this method. However, this is a good option if you hate long installation processes that make you want to quit coding.
3. Installing Tailwind CSS as a PostCSS plugin - This is the method that you should go for if you want to work on a real-world project and hope to upload the code to your Github repo. Since in this method we install Tailwind CSS using npm, the first step would be to install Node.js on your machine. Next, you need to follow the steps over here to complete setting up Tailwind locally. Don't worry if you don't understand a lot of the terms used in the guide. Just follow the steps and you'll be good to go!
That's it!
Do let me know if this guide helped you or if you have some feedback.
You can follow my journey on Twitter as I try to learn web development by building a project using Tailwind CSS.
Top comments (0)