[{"data":1,"prerenderedAt":132},["ShallowReactive",2],{"page-en-\u002Fblog\u002Fcreate-a-web-project-with-tailwind-css":3},{"id":4,"title":5,"body":6,"date":120,"description":121,"extension":122,"meta":123,"navigation":124,"path":125,"seo":126,"stem":127,"tags":128,"translation":130,"__hash__":131},"pages_en\u002Fen\u002Fblog\u002Fcreate-a-web-project-with-tailwind-css.md","Create a web project with Tailwind CSS",{"type":7,"value":8,"toc":110},"minimark",[9,14,25,29,35,39,43,46,52,56,59,65,69,72,78,82,85,91,95,101,104],[10,11,13],"h2",{"id":12},"project-folder-and-nodejs-activation","Project folder and Node.js activation",[15,16,21],"pre",{"className":17,"code":19,"language":20},[18],"language-text","mkdir tailwind-demo\ncd tailwind-demo\nnpm init\n","text",[22,23,19],"code",{"__ignoreMap":24},"",[10,26,28],{"id":27},"install-tailwind-css","Install Tailwind CSS",[15,30,33],{"className":31,"code":32,"language":20},[18],"npm install -D tailwindcss\nnpx tailwindcss init\n",[22,34,32],{"__ignoreMap":24},[36,37,38],"p",{},"You will have dev dependency for tailwind and tailwind.config.css",[10,40,42],{"id":41},"configure-path","Configure path",[36,44,45],{},"Change content element like below to dedicate the directory.",[15,47,50],{"className":48,"code":49,"language":20},[18],"content: [\".\u002Fsrc\u002F**\u002F*.{html,js}\"],\n",[22,51,49],{"__ignoreMap":24},[10,53,55],{"id":54},"add-tailwind-directives","Add Tailwind directives",[36,57,58],{},"Create src folder and input.css file. You will have src\u002Finput.css, then add below lines.",[15,60,63],{"className":61,"code":62,"language":20},[18],"@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",[22,64,62],{"__ignoreMap":24},[10,66,68],{"id":67},"tailwind-css-watch-tool-into-packagejson","Tailwind CSS Watch Tool into package.json",[36,70,71],{},"Add this watch script into your package.json scripts section. We will start our project with this command later.",[15,73,76],{"className":74,"code":75,"language":20},[18],"\"watch\": \"npx tailwindcss -i .\u002Fsrc\u002Finput.css -o .\u002Fdist\u002Foutput.css --watch\"\n",[22,77,75],{"__ignoreMap":24},[10,79,81],{"id":80},"create-a-html-page-for-testing-purpose","Create a HTML page for testing purpose",[36,83,84],{},"Under src folder create an index.html file, then add below lines.",[15,86,89],{"className":87,"code":88,"language":20},[18],"\u003C!doctype html>\n\u003Chtml>\n\u003Chead>\n  \u003Cmeta charset=\"UTF-8\">\n  \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  \u003Clink href=\"\u002Fdist\u002Foutput.css\" rel=\"stylesheet\">\n\u003C\u002Fhead>\n\u003Cbody>\n  \u003Ch1 class=\"text-3xl font-bold underline\">\n    Hello world!\n  \u003C\u002Fh1>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[22,90,88],{"__ignoreMap":24},[10,92,94],{"id":93},"start-your-project","Start your project",[15,96,99],{"className":97,"code":98,"language":20},[18],"npm run watch\n",[22,100,98],{"__ignoreMap":24},[36,102,103],{},"Open index.html file in your browser by using LiveServer or another testing tool. You will see the page with Tailwind support. Enjoy.",[15,105,108],{"className":106,"code":107,"language":20},[18],"http:\u002F\u002F127.0.0.1:5500\u002Fsrc\u002Findex.html\n",[22,109,107],{"__ignoreMap":24},{"title":24,"searchDepth":111,"depth":111,"links":112},2,[113,114,115,116,117,118,119],{"id":12,"depth":111,"text":13},{"id":27,"depth":111,"text":28},{"id":41,"depth":111,"text":42},{"id":54,"depth":111,"text":55},{"id":67,"depth":111,"text":68},{"id":80,"depth":111,"text":81},{"id":93,"depth":111,"text":94},"2022-12-18","Setting up a web project with Tailwind CSS: project init, config paths, directives, and building the CSS.","md",{},true,"\u002Fen\u002Fblog\u002Fcreate-a-web-project-with-tailwind-css",{"title":5,"description":121},"en\u002Fblog\u002Fcreate-a-web-project-with-tailwind-css",[129],"application servers","\u002Fblog\u002Fcreate-a-web-project-with-tailwind-css","At4s4Du2VFiO_0MtrNYmsiMGK76YqGt2cJTNb3prfmM",1792353223601]