Onclick handler not working in remix and problem installing tailwindcss

[Iteratum]

Reproduction

Reproduction link: https://github.com/Iteratum/auctions
Steps:

• Fork repository
• Open in a text editor (preferably visual studio code)
• run with "npm run dev"

System Info

No routes matched location "/*@tailwind%20base;@tailwind%20components;@tailwind%20utilities;*//*Navigation*/" 
ErrorResponseImpl {
  status: 404,
  statusText: 'Not Found',
  internal: true,
  data: 'Error: No route matches URL "/*@tailwind%20base;@tailwind%20components;@tailwind%20utilities;*//*Navigation*/"',      
  error: Error: No route matches URL "/*@tailwind%20base;@tailwind%20components;@tailwind%20utilities;*//*Navigation*/"        
      at getInternalRouterError (C:\Users\LENOVO USER\CS50\commerce\auctions\auctions\node_modules\@remix-run\server-runtime\node_modules\@remix-run\router\dist\router.cjs.js:4529:59)
      at Object.query (C:\Users\LENOVO USER\CS50\commerce\auctions\auctions\node_modules\@remix-run\server-runtime\node_modules\@remix-run\router\dist\router.cjs.js:3359:19)
      at handleDocumentRequestRR (C:\Users\LENOVO USER\CS50\commerce\auctions\auctions\node_modules\@remix-run\server-runtime\dist\server.js:184:35)
      at requestHandler (C:\Users\LENOVO USER\CS50\commerce\auctions\auctions\node_modules\@remix-run\server-runtime\dist\server.js:108:24)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async nodeHandler (C:\Users\LENOVO USER\CS50\commerce\auctions\auctions\node_modules\@remix-run\dev\dist\vite\plugin.js:837:27)
      at async C:\Users\LENOVO USER\CS50\commerce\auctions\auctions\node_modules\@remix-run\dev\dist\vite\plugin.js:840:15     
}
09:36:15 [vite] hmr update /app/utility/navigation.tsx (x2)
Error: No route matches URL "/*@tailwind%20base;@tailwind%20components;@tailwind%20utilities;*//*Navigation*/"
    at getInternalRouterError (C:\Users\LENOVO USER\CS50\commerce\auctions\auctions\node_modules\@remix-run\server-runtime\node_modules\@remix-run\router\dist\router.cjs.js:4529:59)
    at Object.query (C:\Users\LENOVO USER\CS50\commerce\auctions\auctions\node_modules\@remix-run\server-runtime\node_modules\@remix-run\router\dist\router.cjs.js:3359:19)
    at handleDocumentRequestRR (C:\Users\LENOVO USER\CS50\commerce\auctions\auctions\node_modules\@remix-run\server-runtime\dist\server.js:184:35)
    at requestHandler (C:\Users\LENOVO USER\CS50\commerce\auctions\auctions\node_modules\@remix-run\server-runtime\dist\server.js:108:24)
    at async nodeHandler (C:\Users\LENOVO USER\CS50\commerce\auctions\auctions\node_modules\@remix-run\dev\dist\vite\plugin.js:837:27)
    at async C:\Users\LENOVO USER\CS50\commerce\auctions\auctions\node_modules\@remix-run\dev\dist\vite\plugin.js:840:15       
