Difference between config.tailwind.cjs and config.tailwind.js

[MacelinCane]

Hi, we're starting a rebuild of an old project. This will be our third large platform in Laravel, but the first using TW and Vite. Myself and my 3 member team have 35 years of coding experience between us, so we're not newbs, but this is kind of baffling.
We are having some configuration problems, and they may mostly be confusion about conflicting docs.
When referencing Tailwindcss.com everything references the congif.tailwind.JS file (caps for focus).
But in Tailwinds Elements, for example, they reference their stuff being added to that file, but if using Vite, which we are, that there is new stuff that needs to be added to a config.taildwind.CJS file.
They state that npx tailwindcss init -p will create tailwind.config.cjs file, but it does not. It's starting to seem that these two files are actually the same file, though referenced in docs as if they are different. Is there a difference? And if so, how do we fix that the CJS file is not being created?
Is there a source of clarity on this someone can point a finger to?
It's also possible we're missing something else, though we've carefully followed all the instructions for TW, Vite and TWE.
Thanks

[MacelinCane]

For what it's worth, we've also had to wrap TWE scripts (like Sidenav) in additional code to prevent loading it until after the page finishes loading. This is needed to stop errors from variables coming back as undefined.

[juujisai]

Hi! If there are no errors, the IDE or console doesn't throw messages about using commonJS / require not beeing defined then it's fine. I can see that the npx tailwindcss init -p created a .js file for me and it's working as it should, so we will most likely update the description soon. .cjs extension may be needed when we define the type inside the package.json as a module but it looks like it's not needed here in vite now.

As of the scripts needed to be wrapped in additional code, it's hard for me to say, because I just created a new app with use of the Getting Started / Vite guide, and it doesn't throws errors for me. What stack are you using? What type is the the script you are using to import the TW Elements package? Im using it inside the main.js => <script type="module" src="/main.js"></script>

[MacelinCane]

Hi, and thanks.
It's a Laravel, LAMP stack.
The startup steps created a .js file for us too, and things started to work, and then we had, for example, Uncaught ReferenceError: Sidenav is not defined when adding this example: https://tw-elements.com/previews/sidenav/sidenav-2/.
Its the 2nd Full Screen Demo shown here: https://tw-elements.com/docs/standard/navigation/sidenav/
I should mention we had added the import and initTE lines as instructed.
But we also had to add window.Sidenav = Sidenav to that app.js file and we had to wrap the script inserted on our menu page in

document.addEventListener('DOMContentLoaded', function () {  
   // code for Sidenav2 here 
}

Our app.js gets inserted via @vite('resources/js/app.js') rather than <script type="module" src="/main.js"></script> so we're sort of wondering if the missing module type attribute is causing us grief.

[juujisai]

I think that the missing type="module" may be the cause for that because I've had a similar issue before.

From what I can read here: https://laravel.com/docs/10.x/vite#loading-your-scripts-and-styles the script using @vite directive is beeing added to the head so the content is not fully loaded yet and errors in the console may be visible.

[MacelinCane]

Right., We thought that too. but vite seems to be building the script itself with that module type in place. This is what ours looks like.

it's kind of strange.

[juujisai]

But the tw-elements package is in the head element right? I think the only way for it to work then is to wrap the js code in a wrapper with DOMContentLoaded event then.

[MacelinCane]

Yep,
That's what we needed to do. It was just confusing that we needed to. Us and everyone using our setup. We thought we must be doing something wrong, but I guess it's just the way it is...
Thanks for the help!

[AJBrownson]

@juujisai hello
I'm using tw-elements and it's throwing errors that say module and require are not defined in the tailwind.config.js file
Don't know if it is just me or it's general
I'm using Vite

[juujisai]

Hi @AJBrownson ! You can either try to change the tailwind.config.js file extension from .js to .cjs or use import/export declarations

/** @type {import('tailwindcss').Config} */
const config = {
  content: [
    "./index.html",
    "./src/**/*.{html,js}",
    "./node_modules/tw-elements/dist/js/**/*.js",
  ],
  plugins: [require("tw-elements/dist/plugin.cjs")],
  darkMode: "class",
};

export default config;