TailwindCSS SSR Rendering w/ Dynamic Component w/ Small Bundle Size

Question

Hi everyone ( first post on a forum, sorry for mistakes ), I'm building a library for handle my custom design system logic; I've searched a lot but it seems like a tailwind limitation, I have many components like TypographyDisplay that has props like size or fontColor that needs to be dynamically rendered basing on how the component is instantiated. I'm using Qwik framework but I found that problem in Next.JS too and I'm going to have a terrible headhache: I don't want to send all the class possibile combination in the css bundle, if I instantiate like this "<TypographyDisplay fontColor = "primary">Something</TypographyDisplay>" i only want to send .text-primary not all the theme fontColor combinations in bundle :( I'm using SSR to avoid those things, I've seen that I can purge files but I don't know how to purge SSR generated HTML...Qwik is also a resumable framework so it sends pure HTML to client, I find that TailwindCSS behaviour so frustrating, it should simply understand what class are going to be rendered in that occasion and make bundle on-the-fly...is not the JIT mode (that should be used as default) do something like this? Have I to switch to another CSS technology or use some meta-utils like twin.macro? thanks for the time spent.

package.json

{
  "name": "my-qwik-basic-starter",
  "description": "App with Routing built-in (recommended)",
  "engines": {
    "node": ">=15.0.0"
  },
  "private": true,
  "scripts": {
    "build": "qwik build",
    "build.client": "vite build",
    "build.preview": "vite build --ssr src/entry.preview.tsx",
    "build.types": "tsc --incremental --noEmit",
    "deploy": "echo 'Run \"npm run qwik add\" to install a server adapter'",
    "dev": "vite --mode ssr",
    "dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
    "fmt": "prettier --write .",
    "fmt.check": "prettier --check .",
    "lint": "eslint \"src/**/*.ts*\"",
    "preview": "qwik build preview && vite preview --host",
    "start": "vite --host --mode ssr",
    "qwik": "qwik"
  },
  "devDependencies": {
    "@builder.io/qwik": "0.17.5",
    "@builder.io/qwik-city": "0.1.0",
    "@types/eslint": "8.21.0",
    "@types/node": "^18.11.19",
    "@types/node-fetch": "latest",
    "@typescript-eslint/eslint-plugin": "5.51.0",
    "@typescript-eslint/parser": "5.51.0",
    "autoprefixer": "10.4.11",
    "eslint": "8.33.0",
    "eslint-plugin-qwik": "0.17.5",
    "node-fetch": "3.3.0",
    "postcss": "^8.4.16",
    "prettier": "2.8.3",
    "tailwindcss": "^3.1.8",
    "typescript": "4.9.5",
    "undici": "5.18.0",
    "vite": "4.1.1",
    "vite-tsconfig-paths": "3.5.0"
  },
  "dependencies": {
    "@builder.io/sdk-qwik": "^0.1.7",
    "dotenv": "^16.0.3"
  }
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */

const MDSysTypefaceDisplayLarge = require( "./src/designTokens/materialDesign/md.sys.typescale.display-large" ) ;
const MDSysTypefaceDisplayMedium = require( "./src/designTokens/materialDesign/md.sys.typescale.display-medium" ) ;
const MDSysTypefaceDisplaySmall = require( "./src/designTokens/materialDesign/md.sys.typescale.display-small" ) ;

// etc.

module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
  theme: {
    fontFamily : {
      "display-large" : MDSysTypefaceDisplayLarge.font ,
      "display-medium" : MDSysTypefaceDisplayMedium.font ,
      "display-small" : MDSysTypefaceDisplaySmall.font ,
      // etc.

    } ,
    fontSize : {
      "display-large" : [ MDSysTypefaceDisplayLarge.size + "px" , {
        lineHeight : MDSysTypefaceDisplayLarge.lineHeight + "px" ,
        letterSpacing : MDSysTypefaceDisplayLarge.tracking + "px" ,
        fontWeight : MDSysTypefaceDisplayLarge.weight
      } ] ,
      "display-medium" : [ MDSysTypefaceDisplayMedium.size + "px" , {
        lineHeight : MDSysTypefaceDisplayMedium.lineHeight + "px" ,
        letterSpacing : MDSysTypefaceDisplayMedium.tracking + "px" ,
        fontWeight : MDSysTypefaceDisplayMedium.weight
      } ] ,
      "display-small" : [ MDSysTypefaceDisplaySmall.size + "px" , {
        lineHeight : MDSysTypefaceDisplaySmall.lineHeight + "px" ,
        letterSpacing : MDSysTypefaceDisplaySmall.tracking + "px" ,
        fontWeight : MDSysTypefaceDisplaySmall.weight
      } ] ,
      // etc.

    } ,
    extend: {},
  },
  plugins: [],
};

