Fix docs for Tailwind 4, fix BaseNode selected styling.

[0x0f0f0f]

Should fix xyflow/xyflow#5673

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
example-apps	Ready	Preview, Comment	Mar 23, 2026 3:16pm
reactflow-website	Ready	Preview, Comment	Mar 23, 2026 3:16pm
svelteflow-website	Ready	Preview, Comment	Mar 23, 2026 3:16pm
ui-components	Ready	Preview, Comment	Mar 23, 2026 3:16pm
xyflow-website	Ready	Preview, Comment	Mar 23, 2026 3:16pm

[Copilot]

Pull request overview

This PR updates documentation and styling to support Tailwind CSS 4. The changes address proper CSS import ordering for React Flow when using Tailwind 4 and fix BaseNode component styling to use Tailwind 4-compatible selectors.

Changes:

• Updated UI documentation to specify correct CSS import order for Tailwind CSS 4
• Added similar import guidance to the learning tutorial
• Replaced deprecated Tailwind selector syntax in BaseNode component with Tailwind 4-compatible syntax

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File	Description
sites/reactflow.dev/src/content/ui/index.mdx	Updated CSS import instructions to use global.css with proper ordering for Tailwind 4
sites/reactflow.dev/src/content/learn/index.mdx	Added important note about Tailwind 4 CSS import requirements
apps/ui-components/registry/components/base-node/index.tsx	Updated selected node styling from escaped class selectors to in-[] selector syntax

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[0x0f0f0f]

By using in- tailwind selector, we loose the guarantee that the <BaseNode> outermost <div> is the direct descendant of a react flow node wrapper (which receives the .selected class on selection.)

It seems that compilation of our previous selector [.react-flow\\_\\_node.selected_&] is broken on development and production builds.

• On development builds, inspecting the css sources reveals a compiled layout.css file that becomes an append-only log of what classes have been added. If you remove the classes by commenting them out, they somehow stay in the CSS file. Getting it to work on dev is then depends on the order of which code is removed from our source files. Not sure where to report this bug.

• On prod builds, the selector is compiled to

  .react-flow__node.selected .\[\.react-flow\\\\_\\\\_node\.selected_\&\]\:border-muted-foreground {
    border-color:var(--muted-foreground)
  }
  .react-flow__node.selected .\[\.react-flow\\\\_\\\\_node\.selected_\&\]\:shadow-lg {
    --tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);
    box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)
  }

which is wrong

(proof on https://play.tailwindcss.com/M810F19i44 that the arbitrary variants like this should still work)

[0x0f0f0f]

Possibly related:

• double underscore (__) in class names is causing the problem tailwindlabs/tailwindcss#17681
• [v4] Inconsistent underscore tailwindlabs/tailwindcss#16170
• Arbitrary Values Will Not Compile tailwindlabs/tailwindcss#12884 (old)