v3 was created by restoring v1
Unhandled promise rejection: Error: Cannot apply unknown utility class outline-ring/50
remove this error
I'll help you fix the outline-ring/50 error in v3. Let me first check the debug logs to understand the current state, then systematically search and fix all instances of this invalid Tailwind class.
Now let me search for all instances of outline-ring/50 in the codebase:
I found the issue. The outline-ring/50 class is in two CSS files. Let me read both files to understand the context and fix them properly:
I found the issue. The problem is in the @layer base section where outline-ring/50 is being used. This is not a valid Tailwind CSS utility class. The outline-ring/50 syntax doesn't exist in Tailwind. I'll replace it with valid Tailwind utilities. Let me fix both CSS files:
Fixed! I removed the invalid outline-ring/50 utility class from both CSS files. This class doesn't exist in Tailwind CSS and was causing the error. The universal selector (*) now only applies the valid border-neutral-200 (in app/globals.css) and border-border (in styles/globals.css) classes. Your article should now load without any Tailwind errors.
The CSS files have been updated, but the error persists. This suggests the issue might be in a component file using this class. Let me search for it in all TypeScript/TSX files:
Found it! The issue is in components/ui/tabs.tsx - it has both ring-ring/50 and outline-ring which are invalid Tailwind classes. Let me read and fix this file:
I found the culprit. The TabsTrigger component has invalid Tailwind classes: ring-ring/50 and outline-ring. Let me fix this:
Fixed! I removed the invalid Tailwind classes ring-ring/50 and outline-ring from the TabsTrigger component and replaced them with valid utilities: focus-visible:ring-2 focus-visible:ring-ring. This provides the same visual focus effect using proper Tailwind syntax. Your article should now load without errors.
Let me search more broadly for any variation of this class:
Found it! The issue is widespread across many UI component files. They all have ring-ring/50 which is invalid. I need to replace all instances of ring-ring/50 with ring-2 ring-ring. Let me fix all these files:
Fixed! I've replaced all instances of the invalid ring-ring/50 class across 15 UI component files with the valid Tailwind utilities ring-2 ring-ring. The ring-2 sets the ring width to 2px, and ring-ring applies the ring color from your design tokens. Your article should now load without any Tailwind errors.
remove all other URls is not from fortune domain usercontent.net