Running into module errors when installing tailwinds

[xn1cklas]

First time starting a remix project. Wanted to use tailwindcss with remix and ran into this project.

I followed this guide for installation: https://tailwindcss.com/docs/guides/remix

✘ [ERROR] Build failed with 1 error:
app/root.tsx:11:19: ERROR: [plugin: css-file] module is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and '/Users/my-remix-app/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension. [plugin css-bundle-plugin]

    app/root.tsx:20:30:
      20 │ import { cssBundleHref } from "@remix-run/css-bundle";
         ╵                               ~~~~~~~~~~~~~~~~~~~~~~~


✘ [ERROR] module is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and '/Users/my-remix-app/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension. [plugin css-file]

    app/root.tsx:22:19:
      22 │ import styles from "./tailwind.css";
         ╵                    ~~~~~~~~~~~~~~~~

[seamus-mcd]

Try making sure you use "export default {config}" instead of "module.exports = {config}" for every config file in the root of your project

[tyler-dot-earth]

@nsquaredotone did you figure this out? I'm having a similar issue.

[tyler-dot-earth]

Hold up, I think I figured it out! My remix v1 blues stack had a compiled tailwind file at app/styles/tailwind.css, but newer Blues Stack has a not-compiled tailwind file at app/tailwind.css with the contents:

@tailwind base;
@tailwind components;
@tailwind utilities;

and then my app/root.tsx file needed to have its css import update to point at app/tailwind.css (NOT ❌app/styles/tailwind.css❌)