Use tailwind cli to compile css instead of tailwind cdn (#132)

* implement feature
* use npm instead of cli

.gitignore

@@ -109,4 +109,7 @@ dmypy.json
 
 .venv
 
-.pytest_logs.log
+.pytest_logs.log
+
+
+node_modules

CONTRIBUTING.md

@@ -26,6 +26,12 @@ Some useful scripts are in the `scripts` directory. If you run Linux (or WSL und
 
 You can also run these commands manually on Windows:
 
+##### Compiling css
+
+To compile tailwind css styles for the pages you need the NodeJS and NPM installed.
+
+You can run the `npm run css` script to generate the css once and you can run the `npm run css:watch` to recompile the css every time the templates change
+
 ##### Check
 ```
 uv run ruff check

custom_components/auth_oidc/endpoints/injected_auth_page.py

@@ -74,6 +74,11 @@ async def frontend_injection(hass: HomeAssistant, sso_name: str) -> None:
                 "/auth/oidc/static/injection.js",
                 hass.config.path("custom_components/auth_oidc/static/injection.js"),
                 cache_headers=False,
+            ),
+            StaticPathConfig(
+                "/auth/oidc/static/style.css",
+                hass.config.path("custom_components/auth_oidc/static/style.css"),
+                cache_headers=False,
             )
         ]
     )

custom_components/auth_oidc/static/input.css

@@ -0,0 +1,3 @@
+@import "tailwindcss";
+
+@source "../views/templates";

custom_components/auth_oidc/views/templates/base.html

@@ -6,7 +6,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{% block title %}{% endblock %}</title>
-    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="/auth/oidc/static/style.css">
     {% endblock %}
 </head>
 
@@ -16,4 +16,4 @@
     </div>
 </body>
 
-</html>
+</html>

package.json

@@ -0,0 +1,11 @@
+{
+  "name": "hass-oidc-auth",
+  "scripts": {
+    "css": "tailwindcss -i ./custom_components/auth_oidc/static/input.css -o ./custom_components/auth_oidc/static/style.css --minify",
+    "css:watch": "tailwindcss -i ./custom_components/auth_oidc/static/input.css -o ./custom_components/auth_oidc/static/style.css --watch --minify"
+  },
+  "dependencies": {
+    "@tailwindcss/cli": "^4.1.14",
+    "tailwindcss": "^4.1.14"
+  }
+}