[{"data":1,"prerenderedAt":623},["ShallowReactive",2],{"blog-post-/blog/mastering-tailwind-css/":3},{"id":4,"title":5,"body":6,"description":598,"extension":599,"meta":600,"navigation":131,"path":618,"seo":619,"sitemap":620,"stem":621,"__hash__":622},"content/blog/mastering-tailwind-css.md","Mastering Tailwind CSS - Tips, Tricks and Best Practices",{"type":7,"value":8,"toc":586},"minimark",[9,14,18,23,26,61,65,70,78,185,189,192,238,242,245,369,373,376,413,417,423,468,475,512,516,519,576,580,583],[10,11,13],"h1",{"id":12},"mastering-tailwind-css","Mastering Tailwind CSS",[15,16,17],"p",{},"Tailwind CSS has revolutionized the way we write CSS. Instead of writing custom CSS, you compose designs directly in your HTML using utility classes. Let's dive into some advanced techniques!",[19,20,22],"h2",{"id":21},"why-tailwind-css","Why Tailwind CSS?",[15,24,25],{},"Tailwind CSS offers unique advantages:",[27,28,29,37,43,49,55],"ul",{},[30,31,32,36],"li",{},[33,34,35],"strong",{},"Utility-first"," - Build complex designs without leaving your HTML",[30,38,39,42],{},[33,40,41],{},"Responsive design"," - Built-in responsive modifiers",[30,44,45,48],{},[33,46,47],{},"Customizable"," - Extend the default theme to match your brand",[30,50,51,54],{},[33,52,53],{},"Performance"," - Purge unused CSS for tiny production builds",[30,56,57,60],{},[33,58,59],{},"Dark mode"," - First-class dark mode support",[19,62,64],{"id":63},"essential-tips","Essential Tips",[66,67,69],"h3",{"id":68},"_1-use-apply-sparingly","1. Use @apply Sparingly",[15,71,72,73,77],{},"While ",[74,75,76],"code",{},"@apply"," is convenient, overusing it defeats the purpose of utility-first CSS:",[79,80,85],"pre",{"className":81,"code":82,"language":83,"meta":84,"style":84},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","/* ❌ Avoid */\n.btn {\n  @apply px-4 py-2 bg-blue-500 text-white rounded;\n}\n\n/* ✅ Better - use utilities directly */\n\u003Cbutton class=\"px-4 py-2 bg-blue-500 text-white rounded\">\n  Click me\n\u003C/button>\n","css","",[74,86,87,96,110,120,126,133,139,169,175],{"__ignoreMap":84},[88,89,92],"span",{"class":90,"line":91},"line",1,[88,93,95],{"class":94},"sHwdD","/* ❌ Avoid */\n",[88,97,99,103,107],{"class":90,"line":98},2,[88,100,102],{"class":101},"sMK4o",".",[88,104,106],{"class":105},"sBMFI","btn",[88,108,109],{"class":101}," {\n",[88,111,113,117],{"class":90,"line":112},3,[88,114,116],{"class":115},"sTEyZ","  @apply px-4 py-2 bg-blue-500 text-white rounded",[88,118,119],{"class":101},";\n",[88,121,123],{"class":90,"line":122},4,[88,124,125],{"class":101},"}\n",[88,127,129],{"class":90,"line":128},5,[88,130,132],{"emptyLinePlaceholder":131},true,"\n",[88,134,136],{"class":90,"line":135},6,[88,137,138],{"class":94},"/* ✅ Better - use utilities directly */\n",[88,140,142,145,148,151,154,157,160,163,166],{"class":90,"line":141},7,[88,143,144],{"class":115},"\u003C",[88,146,147],{"class":105},"button",[88,149,150],{"class":115}," class=\"",[88,152,153],{"class":105},"px-4",[88,155,156],{"class":105}," py-2",[88,158,159],{"class":105}," bg-blue-500",[88,161,162],{"class":105}," text-white",[88,164,165],{"class":115}," rounded\"",[88,167,168],{"class":101},">\n",[88,170,172],{"class":90,"line":171},8,[88,173,174],{"class":115},"  Click me\n",[88,176,178,181,183],{"class":90,"line":177},9,[88,179,180],{"class":115},"\u003C/",[88,182,147],{"class":105},[88,184,168],{"class":101},[66,186,188],{"id":187},"_2-leverage-arbitrary-values","2. Leverage Arbitrary Values",[15,190,191],{},"Need a specific value? Use arbitrary values:",[79,193,197],{"className":194,"code":195,"language":196,"meta":84,"style":84},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cdiv class=\"top-[117px] w-[762px]\">\n  Custom positioning\n\u003C/div>\n","html",[74,198,199,225,230],{"__ignoreMap":84},[88,200,201,203,207,211,214,217,221,223],{"class":90,"line":91},[88,202,144],{"class":101},[88,204,206],{"class":205},"swJcz","div",[88,208,210],{"class":209},"spNyl"," class",[88,212,213],{"class":101},"=",[88,215,216],{"class":101},"\"",[88,218,220],{"class":219},"sfazB","top-[117px] w-[762px]",[88,222,216],{"class":101},[88,224,168],{"class":101},[88,226,227],{"class":90,"line":98},[88,228,229],{"class":115},"  Custom positioning\n",[88,231,232,234,236],{"class":90,"line":112},[88,233,180],{"class":101},[88,235,206],{"class":205},[88,237,168],{"class":101},[66,239,241],{"id":240},"_3-create-reusable-components","3. Create Reusable Components",[15,243,244],{},"Extract repeated patterns into components:",[79,246,250],{"className":247,"code":248,"language":249,"meta":84,"style":84},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003Cbutton class=\"btn-primary\">\n    \u003Cslot />\n  \u003C/button>\n\u003C/template>\n\n\u003Cstyle>\n.btn-primary {\n  @apply px-6 py-3 bg-green-600 hover:bg-green-700 \n         text-white font-semibold rounded-lg \n         transition-colors shadow-md;\n}\n\u003C/style>\n","vue",[74,251,252,261,281,292,301,309,313,322,330,341,347,355,360],{"__ignoreMap":84},[88,253,254,256,259],{"class":90,"line":91},[88,255,144],{"class":101},[88,257,258],{"class":205},"template",[88,260,168],{"class":101},[88,262,263,266,268,270,272,274,277,279],{"class":90,"line":98},[88,264,265],{"class":101},"  \u003C",[88,267,147],{"class":205},[88,269,210],{"class":209},[88,271,213],{"class":101},[88,273,216],{"class":101},[88,275,276],{"class":219},"btn-primary",[88,278,216],{"class":101},[88,280,168],{"class":101},[88,282,283,286,289],{"class":90,"line":112},[88,284,285],{"class":101},"    \u003C",[88,287,288],{"class":205},"slot",[88,290,291],{"class":101}," />\n",[88,293,294,297,299],{"class":90,"line":122},[88,295,296],{"class":101},"  \u003C/",[88,298,147],{"class":205},[88,300,168],{"class":101},[88,302,303,305,307],{"class":90,"line":128},[88,304,180],{"class":101},[88,306,258],{"class":205},[88,308,168],{"class":101},[88,310,311],{"class":90,"line":135},[88,312,132],{"emptyLinePlaceholder":131},[88,314,315,317,320],{"class":90,"line":141},[88,316,144],{"class":101},[88,318,319],{"class":205},"style",[88,321,168],{"class":101},[88,323,324,326,328],{"class":90,"line":171},[88,325,102],{"class":101},[88,327,276],{"class":105},[88,329,109],{"class":101},[88,331,332,335,338],{"class":90,"line":177},[88,333,334],{"class":115},"  @apply px-6 py-3 bg-green-600 hover",[88,336,337],{"class":101},":",[88,339,340],{"class":115},"bg-green-700 \n",[88,342,344],{"class":90,"line":343},10,[88,345,346],{"class":115},"         text-white font-semibold rounded-lg \n",[88,348,350,353],{"class":90,"line":349},11,[88,351,352],{"class":115},"         transition-colors shadow-md",[88,354,119],{"class":101},[88,356,358],{"class":90,"line":357},12,[88,359,125],{"class":101},[88,361,363,365,367],{"class":90,"line":362},13,[88,364,180],{"class":101},[88,366,319],{"class":205},[88,368,168],{"class":101},[19,370,372],{"id":371},"responsive-design-made-easy","Responsive Design Made Easy",[15,374,375],{},"Tailwind's responsive modifiers make it simple:",[79,377,379],{"className":194,"code":378,"language":196,"meta":84,"style":84},"\u003Cdiv class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\n  \u003C!-- Responsive grid -->\n\u003C/div>\n",[74,380,381,400,405],{"__ignoreMap":84},[88,382,383,385,387,389,391,393,396,398],{"class":90,"line":91},[88,384,144],{"class":101},[88,386,206],{"class":205},[88,388,210],{"class":209},[88,390,213],{"class":101},[88,392,216],{"class":101},[88,394,395],{"class":219},"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",[88,397,216],{"class":101},[88,399,168],{"class":101},[88,401,402],{"class":90,"line":98},[88,403,404],{"class":94},"  \u003C!-- Responsive grid -->\n",[88,406,407,409,411],{"class":90,"line":112},[88,408,180],{"class":101},[88,410,206],{"class":205},[88,412,168],{"class":101},[19,414,416],{"id":415},"dark-mode","Dark Mode",[15,418,419,420,337],{},"Enable dark mode in your ",[74,421,422],{},"tailwind.config.js",[79,424,428],{"className":425,"code":426,"language":427,"meta":84,"style":84},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","module.exports = {\n  darkMode: 'class',\n  // ...\n}\n","js",[74,429,430,440,459,464],{"__ignoreMap":84},[88,431,432,435,438],{"class":90,"line":91},[88,433,434],{"class":101},"module.exports",[88,436,437],{"class":101}," =",[88,439,109],{"class":101},[88,441,442,445,447,450,453,456],{"class":90,"line":98},[88,443,444],{"class":205},"  darkMode",[88,446,337],{"class":101},[88,448,449],{"class":101}," '",[88,451,452],{"class":219},"class",[88,454,455],{"class":101},"'",[88,457,458],{"class":101},",\n",[88,460,461],{"class":90,"line":112},[88,462,463],{"class":94},"  // ...\n",[88,465,466],{"class":90,"line":122},[88,467,125],{"class":101},[15,469,470,471,474],{},"Then use the ",[74,472,473],{},"dark:"," modifier:",[79,476,478],{"className":194,"code":477,"language":196,"meta":84,"style":84},"\u003Cdiv class=\"bg-white dark:bg-gray-900 text-gray-900 dark:text-white\">\n  Automatic dark mode support!\n\u003C/div>\n",[74,479,480,499,504],{"__ignoreMap":84},[88,481,482,484,486,488,490,492,495,497],{"class":90,"line":91},[88,483,144],{"class":101},[88,485,206],{"class":205},[88,487,210],{"class":209},[88,489,213],{"class":101},[88,491,216],{"class":101},[88,493,494],{"class":219},"bg-white dark:bg-gray-900 text-gray-900 dark:text-white",[88,496,216],{"class":101},[88,498,168],{"class":101},[88,500,501],{"class":90,"line":98},[88,502,503],{"class":115},"  Automatic dark mode support!\n",[88,505,506,508,510],{"class":90,"line":112},[88,507,180],{"class":101},[88,509,206],{"class":205},[88,511,168],{"class":101},[19,513,515],{"id":514},"performance-optimization","Performance Optimization",[15,517,518],{},"Always configure content paths for optimal purging:",[79,520,522],{"className":425,"code":521,"language":427,"meta":84,"style":84},"module.exports = {\n  content: [\n    './pages/**/*.{js,vue,ts}',\n    './components/**/*.{js,vue,ts}',\n  ],\n}\n",[74,523,524,532,542,554,565,572],{"__ignoreMap":84},[88,525,526,528,530],{"class":90,"line":91},[88,527,434],{"class":101},[88,529,437],{"class":101},[88,531,109],{"class":101},[88,533,534,537,539],{"class":90,"line":98},[88,535,536],{"class":205},"  content",[88,538,337],{"class":101},[88,540,541],{"class":115}," [\n",[88,543,544,547,550,552],{"class":90,"line":112},[88,545,546],{"class":101},"    '",[88,548,549],{"class":219},"./pages/**/*.{js,vue,ts}",[88,551,455],{"class":101},[88,553,458],{"class":101},[88,555,556,558,561,563],{"class":90,"line":122},[88,557,546],{"class":101},[88,559,560],{"class":219},"./components/**/*.{js,vue,ts}",[88,562,455],{"class":101},[88,564,458],{"class":101},[88,566,567,570],{"class":90,"line":128},[88,568,569],{"class":115},"  ]",[88,571,458],{"class":101},[88,573,574],{"class":90,"line":135},[88,575,125],{"class":101},[19,577,579],{"id":578},"conclusion","Conclusion",[15,581,582],{},"Tailwind CSS is a powerful tool that can dramatically speed up your development workflow. Master these techniques and you'll be building beautiful UIs in no time!",[319,584,585],{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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);}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}",{"title":84,"searchDepth":98,"depth":98,"links":587},[588,589,594,595,596,597],{"id":21,"depth":98,"text":22},{"id":63,"depth":98,"text":64,"children":590},[591,592,593],{"id":68,"depth":112,"text":69},{"id":187,"depth":112,"text":188},{"id":240,"depth":112,"text":241},{"id":371,"depth":98,"text":372},{"id":415,"depth":98,"text":416},{"id":514,"depth":98,"text":515},{"id":578,"depth":98,"text":579},"Advanced Tailwind CSS techniques: custom themes, responsive design patterns, dark mode, component reuse, and performance tips. Practical guide for intermediate and advanced developers.","md",{"author":601,"date":602,"image":603,"category":604,"tags":605,"featured":131,"draft":617},"WonderCoder Team","2025-11-18T14:30:00.000Z","/img/tailwind/tailwind.png","Design",[606,83,607,608,609,610,611,612,613,614,615,616],"tailwind","design","frontend","tailwindcss-tips","tailwind-best-practices","tailwindcss-tutorial","tailwind-advanced","responsive-design-tailwind","tailwind-dark-mode","tailwind-custom-theme","how-to-use-tailwindcss",false,"/blog/mastering-tailwind-css",{"title":5,"description":598},{"loc":618},"blog/mastering-tailwind-css","jlzyRGo7maRAhtphAFtjeWHDfxYodYgHcssQU6djZww",1782986782515]