"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", figure: "figure", h2: "h2", h3: "h3", h4: "h4", p: "p", pre: "pre", span: "span", strong: "strong", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "I want to share something exciting solution with you. The solution is about solving the dynamic class value that tailwindcss normally does not work with." }), "\n", _jsxs(_components.p, { children: ["If you're new to tailwindcss, You can learn here how to ", _jsx(_components.a, { href: "https://programmingly.dev/how-to-integrate-tailwindcss-in-react-to-quickly-styling-our-app", children: "integrate tailwindcss in your project" })] }), "\n", _jsxs(_components.p, { children: ["I’m inspired by ", _jsx(_components.a, { href: "https://medium.com/@achronus/solving-a-niche-frontend-problem-dynamic-tailwind-css-classes-in-react-da5f513ecf6a", children: "this article" }), " written by ", _jsx(_components.a, { href: "https://medium.com/u/9ff8bb1da0e0?source=post_page---user_mention--0041e28b112a--------------------------------", children: "Ryan Partridge" }), ", Special Thanks to him 🙏"] }), "\n", _jsxs(_components.p, { children: ["In the above article, Ryan provides the solution with tailwindcss class names, but in this article, I’m extending this solution and solving the problem with dynamic values using tailwind ", _jsx(_components.strong, { children: "arbitrary values" }), "."] }), "\n", _jsx(_components.p, { children: "Arbitrary values are introduced in tailwindcss in v2.1. This new powerful feature becomes possible due to the JIT compiler." }), "\n", _jsx(_components.h2, { children: "What is the actual problem?" }), "\n", _jsx(_components.p, { children: "While I’m working on a react project, for styling i'm using Tailwindcss & ShadCN design library." }), "\n", _jsx(_components.p, { children: "While building dashboard stats cards, I see each card has a different color. The card also includes an icon with its background color in a darker shade." }), "\n", _jsxs(_components.p, { children: ["So the quick solution I found out is to add a color hexadecimal value in the tailwindcss ", _jsx(_components.code, { children: "bg-[#D45113]" }), " class. ", _jsx(_components.strong, { children: "But, here is the problem…" }), " Tailwind does not allow dynamically added values, because as we know the JIT compiler runs on demand and only ", _jsx(_components.strong, { children: "accepts statically defined values" }), "."] }), "\n", _jsx(_components.p, { children: "This is where I'm completely stuck, because provided color values does not actually converted to CSS properties and hence, nothing is painted in a browser." }), "\n", _jsx(_components.p, { children: "Let me explain this with an example code. Imagine your data looks something like this:" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "javascript", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "javascript", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " statsData" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " [" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " stats: " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "4585" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " color: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"#48CF7357\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " iconBg: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"#49D074\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " icon: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"icon here...\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }, {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " stats: " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "95" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " color: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"#F5A45957\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " iconBg: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"#FDAF67\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " icon: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"icon here...\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }, {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " stats: " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "1022" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " color: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"#B486EE57\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " iconBg: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"#B688EF\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " icon: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"icon here...\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }, {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " stats: " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "105" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " color: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"#413F5A57\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " iconBg: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"#4E4B65\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " icon: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"icon here...\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }, {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " stats: " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "105" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " color: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"#4E4B65\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " iconBg: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"#7569FC\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " icon: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"icon here...\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }, {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " stats: " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "105" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " color: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"#F6323A57\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " iconBg: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"#FE474F\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " icon: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"icon here...\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " ];" }) })] }) }) }), "\n", _jsxs(_components.p, { children: ["Each object in the array has a different ", _jsx(_components.code, { children: "color" }), " and ", _jsx(_components.code, { children: "iconBg" }), " colors in hexadecimal format."] }), "\n", _jsxs(_components.p, { children: ["Now, take a look at our ", _jsx(_components.strong, { children: "Card Component" }), " which takes these color values while looping through this data."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "jsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "jsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " export" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " default" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " function" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " DashCard" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "({" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FFAB70" }, children: " icon" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FFAB70" }, children: " iconClass" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#FFAB70" }, children: " cardClass" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }) {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "Card" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "`${" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "cardClass" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "}`" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}>" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "CardContent" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "div" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "`${" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "iconClass" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "}`" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " >{icon}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " )" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }" }) })] }) }) }), "\n", _jsx(_components.p, { children: "Our card component is simple, it takes classes as props from parents and applies style using tailwindcss classes." }), "\n", _jsx(_components.p, { children: "Now, take a look at our parent component:" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "jsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "jsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " function" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " DashboardCardWrapper" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "() {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "section" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"grid grid-cols-3 gap-4\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " statsData " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "&&" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " statsData?." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "map" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "((" }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "item" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "idx" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ") " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "DashCard" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " key" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{idx}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " icon" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{item.icon}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " iconClass" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "`text-white bg-[${" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "item" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "." }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "iconBg" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "}]}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9ECBFF" }, children: " cardClass={`" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "bg" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "-" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "[" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "`${" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "item" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "." }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "color" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "}] border-[`" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "${item.color}" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "`]} " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " />" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " )" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " " }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " )" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " }" }) })] }) }) }), "\n", _jsxs(_components.p, { children: ["In our parent component, ", _jsx(_components.code, { children: "stateData" }), " is used with ", _jsx(_components.code, { children: "map()" }), " array method for applying a loop to our ", _jsx(_components.code, { children: "DashCard" }), " component."] }), "\n", _jsxs(_components.p, { children: ["You may have noticed that I'm assigning dynamic color values ", _jsx(_components.code, { children: "bg-[${item.iconBg}]" }), " using arbitrary values style."] }), "\n", _jsxs(_components.p, { children: ["But, ", _jsx(_components.strong, { children: "Unfortunately" }), "… colors do not apply to our card component."] }), "\n", _jsx(_components.h2, { children: "How to apply dynamic values in arbitrary values in tailwindcss?" }), "\n", _jsxs(_components.p, { children: ["To understand this solution, we need to understand how ", _jsx(_components.a, { href: "https://v2.tailwindcss.com/docs/just-in-time-mode", children: "JIT (Just-In-Time) compiler" }), " generates tailwindcss classes?"] }), "\n", _jsxs(_components.p, { children: ["The tailwind's JIT compiler looks for the ", _jsx(_components.strong, { children: "static class names" }), " in the code to generate the related CSS for us."] }), "\n", _jsx(_components.p, { children: "See the below example code:" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "jsx", "data-theme": "github-dark", children: _jsx(_components.code, { "data-language": "jsx", "data-theme": "github-dark", style: { display: "grid" }, children: _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "div" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "`mt-[${" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "size" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " ===" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " 'lg'" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " ?" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " '22px'" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " :" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " '17px'" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " }]`" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}>" })] }) }) }) }), "\n", _jsx(_components.p, { children: "The above example does not work again, because, the Just-in-Time (JIT) compiler is designed to generate utility-based CSS styles on demand, at the time of development, or at build time." }), "\n", _jsxs(_components.p, { children: ["Like, In the above example, the javascript express cannot be compiled, because ", _jsx(_components.strong, { children: "it is unknown and processed at the runtime" }), "."] }), "\n", _jsx(_components.p, { children: "Take a look at this example, which works well for us:" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "jsx", "data-theme": "github-dark", children: _jsx(_components.code, { "data-language": "jsx", "data-theme": "github-dark", style: { display: "grid" }, children: _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "div" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{ size " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "===" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " 'lg'" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " ?" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " 'mt-[22px]'" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " :" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " 'mt-[17px]'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }>" })] }) }) }) }), "\n", _jsx(_components.p, { children: "This works because the class name is known to the JIT compiler and the class name is served statically." }), "\n", _jsx(_components.p, { children: "So, in our case, to make it work and apply these hexadecimal color values. It is required that tailwindcss must know these values on demand so that they are served statically." }), "\n", _jsx(_components.p, { children: _jsxs(_components.strong, { children: ["So, the solution I have found in the above-mentioned article is to use the ", _jsx(_components.code, { children: "safelist" }), " option of ", _jsx(_components.code, { children: "tailwind.config.js" }), " file."] }) }), "\n", _jsxs(_components.h3, { children: ["What is ", _jsx(_components.code, { children: "safelist" }), " in Tailwind CSS?"] }), "\n", _jsxs(_components.p, { children: ["Tailwind CSS uses a ", _jsx(_components.strong, { children: "Just-in-Time (JIT)" }), " compiler that generates only the CSS classes you use in your HTML, JS, or template files. This makes your final CSS bundle ", _jsx(_components.strong, { children: "much smaller" }), " and faster."] }), "\n", _jsxs(_components.p, { children: ["However, sometimes you use class names ", _jsx(_components.strong, { children: "dynamically" }), "—like ", _jsx(_components.code, { children: "bg-${color}" }), " or ", _jsx(_components.code, { children: "text-${variant}" }), "—and the compiler can’t ", _jsx(_components.strong, { children: "see" }), " those in your code. So it won’t include them in the final CSS. That's where the ", _jsx(_components.strong, { children: _jsx(_components.code, { children: "safelist" }) }), " option comes in!"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "The Safelist option tells the tailwindcss to always include these classes in the final CSS bundle, even if you don't see them in a source code." }) }), "\n", _jsxs(_components.p, { children: ["In our case, keeping things simple, I've defines an array of colors and generate static classes for background, border and text using and assigns these classes to ", _jsx(_components.code, { children: "safelist" }), " option."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "jsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "jsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " colours" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " [" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"#48CF7357\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"#49D074\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"#F5A45957\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "];" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " safeColours" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " colours." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "flatMap" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "((" }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "color" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ") " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " [ " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "`bg-[${" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "color" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "}]`" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "`border-[${" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "color" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "}]`" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "`text-[${" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "color" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "}]`" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "]);" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " module" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "." }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "exports" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " content: [" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"./src/**/*.{html,js}\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "]," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " safelist: [" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "..." }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "safeColours], " }), _jsx(_components.span, { style: { color: "#6A737D" }, children: "// provide generated classes here" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " theme: {" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " extend: {}," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " plugins: []," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " })] }) }) }), "\n", _jsx(_components.p, { children: "Now, if you run the code again, you’ll see colors applied on cards and our code works perfectly as we want." }), "\n", _jsx(_components.h4, { children: "What are the drawbacks of using safelist soo much?" }), "\n", _jsx(_components.p, { children: "As we see, this option is very handy, but it is important to know the drawbacks as well to keep things simple and in control." }), "\n", _jsx(_components.h4, { children: "1) Increase the bundle size" }), "\n", _jsx(_components.p, { children: "As I said before, JIT compiler generate static used properties in a final CSS bundle, which makes the bundle size very small, and good for optimization purpose." }), "\n", _jsx(_components.p, { children: "The Safelist option always includes your static classes, whether they are used in a project or not, saving soo much classes in a safelist might increase the final CSS bundle size of your project." }), "\n", _jsx(_components.h4, { children: "2) Manually Managing" }), "\n", _jsxs(_components.p, { children: ["You have to ", _jsx(_components.strong, { children: "manually keep track" }), " of what to safelist. If you forget to add a class, it won't show up, even if your code is trying to use it dynamically. This might leads of unknown bugs in our code."] }), "\n", _jsx(_components.h4, { children: "3) Harder to Scale" }), "\n", _jsx(_components.p, { children: "As the app grows the safelist might grows too, and it becomes a maintenance burden." }), "\n", _jsx(_components.h3, { children: "Wrapping Up" }), "\n", _jsxs(_components.p, { children: ["The ", _jsx(_components.code, { children: "safelist" }), " feature in Tailwind CSS is useful for including classes that are generated dynamically and might not be detected during build time. It’s great for scenarios like theme switching or styling from CMS content, but if overused, it can increase your CSS bundle size and affect performance. Since it requires manual setup, it also adds some maintenance overhead. Used wisely, safelist helps balance flexibility with performance in dynamic Tailwind projects."] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };