[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"header-categories":3,"post-mastering-tailwind-css-design-systems":73,"parsed-post-da9e4553-8b0d-411e-b4ec-f9684017e163":143},{"success":4,"data":5},true,{"items":6,"pagination":70},[7,16,24,32,40,48,56,63],{"id":8,"name":9,"description":10,"parentId":11,"createdAt":12,"updatedAt":12,"parent":11,"children":13,"_count":14},"ai-future","AI & The Future","Artificial intelligence and emerging technology",null,"2026-07-24T06:02:45.990Z",[],{"posts":15},1,{"id":17,"name":18,"description":19,"parentId":11,"createdAt":20,"updatedAt":20,"parent":11,"children":21,"_count":22},"tools-productivity","Tools & Productivity","Developer tools and workflow optimization","2026-07-24T06:02:45.712Z",[],{"posts":23},7,{"id":25,"name":26,"description":27,"parentId":11,"createdAt":28,"updatedAt":28,"parent":11,"children":29,"_count":30},"career","Career & Growth","Professional development for developers","2026-07-24T06:02:45.486Z",[],{"posts":31},3,{"id":33,"name":34,"description":35,"parentId":11,"createdAt":36,"updatedAt":36,"parent":11,"children":37,"_count":38},"opinion","Opinion & Analysis","Industry analysis and technical opinions","2026-07-24T06:02:45.272Z",[],{"posts":39},6,{"id":41,"name":42,"description":43,"parentId":11,"createdAt":44,"updatedAt":44,"parent":11,"children":45,"_count":46},"tutorials","Tutorials","Step-by-step learning guides","2026-07-24T06:02:44.965Z",[],{"posts":47},21,{"id":49,"name":50,"description":51,"parentId":11,"createdAt":52,"updatedAt":52,"parent":11,"children":53,"_count":54},"software-engineering","Software Engineering","Best practices, patterns, and principles","2026-07-24T06:02:44.689Z",[],{"posts":55},24,{"id":57,"name":58,"description":59,"parentId":11,"createdAt":60,"updatedAt":60,"parent":11,"children":61,"_count":62},"devops-cloud","DevOps & Cloud","Infrastructure, deployment, and cloud computing","2026-07-24T06:02:44.453Z",[],{"posts":39},{"id":64,"name":65,"description":66,"parentId":11,"createdAt":67,"updatedAt":67,"parent":11,"children":68,"_count":69},"web-development","Web Development","Frontend and backend web development tutorials and guides","2026-07-24T06:02:44.169Z",[],{"posts":55},{"page":15,"limit":71,"total":71,"totalPages":15,"hasNext":72,"hasPrev":72},8,false,{"success":4,"data":74},{"id":75,"slug":76,"title":77,"excerpt":78,"content":79,"status":80,"visibility":81,"featuredImage":82,"canonicalUrl":11,"readingTime":83,"viewCount":84,"commentEnabled":4,"publishedAt":85,"scheduledAt":11,"createdAt":86,"updatedAt":87,"seoTitle":88,"seoDescription":78,"seoKeywords":11,"authorId":89,"author":90,"coAuthors":95,"tags":96,"categories":107,"comments":110,"_count":111,"relatedPosts":113},"da9e4553-8b0d-411e-b4ec-f9684017e163","mastering-tailwind-css-design-systems","Mastering Tailwind CSS: From Utility Classes to Design Systems","Go beyond basic utility classes and learn how to build cohesive, maintainable design systems with Tailwind CSS.","## Beyond Utility Spaghetti\n\nTailwind CSS gets criticized for \"messy HTML,\" but that critique misses the point. When used properly, Tailwind enables consistent, scalable design systems that are easier to maintain than traditional CSS.\n\n## The Design Token Layer\n\nStart with your `tailwind.config.ts`:\n\n```typescript\nimport type { Config } from 'tailwindcss'\n\nexport default {\n  theme: {\n    extend: {\n      colors: {\n        brand: {\n          50: '#eff6ff',\n          500: '#3b82f6',\n          900: '#1e3a5f',\n        },\n      },\n      spacing: {\n        'content': '65ch',\n      },\n      fontFamily: {\n        sans: ['Inter', 'system-ui', 'sans-serif'],\n        mono: ['JetBrains Mono', 'monospace'],\n      },\n    },\n  },\n} satisfies Config\n```\n\n::callout{icon=\"i-lucide-palette\" color=\"primary\"}\nDesign tokens are the single source of truth for your visual language. Every component derives its styles from these foundational values.\n::\n\n## Component Patterns\n\nInstead of repeating utility classes, extract patterns:\n\n```vue\n\u003Ctemplate>\n  \u003Cbutton :class=\"buttonClasses\">\n    \u003Cslot \u002F>\n  \u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nconst props = defineProps\u003C{\n  variant?: 'primary' | 'secondary' | 'ghost'\n  size?: 'sm' | 'md' | 'lg'\n}>()\n\nconst buttonClasses = computed(() => [\n  'inline-flex items-center justify-center rounded-lg font-medium transition-colors',\n  {\n    'bg-brand-500 text-white hover:bg-brand-600': props.variant === 'primary',\n    'border border-gray-300 hover:bg-gray-50': props.variant === 'secondary',\n    'hover:bg-gray-100': props.variant === 'ghost',\n  },\n  {\n    'px-3 py-1.5 text-sm': props.size === 'sm',\n    'px-4 py-2 text-base': props.size === 'md',\n    'px-6 py-3 text-lg': props.size === 'lg',\n  },\n])\n\u003C\u002Fscript>\n```\n\n## Responsive Design Strategy\n\nDon't think in breakpoints — think in container queries and fluid spacing:\n\n```css\n\u002F* Use clamp for fluid typography *\u002F\n.prose h1 {\n  font-size: clamp(1.75rem, 4vw, 2.5rem);\n}\n```\n\n## Dark Mode Done Right\n\nUse CSS custom properties with Tailwind for seamless dark mode:\n\n```html\n\u003Cdiv class=\"bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100\">\n  \u003Cp class=\"text-gray-600 dark:text-gray-400\">\n    Readable in any lighting condition.\n  \u003C\u002Fp>\n\u003C\u002Fdiv>\n```\n\n## Summary\n\nA design system with Tailwind is: **tokens → patterns → components → pages**. Each layer builds on the previous one, giving you both consistency and flexibility.\n","published","public","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1555066931-4365d14bab8c?w=1200&q=80",10,257,"2026-07-21T06:02:49.268Z","2026-07-24T06:02:49.271Z","2026-07-28T13:17:33.791Z","Mastering Tailwind CSS: From Utility Classes to Design Systems | BitBlog","fddb5d93-7a2c-4d86-a06a-fa32e73a01c6",{"email":91,"bio":92,"id":89,"name":93,"avatarUrl":94},"mbeahessilfieprince@gmail.com","Fullstack Software Developer ","Mbeah Essilfie","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F93322394?v=4",[],[97,102],{"id":98,"name":99,"color":100,"description":101},"css","CSS","#1572b6","Cascading Style Sheets",{"id":103,"name":104,"color":105,"description":106},"tailwind","Tailwind CSS","#06b6d4","Utility-first CSS framework",[108,109],{"id":64,"name":65,"description":66},{"id":41,"name":42,"description":43},[],{"comments":112},0,[114,123,133],{"id":115,"slug":116,"title":117,"excerpt":118,"featuredImage":119,"viewCount":120,"readingTime":71,"publishedAt":121,"author":122},"2997028f-4d22-4eb7-9d86-894a54cb559a","building-type-safe-apis-nuxt3-prisma","Building Type-Safe APIs with Nuxt 3 and Prisma","Learn how to build end-to-end type-safe APIs using Nuxt 3 server routes and Prisma ORM for a seamless developer experience.","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1498050108023-c5249f4df085?w=1200&q=80",1922,"2026-07-23T06:02:46.910Z",{"id":89,"name":93,"avatarUrl":94},{"id":124,"slug":125,"title":126,"excerpt":127,"featuredImage":128,"viewCount":129,"readingTime":130,"publishedAt":131,"author":132},"50add5fc-4026-4267-b917-7f71ea9e35b0","complete-guide-vue3-composables","The Complete Guide to Vue 3 Composables","Understand the power of Vue 3's Composition API through practical, real-world composable patterns that you can use today.","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1517694712202-14dd9538aa97?w=1200&q=80",989,12,"2026-07-19T06:02:51.753Z",{"id":89,"name":93,"avatarUrl":94},{"id":134,"slug":135,"title":136,"excerpt":137,"featuredImage":138,"viewCount":139,"readingTime":140,"publishedAt":141,"author":142},"8570ed3d-b1cf-4288-8578-aed5593f8c58","docker-for-frontend-developers","Docker for Frontend Developers: A Practical Introduction","Stop saying 'it works on my machine.' Learn Docker fundamentals through the lens of frontend development workflows.","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1551288049-bebda4e38f71?w=1200&q=80",409,9,"2026-07-17T06:02:53.993Z",{"id":89,"name":93,"avatarUrl":94},{"data":144,"body":146,"toc":293},{"title":145,"description":145},"",{"type":147,"children":148},"root",[149,158,164,170,184,196,207,213,218,228,234,239,248,254,259,269,275,288],{"type":150,"tag":151,"props":152,"children":154},"element","h2",{"id":153},"beyond-utility-spaghetti",[155],{"type":156,"value":157},"text","Beyond Utility Spaghetti",{"type":150,"tag":159,"props":160,"children":161},"p",{},[162],{"type":156,"value":163},"Tailwind CSS gets criticized for \"messy HTML,\" but that critique misses the point. When used properly, Tailwind enables consistent, scalable design systems that are easier to maintain than traditional CSS.",{"type":150,"tag":151,"props":165,"children":167},{"id":166},"the-design-token-layer",[168],{"type":156,"value":169},"The Design Token Layer",{"type":150,"tag":159,"props":171,"children":172},{},[173,175,182],{"type":156,"value":174},"Start with your ",{"type":150,"tag":176,"props":177,"children":179},"code",{"className":178},[],[180],{"type":156,"value":181},"tailwind.config.ts",{"type":156,"value":183},":",{"type":150,"tag":185,"props":186,"children":191},"pre",{"className":187,"code":188,"language":189,"meta":145,"style":190},"language-typescript","import type { Config } from 'tailwindcss'\n\nexport default {\n  theme: {\n    extend: {\n      colors: {\n        brand: {\n          50: '#eff6ff',\n          500: '#3b82f6',\n          900: '#1e3a5f',\n        },\n      },\n      spacing: {\n        'content': '65ch',\n      },\n      fontFamily: {\n        sans: ['Inter', 'system-ui', 'sans-serif'],\n        mono: ['JetBrains Mono', 'monospace'],\n      },\n    },\n  },\n} satisfies Config\n","typescript","undefined",[192],{"type":150,"tag":176,"props":193,"children":194},{"__ignoreMap":145},[195],{"type":156,"value":188},{"type":150,"tag":197,"props":198,"children":201},"callout",{"color":199,"icon":200},"primary","i-lucide-palette",[202],{"type":150,"tag":159,"props":203,"children":204},{},[205],{"type":156,"value":206},"Design tokens are the single source of truth for your visual language. Every component derives its styles from these foundational values.",{"type":150,"tag":151,"props":208,"children":210},{"id":209},"component-patterns",[211],{"type":156,"value":212},"Component Patterns",{"type":150,"tag":159,"props":214,"children":215},{},[216],{"type":156,"value":217},"Instead of repeating utility classes, extract patterns:",{"type":150,"tag":185,"props":219,"children":223},{"className":220,"code":221,"language":222,"meta":145,"style":190},"language-vue","\u003Ctemplate>\n  \u003Cbutton :class=\"buttonClasses\">\n    \u003Cslot \u002F>\n  \u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nconst props = defineProps\u003C{\n  variant?: 'primary' | 'secondary' | 'ghost'\n  size?: 'sm' | 'md' | 'lg'\n}>()\n\nconst buttonClasses = computed(() => [\n  'inline-flex items-center justify-center rounded-lg font-medium transition-colors',\n  {\n    'bg-brand-500 text-white hover:bg-brand-600': props.variant === 'primary',\n    'border border-gray-300 hover:bg-gray-50': props.variant === 'secondary',\n    'hover:bg-gray-100': props.variant === 'ghost',\n  },\n  {\n    'px-3 py-1.5 text-sm': props.size === 'sm',\n    'px-4 py-2 text-base': props.size === 'md',\n    'px-6 py-3 text-lg': props.size === 'lg',\n  },\n])\n\u003C\u002Fscript>\n","vue",[224],{"type":150,"tag":176,"props":225,"children":226},{"__ignoreMap":145},[227],{"type":156,"value":221},{"type":150,"tag":151,"props":229,"children":231},{"id":230},"responsive-design-strategy",[232],{"type":156,"value":233},"Responsive Design Strategy",{"type":150,"tag":159,"props":235,"children":236},{},[237],{"type":156,"value":238},"Don't think in breakpoints — think in container queries and fluid spacing:",{"type":150,"tag":185,"props":240,"children":243},{"className":241,"code":242,"language":98,"meta":145,"style":190},"language-css","\u002F* Use clamp for fluid typography *\u002F\n.prose h1 {\n  font-size: clamp(1.75rem, 4vw, 2.5rem);\n}\n",[244],{"type":150,"tag":176,"props":245,"children":246},{"__ignoreMap":145},[247],{"type":156,"value":242},{"type":150,"tag":151,"props":249,"children":251},{"id":250},"dark-mode-done-right",[252],{"type":156,"value":253},"Dark Mode Done Right",{"type":150,"tag":159,"props":255,"children":256},{},[257],{"type":156,"value":258},"Use CSS custom properties with Tailwind for seamless dark mode:",{"type":150,"tag":185,"props":260,"children":264},{"className":261,"code":262,"language":263,"meta":145,"style":190},"language-html","\u003Cdiv class=\"bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100\">\n  \u003Cp class=\"text-gray-600 dark:text-gray-400\">\n    Readable in any lighting condition.\n  \u003C\u002Fp>\n\u003C\u002Fdiv>\n","html",[265],{"type":150,"tag":176,"props":266,"children":267},{"__ignoreMap":145},[268],{"type":156,"value":262},{"type":150,"tag":151,"props":270,"children":272},{"id":271},"summary",[273],{"type":156,"value":274},"Summary",{"type":150,"tag":159,"props":276,"children":277},{},[278,280,286],{"type":156,"value":279},"A design system with Tailwind is: ",{"type":150,"tag":281,"props":282,"children":283},"strong",{},[284],{"type":156,"value":285},"tokens → patterns → components → pages",{"type":156,"value":287},". Each layer builds on the previous one, giving you both consistency and flexibility.",{"type":150,"tag":289,"props":290,"children":291},"style",{},[292],{"type":156,"value":145},{"title":145,"searchDepth":294,"depth":294,"links":295},2,[296,297,298,299,300,301],{"id":153,"depth":294,"text":157},{"id":166,"depth":294,"text":169},{"id":209,"depth":294,"text":212},{"id":230,"depth":294,"text":233},{"id":250,"depth":294,"text":253},{"id":271,"depth":294,"text":274}]