GridSystem for Headless CMS with Next.js

Question

Im currently trying to implement a Grid System for a Headless CMS (Storyblok) in Next.js. I'm having some trouble styling the Grid.

I'm working with TailwindCSS for efficient and fast styling. The idea is, that the user of the CMS has the option to use a component (for example "Grid with 2 Column") and then can define how these columns react when shown on different viewports (therefore i want to use the "sm" "md" and so on prefixes in Tailwind.

What I am trying to do, is to generate the className String from the Inputs of the User and then apply it to the components.

The Schema therefore would be something like this:

const styleCol1 //generated by some function looks something like "sm:col-start-1 sm:col-span-2 md:col-start-1 md:col-span-2"
const styleCol2 //generated by some funktion looks something like "sm:col-start-1 sm:col-span-2 md:col-start-1 md:col-span-2"

<Grid className="grid grid-cols-4 md:grid-cols-12"> 
  <GridItem className={styleCol1}/>
  <GridItem className={styleCol2}/>
</Grid>

I know that my problem has something to do with assigning a generated string to the className Attribute during runtime. At the same time i know that something like this:

<GridItem className={true ? "bg-blue-500" : null} />

... will work. I can't really wrap my head around this. I read that assigning styles dynamically during runtime should be done using the style attribute. But here i would loose the simplicity of using tailwind and i do not know how to define viewport related styles using the style attribute.

I'd like to understand why my solution isn't working and see how i can work around this.

Here's my current code:

The Grid

import {FunctionComponent} from "react";
import {Grid2ColStoryblok} from "../../../models/storyblok";
import {StoryblokComponent} from "@storyblok/react";

interface IGrid2ColStartSpan {
start: number
span: number
}

interface IGrid2ColVariant {
sm: IGrid2ColStartSpan,
md: IGrid2ColStartSpan
}

interface IGrid2ColStyles {
col1: IGrid2ColVariant
col2: IGrid2ColVariant
}

const stringToValidNumber = (value: string) =\> {
return Number(value) || 0
}

const Grid2Col:FunctionComponent = ({blok}: {blok: Grid2ColStoryblok}) => {

    const styles: IGrid2ColStyles = {
        col1: {
            sm: {
                start: stringToValidNumber(blok.col1StartSmall),
                span: stringToValidNumber(blok.col1SpanSmall)
            },
            md: {
                start: stringToValidNumber(blok.col1StartLarge),
                span: stringToValidNumber(blok.col1SpanLarge)
            }
        },
        col2: {
            sm: {
                start: stringToValidNumber(blok.col2StartSmall),
                span: stringToValidNumber(blok.col2SpanSmall)
            },
            md: {
                start: stringToValidNumber(blok.col2StartLarge),
                span: stringToValidNumber(blok.col2SpanLarge)
            }
        }
    }

    const generateStyles = (styles: IGrid2ColStyles) => {
        const result = {
            col1: "",
            col2: ""
        }

        Object.keys(styles).map(key => {
            let results: string[] = []
            Object.keys(styles[key]).map(innerkey => {
                //key is sm or md
                results.push(`${innerkey}:col-start-${styles[key][innerkey].start} ${innerkey}:col-span-${styles[key][innerkey].span}`)
            })
            result[key] = results.join(" ")
        })

        return result
    }

    let colStyles: {col1: string, col2: string} = generateStyles(styles)

    return(
        <div className="grid grid-cols-4 md:grid-cols-12">
            {blok.children[0] &&
                <StoryblokComponent blok={blok.children[0]} key={blok.children[0]._uid} colStyle={colStyles.col1}/>
            }
            {blok.children[1] &&
                <StoryblokComponent blok={blok.children[1]} key={blok.children[1]._uid} colStyle={colStyles.col2}/>
            }
        </div>
    )
}
export default Grid2Col

The GridItem:

import {GridItemStoryblok} from "../../../models/storyblok";

const GridItem = ({blok, colStyle}: {blok: GridItemStoryblok, colStyle: string}) => {
    return(<div className={colStyle}>
        gridItem
    </div>)
}

export default GridItem