diff --git a/.gitignore b/.gitignore
index 11129db..a397892 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
/.direnv/
/.go/
*~
-*_templ.go
\ No newline at end of file
+*_templ.go
+static/output.css
diff --git a/Makefile b/Makefile
index ca525d8..73ba7c1 100644
--- a/Makefile
+++ b/Makefile
@@ -8,8 +8,16 @@ GENERATED_FILES := $(TEMPL_FILES:.templ=_templ.go)
$(GENERATED_FILES): $(TEMPL_FILES)
templ generate
-# Run task depends on the generated files
-run: $(GENERATED_FILES)
+TAILWIND_CONFIG := tailwind.config.js
+INPUT_CSS := input.css
+OUTPUT_CSS := static/output.css
+
+# generate tailwindcss output
+$(OUTPUT_CSS): $(TEMPL_FILES) $(TAILWIND_CONFIG) $(INPUT_CSS)
+ tailwindcss -i $(INPUT_CSS) -o $(OUTPUT_CSS)
+
+# Run the server, with dependencies on templ and tailwind generation
+run: $(GENERATED_FILES) $(OUTPUT_CSS)
go run .
# this uses wgo to re-execute 'make run'
diff --git a/flake.nix b/flake.nix
index 05cdf9e..b998fb7 100644
--- a/flake.nix
+++ b/flake.nix
@@ -5,15 +5,23 @@ rec {
flake-utils.url = "github:numtide/flake-utils";
templ.url = "github:a-h/templ";
};
-
+
outputs = { self, nixpkgs, flake-utils, templ }:
flake-utils.lib.eachDefaultSystem (system:
- let pkgs = nixpkgs.legacyPackages.${system};
- templPkg = templ.packages.${system}.templ;
+ let
+ pkgs = nixpkgs.legacyPackages.${system};
+ templPkg = templ.packages.${system}.templ;
in {
devShells.default = pkgs.mkShell {
- buildInputs =
- [ pkgs.go pkgs.wgo pkgs.semgrep pkgs.gopls pkgs.gnumake templPkg ];
+ buildInputs = [
+ pkgs.go
+ pkgs.wgo
+ pkgs.semgrep
+ pkgs.gopls
+ pkgs.gnumake
+ templPkg
+ pkgs.tailwindcss
+ ];
shellHook = ''
export GOPATH=$PWD/.go
export PATH=$GOPATH/bin:$PATH
diff --git a/hello.templ b/hello.templ
index 644efd9..7087105 100644
--- a/hello.templ
+++ b/hello.templ
@@ -4,7 +4,13 @@ var myVar string = "some string, changed. and more"
var anotherVar string = "hoho, cool"
templ hello(name string) {
- Hello, {name}. referencing var: {myVar}
+
+
+ This is the title of the webpage!
+
+
+
+ This is an example paragraph. Anything in the body tag will appear on the page, just like this p tag and its contents.
+
+
}
-
-
diff --git a/input.css b/input.css
new file mode 100644
index 0000000..b5c61c9
--- /dev/null
+++ b/input.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/main.go b/main.go
index 68d9e1e..4798966 100644
--- a/main.go
+++ b/main.go
@@ -11,6 +11,9 @@ func main() {
http.Handle("/", templ.Handler(component))
+ staticFs := http.FileServer(http.Dir("./static"))
+ http.Handle("/static/", http.StripPrefix("/static/", staticFs))
+
fmt.Println("starting to serve on :3000")
http.ListenAndServe(":3000", nil)
}
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..6eb134e
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: ["./**/*.templ"],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+}
+