N
Nuxt•3mo ago
Mads

Ideas to debug this Nuxt UI / Tailwindcss bug

Hi When I visit my site (in production) on one computer I get extremely rounded corners on almost anything. I can see in the inspection tool that the: .rounded-2xl { border-radius: var(--radius-2xl); } On one computer --radius-2xl is === 1rem. On my other computer --radius-2xl === 64px. I use Nuxt UI 3 alpha 10, which uses Tailwind v4. How the hell do I debug this?
2 Replies
kapa.ai
kapa.ai•3mo ago
Hi @Mads. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To debug this Nuxt UI / Tailwindcss issue, here are some ideas based on the information provided in the knowledge sources: 1. Check your Tailwind configuration: Make sure your tailwind.config.js file doesn't have any custom configurations for the borderRadius theme that might be causing this discrepancy. The default value for rounded-2xl should be 1rem. 2. Inspect the CSS variables: Use the browser's developer tools to inspect the :root or html element and check if there are any CSS variables being set for --radius-2xl. Look for any conflicting definitions or overrides. 3. Check for browser extensions: Disable any browser extensions that might be interfering with the CSS, especially on the computer where you're seeing the 64px border-radius. 4. Create a minimal reproduction: As suggested in the Reporting Bugs (https://nuxt.com/docs/community/reporting-bugs) documentation, create a minimal reproduction of the issue. This will help isolate the problem and make it easier to debug. 5. Use source maps: Enable source maps in your Nuxt configuration to make debugging easier. Add the following to your nuxt.config.ts: 
   export default defineNuxtConfig({
     sourcemap: {
       server: true,
       client: true
     }
   })
   
   export default defineNuxtConfig({
     sourcemap: {
       server: true,
       client: true
     }
   })
6. Check for conflicting styles: Inspect the element with the unexpected border-radius and look for any conflicting styles or overrides in the CSS cascade. 7. Verify Nuxt UI and Tailwind versions: Ensure that you're using compatible versions of Nuxt UI and Tailwind CSS. You mentioned using Nuxt UI 3 alpha 10 with Tailwind v4, but it's worth double-checking as Tailwind v4 is not officially released yet. 8. Use the Edge version for testing: Consider using the edge version of Nuxt UI to see if the issue persists. You can do this by updating your package.json as described in the Edge documentation (https://ui.nuxt.com/getting-started/installation#edge): 
   {
     "devDependencies": {
       "@nuxt/ui": "npm:@nuxt/ui-edge@latest"
     }
   }
   
   {
     "devDependencies": {
       "@nuxt/ui": "npm:@nuxt/ui-edge@latest"
     }
   }
9. Check for CSS purging issues: If you're using PurgeCSS or have enabled Tailwind's purge option, make sure it's not accidentally removing the correct border-radius classes. 10. Investigate browser differences: If the issue only occurs on specific browsers or devices, it could be related to browser-specific implementations or default styles. If you're still unable to resolve the issue after trying these steps, consider opening a GitHub Discussion (https://github.com/nuxt/nuxt/discussions) or reporting it as a potential bug following the guidelines in the Reporting Bugs (https://nuxt.com/docs/community/reporting-bugs) documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3mo ago
<@335112909350895632> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?