`})}),` `,(0,n.jsx)(e.h3,{children:"Color defaults"}),` `,(0,n.jsxs)(e.p,{children:["We can use CSS variables to set responsive colours under ",(0,n.jsx)(e.code,{children:":root"})," and ",(0,n.jsx)(e.code,{children:"html.dark"})," scopes. This means we write and manage one class, such as ",(0,n.jsx)(e.code,{children:"bg-canvas"}),", instead of two, such as ",(0,n.jsx)(e.code,{children:"bg-gray-100 dark:bg-gray-800"}),"."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-css",children:`@import "@radix-ui/colors/gray.css"; @import "@radix-ui/colors/gray-dark.css"; :root { --color-gray-base: var(--gray-1); --color-gray-bg: var(--gray-3); --color-gray-line: var(--gray-4); --color-gray-border: var(--gray-5); --color-gray-solid: var(--gray-10); --color-gray-fill: var(--gray-12); } `})}),` `,(0,n.jsxs)(e.p,{children:["Because I\u2019m using ",(0,n.jsx)(e.a,{href:"https://www.radix-ui.com/colors",children:"Radix Colors"})," here, I don\u2019t need to set the ",(0,n.jsx)(e.code,{children:".dark"})," scope as that\u2019s ",(0,n.jsx)(e.a,{href:"https://github.com/radix-ui/colors/blob/8a03dad3bc93ea4ed48ce2b70847a3538097e02f/scripts/build-css-modules.js#L19",children:"already done for me"}),". Another reason I like Radix Colors is that they\u2019re ",(0,n.jsx)(e.a,{href:"https://www.radix-ui.com/colors/custom",children:"easy to customise"}),"."]}),` `,(0,n.jsx)(e.p,{children:"Then set the CSS variables in the Tailwind config."}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-ts",children:`colors: { canvas: "var(--color-gray-base)", background: "var(--color-gray-bg)", line: "var(--color-gray-line)", border: "var(--color-gray-border)", solid: "var(--color-gray-solid)", fill: "var(--color-gray-fill-contrast)", } `})}),` `,(0,n.jsxs)(e.p,{children:["Using ",(0,n.jsx)(e.code,{children:"bg-canvas"})," now sets the appropriate color in light or dark mode. Removing this duplication across a codebase centralises color management to our config instead of spreading it across the implementation of classes on components. A huge win for cognitiion and maintainability."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:`/* sets --gray-1 as #fcfcfc on :root or #111111 on html.dark */

