issue #3713 (#1257)

Co-authored-by: pourhakimi <[email protected]>

Author: LineIndent

docs/styling/custom-stylesheets.md

@@ -33,6 +33,111 @@ Without a leading slash the path is considered relative to the current page rout
 not work for routes containing more than one path component, like `/blog/my-cool-post`.
 ```
 
+
+## Styling with CSS
+
+You can use CSS variables directly in your Reflex app by passing them alongside the appropriae props. Create a `style.css` file inside the `assets` folder with the following lines:
+
+```css
+:root {
+    --primary-color: blue;
+    --accent-color: green;
+}
+```
+
+Then, after referencing the CSS file within the `stylesheets` props of `rx.App`, you can access the CSS props directly like this
+
+```python
+app = rx.App(
+    theme=rx.theme(appearance="light"),
+    stylesheets=["/style.css"],
+)
+app.add_page(
+    rx.center(
+        rx.text("CSS Variables!"),
+        width="100%",
+        height="100vh",
+        bg="var(--primary-color)",
+    ),
+    "/",
+)
+```
+
+## Styling with Tailwind
+
+You can integrate custom Tailwind themes within your Reflex app as well. The setup process is similar to the CSS Styling method mentioned above, with only a few minor variations.
+
+Begin by creating a CSS file inside your `assets` folder. Inside the CSS file, include the following Tailwind directives:
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: blue;
+  --foreground: green;
+}
+
+.dark {
+  --background: darkblue;
+  --foreground: lightgreen;
+}
+```
+
+We define a couple of custom CSS variables (--background and --foreground) that will be used throughout your app for styling. These variables can be dynamically updated based on the theme.
+
+Tailwind defaults to light mode, but to handle dark mode, you can define a separate set of CSS variables under the .dark class. 
+
+Tailwind Directives (@tailwind base, @tailwind components, @tailwind utilities): These are essential Tailwind CSS imports that enable the default base styles, components, and utility classes.
+
+Next, you'll need to configure Tailwind in your `rxconfig.py` file to ensure that the Reflex app uses your custom Tailwind setup.
+
+```python
+import reflex as rx
+
+tailwind_config = {
+    "plugins": ["@tailwindcss/typography"],
+    "theme": {
+        "extend": {
+            "colors": {
+                "background": "var(--background)",
+                "foreground": "var(--foreground)"
+            },
+        }
+    },
+}
+
+config = rx.Config(
+    app_name="app",
+    tailwind=tailwind_config,
+)
+```
+
+In the theme section, we're extending the default Tailwind theme to include custom colors. Specifically, we're referencing the CSS variables (--background and --foreground) that were defined earlier in your CSS file.
+
+The rx.Config object is used to initialize and configure your Reflex app. Here, we're passing the tailwind_config dictionary to ensure Tailwind's custom setup is applied to the app.
+
+Finally, to apply your custom styles and Tailwind configuration, you need to reference the CSS file you created in your `assets` folder inside the `rx.App` setup. This will allow you to use the custom properties (variables) directly within your Tailwind classes.
+
+In your `app.py` (or main application file), make the following changes:
+
+```python
+app = rx.App(
+    theme=rx.theme(appearance="light"),
+    stylesheets=["/style.css"],
+)
+app.add_page(
+    rx.center(
+        rx.text("Tailwind & Reflex!"),
+        class_name="bg-background w-full h-[100vh]",
+    ),
+    "/",
+)
+```
+
+The bg-background class uses the --background variable (defined in the CSS file), which will be applied as the background color. 
+
 ## Fonts
 
 You can take advantage of Reflex's support for custom stylesheets to add custom fonts to your app.