Tailwindcss 4 the textaread and textfield (input) has offset on highlight broder

[lucasjinreal]

 <Textarea
                      id="comment"
                      placeholder="说点啥吧？"
                      required
                      value={commentContent}
                      onChange={(e) => setCommentContent(e.target.value)}
                      className={`
                        w-full rounded-lg border border-gray-300 bg-white text-gray-900
                        placeholder-gray-400 text-sm px-3 py-2
                        focus:outline-none focus:ring-2 focus:ring-primary-400 focus:border-transparent
                        dark:border-gray-700 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400
                        transition-all duration-200
                      `}
                    />

how t oresolve this?

[andrepichardo]

The “offset” comes from focus:ring. If you don’t want that jump, just remove the transparent border trick and keep a consistent border color.

Example:

className="
  w-full rounded-lg border border-gray-300 bg-white text-gray-900
  placeholder-gray-400 text-sm px-3 py-2
  focus:outline-none focus:border-blue-500
  dark:border-gray-700 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400
  transition-all duration-200
"

This way, the border changes color on focus, but there’s no weird offset.

If you still want the glow effect, add:

focus:ring-2 focus:ring-blue-200

Hope that helps! :)

[lucasjinreal]

thanks! I found this is caused by nextUI (heroUI), this widget comrs from it. and the textaread their style aree gone, just appears the offset look.
And still I don't why am upgrade from tailwdin v3 to v4, as well as heroUI, some of their widgets can not be normal shown.
I had followed upgrade rules, and imported hero.ts properly, like:

@import "tailwindcss";
@import 'tw-animate-css';

@plugin './hero.ts';
@plugin 'tailwindcss-github-markdown';

/* Note: You may need to change the path to fit your project structure */
@source '../../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';

/* @custom-variant dark (&:is(.dark *)); */
@custom-variant dark (&:where(.dark, .dark *));

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
  }
}

@theme {
  --color-primary: oklch(0.65 0.25 250);
  /* re-add what HeroUI expects */
  --radius-md: 0.375rem;

  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
}

/* CSS variables and dark mode */
:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;

  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;

  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;

  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;

  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;

  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;

  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;

  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;

  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;

  --ring: 215 20.2% 65.1%;

  --radius: 0.5rem;

  --sidebar: hsl(0 0% 98%);

  --sidebar-foreground: hsl(240 5.3% 26.1%);

  --sidebar-primary: hsl(240 5.9% 10%);

  --sidebar-primary-foreground: hsl(0 0% 98%);

  --sidebar-accent: hsl(240 4.8% 95.9%);

  --sidebar-accent-foreground: hsl(240 5.9% 10%);

  --sidebar-border: hsl(220 13% 91%);

  --sidebar-ring: hsl(217.2 91.2% 59.8%);
}

@import "highlight.js/styles/github.css";

.dark {
  @import "highlight.js/styles/github-dark.css";

  --background: 220 5% 8%;
  --foreground: 210 40% 98%;

  --muted: 217.2 32.6% 17.5%;
  --muted-foreground: 215 20.2% 65.1%;

  --popover: 222.2 84% 4.9%;
  --popover-foreground: 210 40% 98%;

  --card: 220 10% 12%;
  --card-foreground: 210 40% 98%;

  --border: 220 10% 12%;
  --input: 217.2 32.6% 17.5%;

  --primary: 210 40% 98%;
  --primary-foreground: 222.2 47.4% 11.2%;

  --secondary: 217.2 32.6% 17.5%;
  --secondary-foreground: 210 40% 98%;

  --accent: 217.2 32.6% 17.5%;
  --accent-foreground: 210 40% 98%;

  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 85.7% 97.3%;

  --ring: 217.2 32.6% 17.5%;

  --sidebar: hsl(240 5.9% 10%);

  --sidebar-foreground: hsl(240 4.8% 95.9%);

  --sidebar-primary: hsl(224.3 76.3% 48%);

  --sidebar-primary-foreground: hsl(0 0% 100%);

  --sidebar-accent: hsl(240 3.7% 15.9%);

  --sidebar-accent-foreground: hsl(240 4.8% 95.9%);

  --sidebar-border: hsl(240 3.7% 15.9%);

  --sidebar-ring: hsl(217.2 91.2% 59.8%);
}

/* Apply background and text using native CSS instead of @apply */
body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

html {
  @apply bg-background;
}

body {
  @apply bg-background text-foreground;
}

/* Animations */
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.animate-gradient {
  background-size: 200% 200%;
  animation: gradient 6s ease infinite;
}

@keyframes shine {
  0% {
    background-position: -200% center;
  }

  100% {
    background-position: 200% center;
  }
}

.animate-shine {
  background-size: 200% auto;
  animation: shine 3s linear infinite;
}

@layer utilities {
  @keyframes slide-in-from-top {
    0% {
      transform: translateY(-100%);
      opacity: 0;
    }

    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .animate-slide-in-from-top {
    animation: slide-in-from-top 0.5s ease-out forwards;
  }
}

/** overrides for markdown style **/
.prose {
  background-color: transparent !important;
}

/* Light mode GitHub-style code block */
.prose pre {
  background-color: #f6f8fa;
  /* GitHub light grey */
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
}

.prose pre .hljs {
  background-color: transparent !important;
  padding: 0;
}

.dark .prose pre {
  background-color: #0d1117;
}

.katex {
  color: #7f5af0;
  /* base color */
}

/* Target the inner HTML spans that actually render the symbols */
.katex .katex-html>span {
  color: #7f5af0;
  text-shadow:
    0 0 2px rgba(127, 90, 240, 0.5),
    0 0 4px rgba(127, 90, 240, 0.3),
    0 0 6px rgba(127, 90, 240, 0.2);
}

@theme inline {
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;

  @keyframes accordion-down {
    from {
      height: 0;
    }

    to {
      height: var(--radix-accordion-content-height);
    }
  }

  @keyframes accordion-up {
    from {
      height: var(--radix-accordion-content-height);
    }

    to {
      height: 0;
    }
  }
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }

  body {
    @apply bg-background text-foreground;
  }
}

hero.ts

// hero.ts
import { heroui } from "@heroui/react";
// or import from theme package if you are using individual packages.
// import { heroui } from "@heroui/theme";
export default heroui();