`})}),` `,(0,n.jsx)(e.h3,{children:"Semantic naming"}),` `,(0,n.jsx)(e.p,{children:"I advocate semantic names for colours and font-sizes because semantic naming is a forcing function that ties meaning to use. Doing so removes implementation guess work and reduces error."}),` `,(0,n.jsxs)(e.p,{children:["I\u2019ve seen countless projects where inconsistent ",(0,n.jsx)(e.code,{children:"gray-50"}),", ",(0,n.jsx)(e.code,{children:"gray-100"})," or ",(0,n.jsx)(e.code,{children:"gray-200"})," are all used for backgrounds. This is easily solved by defining a color called ",(0,n.jsx)(e.code,{children:"background"}),"."]}),` `,(0,n.jsxs)(e.p,{children:["In the same way, it is easier to remember the names for dark and light text colors when they are called ",(0,n.jsx)(e.code,{children:"fill"})," and ",(0,n.jsx)(e.code,{children:"solid"}),". It\u2019s harder and more error-prone when they\u2019re called ",(0,n.jsx)(e.code,{children:"gray-900"})," and ",(0,n.jsx)(e.code,{children:"gray-600"})," because then you have to remember specifically that it wasn\u2019t ",(0,n.jsx)(e.code,{children:"gray-950"})," and ",(0,n.jsx)(e.code,{children:"gray-500"}),", or ",(0,n.jsx)(e.code,{children:"gray-800"})," and ",(0,n.jsx)(e.code,{children:"gray-700"}),"."]}),` `,(0,n.jsxs)(e.p,{children:["But naming things\u2014and agreeing on naming\u2014is hard. In the spirit of zero-config, I suggest taking ",(0,n.jsx)(e.a,{href:"https://www.radix-ui.com/colors",children:"Radix Color"}),"\u2019s backgrounds, borders, solids & fills paradigm. Or ",(0,n.jsx)(e.a,{href:"https://github.com/rainbow-me/rainbowkit/blob/d8c64ee4baf865d3452a6b92e0525c123f680ec1/site/css/tokens.ts#L120",children:"this"})," palette semantics."]}),` `,(0,n.jsxs)(e.p,{children:["And once you\u2019ve set this in ",(0,n.jsx)(e.code,{children:"tailwind.config"}),", Typescript will jog your memory at your fingertips with autocomplete."]}),` `,(0,n.jsx)(e.h3,{children:"Avoid namespace clashes"}),` `,(0,n.jsxs)(e.p,{children:["If you\u2019re ",(0,n.jsx)(e.a,{href:"https://tailwindcss.com/docs/plugins#extending-the-configuration",children:"extending a Tailwind theme"})," and not writing your own, don\u2019t use a scale key that\u2019s already been used. You may inadvertently overwrite a class that you need to use."]}),` `,(0,n.jsxs)(e.p,{children:["You\u2019ll note in the previous colour config example that I set the ",(0,n.jsx)(e.code,{children:"--color-gray-base"})," var to ",(0,n.jsx)(e.code,{children:"canvas"}),", not ",(0,n.jsx)(e.code,{children:"base"}),". If I used ",(0,n.jsx)(e.code,{children:"base"})," then using this color scale as a text colour (",(0,n.jsx)(e.code,{children:"text-base"}),") would clash with the ",(0,n.jsx)(e.a,{href:"https://github.com/tailwindlabs/tailwindcss/blob/818d10ab8461e682a185475dd4718e741103a4e3/stubs/config.full.js#L327",children:"default font-size base value"}),", which is also ",(0,n.jsx)(e.code,{children:"text-base"}),"."]}),` `,(0,n.jsxs)(e.p,{children:["This isn\u2019t a downfall of customising the Tailwind config, it\u2019s a legacy of its theme naming: setting font-size or color classes in Tailwind both use ",(0,n.jsx)(e.code,{children:"text-*"}),".",(0,n.jsx)(e.sup,{children:(0,n.jsx)(e.a,{href:"#user-content-fn-1",id:"user-content-fnref-1","data-footnote-ref":!0,"aria-describedby":"footnote-label",children:"1"})})]}),` `,(0,n.jsx)(e.h3,{children:"Spacing defaults"}),` `,(0,n.jsx)(e.p,{children:"We can also use CSS variables to set spacings."}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-css",children:`:root { --height-nav: 80px; --height-tab: 54px; --space-inset: 20px; --container-text-px: 660px; --container-hero-px: 1000px; } `})}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-ts",children:`spacing: { em: "1em", /* relate icon size to parent font-size */ nav: "var(--height-nav)", inset: "var(--space-inset)", text: "var(--container-text)", hero: "var(--container-hero)", } `})}),` `,(0,n.jsx)(e.p,{children:"One could argue this is over-engineering. Except that when it comes time to compute complex interactive layouts like sticky headers, scroll margins and so on, this upfront configuration work makes it straight forward and error-free, to the pixel."}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:`

/* ... */

`})}),` `,(0,n.jsx)(e.p,{children:"Note again the use of semantic naming makes it easy to remember and use."}),` `,(0,n.jsx)(e.h2,{children:"Augmenting your Tailwind config"}),` `,(0,n.jsx)(e.p,{children:"We have now configured typography, colour and spacing tokens in a manner that is easy to understand and maintain in a single, centralised place. And we don\u2019t need to wrire as many classes to implement the system. Winning. And there\u2019s further steps we can take to reduce this implementation overhead."}),` `,(0,n.jsx)(e.h3,{children:"Clamp your classes"}),` `,(0,n.jsxs)(e.p,{children:["What if I told you there\u2019s a way to completely avoid writing ",(0,n.jsx)(e.code,{children:"text-lg lg:text-xl xl:text-2xl p-2 md:p-4 lg:p-8"})," everywhere?"]}),` `,(0,n.jsxs)(e.p,{children:["We can avoid setting responsive font-size classes by using clamp as a a font-size value in ",(0,n.jsx)(e.code,{children:"tailwind.config"}),". Here\u2019s the ",(0,n.jsx)(e.a,{href:"https://github.com/callumflack/callum-website/blob/3746ca4eef7eaae1663e39584bb75a35e732ccf1/packages/config-tailwind/generate-clamp-size.ts#L7",children:"simple clamp function"})," I use."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-ts",children:`fontSize: { title: [ /* clamp(17px, 14.1429px + 0.5714vw, 21px) */ generateClampSize(500, 1200, 17, 21), { lineHeight: 1.5, letterSpacing: "-0.015em" }, ]; } `})}),` `,(0,n.jsxs)(e.p,{children:["So instead of writing ",(0,n.jsx)(e.code,{children:"text-lg lg:text-xl xl:text-2xl"})," we can just write ",(0,n.jsx)(e.code,{children:"text-title"}),". Once again, by hoisting font-size responsiveness into a clamp value, we avoid the \u201Cimplement classes\u201D pitfall again, saving mental effort, errors and debugging time."]}),` `,(0,n.jsxs)(e.p,{children:["Keep in mind, this means we\u2019ve moved from ",(0,n.jsx)(e.code,{children:"text-lg lg:text-xl xl:text-2xl leading-none tracking-wide"})," to ",(0,n.jsx)(e.code,{children:"text-title"})," by properly configuring Tailwind. Winning!"]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-ts",children:`/* 17px at 500px, 21px at 1200, fluidly calculated inbetween */ /* \u2026with default line-height and letter-spacing also specified */

