# CSS Framework Conflicts

VeChain Kit uses Chakra UI internally, which can cause style conflicts with Tailwind CSS, Bootstrap, and other CSS frameworks.

### Problem: Styles Being Overridden

#### Symptoms

* Your Tailwind utilities stop working
* Unexpected borders on images
* Wrong background colors or fonts
* Button/form styles change unexpectedly

### Solution: CSS Layer Configuration

Use CSS layers to control which styles take precedence:

```css
/* In your global CSS file (e.g., globals.css) */

/* 1. Define layers with explicit priority */
@layer vechain-kit, host-app;

/* 2. Wrap your framework in host-app layer */
@layer host-app {
    @tailwind base;
    @tailwind components;
    @tailwind utilities;

    /* Your custom styles here */
}
```

**Framework-Specific Examples**

**Tailwind CSS**

```bash
@layer vechain-kit, host-app;

@layer host-app {
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
}
```

**Tailwind v4**

```
@layer vechain-kit, host-app;

/* Import Tailwind v4 */
@import "tailwindcss";

/* Your custom styles */
@layer host-app {
    /* Custom overrides */
}
```

Bootstrap

```
@layer vechain-kit, host-app;

@layer host-app {
    @import 'bootstrap/dist/css/bootstrap.css';
}
```

Custom CSS

<pre><code><strong>@layer vechain-kit, host-app;
</strong>
@layer host-app {
    body {
        /* Your body styles */
    }

    .your-components {
        /* Component styles */
    }
}
</code></pre>

Quick Fixes for Common Issues

<pre><code><strong>@layer host-app {
</strong>    /* Fix image borders */
    img {
        border-style: solid !important;
    }

    /* Ensure body styles persist */
    html body {
        background: var(--your-bg);
        font-family: var(--your-font);
    }
}
</code></pre>

**Verification Checklist**

* CSS layers defined: `@layer vechain-kit, host-app`
* Framework styles wrapped in `@layer host-app`
* VeChain Kit imported after layer definitions
* Components render without style conflicts
* No excessive `!important` declarations needed

**Debugging Steps**

1. Check layer order in DevTools - `Styles` panel shows which layer is applied
2. Verify `import` order - CSS with layers must load before VeChain Kit
3. Test in isolation - Create a minimal component to identify conflicts

**Browser Support**

CSS layers are supported in all modern browsers:

* Chrome 99+
* Firefox 97+
* Safari 15.4+
* Edge 99+


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.vechainkit.vechain.org/troubleshooting/styling-issues/css-framework-conflicts.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.