Troubleshooting

Common issues and how to resolve them.

Enforcing light or dark mode

By default, TailwindCSS determines the color scheme based on the system's prefers-color-scheme setting. As a result, Fluxon components automatically switch between light and dark styles based on your system preferences.

However, you may want to enforce a specific color scheme regardless of system settings. To achieve this, you first need to configure TailwindCSS to use the selector strategy for dark mode implementation:

js tailwind.config.js

module.exports = {
  darkMode: "selector",
  // ...
};

With this configuration, dark styles will only be applied when a dark class is present in the HTML element. This gives you full control over the color scheme:

To enforce light mode: simply use the configuration above without adding any classes
To enforce dark mode: use the configuration above and add the dark class to your HTML element (<html class="dark">)

Duplicated input outlines

If you notice that Fluxon input components have double outlines, this is likely caused by the require("@tailwindcss/forms") TailwindCSS plugin.

Since Fluxon form elements are styled independently and don't rely on this plugin, having both will result in conflicting styles. To resolve this, simply remove it from your tailwind.config.js file.

js tailwind.config.js

plugins: [
  require('@tailwindcss/typography'),
  // ...
]

Antialiased text

For improved font rendering, consider adding the antialiased class to your <body> tag. While this is a subtle enhancement and ultimately a matter of preference, it can make text appear smoother and more polished across your application.