[{"data":1,"prerenderedAt":132},["ShallowReactive",2],{"page-tr-\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_tr\u002Ftr\u002Fblog\u002Fcreate-a-web-project-with-tailwind-css.md","Tailwind CSS ile Web Projesi Oluşturmak",{"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},"proje-klasörü-ve-nodejs-aktivasyonu","Proje klasörü ve Node.js aktivasyonu",[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},"tailwind-cssi-kur","Tailwind CSS'i kur",[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",{},"Bu adımla tailwind için dev dependency ve tailwind.config.css dosyası oluşacaktır.",[10,40,42],{"id":41},"pathi-ayarla","Path'i ayarla",[36,44,45],{},"Dizini belirtmek için content alanını aşağıdaki gibi değiştir.",[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},"tailwind-directivelerini-ekle","Tailwind directive'lerini ekle",[36,57,58],{},"src klasörü ve input.css dosyasını oluştur. src\u002Finput.css dosyan olacak; sonra aşağıdaki satırları ekle.",[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-aracını-packagejsona-ekle","Tailwind CSS Watch aracını package.json'a ekle",[36,70,71],{},"Bu watch script'ini package.json dosyasındaki scripts bölümüne ekle. Projeyi daha sonra bu komutla başlatacağız.",[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},"test-amaçlı-bir-html-sayfası-oluştur","Test amaçlı bir HTML sayfası oluştur",[36,83,84],{},"src klasörü altında index.html dosyası oluştur ve aşağıdaki satırları ekle.",[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},"projeyi-başlat","Projeyi başlat",[15,96,99],{"className":97,"code":98,"language":20},[18],"npm run watch\n",[22,100,98],{"__ignoreMap":24},[36,102,103],{},"index.html dosyasını LiveServer ya da benzeri bir test aracıyla tarayıcında aç. Tailwind destekli sayfayı göreceksin. Afiyet olsun.",[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","Tailwind CSS ile web projesi kurmak: proje oluşturma, config yolları, directive'ler ve CSS derleme.","md",{},true,"\u002Ftr\u002Fblog\u002Fcreate-a-web-project-with-tailwind-css",{"title":5,"description":121},"tr\u002Fblog\u002Fcreate-a-web-project-with-tailwind-css",[129],"application servers","\u002Fen\u002Fblog\u002Fcreate-a-web-project-with-tailwind-css","s6yU-dbOuJjii-yPT06nTsPWfalbsWY0TbGmXqoe3Gk",1792353222405]