Gin Tailwind Templ

lordofthemind

Getting Started with Golang, Gin, Templ, and Tailwind CSS

In this tutorial, we'll build a Go web application using the Gin framework, Templ for HTML templating, and Tailwind CSS for styling. We'll also add interactivity using HTMX.

Prerequisites

Go: Install Go from https://golang.org/dl/.
Node.js and npm: Install Node.js from https://nodejs.org/.
Templ: Install the templ CLI:
```
go install github.com/a-h/templ@latest
```

Step 1: Set Up the Project

Create a new directory for your project:

mkdir gin-tailwind-templ
cd gin-tailwind-templ

Initialize a Go module:
```
go mod init gin-tailwind-templ
```
Install Gin:
```
go get -u github.com/gin-gonic/gin
```

Step 2: Set Up Tailwind CSS

Initialize a package.json file:
```
npm init -y
```

Install Tailwind CSS and its dependencies:

npm install -D tailwindcss postcss autoprefixer

Initialize Tailwind CSS:
```
npx tailwindcss init
```

Create a tailwind.config.js file and configure it:

// tailwind.config.js
module.exports = {
  content: ["./templates/**/*.templ"], // Watch .templ files for Tailwind classes
  theme: {
    extend: {},
  },
  plugins: [],
};

Create a postcss.config.js file:

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Create a styles.css file in a static/css directory:

mkdir -p static/css
touch static/css/styles.css

Add the following to static/css/styles.css:

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

Add a script to package.json to build Tailwind CSS:

"scripts": {
  "build:css": "tailwindcss -i ./static/css/styles.css -o ./static/css/output.css --watch"
}

Run the Tailwind CSS build process:
```
npm run build:css
```

Step 3: Create Templ Templates

Create a templates directory:
```
mkdir templates
```

Create a home.templ file:

touch templates/home.templ

Add the following to templates/home.templ:

package templates

templ HomePage(title string, message string) {
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>{ title }</title>
            <link href="/static/css/output.css" rel="stylesheet" />
            <script src="https://unpkg.com/[email protected]"></script>
        </head>
        <body class="bg-gray-100">
            <div class="container mx-auto p-4">
                <h1 class="text-2xl font-bold text-blue-500">{ title }</h1>
                <p class="mt-4 text-gray-700">{ message }</p>
                <button hx-get="/api/data" hx-swap="innerHTML" class="bg-blue-500 text-white p-2 rounded">
                    Click Me
                </button>
            </div>
        </body>
    </html>
}

Generate Go code from the .templ file:
```
templ generate
```
This will create a home_templ.go file in the templates directory.

Step 4: Set Up the Gin Server

Create a main.go file:
```
touch main.go
```

Add the following code to main.go:

package main

import (
    "net/http"

    "github.com/gin-gonic/gin"
    "github.com/lordofthemind/gin-tailwind-templ/templates" // Adjust the import path
)

func main() {
    r := gin.Default()

    // Serve static files
    r.Static("/static", "./static")

    // Render the home page
    r.GET("/", func(c *gin.Context) {
        templates.HomePage("Gin + Tailwind + Templ", "This is a dynamic message!").Render(c.Request.Context(), c.Writer)
    })

    // Handle HTMX request
    r.GET("/api/data", func(c *gin.Context) {
        c.String(http.StatusOK, "HTMX response!")
    })

    // Start the server
    r.Run(":8080")
}

Step 5: Run the Application

Start the Tailwind CSS build process (if not already running):
```
npm run build:css
```
Start the Go server:
```
go run main.go
```
Open your browser and navigate to http://localhost:8080. You should see a page styled with Tailwind CSS and an interactive button powered by HTMX.

Directory Structure

Here’s what your project should look like:

.
├── go.mod
├── go.sum
├── main.go
├── package-lock.json
├── package.json
├── postcss.config.js
├── static
│   └── css
│       ├── output.css
│       └── styles.css
├── tailwind.config.js
├── templates
│   ├── home.templ
│   └── home_templ.go
└── tree.txt

Step 6: Explanation

Tailwind CSS:
- Tailwind is a utility-first CSS framework. We configured it to watch .templ files for class names and generate a CSS file (output.css).
Templ:
- Templ is a Go library for writing HTML templates in a type-safe way. We created a .templ file and used templ generate to convert it into Go code.
Gin:
- Gin is a web framework for Go. We used it to serve static files (CSS) and render the Templ-generated HTML.
HTMX:
- HTMX is a lightweight library that allows you to add interactivity to your HTML without writing JavaScript.
Static Files:
- The static directory contains the Tailwind CSS output. Gin serves this directory at the /static route.

Step 7: Extending the Example

Add More Pages:
- Create additional .templ files and render them in your Gin routes.
Add More Tailwind Styles:
- Customize your tailwind.config.js to add custom colors, fonts, etc.

Build for Production:

Minify the CSS by adding NODE_ENV=production to the Tailwind build script:

"scripts": {
  "build:css": "NODE_ENV=production tailwindcss -i ./static/css/styles.css -o ./static/css/output.css --minify"
}

Conclusion

You’ve successfully built a Go web application using Gin, Templ, and Tailwind CSS! This setup provides a modern, type-safe, and efficient way to build web applications in Go. You can now extend this project by adding more pages, passing dynamic data to templates, and enhancing interactivity with HTMX.

Top categories