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.
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")),
)
}
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.
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.
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.
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.
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")),
)
}
Lucide Icons are a collection of many beautiful & consistent icons made by the community. You can easily use them with gomponents, check out the gomponents-lucide library on Github.
package main
import (
"github.com/eduardolat/gomponents-lucide"
g "github.com/maragudk/gomponents"
. "github.com/maragudk/gomponents/html"
)
func myPage() g.Node {
return Div(
lucide.Star(),
lucide.Languages(),
lucide.Usb(),
//...
lucide.Cherry(
// You can add any attributes you want
// to customize the SVG
Class("w-6 h-6 text-blue-500"),
),
)
}