add task to generate the tailwind config safelist

Author: stuartaccent

README.md

@@ -22,11 +22,6 @@ task --list-all
 ## Config
 For configuration see the `config.toml` passed in as the `--config` flag to app.
 
-> [!TIP]
-> Generate new session auth keys ask [ChatGPT](https://chat.openai.com)
-> 
-> "Could you generate random hex keys of 32 bytes and 16 bytes for me?"
-
 create your dev config:
 ```bash
 task setup:config
@@ -91,11 +86,24 @@ curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/t
 chmod +x tailwindcss-macos-arm64
 mv tailwindcss-macos-arm64 tmp/tailwindcss
 ```
+
 build and watch:
 ```bash
 task gen:tailwind
 ```
 
+When content is in the database you will need a safelist of css classes.
+To do this there is a query in `pkg/storage/db/sqlc/tailwind.sql`, this returns a unique list
+of css classes found in the `page_html.html` field. You can expand this to fit further requirements.
+
+running the following task will rebuild the `tailwind.config.js` file with an updated list of css classes.
+```bash
+task gen:tailwind-config
+```
+
+to expand the config make sure you update the `tailwind.config.js.tmpl` file to include new settings.
+With the config rebuilt, re-run the main `gen:tailwind` task.
+
 ## Docker
 This can be used to build the app as a binary and run it in a container.
 

Taskfile.yml

@@ -39,6 +39,11 @@ tasks:
     cmds:
       - ./tmp/tailwindcss -i {{.CSS_IN}} -o {{.CSS_OUT}} --watch --minify
 
+  gen:tailwind-config:
+    desc: "Generate tailwind config file with a safelist using html content in the database."
+    cmds:
+      - go run . tailwind --config {{.CONFIG}}
+
   migrate:add:
     desc: "Create a new database migration file."
     vars:

cmd/root.go

@@ -30,6 +30,7 @@ func init() {
 	rootCmd.PersistentFlags().StringVarP(&cfgFile, "config", "c", "", "config file (default is config.toml)")
 	rootCmd.AddCommand(cmdServer)
 	rootCmd.AddCommand(cmdMigrate)
+	rootCmd.AddCommand(cmdTailwind)
 }
 
 func initConfig() {

cmd/tailwind.go

@@ -0,0 +1,75 @@
+package cmd
+
+import (
+	"bytes"
+	"context"
+	"echo.go.dev/pkg/storage/db/dbx"
+	"fmt"
+	"github.com/jackc/pgx/v5"
+	"github.com/spf13/cobra"
+	"os"
+	"text/template"
+)
+
+var (
+	tailwindConfigTemplate = "tailwind.config.js.tmpl"
+	tailwindConfig         = "tailwind.config.js"
+)
+
+var cmdTailwind = &cobra.Command{
+	Use:   "tailwind",
+	Short: "Generate tailwind config file with a safelist using html content in the database",
+	Run: func(cmd *cobra.Command, args []string) {
+		runTailwind()
+	},
+}
+
+func runTailwind() {
+	ctx := context.Background()
+
+	conn, err := pgx.Connect(ctx, cfg.Database.URL().String())
+	if err != nil {
+		fmt.Printf("Error connecting to the database: %v\n", err)
+		os.Exit(1)
+	}
+	defer conn.Close(ctx)
+
+	queries := dbx.New(conn)
+
+	classes, err := queries.GetCSSClasses(ctx)
+	if err != nil {
+		fmt.Printf("Error getting classes: %v\n", err)
+		os.Exit(1)
+	}
+
+	if err = genTailwindConfig(classes); err != nil {
+		fmt.Println("Failed to update config:", err)
+		os.Exit(1)
+	}
+}
+
+func genTailwindConfig(classes []string) error {
+	file, err := os.ReadFile(tailwindConfigTemplate)
+	if err != nil {
+		return err
+	}
+
+	tmpl, err := template.New("").Parse(string(file))
+	if err != nil {
+		return err
+	}
+
+	var buffer bytes.Buffer
+	err = tmpl.Execute(&buffer, classes)
+	if err != nil {
+		return err
+	}
+
+	err = os.WriteFile(tailwindConfig, buffer.Bytes(), 0644)
+	if err != nil {
+		return err
+	}
+
+	fmt.Println("Updated Tailwind config written to", tailwindConfig)
+	return nil
+}

pkg/storage/db/dbx/tailwind.sql.go

@@ -0,0 +1,9 @@
+-- name: GetCSSClasses :many
+-- returns a list of css classes found in the html content.
+WITH extracted AS (
+    SELECT unnest(regexp_matches(html, 'class="([^"]*)"', 'g')) AS classes
+    FROM page_html
+)
+SELECT DISTINCT unnest(string_to_array(classes, ' ')) AS class
+FROM extracted
+ORDER BY class;

pkg/storage/db/sqlc/tailwind.sql

@@ -4,27 +4,27 @@ module.exports = {
     theme: {
         extend: {},
     },
-    safelist: [
-        "bg-gray-100",
-        "flex",
-        "h-32",
-        "h-4",
-        "h-48",
-        "items-center",
-        "rounded",
-        "rounded-full",
-        "rounded-lg",
-        "space-x-4",
-        "space-y-2",
-        "space-y-3",
-        "space-y-6",
-        "w-1/2",
-        "w-1/3",
-        "w-2/3",
-        "w-32",
-        "w-4/6",
-        "w-5/6",
-        "w-full"
+	safelist: [
+        "bg-gray-100"
+        ,"flex"
+        ,"h-32"
+        ,"h-4"
+        ,"h-48"
+        ,"items-center"
+        ,"rounded"
+        ,"rounded-full"
+        ,"rounded-lg"
+        ,"space-x-4"
+        ,"space-y-2"
+        ,"space-y-3"
+        ,"space-y-6"
+        ,"w-1/2"
+        ,"w-1/3"
+        ,"w-2/3"
+        ,"w-32"
+        ,"w-4/6"
+        ,"w-5/6"
+        ,"w-full"
     ],
     plugins: [],
 }

tailwind.config.js

@@ -0,0 +1,13 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: ["./pkg/ui/**/*.templ"],
+    theme: {
+        extend: {},
+    },
+	safelist: [
+        {{- range $index, $class := . }}
+        {{ if $index }},{{ end }}"{{ $class }}"
+        {{- end }}
+    ],
+    plugins: [],
+}