Back to Changelog

May.4, 20252.625 min read

v1.1.5 — Tailwind CSS v3 Compatibility & Style Fixes

Posted By

Kaylee

Kaylee

Patch Changes

This release addresses critical Tailwind CSS v3 compatibility issues and improves theme handling for components with custom styling requirements.

🐛 Bug Fixes

Tailwind CSS v3 Compatibility

#218 1652d02 – fix(react): removed layers to fix collision with Tailwind 3. Thanks @KayleeWilliams!
#208 41bfb71 – fix(react): no style component theme not removing default classes. Thanks @KayleeWilliams!

Key Fixes

Removed CSS layering wrappers that caused conflicts with Tailwind CSS v3
Fixed noStyle theme handling to properly exclude default component styles when noStyle flag is set
Ensured theme-level classNames and styles are still applied even with noStyle: true

🔧 Technical Details

CSS Layer Removal

Removed @layer wrappers from multiple components to prevent Tailwind CSS v3 collisions
This change maintains functionality while ensuring compatibility with modern Tailwind configurations

Enhanced noStyle Theme Support

Added proper checks for noStyle flag in component themes
When noStyle is enabled, only theme-level styling is applied
Default component styles are correctly excluded

⚠️ Breaking Changes

Custom Class Priority

With the removal of CSS layers, you may need to add !important to custom classes for proper specificity:

/* Before */
.my-custom-banner {
  border: 1px solid red;
}

/* After - if styles don't apply */
.my-custom-banner {
  border: 1px solid red !important;
}

// Before
<div className="border-red-500">

// After - if needed
<div className="!border-red-500">

// Theme with noStyle flag
const customTheme = {
  noStyle: true,
  classNames: "my-custom-styles",
  styles: { backgroundColor: "blue" }
};

// Only theme-level styles applied, no default component styles
<CookieBanner theme={customTheme} />

// Now works seamlessly with Tailwind CSS v3
import { CookieBanner } from '@c15t/react';

// No more layer conflicts
<CookieBanner className="border-2 border-blue-500 rounded-lg" />