(If you're just here for the installation document I have created, the link to it is HERE)
So last year while I was learning to build full stack web apps with 100Devs, there came a time when I had to decide how to approach styling my front end. I wasn't quite ready to jump into something like React, and besides, I had several functional apps already that just needed a better face put on.
My options seemed to be using plain CSS or adding something like Bootstrap or Tailwind. When doing some research, Tailwind seemed to be the trendier option, and more flexible. I didn't want already written and styled components because my projects needed more specific styling. So I decided to go with Tailwind.
I did what I normally do when I want to try/learn something new. I searched for beginner tutorials on youtube for Tailwind. I found a really great tutorial by The Net Ninja. The playlist is 19 videos long, but most of the individual videos are very short and split up by topic. I found this to be super helpful later when I needed to go back and rewatch one topic and not have to try to find that part in a larger video. And they are really great at explaining how Tailwind works in general.
So I watched the first few videos to get a feel for how it would work, and then I went back to the beginning to watch and code along. After watching the installation, I thought that it was going to be a piece of cake to install, and I'd be up and running in no time. I was wrong.
The following issues were things that I ran into and have seen repeated many times through my experience helping others with their installs.
Problem #1:
The tutorial showed Tailwind being installed with plain HTML files. Now the installation video DOES mention that it uses Tailwind on its own, but that you can also use it as a plugin with PostCSS. It does NOT explain why you would choose one or the other. My projects were all built using EJS. I did not know until several hours later, and after lots of googling, that I needed to use the PostCSS installation if I had EJS files. The Tailwind documentation also does not give clear information on when you would choose one or the other. There is a handy page to help with install with certain frameworks, but nothing that helped my situation.
Problem #2:
Once I knew I needed PostCSS, I tried to just add that to my project along with the missing files etc. Even once I thought I had all the pieces it didn't work. I needed to wipe it clean and start over fresh. I was really glad I had pushed my project to GitHub before that and it was easy to get a clean slate back.
Problem #3:
Even with a clean project, and doing a fresh installation with the correct set of instructions (found here), there were a lot of little adjustments I had to make. The postcss.config.js file is created automatically when you install PostCSS. But the tailwind.config.js file is not. I created it manually, but since one file was created for you, I wasn't sure at the time if I was doing something wrong.
Problem #4:
In the tailwind.config.js file, you have to edit the file path to include the files that you would like Tailwind to watch. I edited this to be:
content: ["./src/**/*.{ejs}"]
but it still didn't work. I ended up needing to remove the { } brackets, which was a suggestion from a friend who was helping me troubleshoot. My understanding is that the brackets are only needed when you need to include multiple file types. This is not mentioned anywhere either, it was just a trial-and-error fix.
Problem #5:
Tailwind does not create your source CSS file for you. This was another thing I thought I might be doing wrong, because it's not mentioned in the documentation, but I ended up creating it manually and it worked.
Problem #6:
The documentation then tells you to run your build, but there is no script included in this set of instructions. There IS one in the CLI instructions. But if I didn't already know I should add one from the tutorial I was watching, I wouldn't have thought to do it at all. At the time I did not know there was one in the CLI, and I spent quite a bit of time googling for a script that would work. I ended up finding it in the comments of the tutorial I mentioned above.
I realize that maybe all of these small things may not have been such a roadblock to a more experienced dev, but for me it meant hours of trial and error, googling, troubleshooting, and frustration. Once I had the whole process completely figured out, I started to help anyone else I could who was in the same situation. I looked at repositories on GitHub, jumped in voice channels on Discord to do it live, created threads to help multiple people at once, and then finally created a document with step-by-step instructions. The instructions have been adjusted and clarified with every person I helped. And as far as I know, everyone who has used them was able to successfully install Tailwind with them after previously struggling with most of the same things I did.
When yet another friend mentioned they wanted to possibly use Tailwind for their project, I offered to help them install it, and explained how I'd already done all the troubleshooting to get it running quickly and correctly. Their response was, after all this work you've done and knowing how frequently people are having these issues trying to install, why haven't you contacted Tailwind yet to have them implement any of this?
So I've recently reached out to see if I can help contribute to clarifying the installation instructions in some way based on my experience, but as of yet, have not heard back from them!