Upgrade to TailwindCSS v4

Makefile

@@ -28,9 +28,7 @@ start: build-css
 tailwindcss:
 	curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-$(TAILWINDCSS_OS_ARCH)
 	mv tailwindcss-$(TAILWINDCSS_OS_ARCH) tailwindcss
-	chmod +x tailwindcss
-	mkdir -p node_modules/tailwindcss/lib && ln -s tailwindcss node_modules/tailwindcss/lib/cli.js
-	echo '{"devDependencies": {"tailwindcss": "latest"}}' >package.json
+	chmod a+x tailwindcss
 
 .PHONY: test
 test:

go.mod

@@ -5,7 +5,7 @@ go 1.23
 require (
 	maragu.dev/gomponents v1.0.0
 	maragu.dev/gomponents-htmx v0.6.1
-	maragu.dev/goo v0.0.0-20241031135611-2656dbfcbc0d
+	maragu.dev/goo v0.0.0-20250219093344-e11dccf3cde9
 	maragu.dev/httph v0.3.5
 	maragu.dev/snorkel v0.4.1
 )

go.sum

@@ -228,8 +228,8 @@ maragu.dev/gomponents-heroicons/v3 v3.0.0 h1:QBw4CSST12mrdcYzl1XrEnbMxfhvQgnVunh
 maragu.dev/gomponents-heroicons/v3 v3.0.0/go.mod h1:Rqc5BhSQUHBnGuWEPihg+IsQnOkiBY+Ibu1DDGEarsY=
 maragu.dev/gomponents-htmx v0.6.1 h1:vXXOkvqEDKYxSwD1UwqmVp12YwFSuM6u8lsRn7Evyng=
 maragu.dev/gomponents-htmx v0.6.1/go.mod h1:51nXX+dTGff3usM7AJvbeOcQjzjpSycod+60CYeEP/M=
-maragu.dev/goo v0.0.0-20241031135611-2656dbfcbc0d h1:s0TYtmg9lXCX//glpWNuSnlrfFQbsVH1CZN6+URDVzE=
-maragu.dev/goo v0.0.0-20241031135611-2656dbfcbc0d/go.mod h1:dPSlLwlj6+AIVhX/MnoHlVL3f/NRPpdmTvIYa1Z6UzY=
+maragu.dev/goo v0.0.0-20250219093344-e11dccf3cde9 h1:PvSmgpJ3Yw524dHjXN1J5psiYvgnxixbe6/6EEJrtN0=
+maragu.dev/goo v0.0.0-20250219093344-e11dccf3cde9/go.mod h1:dPSlLwlj6+AIVhX/MnoHlVL3f/NRPpdmTvIYa1Z6UzY=
 maragu.dev/httph v0.3.5 h1:g0ebwFA8Hv+UOoJNcYdHy9gqPLWHTf2kHXEq3Gma3Ac=
 maragu.dev/httph v0.3.5/go.mod h1:DGE2xtKBbL/ukcCGK/IvmUA1ni6ylusjWBgAMkCvTnc=
 maragu.dev/is v0.2.0 h1:poeuVEA5GG3vrDpGmzo2KjWtIMZmqUyvGnOB0/pemig=

html/common.go

@@ -45,7 +45,7 @@ func Page(props html.PageProps, children ...Node) Node {
 		Body: []Node{Class("bg-gray-900 text-white font-serif"),
 			Div(Class("min-h-screen flex flex-col justify-between bg-white"),
 				header(),
-				Div(Class("grow"),
+				Div(Class("grow text-gray-900"),
 					container(true, true,
 						Group(children),
 					),
@@ -58,7 +58,7 @@ func Page(props html.PageProps, children ...Node) Node {
 
 // header bar with logo and navigation.
 func header() Node {
-	return Div(Class("bg-gray-800 text-white shadow"),
+	return Div(Class("bg-gray-800 text-white shadow-sm"),
 		container(true, false,
 			Div(Class("h-16 flex items-center justify-between"),
 				A(Href("/"), Class("inline-flex items-center text-xl font-semibold hover:text-amber-500"),

html/home.go

@@ -48,7 +48,7 @@ func TextareaPartial(name, value string) Node {
 			Label(For(name+"-area"), Class("block text-sm/6 font-medium text-gray-900"), Text(name)),
 			Div(Class("mt-2"),
 				Textarea(Rows("10"), Cols("40"), Name(name), ID(name+"-area"), Placeholder(placeholder),
-					Class("block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-amber-600 sm:text-sm/6 font-sans"),
+					Class("block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-amber-600 sm:text-sm/6 font-sans"),
 					Text(value)),
 			),
 		),
@@ -57,6 +57,6 @@ func TextareaPartial(name, value string) Node {
 
 func button(text, target string) Node {
 	return Button(Type("submit"),
-		Class("rounded-md bg-amber-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-amber-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-600 font-sans"),
+		Class("rounded-md bg-amber-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-xs hover:bg-amber-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-600 font-sans"),
 		Text(text), hx.Post("/translate"), hx.Target(target))
 }

tailwind.css

@@ -1,3 +1,3 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@source "../goo/html/**/*.go";
+@source "/go/pkg/mod/maragu.dev/goo*/html/**/*.go";