The installation process was fairly simple, I followed the guide on the documentation site. Before following any of the steps, I had to install NodeJS using homebrew since i'm on MacOS.
Using NodeJS (npm init -y), I was able to use npm to install tailwindcss and create the initial config file using npx.
>npm install -D tailwindcss
>npx tailwindcss init
Added this line to the config file to tell tailwind to apply styles to all html and js files in a given directory (the directory src in this case).
content: ["./src/**/*.{html,js}"],
Create the directory src and create a file called input.css. Add these lines to the file to apply tailwind styles.
@tailwind base;
@tailwind components;
@tailwind utilities;
Run the line below in the terminal to build the output files in a new directory called dist. This line also constantly watches for updates within our styles which will be useful when we add custom fonts, or our custom styles.
>npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
Now you're all setup! Make your first html file in the src directory and test the tailwind styles by calling the tailwind classes on any element.
The page was actually very simple to create. Tailwindcss is very simple to use and understand, the documentation page is very helpful, it shows good examples of how it is used. Tailwindcss is good for building responsive websites, every single style works with responsive media queries. Check out the site that I created while learning how to use tailwind!
This was my first time learing a new framework by myself and although it was easy to understand the syntax, I still encountered quite a bit of difficulties. The first issue that I encountered was when I tried to apply styles to my text but nothing would work, I resolved this issue by moving my html file back into the src directory. In my tailwind config file it has all of my html and js files selected in src so when I moved them out of the directory, tailwind didn't apply until I either changed the config file or if I moved the files back in.
My next issue occurred when I tried to install my own custom font. I would have the proper syntax in my output and config files but I exited the watch command that would rebuild the output and input files whenever there were any updates made. I also didn't know I had to rebuild the files until a lot of googling and debugging.