[{"data":1,"prerenderedAt":355},["ShallowReactive",2],{"document-library-menu":3,"document-content--docs-technology-tailwind-docs":58,"document-library-links--docs-technology-tailwind-docs":350},[4,8,12],{"title":5,"path":6,"stem":7,"children":-1},"Resources","\u002Fdocs","docs\u002Findex",{"title":9,"path":10,"stem":11,"children":-1},"Project Initiation","\u002Fdocs\u002Fproject-initiation","docs\u002F1.project-initiation",{"title":13,"icon":14,"path":15,"stem":16,"children":17,"page":-1},"Technology","i-lucide-layers","\u002Fdocs\u002Ftechnology","docs\u002F2.technology\u002Findex",[18,23,28,33,38,43,48,53],{"title":19,"path":20,"stem":21,"icon":22,"children":-1},"Laravel","\u002Fdocs\u002Ftechnology\u002Flaravel","docs\u002F2.technology\u002F1.laravel","i-simple-icons-laravel",{"title":24,"path":25,"stem":26,"icon":27,"children":-1},"Flutter","\u002Fdocs\u002Ftechnology\u002Fflutter","docs\u002F2.technology\u002F2.flutter","i-simple-icons-flutter",{"title":29,"path":30,"stem":31,"icon":32,"children":-1},"Nuxt","\u002Fdocs\u002Ftechnology\u002Fnuxt","docs\u002F2.technology\u002F3.nuxt","i-simple-icons-nuxt",{"title":34,"path":35,"stem":36,"icon":37,"children":-1},"Tailwind","\u002Fdocs\u002Ftechnology\u002Ftailwind","docs\u002F2.technology\u002F4.tailwind","i-simple-icons-tailwindcss",{"title":39,"path":40,"stem":41,"icon":42,"children":-1},"Cursor","\u002Fdocs\u002Ftechnology\u002Fcursor","docs\u002F2.technology\u002F5.cursor","i-simple-icons-cursor",{"title":44,"path":45,"stem":46,"icon":47,"children":-1},"AWS","\u002Fdocs\u002Ftechnology\u002Famazon","docs\u002F2.technology\u002F6.amazon","i-simple-icons-amazon",{"title":49,"path":50,"stem":51,"icon":52,"children":-1},"Cloudflare","\u002Fdocs\u002Ftechnology\u002Fcloudflare","docs\u002F2.technology\u002F7.cloudflare","i-simple-icons-cloudflare",{"title":54,"path":55,"stem":56,"icon":57,"children":-1},"MySQL","\u002Fdocs\u002Ftechnology\u002Fmysql","docs\u002F2.technology\u002F8.mysql","i-simple-icons-mysql",{"id":59,"title":60,"body":61,"description":344,"extension":345,"meta":346,"navigation":347,"path":35,"seo":348,"stem":36,"__hash__":349},"docs\u002Fdocs\u002F2.technology\u002F4.tailwind.md","Tailwind CSS",{"type":62,"value":63,"toc":326},"minimark",[64,72,75,86,91,140,144,160,163,167,181,185,212,216,222,248,252,266,271,275,278,282,287,290,294,299,303,306,310,316],[65,66,67,68,71],"p",{},"Tailwind CSS is how the interface is styled. Spacing, type, colour, and layout are utilities in the ",[69,70,29],"a",{"href":30}," components, with a small set of design tokens so a control on one screen matches the same control on the next. It is not a service we offer on its own. It is part of delivering an interface that a later team can continue to change.",[65,73,74],{},"This site is styled with Tailwind CSS.",[65,76,77,81,82,85],{},[69,78,80],{"href":79},"\u002F_action\u002Fcontact-us","Start a conversation"," about the product the interface belongs to, or read ",[69,83,84],{"href":10},"Project initiation",".",[87,88,90],"h2",{"id":89},"at-a-glance","At a glance",[92,93,94,105],"table",{},[95,96,97],"thead",{},[98,99,100,103],"tr",{},[101,102],"th",{},[101,104],{},[106,107,108,117,125,133],"tbody",{},[98,109,110,114],{},[111,112,113],"td",{},"Kind",[111,115,116],{},"CSS framework",[98,118,119,122],{},[111,120,121],{},"Language",[111,123,124],{},"CSS, used from Vue components",[98,126,127,130],{},[111,128,129],{},"Fits",[111,131,132],{},"Portals, administration, and public pages in the same product",[98,134,135,138],{},[111,136,137],{},"Usually with",[111,139,29],{},[87,141,143],{"id":142},"when-we-use-it","When we use it",[145,146,147,151,154,157],"ul",{},[148,149,150],"li",{},"A portal or administration interface that will gain screens over time, and needs those screens to remain visually consistent",[148,152,153],{},"A design specific to the product, rather than a purchased theme with only the logo replaced",[148,155,156],{},"Responsive layouts where the same component must work on a desktop and a tablet",[148,158,159],{},"Server-rendered Laravel pages, when a flow does not justify a separate frontend",[65,161,162],{},"We do not use it to restyle a page builder, and we do not start a project by selecting a Tailwind CSS template.",[87,164,166],{"id":165},"what-we-rely-on","What we rely on",[145,168,169,172,175,178],{},[148,170,171],{},"Tokens for colour, type, and radius, defined once and used throughout",[148,173,174],{},"Components for controls that recur: fields, tables, empty states, and dialogs",[148,176,177],{},"Responsive variants, so layout changes stay in the component rather than in a separate mobile stylesheet",[148,179,180],{},"A rendered set of the common components, so a new screen is assembled from existing parts",[87,182,184],{"id":183},"why-it-fits-the-work","Why it fits the work",[145,186,187,194,200,206],{},[148,188,189,193],{},[190,191,192],"strong",{},"Faster screens after the first set."," Later forms are built mostly from existing components. Time goes into the workflow, rather than into recreating spacing and layout.",[148,195,196,199],{},[190,197,198],{},"Consistency as more people work on it."," Utilities are explicit. A later change is a class on the component, which is easier to review than a selector that affects a page the author was not changing.",[148,201,202,205],{},[190,203,204],{},"No additional runtime."," The styling is delivered as CSS. It does not add a widget framework with its own upgrade cycle.",[148,207,208,211],{},[190,209,210],{},"Easier long-term maintenance."," The design system is the code. There is no separate style-guide document that falls behind the interface.",[87,213,215],{"id":214},"how-we-build-with-it","How we build with it",[65,217,218,219,221],{},"The engagement follows ",[69,220,84],{"href":10},". Styling is part of the interface work, rather than a phase after the application exists.",[145,223,224,230,236,242],{},[148,225,226,229],{},[190,227,228],{},"Architecture."," Tokens and the initial components come from the screens in the first release, rather than from a brand system that does not match the product.",[148,231,232,235],{},[190,233,234],{},"Development."," New interface work is built from those components. A one-off layout is used when a screen is genuinely unique.",[148,237,238,241],{},[190,239,240],{},"Hardening."," Focus states, contrast, and target sizes are part of the component, including keyboard use. A control that works only with a pointer is incomplete.",[148,243,244,247],{},[190,245,246],{},"Release and support."," Visual changes are released with the frontend. We do not maintain a second copy of the CSS outside the repository.",[87,249,251],{"id":250},"how-it-sits-in-the-stack","How it sits in the stack",[65,253,254,255,257,258,260,261,263,264,85],{},"Tailwind CSS is used in the ",[69,256,29],{"href":30}," application, and in Laravel views that render HTML directly. It does not apply to ",[69,259,24],{"href":25},", the ",[69,262,19],{"href":20}," API, or ",[69,265,54],{"href":55},[65,267,268,270],{},[69,269,49],{"href":50}," caches the built CSS with the other frontend assets.",[87,272,274],{"id":273},"in-practice","In practice",[65,276,277],{},"The interfaces we deliver, including this site, use Tailwind CSS so additional screens can follow the same visual system. On a client portal, tables, filters, and forms should read as one system, because staff use them throughout the working day.",[87,279,281],{"id":280},"questions","Questions",[283,284,286],"h3",{"id":285},"will-we-be-locked-into-tailwind-css","Will we be locked into Tailwind CSS?",[65,288,289],{},"The project will use whichever styling approach is chosen for it. Tailwind CSS produces ordinary CSS in a conventional frontend. A team that knows Vue can maintain it. Replacing it later has a similar cost to replacing any other design system that has spread through the components.",[283,291,293],{"id":292},"can-you-match-an-existing-brand","Can you match an existing brand?",[65,295,296,297,85],{},"Yes. Tokens take colour, type, and spacing from the brand the product must use. The work is to match the product, not to create a second identity. A prepared brand guide is helpful. It is not required before we start, which is the same standard described in ",[69,298,84],{"href":10},[283,300,302],{"id":301},"do-you-design-every-screen-in-a-separate-tool-first","Do you design every screen in a separate tool first?",[65,304,305],{},"Not by default. Structure and the main screens are agreed before production interface work, often as a working interface rather than as a separate mock that is then rebuilt. Visual design still takes place. It takes place against the components the product will use.",[87,307,309],{"id":308},"next-step","Next step",[65,311,312,313,85],{},"If the interface is part of a platform you need built, or an existing one you need continued, ",[69,314,315],{"href":79},"start a conversation",[65,317,318,319,321,322,321,324,85],{},"Related: ",[69,320,29],{"href":30},", ",[69,323,19],{"href":20},[69,325,13],{"href":15},{"title":327,"searchDepth":328,"depth":328,"links":329},"",2,[330,331,332,333,334,335,336,337,343],{"id":89,"depth":328,"text":90},{"id":142,"depth":328,"text":143},{"id":165,"depth":328,"text":166},{"id":183,"depth":328,"text":184},{"id":214,"depth":328,"text":215},{"id":250,"depth":328,"text":251},{"id":273,"depth":328,"text":274},{"id":280,"depth":328,"text":281,"children":338},[339,341,342],{"id":285,"depth":340,"text":286},3,{"id":292,"depth":340,"text":293},{"id":301,"depth":340,"text":302},{"id":308,"depth":328,"text":309},"Utility CSS for the Nuxt interfaces we deliver, so the design system lives in the project rather than in a separate theme.","md",{},{"title":34,"icon":37},{"title":60,"description":344},"8ONif1ou8Qyj0M6APW7U7ET-XMoQqM6CoqYMUfcnvWk",[351,353],{"title":29,"path":30,"stem":31,"description":352,"icon":32,"children":-1},"Vue framework for portals and web applications in front of a Laravel API, including pages that need to be indexed.",{"title":39,"path":40,"stem":41,"description":354,"icon":42,"children":-1},"The editor we use during development. It speeds up implementation. Architecture and accountability remain with us.",1792456194670]