[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"navigation":3,"url-settings":86,"blog-\u002Fblog\u002Ftailwind-apply-css-replacing-complex-classes":671,"blog-author-\u002Fblog\u002Ftailwind-apply-css-replacing-complex-classes":1046,"i-material-symbols:arrow-back-rounded":1058},{"id":4,"extension":5,"footer":6,"header":73,"meta":83,"stem":84,"__hash__":85},"navigation\u002Fdata\u002Fshared\u002Fnavigation.yml","yml",{"brand":7,"columns":13,"legal":63},{"name":8,"tagline":9,"downloadCta":10},"Pieces","The memory layer for modern work.",{"label":11,"href":12},"All downloads","\u002Fdownloads",[14,26,39,51],{"title":15,"links":16},"Product",[17,20,23],{"label":18,"href":19},"Pieces Desktop","\u002F",{"label":21,"href":22},"Pieces Enterprise","\u002Fenterprise",{"label":24,"href":25},"Pieces MCP","\u002Fmcp",{"title":27,"links":28},"Resources",[29,33,36],{"label":30,"href":31,"external":32},"Documentation","url:docs.home",true,{"label":34,"href":35},"Blog","\u002Fblog",{"label":37,"href":38,"external":32},"GitHub","url:github.org",{"title":40,"links":41},"Community",[42,45,48],{"label":43,"href":44,"external":32},"Discord","url:social.discord",{"label":46,"href":47,"external":32},"X \u002F Twitter","url:social.x",{"label":49,"href":50,"external":32},"LinkedIn","url:social.linkedin",{"title":52,"links":53},"Company",[54,57,60],{"label":55,"href":56},"About","\u002Fabout",{"label":58,"href":59},"Updates","\u002Fupdates",{"label":61,"href":62},"Contact","\u002Fcontact",[64,67,70],{"label":65,"href":66},"Privacy Policy","\u002Flegal\u002Fprivacy",{"label":68,"href":69},"Refund Policy","\u002Flegal\u002Frefund",{"label":71,"href":72},"Terms of Service","\u002Flegal\u002Fterms",{"links":74,"signIn":75,"contact":78,"cta":80},[],{"label":76,"href":77},"Manage account","url:portal.home",{"label":79,"href":62},"Get in touch",{"label":81,"href":82},"Download","url:routes.downloads",{},"data\u002Fshared\u002Fnavigation","XlSALC7vYCXHcmcXnjJViwIZKsqnQWF4bn4o9RrcSBE",{"id":87,"extension":5,"links":88,"meta":668,"stem":669,"__hash__":670},"urlSettings\u002Fdata\u002Fshared\u002Furls.yml",[89,93,97,101,105,109,113,117,121,125,129,133,137,141,145,149,153,157,161,165,169,173,177,181,185,189,192,196,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284,288,292,296,300,303,307,311,314,318,322,326,330,334,338,342,346,350,354,358,362,366,370,374,378,382,386,390,394,398,402,406,410,414,418,422,426,430,434,438,442,446,450,454,458,461,465,469,473,477,481,485,488,491,494,497,501,505,508,512,516,520,524,528,532,536,540,544,548,552,556,559,563,567,571,575,579,582,585,588,592,595,599,603,607,611,614,618,622,625,628,631,635,639,643,646,649,652,656,660,664],{"key":90,"label":91,"href":92},"downloads.desktop","Desktop download page","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdownload",{"key":94,"label":95,"href":96},"downloads.macOS.dmgArm64","macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg-arm64\u002Fdownload",{"key":98,"label":99,"href":100},"downloads.macOS.dmgIntel","macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg\u002Fdownload",{"key":102,"label":103,"href":104},"downloads.macOS.pkg","macOS PKG","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg\u002Fdownload",{"key":106,"label":107,"href":108},"downloads.macOS.universal","Desktop macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fmacos-universal\u002Fdownload",{"key":110,"label":111,"href":112},"downloads.macOS.pkgArm64","Desktop macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd-arm64\u002Fdownload",{"key":114,"label":115,"href":116},"downloads.macOS.pkgIntel","Desktop macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd\u002Fdownload",{"key":118,"label":119,"href":120},"downloads.windows.appinstaller","Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fpieces_for_x.appinstaller",{"key":122,"label":123,"href":124},"downloads.windows.exe","Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-exe\u002Fdownload",{"key":126,"label":127,"href":128},"downloads.windows.msix","Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-msix\u002Fdownload",{"key":130,"label":131,"href":132},"downloads.windows.suiteManager","Windows Suite Manager","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_suite_windows\u002Fappinstaller\u002Fdownload",{"key":134,"label":135,"href":136},"downloads.linux.flatpakRepo","Linux Flatpak repository","https:\u002F\u002Fbuilds.pieces.app\u002Fpieces-flatpak-repo\u002Fpieces-flatpak.flatpakrepo",{"key":138,"label":139,"href":140},"downloads.linux.snapDesktop","Linux Snap Desktop","https:\u002F\u002Fsnapcraft.io\u002Fpieces-for-developers",{"key":142,"label":143,"href":144},"downloads.linux.snapPiecesOS","Linux Snap PiecesOS","https:\u002F\u002Fsnapcraft.io\u002Fpieces-os",{"key":146,"label":147,"href":148},"downloads.linux.snap","Desktop Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fsnap\u002Fdownload",{"key":150,"label":151,"href":152},"downloads.piecesOS.macOS.dmgArm64","PiecesOS macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg-arm64\u002Fdownload",{"key":154,"label":155,"href":156},"downloads.piecesOS.macOS.dmgIntel","PiecesOS macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg\u002Fdownload",{"key":158,"label":159,"href":160},"downloads.piecesOS.macOS.universal","PiecesOS macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fmacos-universal\u002Fdownload",{"key":162,"label":163,"href":164},"downloads.piecesOS.macOS.pkgArm64","PiecesOS macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only-arm64\u002Fdownload",{"key":166,"label":167,"href":168},"downloads.piecesOS.macOS.pkgIntel","PiecesOS macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only\u002Fdownload",{"key":170,"label":171,"href":172},"downloads.piecesOS.windows.appinstaller","PiecesOS Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fos_server.appinstaller",{"key":174,"label":175,"href":176},"downloads.piecesOS.windows.exe","PiecesOS Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-exe\u002Fdownload",{"key":178,"label":179,"href":180},"downloads.piecesOS.windows.msix","PiecesOS Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-msix\u002Fdownload",{"key":182,"label":183,"href":184},"downloads.piecesOS.linux.snap","PiecesOS Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fsnap\u002Fdownload",{"key":186,"label":187,"href":188},"downloads.combined.macOS.appleSilicon","Combined macOS installer Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-arm64\u002Fdownload",{"key":190,"label":191,"href":104},"downloads.combined.macOS.intel","Combined macOS installer Intel",{"key":193,"label":194,"href":195},"downloads.guides.macOS","macOS installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fmacos-installation-guide",{"key":197,"label":198,"href":199},"downloads.guides.windows","Windows installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fwindows-installation-guide",{"key":201,"label":202,"href":203},"downloads.guides.linux","Linux installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide",{"key":205,"label":206,"href":207},"downloads.guides.linuxFlatpak","Linux Flatpak installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide\u002Fflatpak",{"key":209,"label":210,"href":211},"downloads.guides.linuxSnap","Linux Snap installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide\u002Fsnap",{"key":213,"label":214,"href":215},"downloads.guides.piecesOS","PiecesOS manual installation","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fmanual-installation",{"key":217,"label":218,"href":219},"extensions.chrome","Chrome extension","https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fpieces-save-code-snippets\u002Figbgibhbfonhmjlechmeefimncpekepm",{"key":221,"label":222,"href":223},"extensions.firefox","Firefox add-on","https:\u002F\u002Faddons.mozilla.org\u002Fen-US\u002Ffirefox\u002Faddon\u002Fpieces-save-code-from-the-web\u002F",{"key":225,"label":226,"href":227},"extensions.edge","Edge add-on","https:\u002F\u002Fmicrosoftedge.microsoft.com\u002Faddons\u002Fdetail\u002Fpieces-save-code-snippet\u002Fhglfimcdgonaeeobjckfdabcldfidmim",{"key":229,"label":230,"href":231},"extensions.vscode","VS Code extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.pieces-vscode",{"key":233,"label":234,"href":235},"extensions.visualStudio","Visual Studio extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.PiecesVisualStudio",{"key":237,"label":238,"href":239},"extensions.jetbrains","JetBrains plugin","https:\u002F\u002Fplugins.jetbrains.com\u002Fplugin\u002F17328-pieces--save-search-share--reuse-code-snippets",{"key":241,"label":242,"href":243},"extensions.obsidian","Obsidian plugin","https:\u002F\u002Fobsidian.md\u002Fplugins?id=pieces-for-developers",{"key":245,"label":246,"href":247},"extensions.sublime","Sublime package","https:\u002F\u002Fpackagecontrol.io\u002Fpackages\u002FPieces",{"key":249,"label":250,"href":251},"extensions.neovim","Neovim plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neo_vim",{"key":253,"label":254,"href":255},"extensions.jupyterlab","JupyterLab plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fjupyterlab-pieces",{"key":257,"label":258,"href":259},"extensions.cli","Pieces CLI","https:\u002F\u002Fpypi.org\u002Fproject\u002Fpieces-cli\u002F",{"key":261,"label":262,"href":263},"docs.home","Documentation home","https:\u002F\u002Fdocs.pieces.app",{"key":265,"label":266,"href":267},"docs.getStarted","Get started docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces",{"key":269,"label":270,"href":271},"docs.api","API docs","https:\u002F\u002Fdocs.pieces.app\u002Fapi",{"key":273,"label":274,"href":275},"docs.desktop.overview","Desktop overview","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop",{"key":277,"label":278,"href":279},"docs.desktop.onboarding","Desktop onboarding","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fonboarding",{"key":281,"label":282,"href":283},"docs.desktop.timeline","Desktop timeline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Ftimeline",{"key":285,"label":286,"href":287},"docs.desktop.summaries","Desktop summaries docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fsingle-click-summaries",{"key":289,"label":290,"href":291},"docs.desktop.search","Desktop conversational search docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconversational-search",{"key":293,"label":294,"href":295},"docs.desktop.drive","Desktop drive docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdrive",{"key":297,"label":298,"href":299},"docs.desktop.account","Desktop account settings docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconfiguration\u002Faccount",{"key":301,"label":302,"href":92},"docs.desktop.download","Desktop download docs",{"key":304,"label":305,"href":306},"docs.piecesOS.overview","PiecesOS overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies",{"key":308,"label":309,"href":310},"docs.piecesOS.details","PiecesOS details docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os",{"key":312,"label":313,"href":215},"docs.piecesOS.install","PiecesOS install docs",{"key":315,"label":316,"href":317},"docs.piecesOS.quickMenu","PiecesOS quick menu docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fquick-menu",{"key":319,"label":320,"href":321},"docs.piecesOS.storage","On-device storage docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fon-device-storage",{"key":323,"label":324,"href":325},"docs.piecesOS.troubleshooting","PiecesOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Ftroubleshooting",{"key":327,"label":328,"href":329},"docs.mcp.overview","MCP overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp",{"key":331,"label":332,"href":333},"docs.mcp.cursor","MCP Cursor docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcursor",{"key":335,"label":336,"href":337},"docs.mcp.vscode","MCP VS Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fvs-code",{"key":339,"label":340,"href":341},"docs.mcp.claudeDesktop","MCP Claude Desktop docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-desktop",{"key":343,"label":344,"href":345},"docs.mcp.claudeCode","MCP Claude Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-code",{"key":347,"label":348,"href":349},"docs.mcp.claudeCowork","MCP Claude Cowork docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-cowork",{"key":351,"label":352,"href":353},"docs.mcp.githubCopilot","MCP GitHub Copilot docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgithub-copilot",{"key":355,"label":356,"href":357},"docs.mcp.goose","MCP Goose docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoose",{"key":359,"label":360,"href":361},"docs.mcp.windsurf","MCP Windsurf docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fwindsurf",{"key":363,"label":364,"href":365},"docs.mcp.zed","MCP Zed docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fzed",{"key":367,"label":368,"href":369},"docs.mcp.jetbrains","MCP JetBrains docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fjetbrains-ides",{"key":371,"label":372,"href":373},"docs.mcp.continueDev","MCP Continue docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcontinue-dev",{"key":375,"label":376,"href":377},"docs.mcp.cline","MCP Cline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcline",{"key":379,"label":380,"href":381},"docs.mcp.raycast","MCP Raycast docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fraycast",{"key":383,"label":384,"href":385},"docs.mcp.rovoDevCli","MCP Rovo Dev CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Frovo-dev-cli",{"key":387,"label":388,"href":389},"docs.mcp.openaiCodexCli","MCP OpenAI Codex CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenai-codex-cli",{"key":391,"label":392,"href":393},"docs.mcp.googleGeminiCli","MCP Google Gemini CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoogle-gemini-cli",{"key":395,"label":396,"href":397},"docs.mcp.amazonQ","MCP Amazon Q docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Famazon-q-developer",{"key":399,"label":400,"href":401},"docs.mcp.chatgptDev","MCP ChatGPT Developer Mode docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fchatgpt-developer-mode",{"key":403,"label":404,"href":405},"docs.mcp.openclaw","MCP OpenClaw docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenclaw",{"key":407,"label":408,"href":409},"docs.mcp.mcpRemote","MCP Remote docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fmcp-remote",{"key":411,"label":412,"href":413},"docs.mcp.ngrok","MCP ngrok docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fngrok-setup",{"key":415,"label":416,"href":417},"docs.troubleshooting.macOS","macOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fmacos",{"key":419,"label":420,"href":421},"docs.troubleshooting.windows","Windows troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fwindows",{"key":423,"label":424,"href":425},"docs.troubleshooting.linux","Linux troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Flinux",{"key":427,"label":428,"href":429},"docs.privacy","Privacy and security docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fprivacy-security-your-data",{"key":431,"label":432,"href":433},"docs.support","Support docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fsupport",{"key":435,"label":436,"href":437},"portal.home","Pieces portal","https:\u002F\u002Fportal.pieces.app",{"key":439,"label":440,"href":441},"site.home","Website home","https:\u002F\u002Fpieces.app",{"key":443,"label":444,"href":445},"site.about","About page","https:\u002F\u002Fpieces.app\u002Fabout",{"key":447,"label":448,"href":449},"site.features","Features page","https:\u002F\u002Fpieces.app\u002Ffeatures",{"key":451,"label":452,"href":453},"site.plugins","Plugins page","https:\u002F\u002Fpieces.app\u002Fplugins",{"key":455,"label":456,"href":457},"site.contact","Contact page","https:\u002F\u002Fpieces.app\u002Fcontact",{"key":459,"label":58,"href":460},"site.updates","https:\u002F\u002Fpieces.app\u002Fupdates",{"key":462,"label":463,"href":464},"site.news","News","https:\u002F\u002Fpieces.app\u002Fnews",{"key":466,"label":467,"href":468},"site.events","Community events","https:\u002F\u002Fpieces.app\u002Fcommunity\u002Fevents",{"key":470,"label":471,"href":472},"site.userStories","User stories","https:\u002F\u002Fpieces.app\u002Fuser-stories",{"key":474,"label":475,"href":476},"site.academy","Academy","https:\u002F\u002Fpieces.app\u002Flearn\u002Facademy",{"key":478,"label":479,"href":480},"site.support","Website support","https:\u002F\u002Fpieces.app\u002Fsupport",{"key":482,"label":483,"href":484},"site.standup","Standup","https:\u002F\u002Fpieces.app\u002Fstandup",{"key":486,"label":34,"href":487},"site.blog","https:\u002F\u002Fcode.pieces.app\u002Fblog",{"key":489,"label":43,"href":490},"social.discord","https:\u002F\u002Fdiscord.gg\u002Fgetpieces",{"key":492,"label":46,"href":493},"social.x","https:\u002F\u002Fx.com\u002Fgetpieces",{"key":495,"label":496,"href":493},"social.twitter","Twitter",{"key":498,"label":499,"href":500},"social.instagram","Instagram","https:\u002F\u002Fwww.instagram.com\u002Fgetpieces\u002F",{"key":502,"label":503,"href":504},"social.tiktok","TikTok","https:\u002F\u002Fwww.tiktok.com\u002F@getpieces",{"key":506,"label":49,"href":507},"social.linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fgetpieces\u002F",{"key":509,"label":510,"href":511},"social.youtube","YouTube","https:\u002F\u002Fyoutube.com\u002F@getpieces",{"key":513,"label":514,"href":515},"github.org","GitHub organization","https:\u002F\u002Fgithub.com\u002Fpieces-app",{"key":517,"label":518,"href":519},"github.support","GitHub support","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport",{"key":521,"label":522,"href":523},"github.issues","GitHub issues","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fissues",{"key":525,"label":526,"href":527},"github.discussions","GitHub discussions","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fdiscussions",{"key":529,"label":530,"href":531},"github.documentation","GitHub documentation","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fdocumentation",{"key":533,"label":534,"href":535},"github.opensource","GitHub open source","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fopensource",{"key":537,"label":538,"href":539},"github.sdks.python","Python SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-python",{"key":541,"label":542,"href":543},"github.sdks.typescript","TypeScript SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-typescript",{"key":545,"label":546,"href":547},"github.sdks.dart","Dart SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-dart",{"key":549,"label":550,"href":551},"github.sdks.kotlin","Kotlin SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-kotlin",{"key":553,"label":554,"href":555},"github.plugins.obsidian","Obsidian plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fobsidian-pieces",{"key":557,"label":558,"href":255},"github.plugins.jupyterlab","JupyterLab plugin repository",{"key":560,"label":561,"href":562},"github.plugins.sublime","Sublime plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_sublime",{"key":564,"label":565,"href":566},"github.plugins.neovim","Neovim plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neovim",{"key":568,"label":569,"href":570},"github.cliAgent","CLI agent repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fcli-agent",{"key":572,"label":573,"href":574},"github.mcpDart","MCP Dart repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fmcp_dart",{"key":576,"label":577,"href":578},"github.awesomePieces","Awesome Pieces repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fawesome-pieces",{"key":580,"label":581,"href":66},"legal.privacyPolicy","Privacy policy",{"key":583,"label":584,"href":69},"legal.refundPolicy","Refund policy",{"key":586,"label":587,"href":72},"legal.terms","Terms",{"key":589,"label":590,"href":591},"legal.security","Legal security","https:\u002F\u002Fpieces.app\u002Flegal\u002Fsecurity",{"key":593,"label":594,"href":511},"videos.youtubeChannel","YouTube channel",{"key":596,"label":597,"href":598},"videos.gettingStartedDesktop","Getting started desktop video","https:\u002F\u002Fyoutu.be\u002FdUr1lRM_TYk",{"key":600,"label":601,"href":602},"videos.snippetDiscoveryxR","Snippet discovery video","https:\u002F\u002Fyoutu.be\u002FG6vb1USw-30",{"key":604,"label":605,"href":606},"sales.bookACall","Book a sales call","https:\u002F\u002Fcalendar.app.google\u002FWVUDtUfNy5Vst3sH7",{"key":608,"label":609,"href":610},"sales.enterprise","Enterprise form","https:\u002F\u002Fgetpieces.typeform.com\u002Fto\u002FaVQFTvpE",{"key":612,"label":613,"href":527},"sales.feedback","Feedback discussions",{"key":615,"label":616,"href":617},"sales.earlyAccess","Early access form","https:\u002F\u002Fgetpieces.typeform.com\u002Fearlyaccess",{"key":619,"label":620,"href":621},"sales.supportEmail","Support email","mailto:support@pieces.app",{"key":623,"label":624,"href":19},"routes.home","Home route",{"key":626,"label":627,"href":56},"routes.about","About route",{"key":629,"label":630,"href":12},"routes.downloads","Downloads route",{"key":632,"label":633,"href":634},"routes.thanks","Post-install thanks route","\u002Finstall\u002Fthanks",{"key":636,"label":637,"href":638},"routes.pricing","Pricing route","\u002Fpricing",{"key":640,"label":641,"href":642},"cta.freeTrial","Start free trial CTA (Pieces Pro) — used by \u002Fcampaigns\u002F* landing pages","https:\u002F\u002Fcampaigns.pieces.app\u002F",{"key":644,"label":645,"href":22},"routes.enterprise","Enterprise route",{"key":647,"label":648,"href":62},"routes.contact","Contact route",{"key":650,"label":651,"href":59},"routes.updates","Updates route",{"key":653,"label":654,"href":655},"routes.migrationError","Migration error route","\u002Fmigration\u002Ferror",{"key":657,"label":658,"href":659},"routes.authenticated","Post-login authenticated route","\u002Fauth\u002Fsigned-in",{"key":661,"label":662,"href":663},"routes.signed-out","Signed out route","\u002Fauth\u002Fsigned-out",{"key":665,"label":666,"href":667},"routes.authentication-error","Authentication error route","\u002Fauth\u002Ferror",{},"data\u002Fshared\u002Furls","2AvfSWI6bZACH5Kr1ZS3txMLjteRjCjbDR_ul1uRZ9Q",{"id":672,"title":673,"author":674,"authorPhoto":675,"authorPhotoAlt":676,"authorSlug":677,"body":678,"buttonText":676,"buttonUrl":676,"category":1032,"date":1033,"description":1034,"draft":1035,"editorsPick":1035,"extension":1036,"featured":1035,"image":1037,"imageAlt":1038,"meta":1039,"navigation":32,"ogImage":676,"ogImageAlt":676,"path":1040,"seo":1041,"stem":1042,"tags":1043,"__hash__":1045},"blog\u002Fblog\u002Ftailwind-apply-css-replacing-complex-classes.md","Tailwind @Apply: Replacing Complex Classes with Tailwind CSS","Anda Mary","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Ftailwind-apply-css-replacing-complex-classes\u002Fauthor.jpeg",null,"anda-mary",{"type":679,"value":680,"toc":1023},"minimark",[681,686,698,707,710,714,717,724,735,745,752,758,766,775,781,789,799,805,813,819,827,835,839,846,852,860,864,869,872,878,886,892,895,902,905,911,918,926,932,957,961,974,980,988,995,998,1004,1010,1014,1017,1020],[682,683,685],"h2",{"id":684},"what-is-tailwind-css","What is Tailwind CSS?",[687,688,689,690,697],"p",{},"Tailwind CSS is an open-source utility-based CSS framework that provides a set of customizable utilities for constructing web designs and layouts. It's one of the ",[691,692,696],"a",{"href":693,"rel":694},"https:\u002F\u002Fpieces.app\u002Fblog\u002Ftop-5-best-css-frameworks-for-responsive-web-design-in-2024",[695],"nofollow","best CSS frameworks for responsive web design"," in 2024.",[687,699,700,701,706],{},"The key difference between Tailwind CSS framework and ",[691,702,705],{"href":703,"rel":704},"https:\u002F\u002Fpieces.app\u002Fblog\u002Fbootstrap-bulma",[695],"other CSS frameworks like Bootstrap"," and Material UI is that it does not contain a collection of preset classes for components such as buttons and tables. Instead, it includes extensive utility classes for grids, margins, forms, placement, and so forth.",[687,708,709],{},"Tailwind CSS automatically removes any extraneous CSS, resulting in the shortest CSS bundle possible when building for production.",[682,711,713],{"id":712},"how-to-install-tailwind-css-into-your-project","How to Install Tailwind CSS into Your Project",[687,715,716],{},"The Tailwind CLI tool is the quickest and easiest way to embed Tailwind CSS into your project from scratch. Check that you have Node.js installed before you begin.",[687,718,719,723],{},[720,721,722],"strong",{},"Step 1",": Install Tailwind CSS into your project with the following command:",[725,726,731],"pre",{"className":727,"code":729,"language":730},[728],"language-text","npm install -D tailwindcss\n","text",[732,733,729],"code",{"__ignoreMap":734},"",[687,736,737],{},[691,738,741],{"href":739,"rel":740},"https:\u002F\u002Fmaryanda.pieces.cloud\u002F?p=ba1446949e",[695],[742,743,744],"em",{},"Save this code",[687,746,747,748,751],{},"Step 2: Then, create a ",[732,749,750],{},"tailwind.config.js"," file with this command:",[725,753,756],{"className":754,"code":755,"language":730},[728],"npx tailwindcss init\n",[732,757,755],{"__ignoreMap":734},[687,759,760],{},[691,761,764],{"href":762,"rel":763},"https:\u002F\u002Fmaryanda.pieces.cloud\u002F?p=56514faa4e",[695],[742,765,744],{},[687,767,768,771,772,774],{},[720,769,770],{},"Step 3",": In your ",[732,773,750],{}," file, add the paths to all of your template files like this:",[725,776,779],{"className":777,"code":778,"language":730},[728],"\u002F** @type {import('tailwindcss').Config} *\u002F\nmodule.exports = {\n  content: [\".\u002Fsrc\u002F**\u002F*.{html,js}\"],\n  theme: {\n    extend: {},\n  },\n  plugins: [],\n}\n",[732,780,778],{"__ignoreMap":734},[687,782,783],{},[691,784,787],{"href":785,"rel":786},"https:\u002F\u002Fmaryanda.pieces.cloud\u002F?p=59b84c9436",[695],[742,788,744],{},[687,790,791,794,795,798],{},[720,792,793],{},"Step 4",": Add the ",[732,796,797],{},"@tailwind"," directives to your main CSS file to represent each of Tailwind's layers.",[725,800,803],{"className":801,"code":802,"language":730},[728],"@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",[732,804,802],{"__ignoreMap":734},[687,806,807],{},[691,808,811],{"href":809,"rel":810},"https:\u002F\u002Fmaryanda.pieces.cloud\u002F?p=7df64e9ef4",[695],[742,812,744],{},[687,814,815,818],{},[720,816,817],{},"Step 5",": Add your compiled CSS file to the of your markup file and begin styling your content with Tailwind's utility classes.",[687,820,821],{},[691,822,825],{"href":823,"rel":824},"https:\u002F\u002Fmaryanda.pieces.cloud\u002F?p=ea0940b9a8",[695],[742,826,744],{},[687,828,829,830],{},"To ensure you are setting up you Tailwind properly, you can watch this video to ",[691,831,834],{"href":832,"rel":833},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=j6z5PXshcDk",[695],"Install tailwind css from scratch using the CLI",[682,836,838],{"id":837},"getting-started-with-tailwind-css-apply","Getting Started with Tailwind CSS @apply",[687,840,841,842,845],{},"Tailwind CSS’s ",[732,843,844],{},"@apply"," directive is a relatively new feature in the Tailwind CSS ecosystem that allows developers to “apply” existing utility classes in line with their custom CSS. It is convenient when you need to write custom CSS (for example, to override styles in a third-party library) but still want to work with your design tokens and use the same syntax as you would in HTML.",[725,847,850],{"className":848,"code":849,"language":730},[728],"@tailwind base;\n@tailwind components;\n@tailwind utilities;\n.class {\n background-color: blue;\n border-radius: 50%;\n}\n\u002F* re-using the styling for the first class here *\u002F\n.class-2 {\n @apply class;\n}\n\u002F* applying Tailwind CSS utility classes *\u002F\n.another__class {\n @apply border border=gray-300 rounded;\n}\n",[732,851,849],{"__ignoreMap":734},[687,853,854],{},[691,855,858],{"href":856,"rel":857},"https:\u002F\u002Fmaryanda.pieces.cloud\u002F?p=49594b8552",[695],[742,859,744],{},[682,861,863],{"id":862},"how-to-use-the-tailwind-apply-directive-in-your-next-project","How to Use the Tailwind @apply Directive in Your Next Project",[687,865,866,868],{},[732,867,844],{}," allows you to reuse preset utility classes to style several components in your application. You can also combine its functionalities with other front-end frameworks, such as Bootstrap.",[687,870,871],{},"Consider the code below:",[725,873,876],{"className":874,"code":875,"language":730},[728]," Button Success Button Danger Button\n",[732,877,875],{"__ignoreMap":734},[687,879,880],{},[691,881,884],{"href":882,"rel":883},"https:\u002F\u002Fmaryanda.pieces.cloud\u002F?p=fa2645bc66",[695],[742,885,744],{},[687,887,888,889,891],{},"In the code above, we created three buttons by using the ",[732,890,844],{}," directive to import preset utility classes.",[687,893,894],{},"Here’s the result:",[687,896,897],{},[898,899],"img",{"alt":900,"src":901},"CSS image showing three buttons, one blue, one green, one red","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Ftailwind-apply-css-replacing-complex-classes\u002Fimg-001.png",[687,903,904],{},"You may discover that the buttons share various utility classes. These utility classes can be used for the base styling of any variant of our buttons. Consider an application with 25 buttons. We must then write the common utility classes (used for base styling) 25 times. This can lead to maintenance issues, because updating the common utility classes requires you to do so in 25 different places throughout the app, which quickly becomes complex and redundant.",[687,906,907,908,910],{},"In such cases, you can use the ",[732,909,844],{}," directive to convert standard utility classes into custom CSS classes. We can avoid duplicating the traditional utility classes this way.",[687,912,913,914,917],{},"We've extracted our utility classes into the ",[732,915,916],{},"btn"," class below:",[687,919,920],{},[691,921,924],{"href":922,"rel":923},"https:\u002F\u002Fmaryanda.pieces.cloud\u002F?p=2f474b9027",[695],[742,925,744],{},[687,927,928,929,931],{},"We now have the appropriate level of abstraction for our utility classes after grouping the utility classes into the ",[732,930,916],{}," class.",[687,933,934,937,938,941,942,944,945,947,948,953,954,956],{},[720,935,936],{},"Note",": To avoid specificity issues, you can use the ",[732,939,940],{},"@layer"," components directive to notify Tailwind which layer your custom component styles reside in. ",[732,943,940],{}," allows you to control declaration order by automatically shifting your styles to the equivalent ",[732,946,797],{}," directive, and it also allows you to use features like modifiers and tree-shaking in your own custom CSS. You can access ",[691,949,952],{"href":950,"rel":951},"https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Ffunctions-and-directives#layer",[695],"this guide"," to get a better understanding of the ",[732,955,940],{}," directive.",[682,958,960],{"id":959},"using-apply-with-tailwind-css-components","Using @apply with Tailwind CSS Components",[687,962,963,964,967,968,970,971,973],{},"Component frameworks like Svelte and Vue allow per-component styling within a ",[732,965,966],{},"\u003Cstyle>"," block in each component file. If you try to ",[732,969,844],{}," a custom class defined in your global CSS to one of these per-component ",[732,972,966],{}," blocks, you will encounter an error.",[725,975,978],{"className":976,"code":977,"language":730},[728],"\u003Cstyle>\n @tailwind base;\n @tailwind components;\n @tailwind utilities;\n\n @layer components {\n        .class {\n            background-color: theme(colors.blue);\n            border-radius: theme(borderRadius.lg);\n            box-shadow: theme(boxShadow.xl);\n        }\n}\n\n        div {\n \u002F* Won't work because the styles are processed separately and individually *\u002F\n @apply class;\n        }\n    \u003C\u002Fstyle>\n",[732,979,977],{"__ignoreMap":734},[687,981,982],{},[691,983,986],{"href":984,"rel":985},"https:\u002F\u002Fmaryanda.pieces.cloud\u002F?p=bafb4a9950",[695],[742,987,744],{},[687,989,990,991],{},"The error appears because frameworks like Vue and Svelte process each ",[992,993,994],"style",{}," block independently and run your PostCSS plugin chain against each one in isolation. So, if you have 25 components, each with a \u003Cstyle> block, Tailwind will process the styles 25 times with no knowledge of the prior runs. As a result, when you try to @apply a predefined class from your global CSS, it fails, because Tailwind has no notion that the class exists as the styles are applied independently.",[687,996,997],{},"The solution to this problem is to use the plugin system in tailwind.config.js to define any custom styles you want to @apply in your components.",[725,999,1002],{"className":1000,"code":1001,"language":730},[728],"const plugin = require('tailwindcss\u002Fplugin')\n\nmodule.exports = {\n \u002F\u002F ...\n  plugins: [\n    plugin(function ({ addComponents, theme }) {\n      addComponents({\n '.class': {\n          backgroundColor: theme('colors.blue'),\n          borderRadius: theme('borderRadius.lg'),\n          boxShadow: theme('boxShadow.xl'),\n        }\n      })\n    })\n  ]\n}\n",[732,1003,1001],{"__ignoreMap":734},[687,1005,1006],{},[691,1007,744],{"href":1008,"rel":1009},"https:\u002F\u002Fmaryanda.pieces.cloud\u002F?p=faea4d8221",[695],[682,1011,1013],{"id":1012},"conclusion","Conclusion",[687,1015,1016],{},"This article discussed the Tailwind @apply CSS directive, emphasizing some of its capabilities, use cases, and modes of operation. Because it reduces repetition in your project code base and allows for easy maintenance, the @apply directive has shown to be a better alternative to using complex classes. Because of its simplicity and ease of application, this component can be applied to much larger real-world endeavors.",[687,1018,1019],{},"I hope this article is valuable to you.",[687,1021,1022],{},"Happy coding!",{"title":734,"searchDepth":1024,"depth":1024,"links":1025},2,[1026,1027,1028,1029,1030,1031],{"id":684,"depth":1024,"text":685},{"id":712,"depth":1024,"text":713},{"id":837,"depth":1024,"text":838},{"id":862,"depth":1024,"text":863},{"id":959,"depth":1024,"text":960},{"id":1012,"depth":1024,"text":1013},"Software Development","2022-12-28T00:00:00.000Z","Let's explore the Tailwind CSS utility @apply — a directive that allows developers to combine a collection of utilities into a reusable component class.",false,"md","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Ftailwind-apply-css-replacing-complex-classes\u002Fhero.jpeg","decorative cover image showing CSS and JavaScript textbooks",{},"\u002Fblog\u002Ftailwind-apply-css-replacing-complex-classes",{"title":673,"description":1034},"blog\u002Ftailwind-apply-css-replacing-complex-classes",[1044],"css","sHpffx_5IiDf-GQgVRLesaKERhDeggJffsKH42pQK94",{"id":1047,"title":674,"body":1048,"description":734,"draft":1035,"extension":1036,"meta":1052,"navigation":32,"path":1053,"photo":1054,"photoAlt":676,"seo":1055,"stem":1056,"__hash__":1057},"authors\u002Fauthors\u002Fanda-mary.md",{"type":679,"value":1049,"toc":1050},[],{"title":734,"searchDepth":1024,"depth":1024,"links":1051},[],{},"\u002Fauthors\u002Fanda-mary","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fauthors\u002Fplaceholder.svg",{"title":674,"description":734},"authors\u002Fanda-mary","cBNhIpse3oRuDZPUOA78gprxI9PTqVznSj2fvYhkcEU",{"left":1059,"top":1059,"width":1060,"height":1060,"rotate":1059,"vFlip":1035,"hFlip":1035,"body":1061},0,24,"\u003Cpath fill=\"currentColor\" d=\"m7.825 13l4.9 4.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-6.6-6.6q-.15-.15-.213-.325T4.426 12t.063-.375t.212-.325l6.6-6.6q.275-.275.688-.275t.712.275q.3.3.3.713t-.3.712L7.825 11H19q.425 0 .713.288T20 12t-.288.713T19 13z\"\u002F>"]