Reflex supports Tailwind CSS through a plugin system that provides better control and supports multiple Tailwind versions.
The recommended way to use Tailwind CSS is through the plugin system:
You can customize the Tailwind configuration by passing a config dictionary to the plugin:
Reflex supports both Tailwind CSS v3 and v4:
- TailwindV4Plugin: The recommended choice for new projects. Includes the latest features and performance improvements and is used by default in new Reflex templates.
- TailwindV3Plugin: Still supported for existing projects. Use this if you need compatibility with older Tailwind configurations.
All Tailwind configuration options are supported.
You can use any of the utility classes under the class_name prop:
To disable Tailwind in your project, simply don't include any Tailwind plugins in your configuration. This will prevent Tailwind styles from being applied to your application.
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:
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.
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:
The bg-background class uses the --background variable (defined in the CSS file), which will be applied as the background color.
You can style a component based of a condition using rx.cond or rx.match.
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.
For example, this won't work correctly because the class names are defined in the state:
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.
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.