How to use Tailwind CSS without Node

Tailwind CSS continues to grow in popularity as it's a framework which allows you to create beautiful websites without needing to write a single line of CSS, while also not making your website look like a template (looking at you Bootstrap websites).

When you go to install tailwind inside your project, the first command you'll come across is npm install -D tailwindcss. This is fine if your frontend is a single-page application (SPA) or your backend is in Node.js. However, what if you are using server-side rendering (SSR) for the frontend and your backend is in Laravel, Django, or ASP.NET? One solution is to place the Tailwind CDN script in the head of your HTML. The problem with this is it forces the user to download every single CSS class in Tailwind instead of only the ones actually being used.

This is where the Tailwind standalone CLI tool helps. The CLI tool gives you all the benefits of using the npm Tailwind package, such as only bundling the classes you are actively using in your website, but without having to install Node in your project.

I'm sure most of you can figure out how to get the CLI tool setup in your project based on the instructions in the link above, but if you need the extra help:

1. Go to the Tailwind GitHub and download the version of the CLI executable which matches the system you are running
2. Place the executable in your project and rename it to tailwindcss (not necessary but will mean the following steps will work for everyone)
3. Add tailwindcss to your .gitignore (if you are using git)
4. Run the command ./tailwindcss init and modify content: [] so it knows which directories to look in for Tailwind classes
5. Create a CSS file called input.css and place it wherever you will store your static files
6. In this CSS file add these three lines
   1. @tailwind base;
   2. @tailwind components;
   3. @tailwind utilities;
7. To use Tailwind and have it automatically compile the classes you use, run this command ./tailwind -i ./path/to/static/files/input.css -o ./path/to/static/files/output.css --watch
8. output.css is the CSS file you will use in your website so add it to your HTML
9. If you want to send an optimised version of your CSS file to your users, run this command ./tailwind -i ./path/to/static/files/input.css -o ./path/to/static/files/output.css --minify

As a framework, Tailwind CSS provides a great deal of freedom for you to design your websites the way you want them, while making it easy for you to do so. If you have been avoiding using Tailwind because of needing to install Node, I hope this tutorial has helped you in getting it setup in your project.🙂