gomponents +

gomponents works great together with TailwindCSS. In fact, this page is built using gomponents and TailwindCSS! Check out the source of this page or a gomponents + TailwindCSS example project.

Example

package main

import (
	g "github.com/maragudk/gomponents"
	. "github.com/maragudk/gomponents/html"
)

func Navbar() g.Node {
	return Nav(Class("bg-gray-800 flex items-center space-x-4"),
		A(Href("/"), g.Text("Home")),
		A(Href("/about"), g.Text("About")),
	)
}

IntelliSense

If you're using VS Code, you can get Tailwind CSS IntelliSense by installing the following extension. Then have a look at this gist for the configuration.

gomponents and Bulma also go well together. Check out bulma-gomponents by willoma for easy integration.

Example

package main

import (
	g "github.com/maragudk/gomponents"
	b "github.com/willoma/bulma-gomponents"
)

func Navbar() g.Node {
	return b.Navbar(
		b.Dark,
		b.NavbarStart(
			b.NavbarAHref("/", "Home"),
			b.NavbarAHref("/about", "About"),
		),
	)
}

HTMX is a tiny Javascript library to give access to AJAX, websockets, and more, using HTML attributes. This fits perfectly with gomponents when you need that extra bit of client-side interactivity. Check out the gomponents-htmx library on Github.

Example

package main

import (
	g "github.com/maragudk/gomponents"
	hx "github.com/maragudk/gomponents-htmx"
	. "github.com/maragudk/gomponents/html"
)

func Navbar() g.Node {
	return Nav(hx.Boost("true"),
		A(Href("/"), g.Text("Home")),
		A(Href("/about"), g.Text("About")),
	)
}

Heroicons are a collection of handcrafted SVG icons, by the makers of TailwindCSS. They work great together with gomponents! Check out the gomponents-heroicons library on Github.

Example

package icons

import (
	g "github.com/maragudk/gomponents"
	"github.com/maragudk/gomponents-heroicons/solid"
	. "github.com/maragudk/gomponents/html"
)

func Navbar() g.Node {
	return Nav(Class("bg-gray-800 flex items-center space-x-4"),
		solid.ArrowRight(Class("h-6 w-6")),
		A(Href("/"), g.Text("Home")),
		A(Href("/about"), g.Text("About")),
	)
}

Iconify is a large set of gomponents icons created by delaneyj, from the Iconify project.

Example

package iconify

import (
	"github.com/delaneyj/gomponents-iconify/iconify/maki"
	g "github.com/maragudk/gomponents"
	. "github.com/maragudk/gomponents/html"
)

func Navbar() g.Node {
	return Nav(Class("bg-gray-800 flex items-center space-x-4"),
		maki.Beach(),
		A(Href("/"), g.Text("Home")),
		A(Href("/about"), g.Text("About")),
	)
}