[{"data":1,"prerenderedAt":145},["ShallowReactive",2],{"term-t\u002Ftailwind":3,"related-t\u002Ftailwind":126},{"id":4,"title":5,"acronym":6,"body":7,"category":106,"description":107,"difficulty":108,"extension":109,"letter":110,"meta":111,"navigation":112,"path":113,"related":114,"seo":120,"sitemap":121,"stem":124,"subcategory":6,"__hash__":125},"terms\u002Fterms\u002Ft\u002Ftailwind.md","Tailwind",null,{"type":8,"value":9,"toc":100},"minimark",[10,15,19,23,26,30,89,93,96],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"Tailwind is a CSS framework where instead of writing CSS files you add utility classes directly to your HTML. 'flex items-center gap-4 p-6 bg-blue-500 rounded-lg' — that IS your CSS. Controversial at first, but once it clicks you'll never want to go back.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"Tailwind CSS is a utility-first CSS framework providing single-purpose class names that map directly to CSS properties. It's configured via tailwind.config.js, processes your HTML to purge unused styles in production, and supports responsive prefixes, dark mode, hover\u002Ffocus states, and a design token system.",[11,27,29],{"id":28},"show-me-the-code","Show Me The Code",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cbutton class=\"bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded transition-colors\">\n  Click Me\n\u003C\u002Fbutton>\n","html","",[38,39,40,72,79],"code",{"__ignoreMap":36},[41,42,45,49,53,57,60,63,67,69],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sMK4o","\u003C",[41,50,52],{"class":51},"swJcz","button",[41,54,56],{"class":55},"spNyl"," class",[41,58,59],{"class":47},"=",[41,61,62],{"class":47},"\"",[41,64,66],{"class":65},"sfazB","bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded transition-colors",[41,68,62],{"class":47},[41,70,71],{"class":47},">\n",[41,73,75],{"class":43,"line":74},2,[41,76,78],{"class":77},"sTEyZ","  Click Me\n",[41,80,82,85,87],{"class":43,"line":81},3,[41,83,84],{"class":47},"\u003C\u002F",[41,86,52],{"class":51},[41,88,71],{"class":47},[11,90,92],{"id":91},"when-youll-hear-this","When You'll Hear This",[16,94,95],{},"\"Stop writing custom CSS — just use Tailwind classes.\" \u002F \"Tailwind's purge removes unused classes so the final CSS bundle is tiny.\"",[97,98,99],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":36,"searchDepth":74,"depth":74,"links":101},[102,103,104,105],{"id":13,"depth":74,"text":14},{"id":21,"depth":74,"text":22},{"id":28,"depth":74,"text":29},{"id":91,"depth":74,"text":92},"frontend","Tailwind is a CSS framework where instead of writing CSS files you add utility classes directly to your HTML.","beginner","md","t",{},true,"\u002Fterms\u002Ft\u002Ftailwind",[115,116,117,118,119],"CSS","Bootstrap","Responsive Design","Mobile First","Breakpoint",{"title":5,"description":107},{"changefreq":122,"priority":123},"weekly",0.7,"terms\u002Ft\u002Ftailwind","c53YJzQGrrJuhTkSN6ZL_3eGDr9g5liv4wgFaeYc_gs",[127,130,135,139,142],{"title":116,"path":128,"acronym":6,"category":106,"difficulty":108,"description":129},"\u002Fterms\u002Fb\u002Fbootstrap","Bootstrap is the OG CSS framework — add a class and get a pre-styled button, grid, modal, or navbar.",{"title":119,"path":131,"acronym":6,"category":132,"difficulty":133,"description":134},"\u002Fterms\u002Fb\u002Fbreakpoint","general","intermediate","A breakpoint is like a 'pause game' button you place on a specific line of code.",{"title":115,"path":136,"acronym":137,"category":106,"difficulty":108,"description":138},"\u002Fterms\u002Fc\u002Fcss","Cascading Style Sheets","CSS is the makeup and wardrobe for your HTML skeleton. It decides what color everything is, how big things are, and where stuff goes on the page.",{"title":118,"path":140,"acronym":6,"category":106,"difficulty":108,"description":141},"\u002Fterms\u002Fm\u002Fmobile-first","Mobile first means you design for the smallest screen first, then add styles as screens get bigger.",{"title":117,"path":143,"acronym":6,"category":106,"difficulty":108,"description":144},"\u002Fterms\u002Fr\u002Fresponsive-design","Responsive design means your website looks good on EVERY screen size — from a tiny phone to a giant 4K monitor.",1776518317589]