[{"data":1,"prerenderedAt":782},["ShallowReactive",2],{"article:getting-started-with-angular-10-and-tailwindcss-using-cdn-part-1":3,"\u002Fblog\u002Fgetting-started-with-angular-10-and-tailwindcss-using-cdn-part-1-surround":771},{"id":4,"title":5,"author":6,"body":7,"date":759,"description":760,"extension":761,"image":762,"meta":763,"minRead":99,"navigation":764,"path":765,"published":764,"seo":766,"stem":767,"tags":768,"__hash__":770},"blog\u002Fblog\u002Fgetting-started-with-angular-10-and-tailwindcss-using-cdn-part-1.md","Getting Started With Angular 10 and TailwindCSS using CDN (Part 1)","Baljeet Singh",{"type":8,"value":9,"toc":746},"minimark",[10,33,38,44,52,55,129,132,135,200,203,207,212,234,238,241,257,268,272,280,283,289,296,299,351,358,361,707,711,727,730,736,742],[11,12,13,14,21,22,26,27,32],"p",{},"Recently, I created my personal blog with ",[15,16,20],"a",{"href":17,"rel":18},"https:\u002F\u002Ftailwindcss.com\u002F",[19],"nofollow","TailwindCSS"," and ",[15,23,25],{"href":24},"","NuxtJS",". I really enjoyed working with Tailwind for creating UI design. In the beginning I had my concerns too, like it'll add lot more boilerplate to my markup. It does add lot of markup but there are ways to reduce the boilder (e.g using ",[15,28,31],{"href":29,"rel":30},"https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Fextracting-components\u002F",[19],"@apply",").",[34,35,37],"h2",{"id":36},"what-is-tailwind","What is Tailwind?",[39,40,41],"blockquote",{},[11,42,43],{},"A utility-first CSS framework forrapidly building custom designs.",[11,45,46,47,51],{},"That means we have classes defined for ",[48,49,50],"em",{},"all"," the common css properties. If you have converted designs to html before. You might remember, if we don't follow best practices. We might end up with same properties defined in different classes with different naming convensions.",[11,53,54],{},"e.g. let's say we have added two classes that both do the same functionality. It may happen if we don't already know if we have class defined or not.",[56,57,61],"pre",{"className":58,"code":59,"language":60,"meta":24,"style":24},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",".padding-4 {\n  padding: 4;\n}\n.p-4 {\n  padding: 4;\n}\n","css",[62,63,64,80,97,103,113,124],"code",{"__ignoreMap":24},[65,66,69,73,77],"span",{"class":67,"line":68},"line",1,[65,70,72],{"class":71},"sMK4o",".",[65,74,76],{"class":75},"sBMFI","padding-4",[65,78,79],{"class":71}," {\n",[65,81,83,87,90,94],{"class":67,"line":82},2,[65,84,86],{"class":85},"sqsOY","  padding",[65,88,89],{"class":71},":",[65,91,93],{"class":92},"sbssI"," 4",[65,95,96],{"class":71},";\n",[65,98,100],{"class":67,"line":99},3,[65,101,102],{"class":71},"}\n",[65,104,106,108,111],{"class":67,"line":105},4,[65,107,72],{"class":71},[65,109,110],{"class":75},"p-4",[65,112,79],{"class":71},[65,114,116,118,120,122],{"class":67,"line":115},5,[65,117,86],{"class":85},[65,119,89],{"class":71},[65,121,93],{"class":92},[65,123,96],{"class":71},[65,125,127],{"class":67,"line":126},6,[65,128,102],{"class":71},[11,130,131],{},"Now let's see how we can tackle this with tailwind. We basically have utility classes for all the css properties. So, we no longer need to define the custom css classes (But if we need we can).",[11,133,134],{},"e.g For padding, in tailwind we have classes like following",[56,136,140],{"className":137,"code":138,"language":139,"meta":24,"style":24},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","    \u002F\u002F here 4 (1rem) is size (can vary)\n    .p-4{} \u002F\u002F padding in x and y direction\n    .px-4{} \u002F\u002F padding in x direction\n    .py-4{} \u002F\u002F padding in y direction\n","js",[62,141,142,148,168,184],{"__ignoreMap":24},[65,143,144],{"class":67,"line":68},[65,145,147],{"class":146},"sHwdD","    \u002F\u002F here 4 (1rem) is size (can vary)\n",[65,149,150,153,156,159,162,165],{"class":67,"line":82},[65,151,152],{"class":71},"    .",[65,154,11],{"class":155},"sTEyZ",[65,157,158],{"class":71},"-",[65,160,161],{"class":92},"4",[65,163,164],{"class":71},"{}",[65,166,167],{"class":146}," \u002F\u002F padding in x and y direction\n",[65,169,170,172,175,177,179,181],{"class":67,"line":99},[65,171,152],{"class":71},[65,173,174],{"class":155},"px",[65,176,158],{"class":71},[65,178,161],{"class":92},[65,180,164],{"class":71},[65,182,183],{"class":146}," \u002F\u002F padding in x direction\n",[65,185,186,188,191,193,195,197],{"class":67,"line":105},[65,187,152],{"class":71},[65,189,190],{"class":155},"py",[65,192,158],{"class":71},[65,194,161],{"class":92},[65,196,164],{"class":71},[65,198,199],{"class":146}," \u002F\u002F padding in y direction\n",[11,201,202],{},"So, here you can see we no longer have to define the custom class for padding, we can use tailwind builtin classes.",[34,204,206],{"id":205},"using-tailwind-with-angular-10","Using Tailwind with Angular 10",[208,209,211],"h3",{"id":210},"installing-angular-cli","Installing Angular CLI",[56,213,217],{"className":214,"code":215,"language":216,"meta":24,"style":24},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","    npm install -g @angular\u002Fcli\n","bash",[62,218,219],{"__ignoreMap":24},[65,220,221,224,228,231],{"class":67,"line":68},[65,222,223],{"class":75},"    npm",[65,225,227],{"class":226},"sfazB"," install",[65,229,230],{"class":226}," -g",[65,232,233],{"class":226}," @angular\u002Fcli\n",[208,235,237],{"id":236},"creating-angular-project","Creating Angular Project",[11,239,240],{},"We can go to the directory of our choice where we want to create the project.",[56,242,244],{"className":214,"code":243,"language":216,"meta":24,"style":24},"    ng new ng-tailwind-part1\n",[62,245,246],{"__ignoreMap":24},[65,247,248,251,254],{"class":67,"line":68},[65,249,250],{"class":75},"    ng",[65,252,253],{"class":226}," new",[65,255,256],{"class":226}," ng-tailwind-part1\n",[11,258,259,260,264,265],{},"Open the project inside the code editor, if you are using ",[261,262,263],"strong",{},"vscode"," you can change the directory to the project and type ",[62,266,267],{},"code .",[208,269,271],{"id":270},"using-tailwind-cdn","Using Tailwind CDN",[11,273,274,275,279],{},"We can go to ",[15,276,277],{"href":277,"rel":278,"title":277},"https:\u002F\u002Fcdnjs.com\u002Flibraries\u002Ftailwindcss",[19]," and copy the tailwind css cdn link.",[11,281,282],{},"Following is the link you will find,",[11,284,285],{},[15,286,287],{"href":287,"rel":288,"title":287},"https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Ftailwindcss\u002F1.6.2\u002Ftailwind.min.css",[19],[208,290,292,293],{"id":291},"go-to-srcindexhtml","Go to ",[62,294,295],{},"src\u002Findex.html",[11,297,298],{},"add the cdn in the link tag",[56,300,304],{"className":301,"code":302,"language":303,"meta":24,"style":24},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Clink\n  rel=\"stylesheet\"\n  href=\"https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Ftailwindcss\u002F1.6.2\u002Ftailwind.min.css\"\n\u002F>\n","html",[62,305,306,315,333,346],{"__ignoreMap":24},[65,307,308,311],{"class":67,"line":68},[65,309,310],{"class":71},"\u003C",[65,312,314],{"class":313},"swJcz","link\n",[65,316,317,321,324,327,330],{"class":67,"line":82},[65,318,320],{"class":319},"spNyl","  rel",[65,322,323],{"class":71},"=",[65,325,326],{"class":71},"\"",[65,328,329],{"class":226},"stylesheet",[65,331,332],{"class":71},"\"\n",[65,334,335,338,340,342,344],{"class":67,"line":99},[65,336,337],{"class":319},"  href",[65,339,323],{"class":71},[65,341,326],{"class":71},[65,343,287],{"class":226},[65,345,332],{"class":71},[65,347,348],{"class":67,"line":105},[65,349,350],{"class":71},"\u002F>\n",[208,352,354,355],{"id":353},"add-the-following-markup-inside-srcappappcomponenthtml","Add the following markup inside ",[62,356,357],{},"src\u002Fapp\u002Fapp.component.html",[11,359,360],{},"Remove the existing code inside the file and add the following,",[56,362,364],{"className":301,"code":363,"language":303,"meta":24,"style":24},"\u003Cdiv class=\"max-w-sm rounded overflow-hidden shadow-lg mx-auto\">\n  \u003Cimg\n    class=\"w-full\"\n    src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1512428197675-daae5d4e1e43?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1053&q=80\"\n    alt=\"Sunset in the mountains\"\n  \u002F>\n  \u003Cdiv class=\"px-6 py-4\">\n    \u003Cdiv class=\"font-bold text-xl mb-2\">The Coldest Sunset\u003C\u002Fdiv>\n    \u003Cp class=\"text-gray-700 text-base\">\n      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus\n      quia, nulla! Maiores et perferendis eaque, exercitationem praesentium\n      nihil.\n    \u003C\u002Fp>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"px-6 py-4\">\n    \u003Cspan\n      class=\"inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2\"\n      >#photography\u003C\u002Fspan\n    >\n    \u003Cspan\n      class=\"inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2\"\n      >#travel\u003C\u002Fspan\n    >\n    \u003Cspan\n      class=\"inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700\"\n      >#winter\u003C\u002Fspan\n    >\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[62,365,366,388,396,410,424,438,443,463,495,515,521,527,533,543,553,572,580,595,608,614,621,634,646,651,658,672,684,689,698],{"__ignoreMap":24},[65,367,368,370,373,376,378,380,383,385],{"class":67,"line":68},[65,369,310],{"class":71},[65,371,372],{"class":313},"div",[65,374,375],{"class":319}," class",[65,377,323],{"class":71},[65,379,326],{"class":71},[65,381,382],{"class":226},"max-w-sm rounded overflow-hidden shadow-lg mx-auto",[65,384,326],{"class":71},[65,386,387],{"class":71},">\n",[65,389,390,393],{"class":67,"line":82},[65,391,392],{"class":71},"  \u003C",[65,394,395],{"class":313},"img\n",[65,397,398,401,403,405,408],{"class":67,"line":99},[65,399,400],{"class":319},"    class",[65,402,323],{"class":71},[65,404,326],{"class":71},[65,406,407],{"class":226},"w-full",[65,409,332],{"class":71},[65,411,412,415,417,419,422],{"class":67,"line":105},[65,413,414],{"class":319},"    src",[65,416,323],{"class":71},[65,418,326],{"class":71},[65,420,421],{"class":226},"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1512428197675-daae5d4e1e43?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1053&q=80",[65,423,332],{"class":71},[65,425,426,429,431,433,436],{"class":67,"line":115},[65,427,428],{"class":319},"    alt",[65,430,323],{"class":71},[65,432,326],{"class":71},[65,434,435],{"class":226},"Sunset in the mountains",[65,437,332],{"class":71},[65,439,440],{"class":67,"line":126},[65,441,442],{"class":71},"  \u002F>\n",[65,444,446,448,450,452,454,456,459,461],{"class":67,"line":445},7,[65,447,392],{"class":71},[65,449,372],{"class":313},[65,451,375],{"class":319},[65,453,323],{"class":71},[65,455,326],{"class":71},[65,457,458],{"class":226},"px-6 py-4",[65,460,326],{"class":71},[65,462,387],{"class":71},[65,464,466,469,471,473,475,477,480,482,485,488,491,493],{"class":67,"line":465},8,[65,467,468],{"class":71},"    \u003C",[65,470,372],{"class":313},[65,472,375],{"class":319},[65,474,323],{"class":71},[65,476,326],{"class":71},[65,478,479],{"class":226},"font-bold text-xl mb-2",[65,481,326],{"class":71},[65,483,484],{"class":71},">",[65,486,487],{"class":155},"The Coldest Sunset",[65,489,490],{"class":71},"\u003C\u002F",[65,492,372],{"class":313},[65,494,387],{"class":71},[65,496,498,500,502,504,506,508,511,513],{"class":67,"line":497},9,[65,499,468],{"class":71},[65,501,11],{"class":313},[65,503,375],{"class":319},[65,505,323],{"class":71},[65,507,326],{"class":71},[65,509,510],{"class":226},"text-gray-700 text-base",[65,512,326],{"class":71},[65,514,387],{"class":71},[65,516,518],{"class":67,"line":517},10,[65,519,520],{"class":155},"      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus\n",[65,522,524],{"class":67,"line":523},11,[65,525,526],{"class":155},"      quia, nulla! Maiores et perferendis eaque, exercitationem praesentium\n",[65,528,530],{"class":67,"line":529},12,[65,531,532],{"class":155},"      nihil.\n",[65,534,536,539,541],{"class":67,"line":535},13,[65,537,538],{"class":71},"    \u003C\u002F",[65,540,11],{"class":313},[65,542,387],{"class":71},[65,544,546,549,551],{"class":67,"line":545},14,[65,547,548],{"class":71},"  \u003C\u002F",[65,550,372],{"class":313},[65,552,387],{"class":71},[65,554,556,558,560,562,564,566,568,570],{"class":67,"line":555},15,[65,557,392],{"class":71},[65,559,372],{"class":313},[65,561,375],{"class":319},[65,563,323],{"class":71},[65,565,326],{"class":71},[65,567,458],{"class":226},[65,569,326],{"class":71},[65,571,387],{"class":71},[65,573,575,577],{"class":67,"line":574},16,[65,576,468],{"class":71},[65,578,579],{"class":313},"span\n",[65,581,583,586,588,590,593],{"class":67,"line":582},17,[65,584,585],{"class":319},"      class",[65,587,323],{"class":71},[65,589,326],{"class":71},[65,591,592],{"class":226},"inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2",[65,594,332],{"class":71},[65,596,598,601,604,606],{"class":67,"line":597},18,[65,599,600],{"class":71},"      >",[65,602,603],{"class":155},"#photography",[65,605,490],{"class":71},[65,607,579],{"class":313},[65,609,611],{"class":67,"line":610},19,[65,612,613],{"class":71},"    >\n",[65,615,617,619],{"class":67,"line":616},20,[65,618,468],{"class":71},[65,620,579],{"class":313},[65,622,624,626,628,630,632],{"class":67,"line":623},21,[65,625,585],{"class":319},[65,627,323],{"class":71},[65,629,326],{"class":71},[65,631,592],{"class":226},[65,633,332],{"class":71},[65,635,637,639,642,644],{"class":67,"line":636},22,[65,638,600],{"class":71},[65,640,641],{"class":155},"#travel",[65,643,490],{"class":71},[65,645,579],{"class":313},[65,647,649],{"class":67,"line":648},23,[65,650,613],{"class":71},[65,652,654,656],{"class":67,"line":653},24,[65,655,468],{"class":71},[65,657,579],{"class":313},[65,659,661,663,665,667,670],{"class":67,"line":660},25,[65,662,585],{"class":319},[65,664,323],{"class":71},[65,666,326],{"class":71},[65,668,669],{"class":226},"inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700",[65,671,332],{"class":71},[65,673,675,677,680,682],{"class":67,"line":674},26,[65,676,600],{"class":71},[65,678,679],{"class":155},"#winter",[65,681,490],{"class":71},[65,683,579],{"class":313},[65,685,687],{"class":67,"line":686},27,[65,688,613],{"class":71},[65,690,692,694,696],{"class":67,"line":691},28,[65,693,548],{"class":71},[65,695,372],{"class":313},[65,697,387],{"class":71},[65,699,701,703,705],{"class":67,"line":700},29,[65,702,490],{"class":71},[65,704,372],{"class":313},[65,706,387],{"class":71},[208,708,710],{"id":709},"run-the-project-using-the-following-command","Run the project using the following command",[56,712,714],{"className":214,"code":713,"language":216,"meta":24,"style":24},"ng s -o\n",[62,715,716],{"__ignoreMap":24},[65,717,718,721,724],{"class":67,"line":68},[65,719,720],{"class":75},"ng",[65,722,723],{"class":226}," s",[65,725,726],{"class":226}," -o\n",[11,728,729],{},"If you're seeing the following output that means you have successfully integrated tailwind inside your angular project.",[11,731,732],{},[733,734],"img",{"alt":24,"src":735},"\u002Fimg\u002Fchrome_2020-08-08_21-46-44_ul4727.png",[11,737,738,741],{},[261,739,740],{},"Note:"," This is not the best approach, in the coming articles of this series we'll see how we can use the tailwind css npm module and integrate it inside the Angular project.",[743,744,745],"style",{},"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 .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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 .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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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}",{"title":24,"searchDepth":82,"depth":82,"links":747},[748,749],{"id":36,"depth":82,"text":37},{"id":205,"depth":82,"text":206,"children":750},[751,752,753,754,756,758],{"id":210,"depth":99,"text":211},{"id":236,"depth":99,"text":237},{"id":270,"depth":99,"text":271},{"id":291,"depth":99,"text":755},"Go to src\u002Findex.html",{"id":353,"depth":99,"text":757},"Add the following markup inside src\u002Fapp\u002Fapp.component.html",{"id":709,"depth":99,"text":710},"2020-08-07","In this article, we will take a look at how we can use TailwindCSS with Angular 10 using the TailwindCSS CDN","md","\u002Fimg\u002Fyoutube-template_tc0bhb.jpg",{},true,"\u002Fblog\u002Fgetting-started-with-angular-10-and-tailwindcss-using-cdn-part-1",{"title":5,"description":760},"blog\u002Fgetting-started-with-angular-10-and-tailwindcss-using-cdn-part-1",[769],"Web Development","qdcD3t5vBuz6kYag63JKnmq8WdciyUYAq_yd-FjeiKY",[772,777],{"title":773,"path":774,"stem":775,"description":776,"children":-1},"Four Different Ways to Write Functions in Javascript","\u002Fblog\u002Ffour-different-ways-to-write-functions-in-javascript","blog\u002Ffour-different-ways-to-write-functions-in-javascript","In this article we will take a look at Four Different Ways to Write Functions in Javascript",{"title":778,"path":779,"stem":780,"description":781,"children":-1},"How I Built a Personal Knowledge Wiki with Claude Code","\u002Fblog\u002Fhow-i-built-a-personal-knowledge-wiki-with-claude-code","blog\u002Fhow-i-built-a-personal-knowledge-wiki-with-claude-code","How I turned 14,000+ scattered files — YouTube transcripts, 13 years of RSS feeds, Google Takeout data, Notion exports — into a 50-page cross-referenced knowledge wiki using Claude Code and flat markdown files.",1775568346811]