feat: Migrate from PicoCSS to TailwindCSS + daisyUI

Author: sonjek

.github/workflows/ci.yml

@@ -78,5 +78,7 @@ jobs:
       with:
         go-version-file: go.mod
         check-latest: true
+    - name: Setup Bun
+      uses: oven-sh/setup-bun@v2.2.0
     - name: Build
       run: make build

.gitignore

@@ -1,7 +1,8 @@
 bin
 tmp
 node_modules
-internal/web/static/css/
+internal/web/static/css/*
+!internal/web/static/css/input.css
 internal/web/static/js/
 
 .DS_Store

Makefile

@@ -33,7 +33,7 @@ get-js-deps:
 	@mkdir -p internal/web/static/js internal/web/static/css
 	@cp node_modules/htmx.org/dist/htmx.min.js internal/web/static/js/
 	@cp node_modules/htmx-ext-response-targets/dist/response-targets.min.js internal/web/static/js/
-	@cp node_modules/@picocss/pico/css/pico.min.css internal/web/static/css/
+	@bunx tailwindcss -i internal/web/static/css/input.css -o internal/web/static/css/style.css --minify
 	@cp -r node_modules/ionicons/dist/ionicons internal/web/static/js/
 
 # -------------------------------------------------------------------------------------------------

README.md

@@ -1,6 +1,6 @@
-# go-templ-htmx-picocss-example
+# go-templ-gorm-htmx-tailwindcss-example
 
-Example of a Web CRUD app based on [Go](https://github.com/golang/go) + ([sqlite](https://gitlab.com/cznic/sqlite) + [gorm](https://github.com/go-gorm/gorm)) + [templ](https://github.com/a-h/templ) + [</>htmx](https://github.com/bigskysoftware/htmx) + [PicoCSS](https://github.com/picocss/pico) + [Ionicons](https://github.com/ionic-team/ionicons)
+Example of a Web CRUD app based on [Go](https://github.com/golang/go) + ([sqlite](https://gitlab.com/cznic/sqlite) + [gorm](https://github.com/go-gorm/gorm)) + [templ](https://github.com/a-h/templ) + [</>htmx](https://github.com/bigskysoftware/htmx) + [tailwindcss](https://github.com/tailwindlabs/tailwindcss) + [DaisyUI](https://daisyui.com) + [Ionicons](https://github.com/ionic-team/ionicons)
 
 
 ![demo](demo.gif)

bun.lock

@@ -1,10 +1,10 @@
 package main
 
 import (
-	"github.com/sonjek/go-templ-htmx-picocss-example/internal/service"
-	"github.com/sonjek/go-templ-htmx-picocss-example/internal/storage"
-	"github.com/sonjek/go-templ-htmx-picocss-example/internal/web"
-	"github.com/sonjek/go-templ-htmx-picocss-example/internal/web/handlers"
+	"github.com/sonjek/go-templ-gorm-htmx-tailwindcss-example/internal/service"
+	"github.com/sonjek/go-templ-gorm-htmx-tailwindcss-example/internal/storage"
+	"github.com/sonjek/go-templ-gorm-htmx-tailwindcss-example/internal/web"
+	"github.com/sonjek/go-templ-gorm-htmx-tailwindcss-example/internal/web/handlers"
 )
 
 func main() {

cmd/app/main.go

@@ -1,4 +1,4 @@
-module github.com/sonjek/go-templ-htmx-picocss-example
+module github.com/sonjek/go-templ-gorm-htmx-tailwindcss-example
 
 go 1.26.1
 

demo.gif

@@ -1,7 +1,7 @@
 package service
 
 import (
-	database "github.com/sonjek/go-templ-htmx-picocss-example/internal/storage"
+	database "github.com/sonjek/go-templ-gorm-htmx-tailwindcss-example/internal/storage"
 	"gorm.io/gorm"
 )
 

go.mod

@@ -22,6 +22,11 @@ var NotesSeed = []Note{
 		Body:      "Package sqlite is a CGo-free port of SQLite/SQLite3.",
 		CreatedAt: time.Date(2017, 4, 20, 23, 17, 29, 0, time.UTC),
 	},
+	{
+		Title:     "Tailwind CSS",
+		Body:      "A utility-first CSS framework for rapid UI development.",
+		CreatedAt: time.Date(2017, 11, 1, 21, 11, 0, 0, time.UTC),
+	},
 	{
 		Title:     "GoLang",
 		Body:      "The Go programming language.",
@@ -42,6 +47,11 @@ var NotesSeed = []Note{
 		Body:      "</> htmx - high power tools for HTML.",
 		CreatedAt: time.Date(2022, 8, 10, 21, 21, 0, 0, time.UTC),
 	},
+	{
+		Title:     "daisyUI",
+		Body:      "The most popular, free and open-source Tailwind CSS component library.",
+		CreatedAt: time.Date(2023, 11, 13, 12, 49, 0, 0, time.UTC),
+	},
 }
 
 type Note struct {