Remix isn't updating classes that are related to custom colors on rebuild.

[madjid123]

Hello everyone, I just ran into an issue while working with Tailwind and Remix. I am trying to implement the multiple themes feature in my app using Tailwind custom colors, but I am having a problem while modifying the class variables. Remix doesn't update the color, and the class doesn't have any effect on the styling of my app. For example, if I have a custom palette called primary_blue after starting the dev server, the class bg-primary_blue-500 is working fine, but when I modify it to something like bg-primary_blue-200 the class gets dismissed, and remix or tailwind ignore it.

• Here is my tailwind.config.ts file:

import type { Config } from 'tailwindcss'

import { pallettes } from "./themes/pallettes"
const colors = require("tailwindcss/colors")
export default {
  content: [
    "./app/**/*.{js,jsx,ts,tsx}",
    "./components/**/*.{js,jsx,ts,tsx}",
    // "./themes/**/*.{js,jsx,ts,tsx}",
    // "./**/*.{js,jsx,ts,tsx}"
    // "./providers/**/*.{js,jsx,ts,tsx}",
  ],

  theme: {
    extend: {
      colors: {
        // ...pallettes,
        primary_blue: {
          100: "#d1e9ff",
          200: "#a3d3ff",
          300: "#74bcff",
          400: "#46a6ff",
          500: "#1890ff",
          600: "#1373cc",
          700: "#0e5699",
          800: "#0a3a66",
          900: "#051d33"
        },
        // ...colors
      }
    }
  
  },

  darkMode: ["class"],
  plugins: []
} satisfies Config

• and my remix.config.js :

/** @type {import('@remix-run/dev').AppConfig} */
const { flatRoutes, routeExtensions } = require("remix-custom-routes")
const path = require("path")
module.exports = {

  // ignoredRouteFiles: ["**/.*", "*.css"],
  watchPaths: ["components", "providers", "context"],

  ignoredRouteFiles: ["routes/.*",
    // "*.css"
  ],
  async routes() {
    const appDirectory = path.join(__dirname, "app")

    return routeExtensions(appDirectory)
  },

  serverModuleFormat: "cjs",
};

[kiliman]

Here's a Stack Blitz that works for me. You can edit the tailwind classes, and it updates automatically in the preview.

https://stackblitz.com/edit/remix-run-remix-47vedp?file=app%2Froutes%2F_index.tsx

[madjid123]

Hello, @kiliman Thanks for this nice demonstration. I copied most of your configuration files, including package.js, entry.server.tsx, and Styles CSS modules. However, I was unable to identify the problem with my project or determine whether employing ESM rather than CJS would resolve the issue. If that's the case, I can't use ESM modules due to several dependencies that do not support ESM out of the box.