[{"data":1,"prerenderedAt":443},["ShallowReactive",2],{"blog-post-/blog/how-to-use-tailwind-with-nuxt/":3},{"id":4,"title":5,"body":6,"description":420,"extension":421,"meta":422,"navigation":437,"path":438,"seo":439,"sitemap":440,"stem":441,"__hash__":442},"content/blog/how-to-use-tailwind-with-nuxt.md","How to Use Tailwind CSS with Nuxt 3",{"type":7,"value":8,"toc":412},"minimark",[9,13,17,22,51,54,71,75,82,145,149,155,191,195,237,241,248,401,405,408],[10,11,5],"h1",{"id":12},"how-to-use-tailwind-css-with-nuxt-3",[14,15,16],"p",{},"Tailwind CSS combined with Nuxt 3 offers an excellent solution for styling your web applications. This tutorial will guide you through the integration steps.",[18,19,21],"h2",{"id":20},"step-1-installation","Step 1: Installation",[23,24,29],"pre",{"className":25,"code":26,"language":27,"meta":28,"style":28},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm install -D @nuxtjs/tailwindcss\n","bash","",[30,31,32],"code",{"__ignoreMap":28},[33,34,37,41,45,48],"span",{"class":35,"line":36},"line",1,[33,38,40],{"class":39},"sBMFI","npm",[33,42,44],{"class":43},"sfazB"," install",[33,46,47],{"class":43}," -D",[33,49,50],{"class":43}," @nuxtjs/tailwindcss\n",[14,52,53],{},"or",[23,55,57],{"className":25,"code":56,"language":27,"meta":28,"style":28},"yarn add -D @nuxtjs/tailwindcss\n",[30,58,59],{"__ignoreMap":28},[33,60,61,64,67,69],{"class":35,"line":36},[33,62,63],{"class":39},"yarn",[33,65,66],{"class":43}," add",[33,68,47],{"class":43},[33,70,50],{"class":43},[18,72,74],{"id":73},"step-2-configuration","Step 2: Configuration",[14,76,77,78,81],{},"Add Tailwind to your ",[30,79,80],{},"nuxt.config.ts",":",[23,83,87],{"className":84,"code":85,"language":86,"meta":28,"style":28},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  modules: ['@nuxtjs/tailwindcss'],\n})\n","ts",[30,88,89,110,136],{"__ignoreMap":28},[33,90,91,95,98,102,106],{"class":35,"line":36},[33,92,94],{"class":93},"s7zQu","export",[33,96,97],{"class":93}," default",[33,99,101],{"class":100},"s2Zo4"," defineNuxtConfig",[33,103,105],{"class":104},"sTEyZ","(",[33,107,109],{"class":108},"sMK4o","{\n",[33,111,113,117,119,122,125,128,130,133],{"class":35,"line":112},2,[33,114,116],{"class":115},"swJcz","  modules",[33,118,81],{"class":108},[33,120,121],{"class":104}," [",[33,123,124],{"class":108},"'",[33,126,127],{"class":43},"@nuxtjs/tailwindcss",[33,129,124],{"class":108},[33,131,132],{"class":104},"]",[33,134,135],{"class":108},",\n",[33,137,139,142],{"class":35,"line":138},3,[33,140,141],{"class":108},"}",[33,143,144],{"class":104},")\n",[18,146,148],{"id":147},"step-3-create-tailwind-css-file","Step 3: Create Tailwind CSS File",[14,150,151,152,81],{},"Create ",[30,153,154],{},"assets/css/tailwind.css",[23,156,160],{"className":157,"code":158,"language":159,"meta":28,"style":28},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","@tailwind base;\n@tailwind components;\n@tailwind utilities;\n","css",[30,161,162,173,182],{"__ignoreMap":28},[33,163,164,167,170],{"class":35,"line":36},[33,165,166],{"class":93},"@tailwind",[33,168,169],{"class":104}," base",[33,171,172],{"class":108},";\n",[33,174,175,177,180],{"class":35,"line":112},[33,176,166],{"class":93},[33,178,179],{"class":104}," components",[33,181,172],{"class":108},[33,183,184,186,189],{"class":35,"line":138},[33,185,166],{"class":93},[33,187,188],{"class":104}," utilities",[33,190,172],{"class":108},[18,192,194],{"id":193},"step-4-add-css-to-nuxt-config","Step 4: Add CSS to Nuxt Config",[23,196,198],{"className":84,"code":197,"language":86,"meta":28,"style":28},"export default defineNuxtConfig({\n  css: ['~/assets/css/tailwind.css']\n})\n",[30,199,200,212,231],{"__ignoreMap":28},[33,201,202,204,206,208,210],{"class":35,"line":36},[33,203,94],{"class":93},[33,205,97],{"class":93},[33,207,101],{"class":100},[33,209,105],{"class":104},[33,211,109],{"class":108},[33,213,214,217,219,221,223,226,228],{"class":35,"line":112},[33,215,216],{"class":115},"  css",[33,218,81],{"class":108},[33,220,121],{"class":104},[33,222,124],{"class":108},[33,224,225],{"class":43},"~/assets/css/tailwind.css",[33,227,124],{"class":108},[33,229,230],{"class":104},"]\n",[33,232,233,235],{"class":35,"line":138},[33,234,141],{"class":108},[33,236,144],{"class":104},[18,238,240],{"id":239},"step-5-configure-tailwindconfigjs-for-nuxt-content","Step 5: Configure tailwind.config.js for Nuxt Content",[14,242,243,244,247],{},"If you're using Nuxt Content, update ",[30,245,246],{},"tailwind.config.js"," to include content paths:",[23,249,253],{"className":250,"code":251,"language":252,"meta":28,"style":28},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  content: [\n    \"./components/**/*.{js,vue,ts}\",\n    \"./layouts/**/*.vue\",\n    \"./pages/**/*.vue\",\n    \"./plugins/**/*.{js,ts}\",\n    \"./nuxt.config.{js,ts}\",\n    \"./content/**/*.{md,yml,json,yaml,toml,csv}\",\n    \"./app.vue\",\n  ],\n}\n","js",[30,254,255,280,291,301,315,327,339,351,363,375,387,395],{"__ignoreMap":28},[33,256,257,261,264,268,271,275,277],{"class":35,"line":36},[33,258,260],{"class":259},"sHwdD","/** ",[33,262,263],{"class":93},"@",[33,265,267],{"class":266},"s6hCs","type",[33,269,270],{"class":93}," {",[33,272,274],{"class":273},"sFweD","import('tailwindcss').Config",[33,276,141],{"class":93},[33,278,279],{"class":259}," */\n",[33,281,282,285,288],{"class":35,"line":112},[33,283,284],{"class":108},"module.exports",[33,286,287],{"class":108}," =",[33,289,290],{"class":108}," {\n",[33,292,293,296,298],{"class":35,"line":138},[33,294,295],{"class":115},"  content",[33,297,81],{"class":108},[33,299,300],{"class":104}," [\n",[33,302,304,307,310,313],{"class":35,"line":303},4,[33,305,306],{"class":108},"    \"",[33,308,309],{"class":43},"./components/**/*.{js,vue,ts}",[33,311,312],{"class":108},"\"",[33,314,135],{"class":108},[33,316,318,320,323,325],{"class":35,"line":317},5,[33,319,306],{"class":108},[33,321,322],{"class":43},"./layouts/**/*.vue",[33,324,312],{"class":108},[33,326,135],{"class":108},[33,328,330,332,335,337],{"class":35,"line":329},6,[33,331,306],{"class":108},[33,333,334],{"class":43},"./pages/**/*.vue",[33,336,312],{"class":108},[33,338,135],{"class":108},[33,340,342,344,347,349],{"class":35,"line":341},7,[33,343,306],{"class":108},[33,345,346],{"class":43},"./plugins/**/*.{js,ts}",[33,348,312],{"class":108},[33,350,135],{"class":108},[33,352,354,356,359,361],{"class":35,"line":353},8,[33,355,306],{"class":108},[33,357,358],{"class":43},"./nuxt.config.{js,ts}",[33,360,312],{"class":108},[33,362,135],{"class":108},[33,364,366,368,371,373],{"class":35,"line":365},9,[33,367,306],{"class":108},[33,369,370],{"class":43},"./content/**/*.{md,yml,json,yaml,toml,csv}",[33,372,312],{"class":108},[33,374,135],{"class":108},[33,376,378,380,383,385],{"class":35,"line":377},10,[33,379,306],{"class":108},[33,381,382],{"class":43},"./app.vue",[33,384,312],{"class":108},[33,386,135],{"class":108},[33,388,390,393],{"class":35,"line":389},11,[33,391,392],{"class":104},"  ]",[33,394,135],{"class":108},[33,396,398],{"class":35,"line":397},12,[33,399,400],{"class":108},"}\n",[18,402,404],{"id":403},"conclusion","Conclusion",[14,406,407],{},"Tailwind CSS and Nuxt 3 together provide a streamlined, efficient solution for modern web styling. Follow these steps to get up and running quickly. Happy coding!",[409,410,411],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .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 .s6hCs, html code.shiki .s6hCs{--shiki-light:#9C3EDA;--shiki-light-font-style:italic;--shiki-default:#C792EA;--shiki-default-font-style:italic;--shiki-dark:#C792EA;--shiki-dark-font-style:italic}html pre.shiki code .sFweD, html code.shiki .sFweD{--shiki-light:#E2931D;--shiki-light-font-style:italic;--shiki-default:#FFCB6B;--shiki-default-font-style:italic;--shiki-dark:#FFCB6B;--shiki-dark-font-style:italic}",{"title":28,"searchDepth":112,"depth":112,"links":413},[414,415,416,417,418,419],{"id":20,"depth":112,"text":21},{"id":73,"depth":112,"text":74},{"id":147,"depth":112,"text":148},{"id":193,"depth":112,"text":194},{"id":239,"depth":112,"text":240},{"id":403,"depth":112,"text":404},"Step-by-step guide to integrate Tailwind CSS with Nuxt 3. Covers installation, nuxt.config.ts setup, tailwind.config.js, and Nuxt Content compatibility.","md",{"author":423,"date":424,"image":425,"category":426,"tags":427,"featured":436,"draft":436},"Aysegul Karadan","2023-11-14T10:00:00.000Z","/img/tailwind/tailwind.png","Web Development",[428,429,159,430,431,432,433,434,435],"tailwind","nuxt","tutorial","tailwindcss-nuxt3","how-to-use-tailwind-with-nuxt","nuxt3-tailwind-setup","tailwind-nuxt-integration","nuxt3-styling",false,true,"/blog/how-to-use-tailwind-with-nuxt",{"title":5,"description":420},{"loc":438},"blog/how-to-use-tailwind-with-nuxt","bB2Ogj6izhPhbnOtGHMLHK5aN0OmNBK7zGZN_jUqHdU",1782986781101]