UITypographyHeadingDisplay.tailwindcss.ts

import type { IUITypographyHeadingDisplay } from "../.." ;

import { EUIComponentColors, EUIComponentSizes } from "~/components/enums" ;

import { UITypographyHeadingTailwindCSSStylingStrategyHandler } from "~/components/ui/typography/headings" ;

export interface IUITypographyHeadingDisplayTailwindCSSStylingStrategyProps extends IUITypographyHeadingDisplay {}

export type IUITypographyTailwindCSSStylingStrategy = ( args : IUITypographyHeadingDisplayTailwindCSSStylingStrategyProps ) => string[] ;

export const UITypographyHeadingDisplayTailwindCSSStylingStrategyHandler : IUITypographyTailwindCSSStylingStrategy = ( {
    size = EUIComponentSizes.MEDIUM ,
    fontColor = EUIComponentColors.ON_SURFACE ,
    isBold = false ,
    isItalic = false ,
} ) => {
    let _classNames : string[] = UITypographyHeadingTailwindCSSStylingStrategyHandler( {
        fontColor ,
        isBold ,
        isItalic ,
    } ) ;

    const fontFaceClassName =
        size === EUIComponentSizes.LARGE ? "font-display-large" :
        size === EUIComponentSizes.MEDIUM ? "font-display-medium" :
        size === EUIComponentSizes.SMALL ? "font-display-small" :
        ""
    ;
;
    
    if ( fontFaceClassName !== "" ) _classNames = [
        ..._classNames ,
        fontFaceClassName ,
    ] ;

    const fontSizeClassName =
        size === EUIComponentSizes.LARGE ? "text-display-large" :
        size === EUIComponentSizes.MEDIUM ? "text-display-medium" :
        size === EUIComponentSizes.SMALL ? "text-display-small" :
        ""
    ;

    if ( fontSizeClassName !== "" ) _classNames = [
        ..._classNames ,
        fontSizeClassName
    ] ;

    return _classNames ;
} ;

UITypographyDisplay.tsx

import { component$ } from "@builder.io/qwik" ;

import type { IUITypographyHeadingDisplay } from "../" ;

import { UITypographyHeadingDisplayTailwindCSSStylingStrategyHandler } from "../" ;

import { QwikHTMLTypographyHeading } from "~/components/html/typography/concretes/heading" ;
import { QwikHTMLTypographyBoldDecorator } from "~/components/html/typography/decorators/bold" ;
import { QwikHTMLTypographyItalicDecorator } from "~/components/html/typography/decorators/italic" ;

import {
    EUIComponentSizes ,
    EUIComponentColors ,
} from "~/components/enums" ;
import { EUITypographyHeadingLevels } from "~/components/enums/typography/headings" ;

export interface IUITypographyHeadingDisplayQwikComponentProps extends IUITypographyHeadingDisplay {}

export const QwikUITypographyHeadingDisplay = component$( ( {
    id = undefined ,
    onClick = undefined ,
    onChange = undefined ,
    size = EUIComponentSizes.MEDIUM ,
    fontColor = EUIComponentColors.ON_SURFACE ,
    isBold = false ,
    isItalic = false ,
    HeadingLevel = EUITypographyHeadingLevels.H1 ,
    copy = "" ,
} : IUITypographyHeadingDisplayQwikComponentProps ) => {
    const _classNames = UITypographyHeadingDisplayTailwindCSSStylingStrategyHandler( {
        size ,
        fontColor ,
        isBold ,
        isItalic
    } ) ;

    const _QwikHTMLTypographyHeadingProps = {
        id ,
        onClick ,
        onChange ,
        classNames : _classNames.join( " " ) ,
        HeadingLevel ,
    } ;

    return (
        <QwikHTMLTypographyBoldDecorator isBold = { isBold } >
            <QwikHTMLTypographyItalicDecorator isItalic = { isItalic } >
                <QwikHTMLTypographyHeading { ..._QwikHTMLTypographyHeadingProps } >
                    { copy }
                </QwikHTMLTypographyHeading>
            </QwikHTMLTypographyItalicDecorator>
        </QwikHTMLTypographyBoldDecorator>
    ) ;
} ) ;

