chore(frontend): Real Tailwind + Autoprefixer (#19051)

* chore(frontend): Real Tailwind + Autoprefixer

* Align some non-standard utility class usage with Tailwind

* Start using container queries

* Update tailwind.config.js

* Move PostCSS packages into prod dependencies

* Add EE

* Add larger spacings for properties other than width

* Fix spacing backward compat

* Add max-w-1/2

* Remove Tailwind normalization

* Ensure JIT analysis works

* Actually we don't need a container query for this

* Clean up more

* Update UI snapshots for `webkit` (2)

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `webkit` (2)

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (2)

* Update production.Dockerfile

* Extend `fontSize` instead of replacing

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (2)

* Fix production build

* Add clarification comment

* Update trends.cy.ts

* Fix `scale` usage

* Fix minor styling issues

* Upgrade to Tailwind 3.4

* Actually use `cssnano`

* Don't use `cssnano` in dev

* Solve annoying Tailwind logs

* Add comment explaining plugins being defined twice

* Fix side panel icon rotation

* Reset snapshots

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (2)

* Update query snapshots

* Update query snapshots

* Fix dockerfile

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (1)

* Fix up flag wrap

* Update UI snapshots for `chromium` (2)

* Fix

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (2)

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Ben White <ben@posthog.com>

.dockerignore

@@ -14,6 +14,7 @@
 !webpack.config.js
 !postcss.config.js
 !playwright.config.ts
+!tailwind.config.js
 !.kearc
 !.storybook
 !tsconfig.json

.stylelintrc.js

@@ -40,6 +40,12 @@ module.exports = {
                 message: 'Expected variable to match kebab-case or snake_case',
             },
         ],
+        'scss/at-rule-no-unknown': [
+            true,
+            {
+                'ignoreAtRules': ['tailwind']
+            }
+        ],
         'scss/operator-no-newline-after': null, // Doesn't always play well with prettier
         'scss/at-extend-no-missing-placeholder': null,
         'scss/comment-no-empty': null,

bin/start-frontend