Heading copy

`})}),` `,(0,n.jsxs)(e.p,{children:["We can also do this for spacing. When extending a theme, I prefix these keys with ",(0,n.jsx)(e.code,{children:"d"})," for \u201Cdynamic\u201D to differentiate it from the default spacing scale."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-ts",children:`spacing: { /* lower value is 2/3 of upper value */ d4: generateClampSize(500, 1200, 10.5, 16), d8: generateClampSize(500, 1200, 21, 32), d16: generateClampSize(500, 1200, 43, 64), d24: generateClampSize(500, 1200, 64, 96), d64: generateClampSize(500, 1200, 171, 256), } `})}),` `,(0,n.jsxs)(e.p,{children:["This allows us to write ",(0,n.jsx)(e.code,{children:"py-d24"})," instead of ",(0,n.jsx)(e.code,{children:"py-16 md:py-20 lg:py-24"}),". This alleviates the weight of holding a range of website versions for each media-query in our minds. Instead it encourages us to picture fluidly responsive layouts where measurements don\u2019t matter as much as consistent relationships."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-ts",children:`

/* ... */

`})}),` `,(0,n.jsx)(e.h2,{children:"Summary"}),` `,(0,n.jsx)(e.p,{children:"Well-crafted UI is your last defense against the coming slopwave of careless AI apps. Don\u2019t spread you design system into classes all across your app. Configure it."}),` `,(0,n.jsx)(e.p,{children:"Yes, there\u2019s an upfront time cost. But it pays off in spades: less code, fewer errors, greater design consistency, and a team that actually understands the system."}),` `,(0,n.jsx)(e.p,{children:"Here\u2019s how customizing Tailwind can save you time and headaches so you can focus on the irrational amount of care it takes to build UI that works in the blink of an eye:"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:["Use ",(0,n.jsx)(e.code,{children:"tailwind.config"})," to its full potential. Take the time to centralise and group your design tokens and avoid the \u201Cimplement classes everywhere\u201D trap."]}),` `,(0,n.jsxs)(e.li,{children:["Use ",(0,n.jsx)(e.code,{children:"clamp()"})," for fluid typography and spacing."]}),` `,(0,n.jsxs)(e.li,{children:["Set color variables on ",(0,n.jsx)(e.code,{children:":root"})," and ",(0,n.jsx)(e.code,{children:".dark"})," for effortless dark mode."]}),` `,(0,n.jsxs)(e.li,{children:["Name colors and spacing semantically: ",(0,n.jsx)(e.code,{children:"background"})," beats ",(0,n.jsx)(e.code,{children:"gray-100"})," any day."]}),` `,(0,n.jsxs)(e.li,{children:["Relate icons to text size with ",(0,n.jsx)(e.code,{children:"size-em"}),"."]}),` `]}),` `,(0,n.jsx)(t,{children:(0,n.jsxs)(e.p,{children:["Next up: We\u2019ll explore how to use ",(0,n.jsx)(e.a,{href:"https://cva.style/docs",children:"Class Variance Authority"})," to create a bulletproof styling API with semantic props drawn from Tailwind. Stay tuned."]})}),` `,(0,n.jsxs)(e.section,{"data-footnotes":!0,className:"footnotes",children:[(0,n.jsx)(e.h2,{className:"sr-only",id:"footnote-label",children:"Footnotes"}),` `,(0,n.jsxs)(e.ol,{children:[` `,(0,n.jsxs)(e.li,{id:"user-content-fn-1",children:[` `,(0,n.jsxs)(e.p,{children:["This is also why I dislike using ",(0,n.jsx)(e.a,{href:"https://github.com/dcastil/tailwind-merge",children:"tailwind-merge"})," to remove duplicate Tailwind classes in JSX. More often than not, I find it removing a ",(0,n.jsx)(e.code,{children:"text-color"})," in favour of a ",(0,n.jsx)(e.code,{children:"text-fontSize"})," when both are needed. I\u2019m surprised more developers don\u2019t raise this issue. ",(0,n.jsx)(e.a,{href:"#user-content-fnref-1","data-footnote-backref":"","aria-label":"Back to reference 1",className:"data-footnote-backref",children:"\u21A9"})]}),` `]}),` `]}),` `]})]})}function g(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,{...i,children:(0,n.jsx)(h,{...i})}):h(i)}function r(i,e){throw new Error("Expected "+(e?"component":"object")+" `"+i+"` to be defined: you likely forgot to import, pass, or provide it.")}return x(k);})(); ;return Component;

Forward deployed engineers

Configuring Tailwind as a Design System