I'm trying to replace all require statements with import, per my linter rules. First thing I did was change package/config/tailwind.config.js to tailwind.config.ts. Likewise in my application, I also changed to tailwind.config.ts. I then changed postcss.config.cjs to postcss.config.cts in the application and am using import statements. However, when I run the app, the styles are no longer applied. There's an error in the console saying that the tailwind content is empty, so it appears the configs are not being imported properly. Below are examples of each file.

package/config/tailwind.config.ts

import colors from 'tailwindcss/colors';

export default {
  content: [`./src/**/*.{js,ts,jsx,tsx}`],
  theme: {
    extend: {
      colors: {
        brandblue: colors.blue[500],
        brandred: colors.red[500],
      },
    },
  },
  plugins: [],
};

apps/client/tailwind.config.ts

import 'config/tailwind.config';

app/client/postcss.config.cts

import config from 'config/tailwind.config';
export default {
  plugins: {
    tailwindcss: { config },
    autoprefixer: {},
  },
};

Through googling, I've seen mention of using modules like postcss-config-loader, however, I could not get it to work. I'm not using a webpack config file or anything either. Any help would be appreciated.