Grid Class Composition
Loading "Lookup Objects for Grid Placement"
Run locally for transcripts
π¨βπΌ Use the new logo coordinates to place the logos in the correct grid cells.
CSS Grid cell positioning
π° You can define what grid column or row an element should be positioned in with the π grid-column-start and π grid-row-start CSS properties respectively.
π° Tailwind has utilities for π col-start-* and π row-start-*
Tailwind "on demand" classes and dynamic styles
The Tailwind Just-in-Time engine, which generates CSS as you need it, π expects to see entire class strings in your template files.
This means you unfortunately cannot use dynamic classes like this:
<div className={`col-start-${logo.column}`}></div>
As nice as it would be, the JIT engine won't recognise this, and as a result, no CSS will be generated.
Styles lookup directories
π§ββοΈ I've scaffolded out some "lookup" objects we'll use to map Tailwind Grid column and row classes in a way that plays nice with Tailwind's JIT engine:
const columnClasses: Record<(typeof logos)[number]['column'], string> = {}
const rowClasses: Record<(typeof logos)[number]['row'], string> = {}
π¦Ί The two TypeScript 'Records' you see above ensure that the lookup objects have keys that match the possible values of the 'column' and 'row' properties on the 'logos' array.
Populating the lookup objects
π¨ Add the required keys to the
columnClasses object to satisfy the type checker.π¨ Add the required keys to the
rowClasses object to satisfy the type checker.π¨ Map Tailwind classes to each possible
logo.column and logo.row scenario.π° Remember the
col-start-* and row-start-* utilities I mentioned above? Yeah, these will work great here.Composing class strings together
π§ββοΈ I've also created this "mini clsx" helper function that lets you combine multiple class strings together:
function clsx(...classes: string[]) {
return classes.filter(Boolean).join(' ')
}
π§ββοΈ Here's an example of how to use it:
<div className={clsx('some classes', 'more classnames', 'combined together')} />
π¨ Compose the dynamic
column class and row class on the li element, using the clsx() helper function.