@@ -4,5 +4,9 @@ set -e
 # pass first argument to WEBPACK_HOT_RELOAD_HOST
 [ $# -ge 1 ] && export WEBPACK_HOT_RELOAD_HOST=$1
 
+# DEBUG=1 might be exported to this script from a parent, but we don't want it in the frontend build process
+# In particular, DEBUG=1 enables a lot of Tailwind logging we don't need, so let's set 0 instead
+export DEBUG=0
+
 pnpm install
 pnpm start

cypress/e2e/trends.cy.ts

@@ -43,8 +43,7 @@ describe('Trends', () => {
         cy.get('[data-attr=math-selector-0]').click()
         cy.get('[data-attr=math-total-0]').should('be.visible')
 
-        cy.get('[data-attr=math-node-property-value-0]').click()
-        cy.get('[data-attr=math-avg-0]').click()
+        cy.get('[data-attr=math-node-property-value-0]').click('left')
         cy.get('[data-attr=math-property-select]').should('exist')
     })
 

frontend/src/layout/navigation-3000/sidepanel/SidePanel.scss

@@ -45,6 +45,10 @@
     overflow: hidden;
     user-select: none;
     border-left-width: 1px;
+
+    .LemonButton__icon {
+        transform: rotate(-90deg);
+    }
 }
 
 .SidePanel3000__tabs {

frontend/src/layout/navigation-3000/sidepanel/SidePanel.tsx

@@ -150,7 +150,7 @@ export function SidePanel(): JSX.Element | null {
                             return (
                                 <LemonButton
                                     key={tab}
-                                    icon={<Icon className="rotate-270 w-6" />}
+                                    icon={<Icon />}
                                     onClick={() =>
                                         activeTab === tab ? closeSidePanel() : openSidePanel(tab as SidePanelTab)
                                     }

frontend/src/layout/navigation/TopBar/SitePopover.tsx

@@ -273,7 +273,7 @@ export function SitePopoverOverlay(): JSX.Element {
                 </SitePopoverSection>
             )}
             {(!(preflight?.cloud || preflight?.demo) || user?.is_staff) && (
-                <SitePopoverSection title="PostHog instance" className="font-title-3000">
+                <SitePopoverSection title="PostHog instance" className="font-title">
                     <SystemStatus />
                     <AsyncMigrations />
                     <InstanceSettings />

frontend/src/lib/components/AddToDashboard/AddToDashboardModal.tsx

@@ -150,7 +150,7 @@ export function AddToDashboardModal({
                 </>
             }
         >
-            <div className="space-y-2 w-md max-w-full">
+            <div className="space-y-2 w-192 max-w-full">
                 <LemonInput
                     data-attr="dashboard-searchfield"
                     type="search"

frontend/src/lib/components/Cards/TextCard/TextCard.stories.tsx

@@ -38,7 +38,7 @@ export const Template: Story = () => {
             <div>
                 <h5>basic text</h5>
                 <TextCard
-                    className={'react-grid-item react-draggable cssTransforms react-resizable min-h-60 min-w-60'}
+                    className={'react-grid-item react-draggable cssTransforms react-resizable min-h-60 min-w-[15rem]'}
                     dashboardId={1}
                     textTile={makeTextTile('basic text')}
                 />
@@ -46,7 +46,7 @@ export const Template: Story = () => {
             <div>
                 <h5>markdown text</h5>
                 <TextCard
-                    className={'react-grid-item react-draggable cssTransforms react-resizable min-h-60 min-w-60'}
+                    className={'react-grid-item react-draggable cssTransforms react-resizable min-h-60 min-w-[15rem]'}
                     dashboardId={1}
                     textTile={makeTextTile('# a title \n\n **formatted** _text_')}
                 />
@@ -54,7 +54,7 @@ export const Template: Story = () => {
             <div>
                 <h5>Long text</h5>
                 <TextCard
-                    className={'react-grid-item react-draggable cssTransforms react-resizable min-h-60 min-w-60'}
+                    className={'react-grid-item react-draggable cssTransforms react-resizable min-h-60 min-w-[15rem]'}
                     style={{ height: '250px', width: '300px' }}
                     dashboardId={1}
                     textTile={makeTextTile(
@@ -65,7 +65,7 @@ export const Template: Story = () => {
             <div>
                 <h5>with resize handles</h5>
                 <TextCard
-                    className={'react-grid-item react-draggable cssTransforms react-resizable min-h-60 min-w-60'}
+                    className={'react-grid-item react-draggable cssTransforms react-resizable min-h-60 min-w-[15rem]'}
                     dashboardId={1}
                     showResizeHandles={true}
                     canResizeWidth={true}

frontend/src/lib/components/CommandBar/CommandBar.tsx

@@ -29,7 +29,7 @@ const CommandBarOverlay = forwardRef<HTMLDivElement, CommandBarOverlayProps>(fun
                 backdropFilter: 'blur(var(--modal-backdrop-blur))',
             }}
         >
-            <div className="w-full h-full max-h-160 max-w-lg overflow-hidden">
+            <div className="w-full h-full max-h-160 max-w-248 overflow-hidden">
                 <div
                     data-attr="command-bar"
                     className={`w-full ${

frontend/src/lib/components/ProductIntroduction/ProductIntroduction.tsx

@@ -53,7 +53,7 @@ export const ProductIntroduction = ({
                     </div>
                 </div>
             )}
-            <div className="flex items-center gap-x-8 w-full justify-center flex-wrap">
+            <div className="flex items-center gap-8 w-full justify-center flex-wrap">
                 <div>
                     <div className="w-50 mx-auto mb-4">
                         {CustomHog ? (

frontend/src/lib/components/PropertyFilters/components/OperatorValueSelect.tsx

@@ -128,7 +128,7 @@ export function OperatorValueSelect({
                 />
             </div>
             {!isOperatorFlag(currentOperator || PropertyOperator.Exact) && type && propkey && (
-                <div className="flex-1 min-w-40" data-attr="taxonomic-value-select">
+                <div className="flex-1 min-w-[10rem]" data-attr="taxonomic-value-select">
                     <PropertyValue
                         type={type}
                         key={propkey}

frontend/src/lib/lemon-ui/LemonLabel/LemonLabel.stories.tsx

@@ -39,7 +39,7 @@ Basic.args = {
 function ExplanationModal({ setOpen, open }: { setOpen: (open: boolean) => void; open: boolean }): JSX.Element {
     return (
         <LemonModal title="Let me explain you the label" isOpen={open} onClose={() => setOpen(false)}>
-            <div className="bg-bg-light w-full max-w-lg h-full ml-auto relative z-10 overflow-auto">
+            <div className="bg-bg-light w-full max-w-248 h-full ml-auto relative z-10 overflow-auto">
                 <h3 className="text-lg text-semibold opacity-50 m-0">Labels are awesome.</h3>
                 <p>They truly are.</p>
             </div>

frontend/src/lib/lemon-ui/LemonSegmentedButton/LemonSegmentedButton.scss

@@ -153,7 +153,7 @@ body:not(.posthog-3000) {
         }
 
         &:not(:last-child) {
-            .LemonButton {
+            .LemonButton__chrome {
                 border-right: none;
             }
         }

frontend/src/lib/lemon-ui/LemonSnack/LemonSnack.tsx

@@ -32,7 +32,7 @@ export function LemonSnack({
                 !isRegular && 'LemonSnack--pill',
                 `inline-flex text-primary-alt max-w-full overflow-hidden break-all items-center py-1 bg-${bgColor}`,
                 !wrap && 'whitespace-nowrap',
-                isRegular ? 'px-1.5 rounded' : 'px-4 rounded-4xl h-8',
+                isRegular ? 'px-1.5 rounded' : 'px-4 rounded-full h-8',
                 isClickable && 'cursor-pointer',
                 className
             )}

frontend/src/queries/nodes/WebOverview/WebOverview.tsx

@@ -71,7 +71,7 @@ export const WebOverviewItemCell = ({ item }: { item: WebOverviewItem }): JSX.El
 
     return (
         <Tooltip title={tooltip}>
-            <div className="min-w-30 min-h-20 flex flex-col items-center text-center justify-between">
+            <div className="min-w-[7.5rem] min-h-20 flex flex-col items-center text-center justify-between">
                 <div className="font-bold uppercase text-xs">{label}</div>
                 <div className="w-full flex-1 flex items-center justify-center">
                     <div className="text-2xl">{formatItem(item.value, item.kind)}</div>

frontend/src/scenes/authentication/Login.tsx

@@ -86,7 +86,7 @@ export function Login(): JSX.Element {
             }
             footer={<SupportModalButton />}
         >
-            <div className="space-y-2">
+            <div className="space-y-4">
                 <h2>Log in</h2>
                 {generalError && (
                     <LemonBanner type="error">

frontend/src/scenes/authentication/RegionSelect.tsx

@@ -32,7 +32,7 @@ const sections = [
 function WhyCloudModal({ setOpen, open }: { setOpen: (open: boolean) => void; open: boolean }): JSX.Element {
     return (
         <LemonModal title="Which region would you like to choose?" isOpen={open} onClose={() => setOpen(false)}>
-            <div className="bg-bg-light w-full max-w-lg h-full ml-auto relative z-10 overflow-auto">
+            <div className="bg-bg-light w-full max-w-248 h-full ml-auto relative z-10 overflow-auto">
                 <h3 className="text-lg text-semibold opacity-50 m-0">
                     A particular region can have advantages, but you can migrate regions at any time for free.
                 </h3>

frontend/src/scenes/billing/Billing.tsx

@@ -325,7 +325,7 @@ export function Billing(): JSX.Element {
                                 </LemonButton>
                             </div>
                         </div>
-                        <div className="h-24 self-end -scale-x-1 -ml-20 -mb-2">
+                        <div className="h-24 self-end -scale-x-100 -ml-20 -mb-2">
                             <SurprisedHog className="max-h-full w-auto object-contain" />
                         </div>
                     </div>

frontend/src/scenes/billing/BillingProduct.tsx

@@ -291,7 +291,7 @@ export const BillingProduct = ({ product }: { product: BillingProductV2Type }):
 
     return (
         <div
-            className={clsx('flex flex-wrap max-w-xl pb-12', {
+            className={clsx('flex flex-wrap max-w-300 pb-12', {
                 'flex-col pb-4': size === 'small',
             })}
             ref={ref}

frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaGroups.tsx

@@ -49,7 +49,7 @@ export function CohortCriteriaGroups(logicProps: CohortLogicProps): JSX.Element
                                                 onChange={(value) => setInnerGroupType(value, groupIndex)}
                                                 value={group.type}
                                             />
-                                            <div className="flex-1 min-w-2" />
+                                            <div className="flex-1 min-w-[0.5rem]" />
                                             <LemonButton
                                                 icon={<IconCopy />}
                                                 onClick={() => duplicateFilter(groupIndex)}

frontend/src/scenes/dashboard/DashboardTemplateVariables.tsx

@@ -17,7 +17,7 @@ export function DashboardTemplateVariables(): JSX.Element {
     const { setVariable } = useActions(theDashboardTemplateVariablesLogic)
 
     return (
-        <div className="mb-4 DashboardTemplateVariables max-w-md">
+        <div className="mb-4 DashboardTemplateVariables max-w-192">
             {variables.map((variable, index) => (
                 <div key={index} className="mb-6">
                     <div className="mb-2">

frontend/src/scenes/early-access-features/EarlyAccessFeature.tsx

@@ -184,7 +184,7 @@ export function EarlyAccessFeature({ id }: { id?: string } = {}): JSX.Element {
                     isEditingFeature || isNewEarlyAccessFeature ? 'max-w-160' : null
                 )}
             >
-                <div className="flex flex-col gap-4 flex-2 min-w-60">
+                <div className="flex flex-col gap-4 flex-2 min-w-[15rem]">
                     {isNewEarlyAccessFeature && (
                         <Field name="name" label="Name">
                             <LemonInput data-attr="feature-name" />
@@ -285,7 +285,7 @@ export function EarlyAccessFeature({ id }: { id?: string } = {}): JSX.Element {
                     )}
                 </div>
                 {!isEditingFeature && !isNewEarlyAccessFeature && 'id' in earlyAccessFeature && (
-                    <div className="flex-3 min-w-60">
+                    <div className="flex-3 min-w-[15rem]">
                         <PersonList earlyAccessFeature={earlyAccessFeature} />
                     </div>
                 )}

frontend/src/scenes/experiments/ExperimentImplementationDetails.tsx

@@ -77,7 +77,7 @@ export function CodeLanguageSelect({
     return (
         <LemonSelect
             size="small"
-            className="min-w-30"
+            className="min-w-[7.5rem]"
             onSelect={selectOption}
             value={selectedOptionValue}
             options={OPTIONS.map(({ value, Icon }) => ({
@@ -117,7 +117,7 @@ export function ExperimentImplementationDetails({ experiment }: ExperimentImplem
                         <span className="mr-2">Variant group</span>
                         <LemonSelect
                             size="small"
-                            className="min-w-20"
+                            className="min-w-[5rem]"
                             onSelect={setCurrentVariant}
                             value={currentVariant}
                             options={(experiment?.parameters?.feature_flag_variants || []).map(

frontend/src/scenes/feature-flags/FeatureFlag.tsx

@@ -135,8 +135,8 @@ export function FeatureFlag({ id }: { id?: string } = {}): JSX.Element {
             key: FeatureFlagsTab.OVERVIEW,
             content: (
                 <>
-                    <div className="flex space-x-4">
-                        <div className="flex-7">
+                    <div className="flex gap-4 flex-wrap">
+                        <div className="flex-1">
                             <FeatureFlagRollout readOnly />
                             {featureFlag.filters.super_groups && <FeatureFlagReleaseConditions readOnly isSuper />}
                             <FeatureFlagReleaseConditions readOnly />
@@ -144,7 +144,7 @@ export function FeatureFlag({ id }: { id?: string } = {}): JSX.Element {
                                 <FeatureFlagAutoRollback readOnly />
                             )}
                         </div>
-                        <div className="flex-6">
+                        <div className="max-w-120 w-full">
                             <RecentFeatureFlagInsights />
                             <div className="my-4" />
                         </div>

frontend/src/scenes/feature-flags/FeatureFlagProjects.tsx

@@ -171,7 +171,7 @@ function FeatureFlagCopySection(): JSX.Element {
                                 ?.map((team) => ({ value: team.id, label: team.name }))
                                 .filter((option) => option.value !== currentTeam?.id) || []
                         }
-                        className="min-w-40"
+                        className="min-w-[10rem]"
                     />
                 </div>
                 <div>

frontend/src/scenes/notebooks/NotebooksTable/ContainsTypeFilter.tsx

@@ -40,7 +40,7 @@ export function ContainsTypeFilters({
             <span>Containing:</span>
             <LemonSelectMultiple
                 mode="multiple"
-                selectClassName={'min-w-40'}
+                selectClassName={'min-w-[10rem]'}
                 placeholder={'Any content'}
                 options={Object.entries(fromNodeTypeToLabel)
                     .filter((entry) => entry[1] !== '')

frontend/src/scenes/onboarding/OnboardingStep.tsx

@@ -66,7 +66,7 @@ export const OnboardingStep = ({
                 </div>
             }
         >
-            <div className="max-w-md">
+            <div className="max-w-192">
                 {hedgehog && <div className="-mt-20 absolute right-4 h-16">{hedgehogToRender}</div>}
 
                 <h1 className="font-bold">{title}</h1>

frontend/src/scenes/onboarding/sdks/SDKs.tsx

@@ -53,7 +53,7 @@ export function SDKs({
             <LemonDivider className="my-8" />
             <div className="flex gap-x-8 mt-8">
                 <div
-                    className={`flex-col gap-y-2 flex-wrap gap-x-4 ${showSideBySide && 'min-w-50 w-50'} ${
+                    className={`flex-col gap-y-2 flex-wrap gap-x-4 ${showSideBySide && 'min-w-[12.5rem] w-50'} ${
                         !showSideBySide && panel !== 'options' ? 'hidden' : 'flex'
                     }`}
                 >
@@ -95,7 +95,9 @@ export function SDKs({
                     </LemonCard>
                 </div>
                 {selectedSDK && productKey && !!sdkInstructionMap[selectedSDK.key] && (
-                    <div className={`shrink min-w-8 ${!showSideBySide && panel !== 'instructions' ? 'hidden' : ''}`}>
+                    <div
+                        className={`shrink min-w-[2rem] ${!showSideBySide && panel !== 'instructions' ? 'hidden' : ''}`}
+                    >
                         {!showSideBySide && (
                             <LemonButton
                                 icon={<IconArrowLeft />}

frontend/src/scenes/products/Products.tsx

@@ -149,7 +149,7 @@ export function Products(): JSX.Element {
             </div>
             {products.length > 0 ? (
                 <>
-                    <div className="flex w-full max-w-xl justify-center gap-6 flex-wrap">
+                    <div className="flex w-full max-w-300 justify-center gap-6 flex-wrap">
                         {products
                             .filter(
                                 (product) =>

frontend/src/scenes/session-recordings/player/PlayerMeta.tsx

@@ -241,7 +241,7 @@ export function PlayerMeta(): JSX.Element {
                             )}
                         </>
                     )}
-                    <div className={clsx('flex-1', isSmallPlayer ? 'min-w-4' : 'min-w-20')} />
+                    <div className={clsx('flex-1', isSmallPlayer ? 'min-w-[1rem]' : 'min-w-[5rem]')} />
                     {resolutionView}
                 </div>
             </div>

frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorControls.tsx

@@ -82,7 +82,7 @@ export function PlayerInspectorControls(): JSX.Element {
 
                 <div className="flex items-center gap-2 flex-1">
                     <LemonInput
-                        className="min-w-40"
+                        className="min-w-[10rem]"
                         size="small"
                         onChange={(e) => setSearchQuery(e)}
                         placeholder="Search..."

frontend/src/scenes/session-recordings/player/inspector/components/ItemConsoleLog.tsx

@@ -17,8 +17,8 @@ export function ItemConsoleLog({ item, expanded, setExpanded }: ItemConsoleLogPr
                 <div className="p-2 text-xs cursor-pointer truncate font-mono flex-1">{item.data.content}</div>
                 {(item.data.count || 1) > 1 ? (
                     <span
-                        className={`bg-${
-                            item.highlightColor || 'primary-alt'
+                        className={`${
+                            item.highlightColor ? 'bg-' + item.highlightColor : 'bg-primary-alt'
                         } rounded-lg px-1 mx-2 text-white text-xs font-semibold`}
                     >
                         {item.data.count}

frontend/src/scenes/session-recordings/saved-playlists/SavedSessionRecordingPlaylistsEmptyState.tsx

@@ -17,7 +17,7 @@ export function SavedSessionRecordingPlaylistsEmptyState(): JSX.Element {
         <LemonBanner type="error">Error while trying to load playlist.</LemonBanner>
     ) : (
         <div className="flex items-center justify-center">
-            <div className="max-w-lg mt-12 flex flex-col items-center">
+            <div className="max-w-248 mt-12 flex flex-col items-center">
                 <h2 className="text-xl">There are no playlists that match these filters</h2>
                 <p className="text-muted">Once you create a playlist, it will show up here.</p>
                 <LemonButton

frontend/src/scenes/settings/project/ProjectSettings.tsx

@@ -92,7 +92,7 @@ export function ProjectVariables(): JSX.Element {
     return (
         <div className="flex items-start gap-4 flex-wrap">
             <div className="flex-1">
-                <h3 id="project-api-key" className="min-w-100">
+                <h3 id="project-api-key" className="min-w-[25rem]">
                     Project API Key
                 </h3>
                 <p>
@@ -132,7 +132,7 @@ export function ProjectVariables(): JSX.Element {
                 </p>
             </div>
             <div className="flex-1">
-                <h3 id="project-id" className="min-w-100">
+                <h3 id="project-id" className="min-w-[25rem]">
                     Project ID
                 </h3>
                 <p>

frontend/src/scenes/surveys/surveyViewViz.tsx

@@ -325,16 +325,17 @@ export function SingleChoiceQuestionPieChart({
                             </BindLogic>
                         </div>
                         <div
-                            className={`grid h-full pl-4 py-${(() => {
+                            className={`grid h-full pl-4 ${(() => {
                                 const dataLength = surveySingleChoiceResults[questionIndex].data.length
+                                // We need to return the whole class for Tailwind to see them when scanning code
                                 if (dataLength < 5) {
-                                    return 20
+                                    return 'py-20'
                                 } else if (dataLength < 7) {
-                                    return 15
+                                    return 'py-15'
                                 } else if (dataLength < 10) {
-                                    return 10
+                                    return 'py-10'
                                 } else {
-                                    return 5
+                                    return 'py-5'
                                 }
                             })()} grid-cols-${Math.ceil(surveySingleChoiceResults[questionIndex].data.length / 10)}`}
                         >

frontend/src/scenes/web-analytics/WebAnalyticsNotice.tsx

@@ -14,7 +14,7 @@ export const WebAnalyticsNotice = (): JSX.Element => {
     return (
         <LemonBanner type="info" className="my-4">
             <div className="flex items-center flex-wrap gap-2 justify-between">
-                <span className="flex-1 min-w-100">
+                <span className="flex-1 min-w-[25rem]">
                     PostHog Web Analytics is in opt-in Beta. Thanks for taking part! We'd love to hear what you think.
                 </span>
                 {showSupportOptions ? (

frontend/src/scenes/web-analytics/WebDashboard.tsx

@@ -95,8 +95,9 @@ const Tiles = (): JSX.Element => {
                             key={i}
                             className={clsx(
                                 'col-span-1 row-span-1 flex flex-col',
-                                `md:col-span-${layout.colSpan ?? 6} md:row-span-${layout.rowSpan ?? 1}`,
-                                `xxl:order-${layout.orderLarge ?? 12}`,
+                                layout.colSpanClassName ?? 'md:col-span-6',
+                                layout.rowSpanClassName ?? 'md:row-span-1',
+                                layout.orderWhenLargeClassName ?? 'xxl:order-12',
                                 layout.className
                             )}
                         >
@@ -121,8 +122,9 @@ const TabsTileItem = ({ tile }: { tile: TabsTile }): JSX.Element => {
         <WebTabs
             className={clsx(
                 'col-span-1 row-span-1',
-                `md:col-span-${layout.colSpan ?? 1} md:row-span-${layout.rowSpan ?? 1}`,
-                `xxl:order-${layout.orderLarge ?? 12}`,
+                layout.colSpanClassName || 'md:col-span-1',
+                layout.rowSpanClassName || 'md:row-span-1',
+                layout.orderWhenLargeClassName || 'xxl:order-12',
                 layout.className
             )}
             activeTabId={tile.activeTabId}