|
| 1 | +```python exec |
| 2 | +import reflex as rx |
| 3 | +from pcweb.pages.docs import library |
| 4 | + |
| 5 | +``` |
| 6 | + |
| 7 | +# Tailwind |
| 8 | + |
| 9 | +Reflex supports [Tailwind CSS]({"https://tailwindcss.com/"}) out of the box. To enable it, pass in a dictionary for the `tailwind` argument of your `rxconfig.py`: |
| 10 | + |
| 11 | +```python |
| 12 | +import reflex as rx |
| 13 | + |
| 14 | +config = rx.Config( |
| 15 | + app_name="myapp", |
| 16 | + tailwind=\{}, |
| 17 | +) |
| 18 | +``` |
| 19 | + |
| 20 | +All Tailwind configuration options are supported. Plugins and presets are automatically wrapped in `require()`: |
| 21 | + |
| 22 | +```python |
| 23 | +config = rx.Config( |
| 24 | + app_name="app", |
| 25 | + tailwind={ |
| 26 | + "plugins": ["@tailwindcss/typography"], |
| 27 | + }, |
| 28 | +) |
| 29 | +``` |
| 30 | + |
| 31 | +You can use any of the [utility classes]({"https://tailwindcss.com/docs/utility-first"}) under the `class_name` prop: |
| 32 | + |
| 33 | +```python demo |
| 34 | +rx.box( |
| 35 | + "Hello World", |
| 36 | + class_name="text-4xl text-center text-blue-500", |
| 37 | +) |
| 38 | +``` |
| 39 | + |
| 40 | +### Disabling Tailwind |
| 41 | + |
| 42 | +If you want to disable Tailwind in your configuration, you can do so by setting the `tailwind` config to `None`. This can be useful if you need to temporarily turn off Tailwind for your project: |
| 43 | + |
| 44 | +```python |
| 45 | +config = rx.Config(app_name="app", tailwind=None) |
| 46 | +``` |
| 47 | + |
| 48 | +With this configuration, Tailwind will be disabled, and no Tailwind styles will be applied to your application. |
| 49 | + |
| 50 | + |
| 51 | +## Custom theme |
| 52 | + |
| 53 | +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. |
| 54 | + |
| 55 | +Begin by creating a CSS file inside your `assets` folder. Inside the CSS file, include the following Tailwind directives: |
| 56 | + |
| 57 | +```css |
| 58 | +@tailwind base; |
| 59 | +@tailwind components; |
| 60 | +@tailwind utilities; |
| 61 | + |
| 62 | +:root { |
| 63 | + --background: blue; |
| 64 | + --foreground: green; |
| 65 | +} |
| 66 | + |
| 67 | +.dark { |
| 68 | + --background: darkblue; |
| 69 | + --foreground: lightgreen; |
| 70 | +} |
| 71 | +``` |
| 72 | + |
| 73 | +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. |
| 74 | + |
| 75 | +Tailwind defaults to light mode, but to handle dark mode, you can define a separate set of CSS variables under the .dark class. |
| 76 | + |
| 77 | +Tailwind Directives (@tailwind base, @tailwind components, @tailwind utilities): These are essential Tailwind CSS imports that enable the default base styles, components, and utility classes. |
| 78 | + |
| 79 | +Next, you'll need to configure Tailwind in your `rxconfig.py` file to ensure that the Reflex app uses your custom Tailwind setup. |
| 80 | + |
| 81 | +```python |
| 82 | +import reflex as rx |
| 83 | + |
| 84 | +tailwind_config = { |
| 85 | + "plugins": ["@tailwindcss/typography"], |
| 86 | + "theme": { |
| 87 | + "extend": { |
| 88 | + "colors": { |
| 89 | + "background": "var(--background)", |
| 90 | + "foreground": "var(--foreground)" |
| 91 | + }, |
| 92 | + } |
| 93 | + }, |
| 94 | +} |
| 95 | + |
| 96 | +config = rx.Config( |
| 97 | + app_name="app", |
| 98 | + tailwind=tailwind_config, |
| 99 | +) |
| 100 | +``` |
| 101 | + |
| 102 | +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. |
| 103 | + |
| 104 | +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. |
| 105 | + |
| 106 | +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. |
| 107 | + |
| 108 | +In your `app.py` (or main application file), make the following changes: |
| 109 | + |
| 110 | +```python |
| 111 | +app = rx.App( |
| 112 | + theme=rx.theme(appearance="light"), |
| 113 | + stylesheets=["/style.css"], |
| 114 | +) |
| 115 | +app.add_page( |
| 116 | + rx.center( |
| 117 | + rx.text("Tailwind & Reflex!"), |
| 118 | + class_name="bg-background w-full h-[100vh]", |
| 119 | + ), |
| 120 | + "/", |
| 121 | +) |
| 122 | +``` |
| 123 | + |
| 124 | +The bg-background class uses the --background variable (defined in the CSS file), which will be applied as the background color. |
| 125 | + |
| 126 | +## Dynamic Styling |
| 127 | + |
| 128 | +You can style a component based of a condition using `rx.cond` or `rx.match`. |
| 129 | + |
| 130 | +```python demo exec |
| 131 | +class TailwindState(rx.State): |
| 132 | + active = False |
| 133 | + |
| 134 | + @rx.event |
| 135 | + def toggle_active(self): |
| 136 | + self.active = not self.active |
| 137 | + |
| 138 | +def tailwind_demo(): |
| 139 | + return rx.el.div( |
| 140 | + rx.el.button( |
| 141 | + "Click me", |
| 142 | + on_click=TailwindState.toggle_active, |
| 143 | + class_name=( |
| 144 | + "px-4 py-2 text-white rounded-md", |
| 145 | + rx.cond( |
| 146 | + TailwindState.active, |
| 147 | + "bg-red-500", |
| 148 | + "bg-blue-500", |
| 149 | + ), |
| 150 | + ), |
| 151 | + ), |
| 152 | + ) |
| 153 | +``` |
| 154 | + |
| 155 | +## Using Tailwind Classes from the State |
| 156 | + |
| 157 | +When using Tailwind with Reflex, it's important to understand that class names must be statically defined in your code for Tailwind to properly compile them. If you dynamically generate class names from state variables or functions at runtime, Tailwind won't be able to detect these classes during the build process, resulting in missing styles in your application. |
| 158 | + |
| 159 | +For example, this won't work correctly because the class names are defined in the state: |
| 160 | + |
| 161 | +```python demo exec |
| 162 | +class TailwindState(rx.State): |
| 163 | + active = False |
| 164 | + |
| 165 | + @rx.var |
| 166 | + def button_class(self) -> str: |
| 167 | + return "bg-accent" if self.active else "bg-secondary" |
| 168 | + |
| 169 | + @rx.event |
| 170 | + def toggle_active(self): |
| 171 | + self.active = not self.active |
| 172 | + |
| 173 | +def tailwind_demo(): |
| 174 | + return rx.el.button( |
| 175 | + f"Click me: {TailwindState.active}", |
| 176 | + class_name=TailwindState.button_class, |
| 177 | + on_click=TailwindState.toggle_active, |
| 178 | + ) |
| 179 | +``` |
| 180 | + |
| 181 | +## Using Tailwind with Reflex Core Components |
| 182 | + |
| 183 | +Reflex core components are built on Radix Themes, which means they come with pre-defined styling. When you apply Tailwind classes to these components, you may encounter styling conflicts or unexpected behavior as the Tailwind styles compete with the built-in Radix styles. |
| 184 | + |
| 185 | +For the best experience when using Tailwind CSS in your Reflex application, we recommend using the lower-level `rx.el` components. These components don't have pre-applied styles, giving you complete control over styling with Tailwind classes without any conflicts. Check the list of HTML components [here]({library.other.html.path}). |
| 186 | + |
0 commit comments