[{"data":1,"prerenderedAt":195},["ShallowReactive",2],{"\u002Fblog\u002Fstyling_vue_apps_with_tailwind":3,"\u002Fblog\u002Fstyling_vue_apps_with_tailwind-surround":188},{"id":4,"title":5,"author":6,"body":10,"date":177,"description":178,"extension":179,"image":180,"meta":181,"minRead":182,"navigation":183,"path":184,"seo":185,"stem":186,"__hash__":187},"blog\u002Fblog\u002Fstyling_Vue_apps_with_Tailwind.md","Styling Modern Vue Apps with Tailwind CSS",{"name":7,"avatar":8},"NSTCrystal",{"src":9,"alt":7},"avatar.png",{"type":11,"value":12,"toc":171},"minimark",[13,17,22,25,84,87,91,98,136,140,143,147,164,167],[14,15,16],"p",{},"Tailwind CSS đã thay đổi hoàn toàn cách tôi viết style. Thay vì phải chuyển đổi qua lại giữa các tệp HTML và CSS, mọi thứ đều nằm ngay trong phần mã đánh dấu markup.",[18,19,21],"h2",{"id":20},"utility-first-approach","Utility-First Approach",[14,23,24],{},"Với các lớp tiện ích utility classes, bạn có thể xây dựng các thành phần trực tiếp như trong template.",[26,27,32],"pre",{"className":28,"code":29,"language":30,"meta":31,"style":31},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cbutton class=\"rounded-lg bg-blue-500 px-4 py-2 text-white hover:bg-blue-600\">\n  Click me\n\u003C\u002Fbutton>\n","vue","",[33,34,35,67,74],"code",{"__ignoreMap":31},[36,37,40,44,48,52,55,58,62,64],"span",{"class":38,"line":39},"line",1,[36,41,43],{"class":42},"sMK4o","\u003C",[36,45,47],{"class":46},"swJcz","button",[36,49,51],{"class":50},"spNyl"," class",[36,53,54],{"class":42},"=",[36,56,57],{"class":42},"\"",[36,59,61],{"class":60},"sfazB","rounded-lg bg-blue-500 px-4 py-2 text-white hover:bg-blue-600",[36,63,57],{"class":42},[36,65,66],{"class":42},">\n",[36,68,70],{"class":38,"line":69},2,[36,71,73],{"class":72},"sTEyZ","  Click me\n",[36,75,77,80,82],{"class":38,"line":76},3,[36,78,79],{"class":42},"\u003C\u002F",[36,81,47],{"class":46},[36,83,66],{"class":42},[14,85,86],{},"Không còn cảnh phải đặt tên class và lục lọi trong các file stylesheet nữa.",[18,88,90],{"id":89},"dark-mode","Dark Mode",[14,92,93,94,97],{},"Chế độ Dark mode được tích hợp sẵn trong cơ chế sử dụng class của Tailwind. Chỉ cần thêm các biến thể ",[33,95,96],{},"dark:",":",[26,99,101],{"className":28,"code":100,"language":30,"meta":31,"style":31},"\u003Cdiv class=\"bg-white dark:bg-slate-900\">\n  \u003Cp class=\"text-slate-700 dark:text-slate-300\">Hello\u003C\u002Fp>\n\u003C\u002Fdiv>\n",[33,102,103,123,128],{"__ignoreMap":31},[36,104,105,107,110,112,114,116,119,121],{"class":38,"line":39},[36,106,43],{"class":42},[36,108,109],{"class":46},"div",[36,111,51],{"class":50},[36,113,54],{"class":42},[36,115,57],{"class":42},[36,117,118],{"class":60},"bg-white dark:bg-slate-900",[36,120,57],{"class":42},[36,122,66],{"class":42},[36,124,125],{"class":38,"line":69},[36,126,127],{"class":72},"  \u003Cp class=\"text-slate-700 dark:text-slate-300\">Hello\u003C\u002Fp>\n",[36,129,130,132,134],{"class":38,"line":76},[36,131,79],{"class":42},[36,133,109],{"class":46},[36,135,66],{"class":42},[18,137,139],{"id":138},"pairing-with-nuxt-ui","Pairing with Nuxt UI",[14,141,142],{},"Điểm tuyệt vời nhất là việc kết hợp Tailwind với các thành phần Nuxt UI. Bạn sẽ có ngay những thành phần đẹp mắt, đảm bảo accessible mà không cần cấu hình nhiều, đồng thời có thể tùy biến chúng bằng các class của Tailwind.",[18,144,146],{"id":145},"keep-it-clean","Keep It Clean",[148,149,150,158,161],"ul",{},[151,152,153,154,157],"li",{},"Hãy sử dụng ",[33,155,156],{},"@apply"," một cách tiết chế cho các mẫu lặp lại.",[151,159,160],{},"Tạo các thành phần nhỏ, tập trung.",[151,162,163],{},"Sử dụng tệp cấu hình của bạn cho các design token.",[14,165,166],{},"Tailwind đã biến việc tạo kiểu giao diện trở nên thú vị trở lại. Hãy thử dùng nó trong dự án Vue tiếp theo của bạn nhé!",[168,169,170],"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":31,"searchDepth":69,"depth":69,"links":172},[173,174,175,176],{"id":20,"depth":69,"text":21},{"id":89,"depth":69,"text":90},{"id":138,"depth":69,"text":139},{"id":145,"depth":69,"text":146},"2026-06-10","Cái nhìn thực tế về việc sử dụng Tailwind CSS trong các dự án Vue, cùng các mẹo về tùy biến giao diện, chế độ tối dark mode và cách duy trì mã nguồn CSS dễ bảo trì.","md","\u002Fimages\u002Fblog\u002Fcss.png",{},5,true,"\u002Fblog\u002Fstyling_vue_apps_with_tailwind",{"title":5,"description":178},"blog\u002Fstyling_Vue_apps_with_Tailwind","YSy41E9KpIlqpl90PNXzWUEsvsg4qKkQ_XAa-QREn44",[189,194],{"title":190,"path":191,"stem":192,"description":193,"children":-1},"My hobbies","\u002Fblog\u002Fmy_hobbies","blog\u002Fmy_hobbies","Bài viết chia sẻ về sở thích cá nhân của tôi",null,1789113753779]