tailwindcss v4 support

cmd/program/program.go

@@ -421,18 +421,6 @@ func (p *Project) CreateMainFile() error {
 		// select htmx option automatically since tailwind is selected
 		p.AdvancedOptions[string(flags.Htmx)] = true
 
-		tailwindConfigFile, err := os.Create(fmt.Sprintf("%s/tailwind.config.js", projectPath))
-		if err != nil {
-			return err
-		}
-		defer tailwindConfigFile.Close()
-
-		tailwindConfigTemplate := advanced.TailwindConfigTemplate()
-		err = os.WriteFile(fmt.Sprintf("%s/tailwind.config.js", projectPath), tailwindConfigTemplate, 0o644)
-		if err != nil {
-			return err
-		}
-
 		err = os.MkdirAll(fmt.Sprintf("%s/%s/assets/css", projectPath, cmdWebPath), 0o755)
 		if err != nil {
 			return err
@@ -891,25 +879,16 @@ func (p *Project) CreateViteReactProject(projectPath string) error {
 		cmd := exec.Command("npm", "install",
 			"--prefer-offline",
 			"--no-fund",
-			"tailwindcss", "postcss", "autoprefixer")
+			"tailwindcss", "@tailwindcss/vite")
 		cmd.Stdout = os.Stdout
 		cmd.Stderr = os.Stderr
 		if err := cmd.Run(); err != nil {
 			return fmt.Errorf("failed to install Tailwind: %w", err)
 		}
 
-		fmt.Println("Initializing Tailwind...")
-		cmd = exec.Command("npx", "--prefer-offline", "tailwindcss", "init", "-p")
-		cmd.Stdout = os.Stdout
-		cmd.Stderr = os.Stderr
-		if err := cmd.Run(); err != nil {
-			return fmt.Errorf("failed to initialize Tailwind: %w", err)
-		}
-
-		// use the tailwind config file
-		err = os.WriteFile("tailwind.config.js", advanced.ReactTailwindConfigTemplate(), 0644)
-		if err != nil {
-			return fmt.Errorf("failed to write tailwind config: %w", err)
+		// Create the vite + react + Tailwind v4 configuration
+		if err := os.WriteFile(filepath.Join(frontendPath, "vite.config.ts"), advanced.ViteTailwindConfigFile(), 0644); err != nil {
+			return fmt.Errorf("failed to write vite.config.ts: %w", err)
 		}
 
 		srcDir := filepath.Join(frontendPath, "src")

cmd/template/advanced/files/docker/dockerfile.tmpl

@@ -16,7 +16,7 @@ RUN go install github.com/a-h/templ/cmd/templ@latest && \
 {{- end}}
 
 {{- if .AdvancedOptions.tailwind}}
-    curl -sL https://github.com/tailwindlabs/tailwindcss/releases/download/v3.4.10/tailwindcss-linux-x64 -o tailwindcss && \
+    curl -sL https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-x64 -o tailwindcss && \
     chmod +x tailwindcss && \
     ./tailwindcss -i cmd/web/styles/input.css -o cmd/web/assets/css/output.css
 {{- end }}

cmd/template/advanced/files/react/tailwind/index.css.tmpl

@@ -1,3 +1 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";

cmd/template/advanced/files/react/tailwind/vite.config.ts.tmpl

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(),tailwindcss()],
+})

cmd/template/advanced/files/tailwind/input.css.tmpl

@@ -1,3 +1 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss"

cmd/template/advanced/routes.go

@@ -10,15 +10,12 @@ var helloTemplTemplate []byte
 //go:embed files/htmx/base.templ.tmpl
 var baseTemplTemplate []byte
 
-//go:embed files/tailwind/tailwind.config.js.tmpl
-var tailwindConfigTemplate []byte
-
-//go:embed files/react/tailwind/tailwind.config.js.tmpl
-var reactTailwindConfigTemplate []byte
-
 //go:embed files/react/tailwind/index.css.tmpl
 var inputCssTemplateReact []byte
 
+//go:embed files/react/tailwind/vite.config.ts.tmpl
+var viteTailwindConfigFile []byte
+
 //go:embed files/react/tailwind/app.tsx.tmpl
 var reactTailwindAppFile []byte
 
@@ -119,14 +116,6 @@ func BaseTemplTemplate() []byte {
 	return baseTemplTemplate
 }
 
-func TailwindConfigTemplate() []byte {
-	return tailwindConfigTemplate
-}
-
-func ReactTailwindConfigTemplate() []byte {
-	return reactTailwindConfigTemplate
-}
-
 func ReactTailwindAppfile() []byte {
 	return reactTailwindAppFile
 }
