Merge pull request #6 from axzilla/twerge-hotfix

fix: implement tailwind-merge-go to avoid class conflicts and allow o…

README.md

@@ -92,4 +92,4 @@ For support, questions, or discussions, please [open an issue](https://github.co
 
 ---
 
-Built with ❤️ by the Go community, for the Go community.
+Built with ❤️ by the Go community, for the Go community.

assets/css/output.css

@@ -1348,6 +1348,11 @@ body {
   background-color: rgb(55 65 81 / var(--tw-bg-opacity));
 }
 
+.bg-green-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
+}
+
 .bg-muted {
   --tw-bg-opacity: 1;
   background-color: hsl(var(--muted) / var(--tw-bg-opacity));
@@ -1381,6 +1386,11 @@ body {
   background-color: hsl(var(--primary) / 0.9);
 }
 
+.bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+}
+
 .bg-secondary {
   --tw-bg-opacity: 1;
   background-color: hsl(var(--secondary) / var(--tw-bg-opacity));
@@ -1905,6 +1915,11 @@ body {
   background-color: hsl(var(--accent) / var(--tw-bg-opacity));
 }
 
+.hover\:bg-blue-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-destructive\/90:hover {
   background-color: hsl(var(--destructive) / 0.9);
 }

go.mod

@@ -3,6 +3,7 @@ module github.com/axzilla/goilerplate
 go 1.22.4
 
 require (
+	github.com/Oudwins/tailwind-merge-go v0.2.0
 	github.com/a-h/templ v0.2.778
 	github.com/joho/godotenv v1.5.1
 )

go.sum

@@ -1,6 +1,16 @@
+github.com/Oudwins/tailwind-merge-go v0.2.0 h1:rtVHgYmLwwae4P+K6//ceRuUdyz3Bny6fo4664fOEmo=
+github.com/Oudwins/tailwind-merge-go v0.2.0/go.mod h1:kkZodgOPvZQ8f7SIrlWkG/w1g9JTbtnptnePIh3V72U=
 github.com/a-h/templ v0.2.778 h1:VzhOuvWECrwOec4790lcLlZpP4Iptt5Q4K9aFxQmtaM=
 github.com/a-h/templ v0.2.778/go.mod h1:lq48JXoUvuQrU0VThrK31yFwdRjTCnIE5bcPCM9IP1w=
+github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
+github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/google/go-cmp v0.6.0 h1:ofyhxvXcZhMsU5ulbFiLKl/XBFqE1GSq7atu8tAmTRI=
 github.com/google/go-cmp v0.6.0/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY=
 github.com/joho/godotenv v1.5.1 h1:7eLL/+HRGLY0ldzfGMeQkb7vMd0as4CfYvUVzLqw0N0=
 github.com/joho/godotenv v1.5.1/go.mod h1:f4LDr5Voq0i2e/R5DDNOoa2zzDfwtkZa6DnEwAbqwq4=
+github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
+github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
+github.com/stretchr/testify v1.9.0 h1:HtqpIVDClZ4nwg75+f6Lvsy/wHu+3BoSGCbBAcpTsTg=
+github.com/stretchr/testify v1.9.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
+gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
+gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=

pkg/components/accordion.templ

@@ -1,6 +1,9 @@
 package components
 
-import "github.com/axzilla/goilerplate/pkg/icons"
+import (
+	"github.com/axzilla/goilerplate/pkg/icons"
+	"github.com/axzilla/goilerplate/pkg/utils"
+)
 
 // AccordionItem represents a single item in the Accordion component.
 type AccordionItem struct {
@@ -65,7 +68,7 @@ templ Accordion(props AccordionProps) {
 				this.activeItem = this.activeItem === itemId ? null : itemId;
 			}
 		}"
-		class={ "divide-y divide-border rounded-md border", props.Class }
+		class={ utils.TwMerge("divide-y divide-border rounded-md border", props.Class) }
 		{ props.Attributes... }
 	>
 		for _, item := range props.Items {

pkg/components/alert.templ

@@ -1,5 +1,7 @@
 package components
 
+import "github.com/axzilla/goilerplate/pkg/utils"
+
 // AlertVariant represents the visual style of the alert.
 type AlertVariant string
 
@@ -46,9 +48,13 @@ func getAlertVariantClasses(variant AlertVariant) string {
 //   - Class: Additional CSS classes to apply to the alert. Default: "" (empty string)
 templ Alert(props AlertProps) {
 	<div
-		class={ "relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11",
-			getAlertVariantClasses(props.Variant),
-			props.Class }
+		class={
+			utils.TwMerge(
+				"relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11",
+				getAlertVariantClasses(props.Variant),
+				props.Class,
+			),
+		}
 		role="alert"
 	>
 		{ children... }

pkg/components/avatar.templ

@@ -2,6 +2,7 @@ package components
 
 import (
 	"fmt"
+	"github.com/axzilla/goilerplate/pkg/utils"
 	"strings"
 )
 
@@ -82,9 +83,11 @@ func AvatarSizeClasses(size AvatarSize) string {
 templ Avatar(props AvatarProps) {
 	<div
 		class={
-			"inline-flex items-center justify-center rounded-full bg-muted",
-			AvatarSizeClasses(props.Size),
-			props.Class,
+			utils.TwMerge(
+				"inline-flex items-center justify-center rounded-full bg-muted",
+				AvatarSizeClasses(props.Size),
+				props.Class,
+			),
 		}
 		{ props.Attributes... }
 	>

pkg/components/button.templ

@@ -1,5 +1,10 @@
 package components
 
+import (
+	"github.com/axzilla/goilerplate/pkg/utils"
+	"strings"
+)
+
 // ButtonVariant represents the visual style of the button.
 type ButtonVariant string
 
@@ -21,7 +26,7 @@ const (
 	ButtonIcon ButtonSize = "icon"
 )
 
-// ButtonProps defines the properties for the Button component.
+// Button defines the properties for the Button component.
 type ButtonProps struct {
 	// Class specifies additional CSS classes to apply to the button.
 	// Default: "" (empty string)
@@ -73,9 +78,9 @@ type ButtonProps struct {
 	IconRight templ.Component
 }
 
-// getVariantClasses returns the CSS classes for the given button variant.
-func getVariantClasses(variant ButtonVariant) string {
-	switch variant {
+// Variant als Methode
+func (b ButtonProps) variantClasses() string {
+	switch b.Variant {
 	case Destructive:
 		return "bg-destructive text-destructive-foreground hover:bg-destructive/90"
 	case Outline:
@@ -91,9 +96,9 @@ func getVariantClasses(variant ButtonVariant) string {
 	}
 }
 
-// getSizeClasses returns the CSS classes for the given button size.
-func getSizeClasses(size ButtonSize) string {
-	switch size {
+// Size als Methode
+func (b ButtonProps) sizeClasses() string {
+	switch b.Size {
 	case Sm:
 		return "h-9 px-3 rounded-md"
 	case Lg:
@@ -105,6 +110,14 @@ func getSizeClasses(size ButtonSize) string {
 	}
 }
 
+func (b ButtonProps) modifierClasses() string {
+	classes := []string{}
+	if b.FullWidth {
+		classes = append(classes, "w-full")
+	}
+	return strings.Join(classes, " ")
+}
+
 // Button renders a button or anchor component based on the provided props.
 // It can be customized with various visual styles, sizes, and behaviors.
 //
@@ -142,12 +155,14 @@ templ Button(props ButtonProps) {
 			href={ templ.SafeURL(props.Href) }
 			target={ props.Target }
 			class={
-				"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors",
-				"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-				getVariantClasses(props.Variant),
-				getSizeClasses(props.Size),
-				templ.KV("w-full", props.FullWidth),
-				props.Class,
+				utils.TwMerge(
+					"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors",
+					"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+					props.variantClasses(),
+					props.sizeClasses(),
+					props.modifierClasses(),
+					props.Class,
+				),
 			}
 			if props.Disabled != nil {
 				if disabledBool, ok := props.Disabled.(bool); ok && disabledBool {
@@ -165,13 +180,15 @@ templ Button(props ButtonProps) {
 	} else {
 		<button
 			class={
-				"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors",
-				"focus-visible:outline-none focus-visible:ring-2 focus-ring-ring focus-visible:ring-offset-2",
-				"disabled:pointer-events-none disabled:opacity-50",
-				getVariantClasses(props.Variant),
-				getSizeClasses(props.Size),
-				templ.KV("w-full", props.FullWidth),
-				props.Class,
+				utils.TwMerge(
+					"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors",
+					"focus-visible:outline-none focus-visible:ring-2 focus-ring-ring focus-visible:ring-offset-2",
+					"disabled:pointer-events-none disabled:opacity-50",
+					props.variantClasses(),
+					props.sizeClasses(),
+					props.modifierClasses(),
+					props.Class,
+				),
 			}
 			if props.Type != "" {
 				type={ props.Type }