[BUG]: ChromaGrid Tailwind variants silently drop columns/rows props and switch grid to flex

[MauryaQbit]

Bug Description

The Tailwind variants of ChromaGrid silently drop the columns and rows layout props that the CSS variants support, and switch the layout engine from CSS grid to flex-wrap. Code that works in content / ts-default does nothing in tailwind / ts-tailwind, and TypeScript Tailwind users get a type error for valid props.

Source split on current main (2-vs-2):

// src/content/Components/ChromaGrid/ChromaGrid.jsx:5-13
export const ChromaGrid = ({ items, className='', radius=300, columns=3, rows=2, damping=0.45, ... })

// src/tailwind/Components/ChromaGrid/ChromaGrid.jsx:4
const ChromaGrid = ({ items, className='', radius=300, damping=0.45, fadeOut=0.6, ease='power3.out' }) => {

// src/ts-default/Components/ChromaGrid/ChromaGrid.tsx:20-21,33-34
columns?: number; rows?: number; ... columns = 3, rows = 2,

// src/ts-tailwind/Components/ChromaGrid/ChromaGrid.tsx:15-22,26-33
// interface + defaults contain radius/damping/fadeOut/ease only — no columns/rows

Render divergence:

// src/content/.../ChromaGrid.jsx:136,139-140
className={`chroma-grid ${className}`}
style={{ '--cols': columns, '--rows': rows, ... }}
/* src/content/.../ChromaGrid.css:1,6: .chroma-grid { display:grid; grid-template-columns: repeat(var(--cols,3),320px); } */

// src/tailwind/.../ChromaGrid.jsx:125-130
className={`relative w-full h-full flex flex-wrap justify-center items-start gap-3 ${className}`}
style={{ '--r': ..., '--x': '50%', '--y': '50%' }} // no --cols/--rows

Steps to Reproduce

1. Use the CSS variant: <ChromaGrid items={items} columns={4} rows={3} /> with src/content/Components/ChromaGrid/ChromaGrid.jsx — grid renders 4 columns via --cols: 4.
2. Swap to the Tailwind variant src/tailwind/Components/ChromaGrid/ChromaGrid.jsx (or src/ts-tailwind/.../ChromaGrid.tsx) with identical props.
3. Observe columns/rows are ignored (not destructured, no --cols/--rows in DOM), layout is flex flex-wrap instead of grid.
4. In ts-tailwind, passing columns/rows is a TS type error since ChromaGridProps:15-22 omits them.

Expected Behavior

All 4 variants accept columns=3, rows=2 per the CONTRIBUTING 4-variant parity rule, and control the same grid layout (or document why Tailwind intentionally differs).

Actual Behavior

Tailwind pair silently ignores columns/rows; layout engine differs (grid vs flex-wrap); TS interface rejects documented CSS-variant props. The demo prop table (src/demo/Components/ChromaGridDemo.jsx:30-60: items/className/radius/damping/fadeOut/ease only) hides the gap because it never exercises columns/rows.

Root Cause

Tailwind variants were forked without the two scalar layout props and without the --cols/--rows style vars or .chroma-grid grid CSS. There is no ...rest forwarding, so the props are dropped at destructure time.

Suggested Fix

Add parity props to both Tailwind variants (keep flex layout if intentional, but respect the API):

// src/tailwind/Components/ChromaGrid/ChromaGrid.jsx:4 + style block
-const ChromaGrid = ({ items, className='', radius=300, damping=0.45, fadeOut=0.6, ease='power3.out' }) => {
+const ChromaGrid = ({ items, className='', radius=300, columns=3, rows=2, damping=0.45, fadeOut=0.6, ease='power3.out' }) => {

and mirror in src/ts-tailwind/.../ChromaGrid.tsx:15-22,26-33 (interface + defaults), plus emit '--cols': columns, '--rows': rows (and either reuse grid classes or document the flex difference). Alternatively document as intentional divergence — but currently it is silent.

Environment / Version

• Repo: DavidHDev/react-bits main @ 3a1c7f2 (verified 2026-09-13)
• Affected: Tailwind JS, Tailwind TS; healthy: Content JS, TS-Default
• Browsers: all

Validations

• I have checked other issues to see if my issue was already reported or addressed
• Checked: search ChromaGrid in:title,body returns 0 results; open issues are only [BUG]: ScrollVelocity Tailwind variants render 'undefined' class when parallaxClassName/scrollerClassName omitted #1078 (ScrollVelocity) and [BUG]: GlassSurface Tailwind JS variant crashes - TS generics in .jsx (useRef < HTMLDivElement > null) #1080 (GlassSurface) plus PR fix(ScrollVelocity): default parallax/scroller class in tailwind variants #1079.