No routes matched location "/*@tailwind%20base;@tailwind%20components;@tailwind%20utilities;*//*Navigation*/" 
ErrorResponseImpl {
  status: 404,
  statusText: 'Not Found',
  internal: true,
  data: 'Error: No route matches URL "/*@tailwind%20base;@tailwind%20components;@tailwind%20utilities;*//*Navigation*/"',      
  error: Error: No route matches URL "/*@tailwind%20base;@tailwind%20components;@tailwind%20utilities;*//*Navigation*/"        
      at getInternalRouterError (C:\Users\LENOVO USER\CS50\commerce\auctions\auctions\node_modules\@remix-run\server-runtime\node_modules\@remix-run\router\dist\router.cjs.js:4529:59)
      at Object.query (C:\Users\LENOVO USER\CS50\commerce\auctions\auctions\node_modules\@remix-run\server-runtime\node_modules\@remix-run\router\dist\router.cjs.js:3359:19)
      at handleDocumentRequestRR (C:\Users\LENOVO USER\CS50\commerce\auctions\auctions\node_modules\@remix-run\server-runtime\dist\server.js:184:35)
      at requestHandler (C:\Users\LENOVO USER\CS50\commerce\auctions\auctions\node_modules\@remix-run\server-runtime\dist\server.js:108:24)
      at async nodeHandler (C:\Users\LENOVO USER\CS50\commerce\auctions\auctions\node_modules\@remix-run\dev\dist\vite\plugin.js:837:27)
      at async C:\Users\LENOVO USER\CS50\commerce\auctions\auctions\node_modules\@remix-run\dev\dist\vite\plugin.js:840:15     
}
09:38:03 [vite] hmr update /app/style.css
10:09:11 [vite] hmr update /app/utility/navigation.tsx
Error: No route matches URL "/*@tailwind%20base;@tailwind%20components;@tailwind%20utilities;*//*Navigation*/"
    at getInternalRouterError (C:\Users\LENOVO USER\CS50\commerce\auctions\auctions\node_modules\@remix-run\server-runtime\node_modules\@remix-run\router\dist\router.cjs.js:4529:59)
    at Object.query (C:\Users\LENOVO USER\CS50\commerce\auctions\auctions\node_modules\@remix-run\server-runtime\node_modules\@remix-run\router\dist\router.cjs.js:3359:19)
    at handleDocumentRequestRR (C:\Users\LENOVO USER\CS50\commerce\auctions\auctions\node_modules\@remix-run\server-runtime\dist\server.js:184:35)
    at requestHandler (C:\Users\LENOVO USER\CS50\commerce\auctions\auctions\node_modules\@remix-run\server-runtime\dist\server.js:108:24)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async nodeHandler (C:\Users\LENOVO USER\CS50\commerce\auctions\auctions\node_modules\@remix-run\dev\dist\vite\plugin.js:837:27)
    at async C:\Users\LENOVO USER\CS50\commerce\auctions\auctions\node_modules\@remix-run\dev\dist\vite\plugin.js:840:15

Used Package Manager

npm

Expected Behavior

I expected my tailwind styles to be applied but got an error.

Clicking on the toggle button is supposed toggle a list of nav elements.
Also, clicking on the button that says click was supposed to display a different text.

Actual Behavior

Am getting this error :
no route matches url "/@tailwind%20base;@tailwind%20components;@tailwind%20utilities".
Whenever I import and use links function to add stylesheet to the root file, the onclick handler stops working.

[corygibbons]

Your repo link is using vite so check out the instructions here:

• https://remix.run/docs/en/main/future/vite#enable-tailwind-via-postcss
• https://remix.run/docs/en/main/future/vite#fix-up-css-imports-referenced-in-links

[Iteratum]

Your repo link is using vite so check out the instructions here:

• https://remix.run/docs/en/main/future/vite#enable-tailwind-via-postcss
• https://remix.run/docs/en/main/future/vite#fix-up-css-imports-referenced-in-links

Fixed the issue of the onclick handler but still not loading tailwind.

[pcattori]

@Iteratum your reproduction link points to a codebase that doesn't have Tailwind setup. Can't reproduce this locally, so closing this, but can reopen if you provide a repro for your Tailwind issue.

[Iteratum]

@pcattori my issue here is that am having problem setting up tailwind. Sincerely , this is neither my first, second nor third time of using remix. In each project, I setup tailwind so easily. The problem is either the code update or documentation. You should make sure an issue is resolved before closing.

[pcattori]

@Iteratum I did try to reproduce, but everything works as expected. If you need help beyond our documentation, you can check out the official Tailwind installation docs for Remix or provide a repro on StackBlitz so that we have a shared environment to work off of. The reproduction should already have Tailwind at least partially setup so that we can see how you attempted to get Tailwind wired up in your project.