Add mode: 'jit', to your tailwind.config.js in order w-[405px] works. I think other classes is working you just didn't noticed it or maybe conflict on other styles in your div.

We use tailwind at work, not something I'm super in love with but if we're adding tailwind classes that haven't been used in the document yet we have to do it locally for the compiler to add the new classes to your document.

Unsure if this is the only way to do it as its fairly new to us, but if you bring your project to a local environment and use the command

npm run watch

it will signal to tailwind to watch your class names and add the new ones to the compiled list. so if your making custom ones using [] its likely that tailwind hasn't addded those instances to the minified version of their css

For real I dont find how to resolve it. But in my case I just added the same classes to component and after it tailwind started to see it. If someone knows why exact its happening Im still waiting for any ideas