[{"data":1,"prerenderedAt":211},["ShallowReactive",2],{"blog-blueprints/lovable-tailwind":3},{"id":4,"title":5,"body":6,"category":191,"date":192,"dateModified":192,"description":193,"draft":194,"extension":195,"faq":196,"featured":194,"headerVariant":197,"image":196,"keywords":196,"meta":198,"navigation":199,"ogDescription":200,"ogTitle":196,"path":201,"readTime":202,"schemaOrg":203,"schemaType":204,"seo":205,"sitemap":206,"stem":207,"tags":208,"twitterCard":209,"__hash__":210},"blog/blog/blueprints/lovable-tailwind.md","Lovable + Tailwind CSS Security Blueprint",{"type":7,"value":8,"toc":179},"minimark",[9,20,24,30,35,40,55,64,68,77,81,90,94,99,102,105,108,111,121,157,167],[10,11,12],"blueprint-summary",{},[13,14,15,19],"p",{},[16,17,18],"strong",{},"To secure a Lovable + Tailwind CSS stack,"," you need to: (1) never construct class names from user input to prevent CSS injection, (2) configure Content Security Policy headers, (3) ensure Tailwind's content config includes all templates, and (4) verify production builds remove unused styles. This blueprint covers CSS security considerations and build configuration.",[21,22],"blueprint-meta",{"time":23},"30 min",[25,26,27],"tldr",{},[13,28,29],{},"Tailwind CSS itself doesn't introduce security vulnerabilities, but how classes are applied matters. Key concerns: never construct class names from user input (potential XSS via CSS injection), use Content Security Policy headers, and ensure Tailwind's purge/content configuration doesn't expose unused development styles in production.",[31,32,34],"h2",{"id":33},"tailwind-css-security-considerations","Tailwind CSS Security Considerations",[36,37,39],"h3",{"id":38},"safe-class-application","Safe Class Application",[41,42,44],"code-block",{"label":43},"DANGEROUS: User input in class names",[45,46,51],"pre",{"className":47,"code":49,"language":50},[48],"language-text","// Never do this\nconst userColor = getUserInput(); // Could be malicious\n\u003Cdiv className={`bg-${userColor}-500`}>...\u003C/div>\n","text",[52,53,49],"code",{"__ignoreMap":54},"",[41,56,58],{"label":57},"SAFE: Predefined class mapping",[45,59,62],{"className":60,"code":61,"language":50},[48],"// Use a safelist of allowed values\nconst colorMap = {\n  red: 'bg-red-500',\n  blue: 'bg-blue-500',\n  green: 'bg-green-500',\n};\n\nconst userColor = getUserInput();\nconst safeClass = colorMap[userColor] || 'bg-gray-500';\n\u003Cdiv className={safeClass}>...\u003C/div>\n",[52,63,61],{"__ignoreMap":54},[31,65,67],{"id":66},"lovable-content-security-policy","Lovable Content Security Policy",[41,69,71],{"label":70},"Recommended CSP for Tailwind apps",[45,72,75],{"className":73,"code":74,"language":50},[48],"Content-Security-Policy:\n  default-src 'self';\n  style-src 'self' 'unsafe-inline';  // Tailwind may need this\n  script-src 'self';\n  img-src 'self' data: https:;\n  font-src 'self' https://fonts.gstatic.com;\n",[52,76,74],{"__ignoreMap":54},[31,78,80],{"id":79},"tailwind-production-build","Tailwind Production Build",[41,82,84],{"label":83},"tailwind.config.js - Ensure proper purging",[45,85,88],{"className":86,"code":87,"language":50},[48],"module.exports = {\n  content: [\n    './index.html',\n    './src/**/*.{js,ts,jsx,tsx}',\n  ],\n  // This ensures only used classes are in production\n}\n",[52,89,87],{"__ignoreMap":54},[31,91,93],{"id":92},"security-checklist","Security Checklist",[95,96,98],"h4",{"id":97},"tailwind-security-checklist","Tailwind Security Checklist",[13,100,101],{},"No user input in class name construction",[13,103,104],{},"Content config includes all template files",[13,106,107],{},"CSP headers configured appropriately",[13,109,110],{},"Production build removes unused styles",[112,113,114],"faq-section",{},[115,116,118],"faq-item",{"question":117},"Can Tailwind classes be a security risk?",[13,119,120],{},"Tailwind classes themselves are safe. The risk comes from dynamically constructing class names from untrusted input, which could allow CSS injection attacks.",[122,123,124,128,131],"stack-comparison",{},[31,125,127],{"id":126},"alternative-stack-options","Alternative Stack Options",[13,129,130],{},"Consider these related blueprints for different stack combinations:",[132,133,134,143,150],"ul",{},[135,136,137,142],"li",{},[138,139,141],"a",{"href":140},"/blog/blueprints/lovable-shadcn","Lovable + shadcn/ui"," - Tailwind-based component library",[135,144,145,149],{},[138,146,148],{"href":147},"/blog/blueprints/lovable-vercel","Lovable + Vercel"," - Deploy with security headers",[135,151,152,156],{},[138,153,155],{"href":154},"/blog/blueprints/lovable-netlify","Lovable + Netlify"," - Alternative deployment platform",[158,159,160,164],"related-articles",{},[161,162],"related-card",{"description":163,"href":140,"title":141},"Component library security",[161,165],{"description":166,"href":147,"title":148},"Deployment guide",[168,169,172,176],"cta-box",{"href":170,"label":171},"/","Start Free Scan",[31,173,175],{"id":174},"using-tailwind-with-lovable","Using Tailwind with Lovable?",[13,177,178],{},"Scan your app for frontend security issues.",{"title":54,"searchDepth":180,"depth":180,"links":181},2,[182,186,187,188,189,190],{"id":33,"depth":180,"text":34,"children":183},[184],{"id":38,"depth":185,"text":39},3,{"id":66,"depth":180,"text":67},{"id":79,"depth":180,"text":80},{"id":92,"depth":180,"text":93},{"id":126,"depth":180,"text":127},{"id":174,"depth":180,"text":175},"blueprints","2026-02-06","Security guide for Lovable + Tailwind CSS stack. Understand CSS-related security concerns, XSS prevention, and safe class handling in AI-generated code.",false,"md",null,"purple",{"noindex":199},true,"Security considerations for Tailwind CSS in Lovable apps.","/blog/blueprints/lovable-tailwind","6 min read","[object Object]","Article",{"title":5,"description":193},{"loc":201},"blog/blueprints/lovable-tailwind",[],"summary_large_image","e8J2q-DJJ_KkGN7mIi6BOSYVev1g5VvkWOMXMoCc6Dk",1775843932192]