🐛 Bug: CopilotKit CSS conflicts with existing tailwind styles

[dragos-cojocaru]

♻️ Reproduction Steps

1. Have import '@copilotkit/react-ui/styles.css' in a Next.js layout while you also have import './globals.css' (default tailwind styles with dark variant) in the same layout or parent layout
2. CopilotKit CSS will override (remove in my case) some of my existing styles, especially the dark theme styles

✅ Expected Behavior

import '@copilotkit/react-ui/styles.css' should not affected already existing styles.

I see this issue was already reported before, but no action was taken. Can you add a prefix to CopilotKit CSS as mentioned here?

This issue is blocking us from using the CopilotKit 😔

❌ Actual Behavior

import '@copilotkit/react-ui/styles.css' affects already existing styles.

𝌚 CopilotKit Version

1.8.12

📄 Logs (Optional)

Before CopilotKit CSS import line:

After CopilotKit CSS import line:

[linear[bot]]

CPK-2599 🐛 Bug: CopilotKit CSS conflicts with existing tailwind styles

[copilotkit-support]

@dragos-cojocaru This issue is on our radar. If you're experiencing production downtime and need urgent support, book a brief meeting at: https://cal.com/nathan-tarbert-copilotkit/15min

[tylerslaton]

Hi @dragos-cojocaru!

Thank you for submitting the issue you're experiencing. We will be working on this soon and I'll keep you posted. In the mean time we're open to contributions for a fix from anyone in the community!

[dragos-cojocaru]

Hey @tylerslaton, Do you have any update on this? We are currently waiting for this issue to be fixed :)

[ranst91]

Hey @dragos-cojocaru

I am looking into this, but unfortunately I could not yet find where the issue is originating from. To give you an understanding of the internals:

• We are not using custom tailwing classes. In fact, we are using regular tailwind classes with the intention of inheriting user styles. So for example, if we use text-primary and in your app you have set primary color to red, we expect the CPK text that uses it to turn red. When it comes to Tailwind, CopilotKit refrains, as a concept, from delivering opinionated styles.
• We do use custom styles, but for this we are utilizing simple css classes, in css files. e.g .copilotKitInput. See here
• The only Tailwind related "addition" we have, are prefixes css variables. This is defined here

Can I ask you to try and dive into where the style overrides are coming from? Obviously I believe you that once importing CopilotKit css you are getting this, but I am trying to understand what is the unique situation that causes this. Would appreciate your cooperation

[copilotkit-support-bot[bot]]

CopilotKit currently has inconsistent CSS prefixing: only the react-textarea package is fully protected from Tailwind conflicts, while react-ui (which includes @copilotkit/react-ui/styles.css) is not. This means importing CopilotKit UI styles can still override or conflict with your Tailwind (including dark mode) styles. There is no full prefixing or isolation yet for all UI components, and the issue is not fully resolved.

Current CSS Prefixing Status

• Partially Implemented: CSS prefixing exists but is inconsistent across packages
• react-textarea package: ✅ Fully protected with CSS scoping
  • Uses postcss-prefix-selector with prefix .copilot-kit-textarea-css-scope
  • All CSS is properly scoped to prevent Tailwind conflicts
• react-ui package: ❌ Not protected from CSS conflicts
  • Only has custom PostCSS plugin for CSS variables collection
  • No conflict prevention mechanism implemented
  • Still vulnerable to Tailwind style conflicts

Issue #366 Status

• Not directly referenced in the current codebase
• Could be an external GitHub issue not tracked in internal development
• The partial implementation suggests work has begun on this issue

Current Workarounds

1. Textarea Components (Already Protected)

// Textarea components automatically apply CSS scoping
<CopilotTextarea className="your-tailwind-classes" />
// CSS is scoped under .copilot-kit-textarea-css-scope

2. Chat/UI Components (Manual CSS Isolation Needed)

/* Wrap CopilotKit components in a custom container */
.copilotkit-container {
  /* Override conflicting Tailwind styles */
  /* Reset or isolate specific properties */
}

3. CSS Specificity Override

/* Increase specificity for CopilotKit styles */
.my-app .copilot-chat {
  /* Your custom overrides */
}

Dark Mode Conflict Resolution

• Recent fixes have been applied for dark mode conflicts:
  • "fix colors on chat ui dark mode"
  • "remove system-preference oriented dark mode"
• CSS Auto-injection: Styles are automatically bundled, no manual imports needed

Recommendation

The inconsistent implementation suggests this is an ongoing effort. For complete protection:

1. Short term: Use CSS isolation techniques for UI components
2. Long term: Wait for full CSS prefixing implementation across all packages

Confidence: High - Based on direct analysis of PostCSS configurations and component implementations

Sources:

• PostCSS Config Files
• Component Implementations

---

Was this helpful?

If this solution worked for you, please click on the appropriate option below to help us improve:

✅ Issue Solved | ❌ Need more help

[PavanNimkar]

I’m interested in contributing and would like to work on this issue. Could @tylerslaton please assign it to me?

[tylerslaton]

Sure @PavanNimkar! We couldn't replicate this.

[PavanNimkar]

Thank you, @tylerslaton, for assigning the issue

[PavanNimkar]

@tylerslaton , can you clarify what you mean when you say 'we couldn't replicate this'?