feat: setup Tailwind.css

.gitignore

@@ -1,12 +1,9 @@
-# Generated by Cargo
-# will have compiled files and executables
 /target/
 /dist/
 /static/
 /.dioxus/
+/node_modules/
 
-# this file will generate by tailwind:
 /assets/tailwind.css
 
-# These are backup files generated by rustfmt
 **/*.rs.bk

README.md

@@ -1,17 +0,0 @@
-# Development
-
-1. Install npm: https://docs.npmjs.com/downloading-and-installing-node-js-and-npm
-2. Install the tailwind css cli: https://tailwindcss.com/docs/installation
-3. Run the following command in the root of the project to start the tailwind CSS compiler:
-
-```bash
-npx tailwindcss -i ./input.css -o ./assets/tailwind.css --watch
-```
-
-Run the following command in the root of the project to start the Dioxus dev server:
-
-```bash
-dx serve --hot-reload
-```
-
-- Open the browser to http://localhost:8080

assets/main.css

@@ -1,40 +0,0 @@
-body {
-    background-color: #111216;
-}
-
-#main {
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
-}
-
-#links {
-    width: 400px;
-    text-align: left;
-    font-size: x-large;
-    color: white;
-    display: flex;
-    flex-direction: column;
-}
-
-#links a {
-    color: white;
-    text-decoration: none;
-    margin-top: 20px;
-    margin: 10px;
-    border: white 1px solid;
-    border-radius: 5px;
-    padding: 10px;
-}
-
-#links a:hover {
-    background-color: #1f1f1f;
-    cursor: pointer;
-}
-
-#header {
-    max-width: 1200px;
-}

assets/styles/.gitignore

@@ -0,0 +1 @@
+tailwind_output.css

input.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

package.json

@@ -0,0 +1,9 @@
+{
+  "dependencies": {
+    "tailwindcss": "^3.4.6"
+  },
+  "scripts": {
+    "build": "tailwindcss -i src/styles/tailwind.css -o assets/styles/tailwind_output.css",
+    "watch": "npm run build -- --watch"
+  }
+}

src/styles/tailwind.css

@@ -0,0 +1,6 @@
+/*noinspection CssInvalidAtRule*/
+@tailwind base;
+/*noinspection CssInvalidAtRule*/
+@tailwind components;
+/*noinspection CssInvalidAtRule*/
+@tailwind utilities;