Building view components with Go and Tailwind CSS

I found the idea of implementing components in Go to make it easier to use Tailwind CSS really neat. I always disliked that you needed Javascript (React for example) to do something like this, even though I'm a big fan of working component-based when creating a website.

I played with a similar idea in the past, but never got as far as I liked. Markus however got quite a bit further than I did. With the use of his gomponents module, defining a component called NiceButton becomes as easy as:

 1import (
 2    g "github.com/maragudk/gomponents"
 3    c "github.com/maragudk/gomponents/components"
 4    . "github.com/maragudk/gomponents/html"
 5)
 6
 7func NiceButton(text string, primary bool) g.Node {
 8    return Button(g.Text(text), c.Classes{
 9        "flex items-center justify-center px-4 py-3 rounded-md": true,
10        "text-white bg-indigo-600 hover:bg-indigo-700":          primary,
11        "text-indigo-600 bg-gray-50 hover:bg-gray-200":          !primary,
12    })
13}

You can then use this button everywhere:

 1import (
 2    g "github.com/maragudk/gomponents"
 3    c "github.com/maragudk/gomponents/components"
 4    . "github.com/maragudk/gomponents/html"
 5)
 6
 7func Home() g.Node {
 8    return Div(Class("max-w-lg flex space-x-8"),
 9    NiceButton("I'm primary", true),
10    NiceButton("I'm just secondary", false),
11    )
12}

You can find a more complete sample here. This is something I'll definitely try out in the future…