@@ -139,6 +128,10 @@ func InputCssTemplateReact() []byte {
 	return inputCssTemplateReact
 }
 
+func ViteTailwindConfigFile() []byte {
+	return viteTailwindConfigFile
+}
+
 func InputCssTemplate() []byte {
 	return inputCssTemplate
 }

cmd/template/framework/files/makefile.tmpl

@@ -39,12 +39,12 @@ templ-install:
 {{- if and .AdvancedOptions.tailwind (not .AdvancedOptions.react) }}
 {{- if .OSCheck.UnixBased}}
 tailwind-install:
-	{{ if .OSCheck.linux }}@if [ ! -f tailwindcss ]; then curl -sL https://github.com/tailwindlabs/tailwindcss/releases/download/v3.4.10/tailwindcss-linux-x64 -o tailwindcss; fi{{- end }}
-	{{ if .OSCheck.darwin }}@if [ ! -f tailwindcss ]; then curl -sL https://github.com/tailwindlabs/tailwindcss/releases/download/v3.4.10/tailwindcss-macos-x64 -o tailwindcss; fi{{- end }}
+	{{ if .OSCheck.linux }}@if [ ! -f tailwindcss ]; then curl -sL https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-x64 -o tailwindcss; fi{{- end }}
+	{{ if .OSCheck.darwin }}@if [ ! -f tailwindcss ]; then curl -sL https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-x64 -o tailwindcss; fi{{- end }}
 	@chmod +x tailwindcss
 {{- else }}
 tailwind-install:
-	@if not exist tailwindcss.exe powershell -ExecutionPolicy Bypass -Command "Invoke-WebRequest -Uri 'https://github.com/tailwindlabs/tailwindcss/releases/download/v3.4.10/tailwindcss-windows-x64.exe' -OutFile 'tailwindcss.exe'"{{- end }}
+	@if not exist tailwindcss.exe powershell -ExecutionPolicy Bypass -Command "Invoke-WebRequest -Uri 'https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-windows-x64.exe' -OutFile 'tailwindcss.exe'"{{- end }}
 {{- end }}
 
 build:{{- if and .AdvancedOptions.tailwind (not .AdvancedOptions.react) }} tailwind-install{{- end }}{{- if and (or .AdvancedOptions.htmx .AdvancedOptions.tailwind) (not .AdvancedOptions.react) }} templ-install{{- end }}

docs/docs/advanced-flag/tailwind.md

@@ -3,6 +3,7 @@ Tailwind is closely coupled with the advanced HTMX flag, and HTMX will be automa
 We do not introduce outside dependencies automatically, and you need compile output.css (file is empty by default) with the Tailwind CLI tool.
 
 The project tree would look like this:
+
 ```bash
 / (Root)
 ├── cmd/
@@ -30,8 +31,7 @@ The project tree would look like this:
 ├── go.mod
 ├── go.sum
 ├── Makefile
-├── README.md
-└── tailwind.config.js
+└── README.md
 ```
 
 ## Standalone Tailwind CLI
@@ -41,6 +41,7 @@ The The idea is to avoid using Node.js and npm to build output.css.
 The Makefile will have entries for downloading and compiling CSS. It will automatically detect the OS and download the latest release from the [official repository](https://github.com/tailwindlabs/tailwindcss/releases).
 
 ## Linux Makefile Example
+
 ```bash
 all: build
 templ-install:
@@ -75,5 +76,3 @@ By default, simple CSS examples are included in the codebase.
 Update base.templ and hello.templ, then rerun templ generate to see the changes at the `localhost:PORT/web` endpoint.
 
 ![Tailwind](../public/tailwind.png)
-
-

docs/docs/index.md

@@ -2,11 +2,11 @@
 hide:
   - toc
 ---
+
 ## Go Blueprint - Ultimate Golang Blueprint Library
 
 ![logo](./public/logo.png)
 
-
 Powerful CLI tool designed to streamline the process of creating Go projects with a robust and standardized structure. Not only does Go Blueprint facilitate project initialization, but it also offers seamless integration with popular Go frameworks, allowing you to focus on your application's code from the very beginning.
 
 ## Why Choose Go Blueprint?
@@ -87,7 +87,6 @@ Here's an overview of the project structure created by Go Blueprint when all opt
 ├── .goreleaser.yml               # Configuration file for GoReleaser, a tool for building and releasing binaries.
 ├── go.sum                        # Go module file containing checksums for dependencies.
 ├── Makefile                      # Makefile for defining and running commands.
-├── tailwind.config.js            # Tailwind CSS configuration file for HTMX.
 └── README.md                     # Project's README file containing essential information about the project.
 
 ```