Tailwind CSS with Air and GO: No Node, No Problem.

What about to avoid using NPM/Node as much as possible and do not need to managing the overwhelming number of dependencies it introduces, I did that decision to my new personal PoC. However, I still want to use Tailwind CSS, and after reading through the documentation, I found an amazing way to compile CSS files with Tailwind—without relying on Node. The best part? It can be set up to auto-generate CSS files whenever changes occur. I'm writing this down because with the release of Tailwind CSS v4, there are significant changes in how the setup works. Please Like, share and follow :D Automating the process requires a few steps, so let's dive right in. Here's the structure of my project: project_folder/ ├── bin/ │ └── tailwind/ │ ├── download-tailwindcss.sh │ └── tailwindcss ├── cmd/ │ ├── api/ │ │ └── main.go │ ├── static/ │ │ └── styles.css │ └── templates/ │ ├── styles/ │ │ └── index.css │ └── index.html ├── .air.toml Now, let's look at the overall picture. For clarity, follow the folder structure diagram as I explain each step: cmd/api/main.go serves the templates/*.html files and the static/*.* files as public assets. The Tailwind directives, imports, and configuration reside in templates/styles/index.css, which acts as the "source code" for the styles. All the templates/*.html files can freely utilize Tailwind's utility classes. .air.toml is tasked with automatically watching all project changes, including recompiling templates/styles/index.css using its pre-build commands. bin/tailwind/download-tailwindcss.sh is responsible for downloading (or updating) the TailwindCSS CLI. You are responsible ro run it. The file bin/tailwind/tailwindcss is the TailwindCSS CLI itself, which is used by air to recompile the Tailwind styles into the static/styles.css file whenever changes are made. For the sake of saving time, I won't delve too much into how Go serves HTML and static files using an HTTP web server—you can easily find that information online. Instead, I'll focus on the Tailwind and air setup, as this is critical to getting everything to work smoothly. Installing the TailwindCSS CLI Compiler First, take a look at bin/tailwind/download-tailwindcss.sh, which: Detects your operating system. Downloads the TailwindCSS CLI from the official repository. Renames the downloaded file to tailwindcss for simplicity. Marks the tailwindcss file as executable. If an error occurs during the process, it suggests manually downloading the file. Here's the complete script: #!/bin/bash # file name TAILWIND_BIN="tailwindcss" TAILWIND_BIN_PATH="${PWD}/${TAILWIND_BIN}" echo "Downloading Tailwind CSS CLI..." # OS detector if [[ "$OSTYPE" == "linux-gnu"* ]]; then curl -L https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-x64 -o "$TAILWIND_BIN" elif [[ "$OSTYPE" == "darwin"* ]]; then curl -L https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-arm64 -o "$TAILWIND_BIN" else echo "OS not supported. Try to download manually" exit 1 fi # Set permission to make the file executable echo "Setting the file as executable..." echo "$PWD" chmod +x "$TAILWIND_BIN_PATH" echo "Tailwind CSS CLI is Installed!" echo "Executable path: $TAILWIND_BIN_PATH" Configuring air to Automatically Compile CSS At this stage, your Go project should already be monitored by air. Now, you'll need to update the configuration to allow it to use pre-build commands to recompile the CSS whenever changes are detected. Here are the key updates to make in the .air.toml file: # ... other keys omitted for readability [build] # ... other keys omitted for readability include_ext = ["go", "tpl", "tmpl", "html","css"] # ... other keys ommited for readability pre_cmd = ["./bin/tailwind/tailwindcss -i ./templates/styles/index.css -o ./static/styles.css"] # ... other keys ommited for readability As shown in the snippet above, you need to: Add the "css" extension to the include_ext list so air watches CSS files as well. Add a pre_cmd to compile the templates/styles/index.css into static/styles.css. YES!!!! It will automatically execute on every change. BUT it saves you from the hassle of doing it yourself—or worse, forgetting to do it altogether. Let the machine handle the work! :D Important Notes Remember to adjust this command when building for production—adding minification, for instance. Sometimes, your browser might cache the CSS changes, so get used to forcing a refresh: Windows/Linux: Use CTRL + F5. Mac: Use CMD + SHIFT + R. Tailwind CSS Version 4 Tailwind CSS has made huge improvements in version 4, and one exciting change is the removal of the tailwind.config.js file. It has also simplified the way you load directives and settings—allowing you to define them directly in your .css file. Great work by the Tailwind team! Here’

project_folder/
├── bin/
│   └── tailwind/
│       ├── download-tailwindcss.sh
│       └── tailwindcss
├── cmd/
│   ├── api/
│   │   └── main.go
│   ├── static/
│   │   └── styles.css
│   └── templates/
│       ├── styles/
│       │   └── index.css
│       └── index.html
├── .air.toml

#!/bin/bash

# file name
TAILWIND_BIN="tailwindcss"
TAILWIND_BIN_PATH="${PWD}/${TAILWIND_BIN}"

echo "Downloading Tailwind CSS CLI..."

# OS detector
if [[ "$OSTYPE" == "linux-gnu"* ]]; then
  curl -L https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-x64 -o "$TAILWIND_BIN"
elif [[ "$OSTYPE" == "darwin"* ]]; then
  curl -L https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-arm64 -o "$TAILWIND_BIN"
else
  echo "OS not supported. Try to download manually"
  exit 1
fi

# Set permission to make the file executable
echo "Setting the file as executable..."
echo "$PWD"
chmod +x "$TAILWIND_BIN_PATH"

echo "Tailwind CSS CLI is Installed!"
echo "Executable path: $TAILWIND_BIN_PATH"

# ... other keys omitted for readability
[build]
  # ... other keys omitted for readability
  include_ext = ["go", "tpl", "tmpl", "html","css"]
  # ... other keys ommited for readability
  pre_cmd = ["./bin/tailwind/tailwindcss -i ./templates/styles/index.css -o ./static/styles.css"]
# ... other keys ommited for readability

/* file: `template/styles/index.css` */
@import "tailwindcss";
@source "../**/*.html";