QwikHTMLTypographyHeading

import {
    component$ ,
    Slot ,
} from "@builder.io/qwik" ;

import type { IHTMLTypographyHeading } from ".." ;

import { EUITypographyHeadingLevels } from "~/components/enums/typography/headings" ;

export interface IHTMLTypographyHeadingQwikComponentProps extends IHTMLTypographyHeading {}

export const QwikHTMLTypographyHeading = component$( ( {
    classNames = undefined ,
    HeadingLevel = EUITypographyHeadingLevels.H1 ,
} : IHTMLTypographyHeadingQwikComponentProps ) => {
    return (
        <HeadingLevel class = { classNames } >
            <Slot />
        </HeadingLevel>
    ) ;
} ) ;

tried to set mode:"jit" but obv nothing changes

class = text-${color} was the first attempt and obv not working without commenting classnames or adding them to safelist, far i've understand to use full classnames but laaarge bundle size if someone use a complex design system

ps: I've tried to extrapolate classNames into an external object and that object in an external file too and accessing it like colorStyles[color] but same result with dirty enumerator usage, I've tried to put the logic into QwikHTMLTypographyHeading class property but same result...

I want only to compile css classes with ssr pros like knowing the classname of a used component to have correct bundle size...

Ricardo Silva · Accepted Answer · 2023-03-14T12:25:26.880

I find that TailwindCSS behaviour so frustrating, it should simply understand what class are going to be rendered in that occasion and make bundle on-the-fly...is not the JIT mode (that should be used as default) do something like this?

Tailwind is really not that type of tool, you can suggest as a new feature, but pretty sure this was already requested or there a plugin for that.

What I would suggest here is CSS custom properties for every class you might want to be customizable. Your color example can have the problem completely avoid by simply doing:

<div class="text-[var(--customColor, black)]"></div>

this allow customization either on the client or on the server without bothering with some fancy plugin to figure out the variants.

This also allow you to predefine the variants for color by setting the --customColor and not the tailwind classes.

Not sure I understood correctly but hope this helps.

Edit: Answering your comment.

You don't set the classes and you don't change the custom property name, the class is always "text-[var(--customColor, black)]"

You set the --customColor either by:

injecting a style tag before your element.
using plain style attribute.
setting it into the root and later manipulate it with js whenever there a variant.

This way you don't need to define maps you just dynamically set whatever value. And if you need maps the mapping is directly the style value nothing to do with tailwind.

Tailwind is not for that use case. Maybe styled components would fit you better here, which allow this kind of dynamic behavior but with the burden of having styling possibly evaluated at runtime and at every render.

Thanks for answering but using css variabile like that doesn't change the result cause i've many variabile that can be switched and foreach of them i've to 'color==="primary"?"text-[var(--font-primary, black)]: etc etc and It will bundle all of them at the same way as before :( a solution could be ti create a specific component for every styling case (not the best for managing) or ti use inline styles but I think that 90% of classes will be dynamic...why tailwind is adviced to be used with something like react of dynamism Is like 0? It's helpfull only if u want to template only or pure HTML... — Andrea Peverelli, Mar 14 '23 at 12:17
Thanks for reply, maybe should be good to use tailwind for basic styling and styled-vanilla-extract that uses styled-components as u adviced for dynamism (both official Qwik integrated), I don't like to touch css with js or inject/use plain css cause there's troubles after with prefixes and so on but someone else could do that way too, thanks — Andrea Peverelli, Mar 14 '23 at 12:43

TailwindCSS SSR Rendering w/ Dynamic Component w/ Small Bundle Size

1 Answers1