[BUG]: ChromaGrid Tailwind variants silently drop columns/rows props and switch grid to flex
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
- Use the CSS variant:
<ChromaGrid items={items} columns={4} rows={3} />withsrc/content/Components/ChromaGrid/ChromaGrid.jsx— grid renders 4 columns via--cols: 4. - Swap to the Tailwind variant
src/tailwind/Components/ChromaGrid/ChromaGrid.jsx(orsrc/ts-tailwind/.../ChromaGrid.tsx) with identical props. - Observe
columns/rowsare ignored (not destructured, no--cols/--rowsin DOM), layout isflex flex-wrapinstead of grid. - In
ts-tailwind, passingcolumns/rowsis a TS type error sinceChromaGridProps:15-22omits 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-bitsmain@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,bodyreturns 0 results; open issues are only #1078 (ScrollVelocity) and #1080 (GlassSurface) plus PR #1079.
Source: DavidHDev/react-bits