Solving the Radix Integration Issue in Next.js

I am Leo Hoang. Currently, I am working on my next startup project: Workodoro. While working with the Workodoro application, I encountered an issue integrating Radix into Next.js.

From version 13.0 to 14.1, Next.js has an issue with the import order of CSS files in app/**/layout.tsx. This can result in Radix Themes overwriting your custom styles, even when the import statements are correctly structured:

import '@radix-ui/themes/styles.css';
import './my-styles.css';

This problem can occur sporadically, affecting either development or production environments, leading to inconsistencies. Fortunately, there are effective solutions to ensure your styles are applied as intended.

Solution

Merging CSS Files with postcss-import

The most reliable method is to merge all CSS into a single file using the postcss-import plugin. This approach ensures a consistent import order by consolidating all your styles into one unified file.

Step-by-Step Guide:

1. Install postcss-import: First, install the postcss-import plugin:

npm install postcss-import

2. Configure postcss.config.js: Add postcss-import to your postcss.config.js file:

module.exports = {
  plugins: {
    "postcss-import": {},
    tailwindcss: {},
    autoprefixer: {},
  },
};

3. Update Your CSS File: Import Tailwind's base styles first, followed by Radix Themes, and then your components and utilities:

@import "tailwindcss/base";
@import "@radix-ui/themes/styles.css";

@tailwind components;
@tailwind utilities;

This setup ensures that Tailwind’s base styles load first, followed by Radix Themes, and then your custom components and utilities, maintaining a proper and predictable order.

Conclusion

These brief notes hope to help someone facing a similar issue save time.

About Workodoro

This project focuses on solving time management issues and increasing individual work efficiency in an era of distractions. The application is in the development stage, so if you don't mind trying it out, you can visit beta.workodoro.com or app.workodoro.com, or follow us on Twitter and join our Slack to provide feedback.