Adding tailwind

To setup Tailwind you will need to install tailwind, create a tailwind config, add a stylesheet and update the build scripts and Dockerfile. Although not strictly necessary, we recommend using npm in the build toolchain. The instructions are in the Prerequisites section here

Installing Tailwind

The command below will install the latest tailwind and create a package.json file

npm install tailwindcss

tailwind.config.js

In the project root, create a tailwind.config.js file. Here is an example of a vanilla config file

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./internal/ui/**/*.templ"],
  darkMode: "class",
  theme: {
    extend: {
      zIndex: {
        toast: 100,
      },
      keyframes: {
        zoomOut: {
          "0%": { transform: "scale(1)" },
          "100%": { transform: "scale(0.5)" },
        },
        bounceInDown: {
          "0%": { opacity: "0", transform: "translate3d(0, -3000px, 0)" },
          "60%": { opacity: "1", transform: "translate3d(0, 25px, 0)" },
          "75%": { transform: "translate3d(0, -10px, 0)" },
          "90%": { transform: "translate3d(0, 5px, 0)" },
          "100%": { transform: "none" },
        },
      },
    },
  },
  plugins: [],
};

style.css

Create a style.css file with the content below. We recommend creating it in /internal/ui. You can add your custom styles it this file.

@tailwind base;
@tailwind components;
@tailwind utilities;

Updating the build script

Edit the /scripts/air_build.sh to include tailwind and build the style.css for the site. Include it as below

#!/usr/bin/env bash

set -e
set -u
set -o pipefail
set -x

npx -y tailwindcss -i ./internal/ui/styles.css -o ./internal/server/assets/css/styles.css --minify
templ generate
go build -o ./tmp/main cmd/server/main.go

Updating the Dockerfile

Edit the /Dockerfile to include tailwind and build the style.css for the site. Include it as below

FROM golang:latest AS build

WORKDIR /go/src/app
COPY . .

RUN go install github.com/a-h/templ/cmd/templ@latest
RUN apt update && apt install npm -y
RUN npm install -D tailwindcss
RUN npx tailwindcss -i ./internal/ui/styles.css -o ./internal/server/assets/css/styles.css && templ generate

RUN go mod download
RUN CGO_ENABLED=0 go build -o /go/bin/app cmd/server/main.go

FROM gcr.io/distroless/static-debian12:latest

COPY --from=build /go/bin/app /
EXPOSE 8080
CMD ["/app"]