[{"data":1,"prerenderedAt":244},["ShallowReactive",2],{"writing-configuring-new-laravel-application-with-tailwindcss":3},{"id":4,"title":5,"body":6,"category":228,"date":229,"description":230,"excerpt":231,"extension":232,"image":233,"keywords":234,"meta":235,"navigation":236,"path":237,"readingTime":238,"seo":239,"slug":240,"stem":241,"tags":242,"__hash__":243},"blog\u002Fblog\u002Fconfiguring-new-laravel-application-with-tailwindcss.md","Configuring new Laravel application with TailwindCSS",{"type":7,"value":8,"toc":226},"minimark",[9,33,48,71,81,88,112,119,152,159,209,222],[10,11,12,19,20,24,25,28,29,32],"p",{},[13,14,18],"a",{"href":15,"rel":16},"https:\u002F\u002Ftailwindcss.com",[17],"nofollow","Tailwind"," is something that you have to adopt in your ",[21,22,23],"strong",{},"daily coding",". It will make writing CSS like a breeze. Not only it will speed up your ",[21,26,27],{},"design development",", but it will also make you a better ",[21,30,31],{},"UI designer",".",[10,34,35,39,40,43,44,47],{},[36,37,38],"em",{},"Tailwind is a utility-first CSS framework for rapidly building custom user interfaces."," This is how they described Tailwind. It's not like any other ",[21,41,42],{},"CSS framework"," available (Bootstrap, Bulma, ...), it doesn't have any predefined components, but instead you build every component on your own. Sounds difficult right? ",[21,45,46],{},"It's not."," If you have your website to have its own identity, and not look like any other bootstrap based website online - use Tailwind.",[10,49,50,51,55,56,59,60,63,64,67,68,32],{},"Setting up Tailwind for Laravel is simple. Using your terminal, craft a new Laravel application using ",[52,53,54],"code",{},"laravel new \u003Capp_name>"," command. Then, enter the directory using ",[52,57,58],{},"cd \u003Capp_name>",", and run ",[52,61,62],{},"composer install",". After composer did its thing, using ",[52,65,66],{},"yarn"," install node modules. After node modules are in place, install tailwind using ",[52,69,70],{},"yarn add tailwindcss",[10,72,73,74,77,78,32],{},"After that, run ",[52,75,76],{},".\u002Fnode_modules\u002F.bin\u002Ftailwind init"," to init a configuration file for tailwind. You can configure the colors, modules, and other stuff for tailwind in tailwind.js file that was generated for you ",[36,79,80],{},"(don't overthink this right now — you'll learn how to customize Tailwind to fit your needs after you play with it for a while)",[10,82,83,84,87],{},"In your main ",[52,85,86],{},".scss"," file, add these two lines at the beginning:",[89,90,95],"pre",{"className":91,"code":92,"language":93,"meta":94,"style":94},"language-scss shiki shiki-themes github-light github-dark","@tailwind preflight\n@tailwind utilities;\n","scss","",[52,96,97,106],{"__ignoreMap":94},[98,99,102],"span",{"class":100,"line":101},"line",1,[98,103,105],{"class":104},"sVt8B","@tailwind preflight\n",[98,107,109],{"class":100,"line":108},2,[98,110,111],{"class":104},"@tailwind utilities;\n",[10,113,114,115,118],{},"Open ",[52,116,117],{},"webpack.min.js"," and add this line to the top of the file",[89,120,124],{"className":121,"code":122,"language":123,"meta":94,"style":94},"language-js shiki shiki-themes github-light github-dark","let tailwindcss = require('tailwindcss');\n","js",[52,125,126],{"__ignoreMap":94},[98,127,128,132,135,138,142,145,149],{"class":100,"line":101},[98,129,131],{"class":130},"szBVR","let",[98,133,134],{"class":104}," tailwindcss ",[98,136,137],{"class":130},"=",[98,139,141],{"class":140},"sScJk"," require",[98,143,144],{"class":104},"(",[98,146,148],{"class":147},"sZZnC","'tailwindcss'",[98,150,151],{"class":104},");\n",[10,153,154,155,158],{},"And lastly, append to the ",[52,156,157],{},".scss()"," function this postCSS method:",[89,160,162],{"className":121,"code":161,"language":123,"meta":94,"style":94},".options({\n      processCssUrls: false,\n      postCss: [tailwindcss('.\u002Ftailwind.js')],\n});\n",[52,163,164,174,186,203],{"__ignoreMap":94},[98,165,166,168,171],{"class":100,"line":101},[98,167,32],{"class":104},[98,169,170],{"class":140},"options",[98,172,173],{"class":104},"({\n",[98,175,176,179,183],{"class":100,"line":108},[98,177,178],{"class":104},"      processCssUrls: ",[98,180,182],{"class":181},"sj4cs","false",[98,184,185],{"class":104},",\n",[98,187,189,192,195,197,200],{"class":100,"line":188},3,[98,190,191],{"class":104},"      postCss: [",[98,193,194],{"class":140},"tailwindcss",[98,196,144],{"class":104},[98,198,199],{"class":147},"'.\u002Ftailwind.js'",[98,201,202],{"class":104},")],\n",[98,204,206],{"class":100,"line":205},4,[98,207,208],{"class":104},"});\n",[10,210,211,212,215,216,221],{},"Now, run ",[52,213,214],{},"yarn run dev"," and you can start using Tailwind in your Laravel application. Their ",[13,217,220],{"href":218,"rel":219},"https:\u002F\u002Ftailwindcss.com\u002Fdocs",[17],"documentation"," covers everything you need to get productive.",[223,224,225],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}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 .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":94,"searchDepth":108,"depth":108,"links":227},[],"Laravel","2019\u002F08\u002F07","Tailwind is something that you have to adopt in your daily coding. It will make writing CSS like a breeze. Not only it will speed up your design development, but it will also make you a better UI designer.",null,"md","\u002Fimages\u002Ftailwind.png","tailwind, laravel with tailwind, configure tailwind, configure laravel with tailwind",{},true,"\u002Fblog\u002Fconfiguring-new-laravel-application-with-tailwindcss","☕️ 2 min read",{"title":5,"description":230},"configuring-new-laravel-application-with-tailwindcss","blog\u002Fconfiguring-new-laravel-application-with-tailwindcss","laravel, tailwind","9HBxRw6CpRgX2gE46QWzNfzpO8FYH4Q1I2BFLuAb_XE",1774945272410]