[v11] Carousel: CSS Variable collision with Tailwind breaks items layout

[FrancMunoz]

Describe the bug

There is a small issue introduced in the refactor of the Carousel in v11-alpha-9 that breaks the content inside of Carousel's items. In file useCarousel.ts some styles are set. One of them is the gap with the spacing prop, that is correct. The problem is that it uses the --spacing variable and overwrites it with the gap. This variable is used below and works well.

The issue comes with the content, as --spacing is overwritten all the tailwind gaps use the new value (16px by default) breaking the content layout.

Reproducer

No response

System Information

System:
    OS: macOS 15.6.1
    CPU: (10) arm64 Apple M2 Pro
    Memory: 1.03 GB / 32.00 GB
  Binaries:
    Node: 20.19.4 - /opt/homebrew/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
  Browsers:
    Chrome: 142.0.7444.135
  npmPackages:
    primereact: ^11.0.0-alpha.9 => 11.0.0-alpha.9
    react: 19.2.0 => 19.2.0 
    tailwindcss: ^4 => 4.1.17

Steps to reproduce the behavior

1. Create a Carousel with an item with gaps, padding, etc.
2. When renders the padding are huge due to the variable collision

Expected behavior

Carousel shouldn't modify content layout.