e2hang/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
website/blog-static-build/.next/server/app/blog/introducing-tailwind-nextjs-starter-blog.html
e2hang 725fa183db New Website
2026-01-18 20:39:34 +08:00

26 lines
138 KiB
HTML
Raw Permalink Blame History

<!DOCTYPE html><html lang="en-us" class="__variable_dd5b2f scroll-smooth"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/media/36966cca54120369-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" as="image" href="https://vercel.com/button"/><link rel="stylesheet" href="/_next/static/css/51ff4ab09cd9a322.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/ec75326fdf363785.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/7abc17aba6a0edf4.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-af24fb31267d6e11.js"/><script src="/_next/static/chunks/4bd1b696-5100ffb4d6775e5e.js" async=""></script><script src="/_next/static/chunks/684-c6a4ac930a941d3c.js" async=""></script><script src="/_next/static/chunks/main-app-8e08feffda26a933.js" async=""></script><script src="/_next/static/chunks/c16f53c3-5b47b7f1ae12d8f6.js" async=""></script><script src="/_next/static/chunks/874-7cca39d2e0ddd8b8.js" async=""></script><script src="/_next/static/chunks/430-f83175351bcd3192.js" async=""></script><script src="/_next/static/chunks/app/layout-6cdc32e6ffe9019a.js" async=""></script><script src="/_next/static/chunks/63-ef4ffe428c84fbc3.js" async=""></script><script src="/_next/static/chunks/app/blog/%5B...slug%5D/page-55fdf120c49a8b1e.js" async=""></script><link rel="preload" href="https://analytics.umami.is/script.js" as="script"/><meta name="next-size-adjust" content=""/><link rel="apple-touch-icon" sizes="76x76" href="/static/favicons/apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="32x32" href="/static/favicons/favicon-32x32.png"/><link rel="icon" type="image/png" sizes="16x16" href="/static/favicons/favicon-16x16.png"/><link rel="manifest" href="/static/favicons/site.webmanifest"/><link rel="mask-icon" href="/static/favicons/safari-pinned-tab.svg" color="#5bbad5"/><meta name="msapplication-TileColor" content="#000000"/><meta name="theme-color" media="(prefers-color-scheme: light)" content="#fff"/><meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000"/><link rel="alternate" type="application/rss+xml" href="/feed.xml"/><title>Introducing Tailwind Nextjs Starter Blog | Next.js Starter Blog</title><meta name="description" content="Looking for a performant, out of the box template, with all the best in web technology to support your blogging needs? Checkout the Tailwind Nextjs Starter Blog template."/><meta name="robots" content="index, follow"/><meta name="googlebot" content="index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"/><link rel="canonical" href="https://tailwind-nextjs-starter-blog.vercel.app/blog/introducing-tailwind-nextjs-starter-blog"/><link rel="alternate" type="application/rss+xml" href="https://tailwind-nextjs-starter-blog.vercel.app/feed.xml"/><meta property="og:title" content="Introducing Tailwind Nextjs Starter Blog"/><meta property="og:description" content="Looking for a performant, out of the box template, with all the best in web technology to support your blogging needs? Checkout the Tailwind Nextjs Starter Blog template."/><meta property="og:url" content="https://tailwind-nextjs-starter-blog.vercel.app/blog/introducing-tailwind-nextjs-starter-blog"/><meta property="og:site_name" content="Next.js Starter Blog"/><meta property="og:locale" content="en_US"/><meta property="og:image" content="https://tailwind-nextjs-starter-blog.vercel.app/static/images/canada/mountains.jpg"/><meta property="og:image" content="https://tailwind-nextjs-starter-blog.vercel.app/static/images/canada/toronto.jpg"/><meta property="og:type" content="article"/><meta property="article:published_time" content="2021-01-12T00:00:00.000Z"/><meta property="article:modified_time" content="2024-08-16T00:00:00.000Z"/><meta property="article:author" content="Tails Azimuth"/><meta property="article:author" content="Sparrow Hawk"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:title" content="Introducing Tailwind Nextjs Starter Blog"/><meta name="twitter:description" content="Looking for a performant, out of the box template, with all the best in web technology to support your blogging needs? Checkout the Tailwind Nextjs Starter Blog template."/><meta name="twitter:image" content="https://tailwind-nextjs-starter-blog.vercel.app/static/images/canada/mountains.jpg"/><meta name="twitter:image" content="https://tailwind-nextjs-starter-blog.vercel.app/static/images/canada/toronto.jpg"/><script src="/_next/static/chunks/polyfills-42372ed130431b0a.js" noModule=""></script></head><body class="bg-white pl-[calc(100vw-100%)] text-black antialiased dark:bg-gray-950 dark:text-white"><script>((e,t,r,n,o,i,a,l)=>{let u=document.documentElement,s=["light","dark"];function c(t){var r;(Array.isArray(e)?e:[e]).forEach(e=>{let r="class"===e,n=r&&i?o.map(e=>i[e]||e):o;r?(u.classList.remove(...n),u.classList.add(i&&i[t]?i[t]:t)):u.setAttribute(e,t)}),r=t,l&&s.includes(r)&&(u.style.colorScheme=r)}if(n)c(n);else try{let e=localStorage.getItem(t)||r,n=a&&"system"===e?window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":e;c(n)}catch(e){}})("class","theme","system",null,["light","dark"],null,true,true)</script><section class="mx-auto max-w-3xl px-4 sm:px-6 xl:max-w-5xl xl:px-0"><header class="flex items-center w-full bg-white dark:bg-gray-950 justify-between py-10"><a class="break-words" aria-label="TailwindBlog" href="/"><div class="flex items-center justify-between"><div class="mr-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="53.87" height="43.61" viewBox="344.564 330.278 111.737 91.218"><defs><linearGradient id="logo_svg__b" x1="420.97" x2="420.97" y1="331.28" y2="418.5" gradientUnits="userSpaceOnUse"><stop offset="0%" style="stop-color:#06b6d4;stop-opacity:1"></stop><stop offset="100%" style="stop-color:#67e8f9;stop-opacity:1"></stop></linearGradient><linearGradient id="logo_svg__d" x1="377.89" x2="377.89" y1="331.28" y2="418.5" gradientUnits="userSpaceOnUse"><stop offset="0%" style="stop-color:#06b6d4;stop-opacity:1"></stop><stop offset="100%" style="stop-color:#67e8f9;stop-opacity:1"></stop></linearGradient><path id="logo_svg__a" d="M453.3 331.28v28.57l-64.66 58.65v-30.08z"></path><path id="logo_svg__c" d="M410.23 331.28v28.57l-64.67 58.65v-30.08z"></path></defs><use xlink:href="#logo_svg__a" fill="url(#logo_svg__b)"></use><use xlink:href="#logo_svg__c" fill="url(#logo_svg__d)"></use></svg></div><div class="hidden h-6 text-2xl font-semibold sm:block">TailwindBlog</div></div></a><div class="flex items-center space-x-4 leading-5 sm:-mr-6 sm:space-x-6"><div class="no-scrollbar hidden max-w-40 items-center gap-x-4 overflow-x-auto sm:flex md:max-w-72 lg:max-w-96"><a class="hover:text-primary-500 dark:hover:text-primary-400 m-1 font-medium text-gray-900 dark:text-gray-100" href="/blog">Blog</a><a class="hover:text-primary-500 dark:hover:text-primary-400 m-1 font-medium text-gray-900 dark:text-gray-100" href="/tags">Tags</a><a class="hover:text-primary-500 dark:hover:text-primary-400 m-1 font-medium text-gray-900 dark:text-gray-100" href="/projects">Projects</a><a class="hover:text-primary-500 dark:hover:text-primary-400 m-1 font-medium text-gray-900 dark:text-gray-100" href="/about">About</a></div><button aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="hover:text-primary-500 dark:hover:text-primary-400 h-6 w-6 text-gray-900 dark:text-gray-100"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"></path></svg></button><div class="flex items-center"><div class="relative inline-block text-left" data-headlessui-state=""><div class="hover:text-primary-500 dark:hover:text-primary-400 flex items-center justify-center"><button aria-label="Theme switcher" id="headlessui-menu-button-«Rtpkqlb»" type="button" aria-haspopup="menu" aria-expanded="false" data-headlessui-state=""><svg class="h-6 w-6"></svg></button></div></div></div><button aria-label="Toggle Menu" class="sm:hidden"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="hover:text-primary-500 dark:hover:text-primary-400 h-8 w-8 text-gray-900 dark:text-gray-100"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg></button><span hidden="" style="position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;display:none"></span></div></header><main class="mb-auto"><script type="application/ld+json">{"@context":"https://schema.org","@type":"BlogPosting","headline":"Introducing Tailwind Nextjs Starter Blog","datePublished":"2021-01-12T00:00:00.000Z","dateModified":"2024-08-16T00:00:00.000Z","description":"Looking for a performant, out of the box template, with all the best in web technology to support your blogging needs? Checkout the Tailwind Nextjs Starter Blog template.","image":"/static/images/canada/mountains.jpg","url":"https://tailwind-nextjs-starter-blog.vercel.app/blog/introducing-tailwind-nextjs-starter-blog","author":[{"@type":"Person","name":"Tails Azimuth"},{"@type":"Person","name":"Sparrow Hawk"}]}</script><section class="mx-auto max-w-3xl px-4 sm:px-6 xl:max-w-5xl xl:px-0"><div class="fixed right-8 bottom-8 hidden flex-col gap-3 md:hidden"><button aria-label="Scroll To Comment" class="rounded-full bg-gray-200 p-2 text-gray-500 transition-all hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-400 dark:hover:bg-gray-600"><svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z" clip-rule="evenodd"></path></svg></button><button aria-label="Scroll To Top" class="rounded-full bg-gray-200 p-2 text-gray-500 transition-all hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-400 dark:hover:bg-gray-600"><svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg></button></div><article><div class="xl:divide-y xl:divide-gray-200 xl:dark:divide-gray-700"><header class="pt-6 xl:pb-6"><div class="space-y-1 text-center"><dl class="space-y-10"><div><dt class="sr-only">Published on</dt><dd class="text-base leading-6 font-medium text-gray-500 dark:text-gray-400"><time dateTime="2021-01-12T00:00:00.000Z">Tuesday, January 12, 2021</time></dd></div></dl><div><h1 class="text-3xl leading-9 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10 md:text-5xl md:leading-14 dark:text-gray-100">Introducing Tailwind Nextjs Starter Blog</h1></div></div></header><div class="grid-rows-[auto_1fr] divide-y divide-gray-200 pb-8 xl:grid xl:grid-cols-4 xl:gap-x-6 xl:divide-y-0 dark:divide-gray-700"><dl class="pt-6 pb-10 xl:border-b xl:border-gray-200 xl:pt-11 xl:dark:border-gray-700"><dt class="sr-only">Authors</dt><dd><ul class="flex flex-wrap justify-center gap-4 sm:space-x-12 xl:block xl:space-y-8 xl:space-x-0"><li class="flex items-center space-x-2"><img alt="avatar" loading="lazy" width="38" height="38" decoding="async" data-nimg="1" class="h-10 w-10 rounded-full" style="color:transparent" srcSet="/_next/image?url=%2Fstatic%2Fimages%2Favatar.png&amp;w=48&amp;q=75 1x, /_next/image?url=%2Fstatic%2Fimages%2Favatar.png&amp;w=96&amp;q=75 2x" src="/_next/image?url=%2Fstatic%2Fimages%2Favatar.png&amp;w=96&amp;q=75"/><dl class="text-sm leading-5 font-medium whitespace-nowrap"><dt class="sr-only">Name</dt><dd class="text-gray-900 dark:text-gray-100">Tails Azimuth</dd><dt class="sr-only">Twitter</dt><dd><a class="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400" target="_blank" rel="noopener noreferrer" href="https://twitter.com/Twitter">@Twitter</a></dd></dl></li><li class="flex items-center space-x-2"><img alt="avatar" loading="lazy" width="38" height="38" decoding="async" data-nimg="1" class="h-10 w-10 rounded-full" style="color:transparent" srcSet="/_next/image?url=%2Fstatic%2Fimages%2Fsparrowhawk-avatar.jpg&amp;w=48&amp;q=75 1x, /_next/image?url=%2Fstatic%2Fimages%2Fsparrowhawk-avatar.jpg&amp;w=96&amp;q=75 2x" src="/_next/image?url=%2Fstatic%2Fimages%2Fsparrowhawk-avatar.jpg&amp;w=96&amp;q=75"/><dl class="text-sm leading-5 font-medium whitespace-nowrap"><dt class="sr-only">Name</dt><dd class="text-gray-900 dark:text-gray-100">Sparrow Hawk</dd><dt class="sr-only">Twitter</dt><dd><a class="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400" target="_blank" rel="noopener noreferrer" href="https://twitter.com/sparrowhawk">@sparrowhawk</a></dd></dl></li></ul></dd></dl><div class="divide-y divide-gray-200 xl:col-span-3 xl:row-span-2 xl:pb-0 dark:divide-gray-700"><div class="prose dark:prose-invert max-w-none pt-10 pb-8"><div><img alt="tailwind-nextjs-banner" loading="lazy" width="1200" height="600" decoding="async" data-nimg="1" style="color:transparent" srcSet="/_next/image?url=%2Fstatic%2Fimages%2Ftwitter-card.png&amp;w=1200&amp;q=75 1x, /_next/image?url=%2Fstatic%2Fimages%2Ftwitter-card.png&amp;w=3840&amp;q=75 2x" src="/_next/image?url=%2Fstatic%2Fimages%2Ftwitter-card.png&amp;w=3840&amp;q=75"/></div><h1 class="content-header" id="tailwind-nextjs-starter-blog"><a class="break-words" href="#tailwind-nextjs-starter-blog" aria-hidden="true" tabindex="-1"><span class="content-header-link"><svg viewBox="0 0 20 20" class="h-5 linkicon w-5" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"></path><path d="M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"></path></svg></span></a>Tailwind Nextjs Starter Blog</h1><p><a class="break-words" target="_blank" rel="noopener noreferrer" href="https://vercel.com/new/git/external?repository-url=https://github.com/timlrx/tailwind-nextjs-starter-blog"><img alt="Deploy with Vercel" src="https://vercel.com/button"/></a></p><div class="markdown-alert markdown-alert-caution" dir="auto"><p class="markdown-alert-title" dir="auto"><svg viewBox="0 0 16 16" aria-hidden="true" class="octicon" height="16" width="16"><path d="M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg>CAUTION</p><p>This is the README of version 1 of the template. It is kept for historical reasons, but is no longer supported. It also serves as a nice example of <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts">Github Alert</a>. For the actual documentation, please refer to the <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://github.com/timlrx/tailwind-nextjs-starter-blog">Github repository</a>.</p></div><p>This is a <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://nextjs.org/">Next.js</a>, <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://tailwindcss.com/">Tailwind CSS</a> blogging starter template. Probably the most feature-rich Next.js markdown blogging template out there. Comes out of the box configured with the latest technologies to make technical writing a breeze. Easily configurable and customizable. Perfect as a replacement to existing Jekyll and Hugo individual blogs.</p><p>Check out the documentation below to get started.</p><p>Facing issues? Check the <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://github.com/timlrx/tailwind-nextjs-starter-blog/wiki">FAQ page</a> and do a search on past issues. Feel free to open a new issue if none has been posted previously.</p><p>Feature request? Check the past discussions to see if it has been brought up previously. Otherwise, feel free to start a new discussion thread. All ideas are welcomed!</p><h2 class="content-header" id="examples"><a class="break-words" href="#examples" aria-hidden="true" tabindex="-1"><span class="content-header-link"><svg viewBox="0 0 20 20" class="h-5 linkicon w-5" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"></path><path d="M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"></path></svg></span></a>Examples</h2><ul><li><a class="break-words" target="_blank" rel="noopener noreferrer" href="https://tailwind-nextjs-starter-blog.vercel.app/">Demo Blog</a> - this repo</li><li><a class="break-words" target="_blank" rel="noopener noreferrer" href="https://www.timlrx.com">My personal blog</a> - modified to auto-generate blog posts with dates</li><li><a class="break-words" target="_blank" rel="noopener noreferrer" href="https://tambouille.vercel.app/">Aloisdg&#x27;s cookbook</a> - with pictures and recipes!</li><li><a class="break-words" target="_blank" rel="noopener noreferrer" href="https://tailwind-nextjs-starter-blog-seven.vercel.app/">GautierArcin&#x27;s demo with next translate</a> - includes translation of mdx posts, <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://github.com/GautierArcin/tailwind-nextjs-starter-blog/tree/demo/next-translate">source code</a></li><li><a class="break-words" target="_blank" rel="noopener noreferrer" href="https://davidlevai.com/">David Levai&#x27;s digital garden</a> - customized design and added email subscriptions</li><li><a class="break-words" target="_blank" rel="noopener noreferrer" href="https://thinhcorner.com/">Thinh&#x27;s Corner</a> - <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://github.com/Th1nhNg0/th1nhng0.vercel.app/blob/5e73a420828d82f01e7147512a2c3273c4ec19f8/layouts/PostLayout.js">customized layout</a> with sticky side table of contents</li></ul><p>Using the template? Feel free to create a PR and add your blog to this list.</p><h2 class="content-header" id="motivation"><a class="break-words" href="#motivation" aria-hidden="true" tabindex="-1"><span class="content-header-link"><svg viewBox="0 0 20 20" class="h-5 linkicon w-5" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"></path><path d="M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"></path></svg></span></a>Motivation</h2><p>I wanted to port my existing blog to Nextjs and Tailwind CSS but there was no easy out of the box template to use so I decided to create one. Design is adapted from <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://github.com/tailwindlabs/blog.tailwindcss.com">Tailwindlabs blog</a>.</p><p>I wanted it to be nearly as feature-rich as popular blogging templates like <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://github.com/daattali/beautiful-jekyll">beautiful-jekyll</a> and <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://github.com/wowchemy/wowchemy-hugo-modules">Hugo Academic</a> but with the best of React&#x27;s ecosystem and current web development&#x27;s best practices.</p><h2 class="content-header" id="features"><a class="break-words" href="#features" aria-hidden="true" tabindex="-1"><span class="content-header-link"><svg viewBox="0 0 20 20" class="h-5 linkicon w-5" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"></path><path d="M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"></path></svg></span></a>Features</h2><ul><li>Easy styling customization with <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://tailwindcss.com/blog/tailwindcss-v3">Tailwind 3.0</a> and primary color attribute</li><li>Near perfect lighthouse score - <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://www.webpagetest.org/result/210111_DiC1_08f3670c3430bf4a9b76fc3b927716c5/">Lighthouse report</a></li><li>Lightweight, 45kB first load JS, uses Preact in production build</li><li>Mobile-friendly view</li><li>Light and dark theme</li><li>Self-hosted font with <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://fontsource.org/">Fontsource</a></li><li>Supports <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://plausible.io/">plausible</a>, <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://simpleanalytics.com/">simple analytics</a> and google analytics</li><li><a class="break-words" target="_blank" rel="noopener noreferrer" href="https://mdxjs.com/">MDX - write JSX in markdown documents!</a></li><li>Server-side syntax highlighting with line numbers and line highlighting via <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://github.com/timlrx/rehype-prism-plus">rehype-prism-plus</a></li><li>Math display supported via <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://katex.org/">KaTeX</a></li><li>Citation and bibliography support via <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://github.com/timlrx/rehype-citation">rehype-citation</a></li><li>Automatic image optimization via <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://nextjs.org/docs/basic-features/image-optimization">next/image</a></li><li>Flexible data retrieval with <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://github.com/kentcdodds/mdx-bundler">mdx-bundler</a></li><li>Support for tags - each unique tag will be its own page</li><li>Support for multiple authors</li><li>Blog templates</li><li>TOC component</li><li>Support for nested routing of blog posts</li><li>Newsletter component with support for Mailchimp, Buttondown, Convertkit, Klaviyo, Revue, Emailoctopus and Beehiiv</li><li>Supports <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://github.com/laymonage/giscus">giscus</a>, <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://github.com/utterance/utterances">utterances</a> or disqus</li><li>Projects page</li><li>Preconfigured security headers</li><li>SEO friendly with RSS feed, sitemaps and more!</li></ul><h2 class="content-header" id="sample-posts"><a class="break-words" href="#sample-posts" aria-hidden="true" tabindex="-1"><span class="content-header-link"><svg viewBox="0 0 20 20" class="h-5 linkicon w-5" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"></path><path d="M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"></path></svg></span></a>Sample posts</h2><ul><li><a class="break-words" target="_blank" rel="noopener noreferrer" href="https://tailwind-nextjs-starter-blog.vercel.app/blog/github-markdown-guide">A markdown guide</a></li><li><a class="break-words" target="_blank" rel="noopener noreferrer" href="https://tailwind-nextjs-starter-blog.vercel.app/blog/guide-to-using-images-in-nextjs">Learn more about images in Next.js</a></li><li><a class="break-words" target="_blank" rel="noopener noreferrer" href="https://tailwind-nextjs-starter-blog.vercel.app/blog/deriving-ols-estimator">A tour of math typesetting</a></li><li><a class="break-words" target="_blank" rel="noopener noreferrer" href="https://tailwind-nextjs-starter-blog.vercel.app/blog/pictures-of-canada">Simple MDX image grid</a></li><li><a class="break-words" target="_blank" rel="noopener noreferrer" href="https://tailwind-nextjs-starter-blog.vercel.app/blog/the-time-machine">Example of long prose</a></li><li><a class="break-words" target="_blank" rel="noopener noreferrer" href="https://tailwind-nextjs-starter-blog.vercel.app/blog/nested-route/introducing-multi-part-posts-with-nested-routing">Example of Nested Route Post</a></li></ul><h2 class="content-header" id="quick-start-guide"><a class="break-words" href="#quick-start-guide" aria-hidden="true" tabindex="-1"><span class="content-header-link"><svg viewBox="0 0 20 20" class="h-5 linkicon w-5" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"></path><path d="M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"></path></svg></span></a>Quick Start Guide</h2><ol><li>JS (official support) - <code>npx degit https://github.com/timlrx/tailwind-nextjs-starter-blog.git</code> or TS (community support) - <code>npx degit timlrx/tailwind-nextjs-starter-blog#typescript</code></li><li>Personalize <code>siteMetadata.js</code> (site related information)</li><li>Modify the content security policy in <code>next.config.js</code> if you want to use any analytics provider or a commenting solution other than giscus.</li><li>Personalize <code>authors/default.md</code> (main author)</li><li>Modify <code>projectsData.ts</code></li><li>Modify <code>headerNavLinks.ts</code> to customize navigation links</li><li>Add blog posts</li><li>Deploy on Vercel</li></ol><h2 class="content-header" id="development"><a class="break-words" href="#development" aria-hidden="true" tabindex="-1"><span class="content-header-link"><svg viewBox="0 0 20 20" class="h-5 linkicon w-5" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"></path><path d="M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"></path></svg></span></a>Development</h2><p>First, run the development server:</p><div class="relative"><pre><code class="code-highlight language-bash"><span class="code-line"><span class="token function">npm</span> start
</span><span class="code-line"><span class="token comment"># or</span>
</span><span class="code-line"><span class="token function">npm</span> run dev
</span></code></pre></div><p>Open <a class="break-words" target="_blank" rel="noopener noreferrer" href="http://localhost:3000">http://localhost:3000</a> with your browser to see the result.</p><p>You can start editing the page by modifying <code>pages/index.js</code>. The page auto-updates as you edit the file.</p><h2 class="content-header" id="extend--customize"><a class="break-words" href="#extend--customize" aria-hidden="true" tabindex="-1"><span class="content-header-link"><svg viewBox="0 0 20 20" class="h-5 linkicon w-5" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"></path><path d="M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"></path></svg></span></a>Extend / Customize</h2><p><code>data/siteMetadata.js</code> - contains most of the site related information which should be modified for a user&#x27;s need.</p><p><code>data/authors/default.md</code> - default author information (required). Additional authors can be added as files in <code>data/authors</code>.</p><p><code>data/projectsData.js</code> - data used to generate styled card on the projects page.</p><p><code>data/headerNavLinks.js</code> - navigation links.</p><p><code>data/logo.svg</code> - replace with your own logo.</p><p><code>data/blog</code> - replace with your own blog posts.</p><p><code>public/static</code> - store assets such as images and favicons.</p><p><code>tailwind.config.js</code> and <code>css/tailwind.css</code> - contain the tailwind stylesheet which can be modified to change the overall look and feel of the site.</p><p><code>css/prism.css</code> - controls the styles associated with the code blocks. Feel free to customize it and use your preferred prismjs theme e.g. <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://github.com/PrismJS/prism-themes">prism themes</a>.</p><p><code>components/social-icons</code> - to add other icons, simply copy an svg file from <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://simpleicons.org/">Simple Icons</a> and map them in <code>index.js</code>. Other icons use <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://heroicons.com/">heroicons</a>.</p><p><code>components/MDXComponents.js</code> - pass your own JSX code or React component by specifying it over here. You can then call them directly in the <code>.mdx</code> or <code>.md</code> file. By default, a custom link and image component is passed.</p><p><code>layouts</code> - main templates used in pages.</p><p><code>pages</code> - pages to route to. Read the <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://nextjs.org/docs">Next.js documentation</a> for more information.</p><p><code>next.config.js</code> - configuration related to Next.js. You need to adapt the Content Security Policy if you want to load scripts, images etc. from other domains.</p><h2 class="content-header" id="post"><a class="break-words" href="#post" aria-hidden="true" tabindex="-1"><span class="content-header-link"><svg viewBox="0 0 20 20" class="h-5 linkicon w-5" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"></path><path d="M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"></path></svg></span></a>Post</h2><h3 class="content-header" id="frontmatter"><a class="break-words" href="#frontmatter" aria-hidden="true" tabindex="-1"><span class="content-header-link"><svg viewBox="0 0 20 20" class="h-5 linkicon w-5" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"></path><path d="M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"></path></svg></span></a>Frontmatter</h3><p>Frontmatter follows <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://gohugo.io/content-management/front-matter/">Hugo&#x27;s standards</a>.</p><p>Currently 10 fields are supported.</p><div class="relative"><pre><code class="language-js code-highlight"><span class="code-line"><span class="token function">title</span> <span class="token punctuation">(</span>required<span class="token punctuation">)</span>
</span><span class="code-line"><span class="token function">date</span> <span class="token punctuation">(</span>required<span class="token punctuation">)</span>
</span><span class="code-line"><span class="token function">tags</span> <span class="token punctuation">(</span>required<span class="token punctuation">,</span> can be empty array<span class="token punctuation">)</span>
</span><span class="code-line"><span class="token function">lastmod</span> <span class="token punctuation">(</span>optional<span class="token punctuation">)</span>
</span><span class="code-line"><span class="token function">draft</span> <span class="token punctuation">(</span>optional<span class="token punctuation">)</span>
</span><span class="code-line"><span class="token function">summary</span> <span class="token punctuation">(</span>optional<span class="token punctuation">)</span>
</span><span class="code-line"><span class="token function">images</span> <span class="token punctuation">(</span>optional<span class="token punctuation">,</span> <span class="token keyword control-flow">if</span> none provided defaults to socialBanner <span class="token keyword">in</span> siteMetadata config<span class="token punctuation">)</span>
</span><span class="code-line"><span class="token function">authors</span> <span class="token punctuation">(</span>optional list which should correspond to the file names <span class="token keyword">in</span> <span class="token template-string"><span class="token string template-punctuation">`</span><span class="token string">data/authors</span><span class="token string template-punctuation">`</span></span><span class="token punctuation">.</span> <span class="token property-access"><span class="token maybe-class-name">Uses</span></span> <span class="token template-string"><span class="token string template-punctuation">`</span><span class="token string">default</span><span class="token string template-punctuation">`</span></span> <span class="token keyword control-flow">if</span> none is specified<span class="token punctuation">)</span>
</span><span class="code-line"><span class="token function">layout</span> <span class="token punctuation">(</span>optional list which should correspond to the file names <span class="token keyword">in</span> <span class="token template-string"><span class="token string template-punctuation">`</span><span class="token string">data/layouts</span><span class="token string template-punctuation">`</span></span><span class="token punctuation">)</span>
</span><span class="code-line"><span class="token function">canonicalUrl</span> <span class="token punctuation">(</span>optional<span class="token punctuation">,</span> canonical url <span class="token keyword control-flow">for</span> the post <span class="token keyword control-flow">for</span> <span class="token constant">SEO</span><span class="token punctuation">)</span>
</span></code></pre></div><p>Here&#x27;s an example of a post&#x27;s frontmatter:</p><div class="relative"><pre><code class="language-js code-highlight"><span class="code-line"><span class="token operator">--</span><span class="token operator">-</span>
</span><span class="code-line"><span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#x27;Introducing Tailwind Nexjs Starter Blog&#x27;</span>
</span><span class="code-line"><span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#x27;2021-01-12&#x27;</span>
</span><span class="code-line"><span class="token literal-property property">lastmod</span><span class="token operator">:</span> <span class="token string">&#x27;2021-01-18&#x27;</span>
</span><span class="code-line"><span class="token literal-property property">tags</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&#x27;next-js&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;tailwind&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;guide&#x27;</span><span class="token punctuation">]</span>
</span><span class="code-line"><span class="token literal-property property">draft</span><span class="token operator">:</span> <span class="token boolean">false</span>
</span><span class="code-line"><span class="token literal-property property">summary</span><span class="token operator">:</span> <span class="token string">&#x27;Looking for a performant, out of the box template, with all the best in web technology to support your blogging needs? Checkout the Tailwind Nextjs Starter Blog template.&#x27;</span>
</span><span class="code-line"><span class="token literal-property property">images</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&#x27;/static/images/canada/mountains.jpg&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;/static/images/canada/toronto.jpg&#x27;</span><span class="token punctuation">]</span>
</span><span class="code-line"><span class="token literal-property property">authors</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&#x27;default&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;sparrowhawk&#x27;</span><span class="token punctuation">]</span>
</span><span class="code-line"><span class="token literal-property property">layout</span><span class="token operator">:</span> <span class="token maybe-class-name">PostLayout</span>
</span><span class="code-line"><span class="token literal-property property">canonicalUrl</span><span class="token operator">:</span> https<span class="token operator">:</span><span class="token operator">/</span><span class="token operator">/</span>tailwind<span class="token operator">-</span>nextjs<span class="token operator">-</span>starter<span class="token operator">-</span>blog<span class="token punctuation">.</span><span class="token property-access">vercel</span><span class="token punctuation">.</span><span class="token property-access">app</span><span class="token operator">/</span>blog<span class="token operator">/</span>introducing<span class="token operator">-</span>tailwind<span class="token operator">-</span>nextjs<span class="token operator">-</span>starter<span class="token operator">-</span>blog
</span><span class="code-line"><span class="token operator">--</span><span class="token operator">-</span>
</span></code></pre></div><h3 class="content-header" id="compose"><a class="break-words" href="#compose" aria-hidden="true" tabindex="-1"><span class="content-header-link"><svg viewBox="0 0 20 20" class="h-5 linkicon w-5" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"></path><path d="M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"></path></svg></span></a>Compose</h3><p>Run <code>node ./scripts/compose.js</code> to bootstrap a new post.</p><p>Follow the interactive prompt to generate a post with pre-filled front matter.</p><h2 class="content-header" id="deploy"><a class="break-words" href="#deploy" aria-hidden="true" tabindex="-1"><span class="content-header-link"><svg viewBox="0 0 20 20" class="h-5 linkicon w-5" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"></path><path d="M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"></path></svg></span></a>Deploy</h2><p><strong>Vercel</strong><br/>The easiest way to deploy the template is to use the <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://vercel.com">Vercel Platform</a> from the creators of Next.js. Check out the <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://nextjs.org/docs/deployment">Next.js deployment documentation</a> for more details.</p><p><strong>Netlify / GitHub Pages / Firebase etc.</strong><br/>As the template uses <code>next/image</code> for image optimization, additional configurations have to be made to deploy on other popular static hosting websites like <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://www.netlify.com/">Netlify</a> or <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://pages.github.com/">GitHub Pages</a>. An alternative image optimization provider such as Imgix, Cloudinary or Akamai has to be used. Alternatively, replace the <code>next/image</code> component with a standard <code>&lt;img&gt;</code> tag. See <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://nextjs.org/docs/basic-features/image-optimization"><code>next/image</code> documentation</a> for more details.</p><p>The API routes used in the newsletter component cannot be used in a static site export. You will need to use a form API endpoint provider and substitute the route in the newsletter component accordingly. Other hosting platforms such as Netlify also offer alternative solutions - please refer to their docs for more information.</p><h2 class="content-header" id="support"><a class="break-words" href="#support" aria-hidden="true" tabindex="-1"><span class="content-header-link"><svg viewBox="0 0 20 20" class="h-5 linkicon w-5" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"></path><path d="M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"></path></svg></span></a>Support</h2><p>Using the template? Support this effort by giving a star on GitHub, sharing your own blog and giving a shoutout on Twitter or be a project <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://github.com/sponsors/timlrx">sponsor</a>.</p><h2 class="content-header" id="licence"><a class="break-words" href="#licence" aria-hidden="true" tabindex="-1"><span class="content-header-link"><svg viewBox="0 0 20 20" class="h-5 linkicon w-5" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"></path><path d="M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"></path></svg></span></a>Licence</h2><p><a class="break-words" target="_blank" rel="noopener noreferrer" href="https://github.com/timlrx/tailwind-nextjs-starter-blog/blob/main/LICENSE">MIT</a> © <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://www.timrlx.com">Timothy Lin</a></p></div><div class="pt-6 pb-6 text-sm text-gray-700 dark:text-gray-300"><a class="break-words" target="_blank" rel="nofollow" href="https://mobile.twitter.com/search?q=https%3A%2F%2Ftailwind-nextjs-starter-blog.vercel.app%2Fblog%2Fintroducing-tailwind-nextjs-starter-blog">Discuss on Twitter</a> • <a class="break-words" target="_blank" rel="noopener noreferrer" href="https://github.com/timlrx/tailwind-nextjs-starter-blog/blob/main/data/blog/introducing-tailwind-nextjs-starter-blog.mdx">View on GitHub</a></div><div class="pt-6 pb-6 text-center text-gray-700 dark:text-gray-300" id="comment"><button>Load Comments</button></div></div><footer><div class="divide-gray-200 text-sm leading-5 font-medium xl:col-start-1 xl:row-start-2 xl:divide-y dark:divide-gray-700"><div class="py-4 xl:py-8"><h2 class="text-xs tracking-wide text-gray-500 uppercase dark:text-gray-400">Tags</h2><div class="flex flex-wrap"><a class="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400 mr-3 text-sm font-medium uppercase" href="/tags/next-js">next-js</a><a class="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400 mr-3 text-sm font-medium uppercase" href="/tags/tailwind">tailwind</a><a class="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400 mr-3 text-sm font-medium uppercase" href="/tags/guide">guide</a></div></div><div class="flex justify-between py-4 xl:block xl:space-y-8 xl:py-8"><div><h2 class="text-xs tracking-wide text-gray-500 uppercase dark:text-gray-400">Previous Article</h2><div class="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"><a class="break-words" href="/blog/deriving-ols-estimator">Deriving the OLS Estimator</a></div></div><div><h2 class="text-xs tracking-wide text-gray-500 uppercase dark:text-gray-400">Next Article</h2><div class="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"><a class="break-words" href="/blog/nested-route/introducing-multi-part-posts-with-nested-routing">Introducing Multi-part Posts with Nested Routing</a></div></div></div></div><div class="pt-4 xl:pt-8"><a class="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400" aria-label="Back to the blog" href="/blog">← Back to the blog</a></div></footer></div></div></article></section></main><footer><div class="mt-16 flex flex-col items-center"><div class="mb-3 flex space-x-4"><a class="text-sm text-gray-500 transition hover:text-gray-600" target="_blank" rel="noopener noreferrer" href="mailto:address@yoursite.com"><span class="sr-only">mail</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="hover:text-primary-500 dark:hover:text-primary-400 fill-current text-gray-700 dark:text-gray-200 h-6 w-6"><title>Mail</title><path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path><path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path></svg></a><a class="text-sm text-gray-500 transition hover:text-gray-600" target="_blank" rel="noopener noreferrer" href="https://github.com"><span class="sr-only">github</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="hover:text-primary-500 dark:hover:text-primary-400 fill-current text-gray-700 dark:text-gray-200 h-6 w-6"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></a><a class="text-sm text-gray-500 transition hover:text-gray-600" target="_blank" rel="noopener noreferrer" href="https://facebook.com"><span class="sr-only">facebook</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="hover:text-primary-500 dark:hover:text-primary-400 fill-current text-gray-700 dark:text-gray-200 h-6 w-6"><title>Facebook</title><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"></path></svg></a><a class="text-sm text-gray-500 transition hover:text-gray-600" target="_blank" rel="noopener noreferrer" href="https://youtube.com"><span class="sr-only">youtube</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="hover:text-primary-500 dark:hover:text-primary-400 fill-current text-gray-700 dark:text-gray-200 h-6 w-6"><title>Youtube</title><path d="M23.499 6.203a3.008 3.008 0 00-2.089-2.089c-1.87-.501-9.4-.501-9.4-.501s-7.509-.01-9.399.501a3.008 3.008 0 00-2.088 2.09A31.258 31.26 0 000 12.01a31.258 31.26 0 00.523 5.785 3.008 3.008 0 002.088 2.089c1.869.502 9.4.502 9.4.502s7.508 0 9.399-.502a3.008 3.008 0 002.089-2.09 31.258 31.26 0 00.5-5.784 31.258 31.26 0 00-.5-5.808zm-13.891 9.4V8.407l6.266 3.604z"></path></svg></a><a class="text-sm text-gray-500 transition hover:text-gray-600" target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com"><span class="sr-only">linkedin</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="hover:text-primary-500 dark:hover:text-primary-400 fill-current text-gray-700 dark:text-gray-200 h-6 w-6"><title>Linkedin</title><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path></svg></a><a class="text-sm text-gray-500 transition hover:text-gray-600" target="_blank" rel="noopener noreferrer" href="https://bsky.app/"><span class="sr-only">bluesky</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="hover:text-primary-500 dark:hover:text-primary-400 fill-current text-gray-700 dark:text-gray-200 h-6 w-6"><title>Bluesky</title><path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565C.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479c.815 2.736 3.713 3.66 6.383 3.364q.204-.03.415-.056q-.207.033-.415.056c-3.912.58-7.387 2.005-2.83 7.078c5.013 5.19 6.87-1.113 7.823-4.308c.953 3.195 2.05 9.271 7.733 4.308c4.267-4.308 1.172-6.498-2.74-7.078a9 9 0 0 1-.415-.056q.21.026.415.056c2.67.297 5.568-.628 6.383-3.364c.246-.828.624-5.79.624-6.478c0-.69-.139-1.861-.902-2.206c-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8"></path></svg></a><a class="text-sm text-gray-500 transition hover:text-gray-600" target="_blank" rel="noopener noreferrer" href="https://twitter.com/x"><span class="sr-only">x</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="hover:text-primary-500 dark:hover:text-primary-400 fill-current text-gray-700 dark:text-gray-200 h-6 w-6"><title>X</title><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"></path></svg></a><a class="text-sm text-gray-500 transition hover:text-gray-600" target="_blank" rel="noopener noreferrer" href="https://www.instagram.com"><span class="sr-only">instagram</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="hover:text-primary-500 dark:hover:text-primary-400 fill-current text-gray-700 dark:text-gray-200 h-6 w-6"><title>Instagram</title><path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"></path></svg></a><a class="text-sm text-gray-500 transition hover:text-gray-600" target="_blank" rel="noopener noreferrer" href="https://www.threads.net"><span class="sr-only">threads</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="hover:text-primary-500 dark:hover:text-primary-400 fill-current text-gray-700 dark:text-gray-200 h-6 w-6"><title>Threads</title><path d="M12.186 24h-.007c-3.581-.024-6.334-1.205-8.184-3.509C2.35 18.44 1.5 15.586 1.472 12.01v-.017c.03-3.579.879-6.43 2.525-8.482C5.845 1.205 8.6.024 12.18 0h.014c2.746.02 5.043.725 6.826 2.098 1.677 1.29 2.858 3.13 3.509 5.467l-2.04.569c-1.104-3.96-3.898-5.984-8.304-6.015-2.91.022-5.11.936-6.54 2.717C4.307 6.504 3.616 8.914 3.589 12c.027 3.086.718 5.496 2.057 7.164 1.43 1.783 3.631 2.698 6.54 2.717 2.623-.02 4.358-.631 5.8-2.045 1.647-1.613 1.618-3.593 1.09-4.798-.31-.71-.873-1.3-1.634-1.75-.192 1.352-.622 2.446-1.284 3.272-.886 1.102-2.14 1.704-3.73 1.79-1.202.065-2.361-.218-3.259-.801-1.063-.689-1.685-1.74-1.752-2.964-.065-1.19.408-2.285 1.33-3.082.88-.76 2.119-1.207 3.583-1.291a13.853 13.853 0 0 1 3.02.142c-.126-.742-.375-1.332-.75-1.757-.513-.586-1.308-.883-2.359-.89h-.029c-.844 0-1.992.232-2.721 1.32L7.734 7.847c.98-1.454 2.568-2.256 4.478-2.256h.044c3.194.02 5.097 1.975 5.287 5.388.108.046.216.094.321.142 1.49.7 2.58 1.761 3.154 3.07.797 1.82.871 4.79-1.548 7.158-1.85 1.81-4.094 2.628-7.277 2.65Zm1.003-11.69c-.242 0-.487.007-.739.021-1.836.103-2.98.946-2.916 2.143.067 1.256 1.452 1.839 2.784 1.767 1.224-.065 2.818-.543 3.086-3.71a10.5 10.5 0 0 0-2.215-.221z"></path></svg></a><a class="text-sm text-gray-500 transition hover:text-gray-600" target="_blank" rel="noopener noreferrer" href="https://medium.com"><span class="sr-only">medium</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="hover:text-primary-500 dark:hover:text-primary-400 fill-current text-gray-700 dark:text-gray-200 h-6 w-6"><title>Medium</title><path d="M13.54 12a6.8 6.8 0 01-6.77 6.82A6.8 6.8 0 010 12a6.8 6.8 0 016.77-6.82A6.8 6.8 0 0113.54 12zM20.96 12c0 3.54-1.51 6.42-3.38 6.42-1.87 0-3.39-2.88-3.39-6.42s1.52-6.42 3.39-6.42 3.38 2.88 3.38 6.42M24 12c0 3.17-.53 5.75-1.19 5.75-.66 0-1.19-2.58-1.19-5.75s.53-5.75 1.19-5.75C23.47 6.25 24 8.83 24 12z"></path></svg></a></div><div class="mb-2 flex space-x-2 text-sm text-gray-500 dark:text-gray-400"><div>Tails Azimuth</div><div> • </div><div>© 2026</div><div> • </div><a class="break-words" href="/">Next.js Starter Blog</a></div><div class="mb-8 text-sm text-gray-500 dark:text-gray-400"><a class="break-words" target="_blank" rel="noopener noreferrer" href="https://github.com/timlrx/tailwind-nextjs-starter-blog">Tailwind Nextjs Theme</a></div></div></footer></section><script src="/_next/static/chunks/webpack-af24fb31267d6e11.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[1478,[\"545\",\"static/chunks/c16f53c3-5b47b7f1ae12d8f6.js\",\"874\",\"static/chunks/874-7cca39d2e0ddd8b8.js\",\"430\",\"static/chunks/430-f83175351bcd3192.js\",\"177\",\"static/chunks/app/layout-6cdc32e6ffe9019a.js\"],\"ThemeProviders\"]\n3:I[9243,[\"545\",\"static/chunks/c16f53c3-5b47b7f1ae12d8f6.js\",\"874\",\"static/chunks/874-7cca39d2e0ddd8b8.js\",\"430\",\"static/chunks/430-f83175351bcd3192.js\",\"177\",\"static/chunks/app/layout-6cdc32e6ffe9019a.js\"],\"\"]\n4:I[7392,[\"545\",\"static/chunks/c16f53c3-5b47b7f1ae12d8f6.js\",\"874\",\"static/chunks/874-7cca39d2e0ddd8b8.js\",\"430\",\"static/chunks/430-f83175351bcd3192.js\",\"177\",\"static/chunks/app/layout-6cdc32e6ffe9019a.js\"],\"KBarSearchProvider\"]\n5:I[6874,[\"874\",\"static/chunks/874-7cca39d2e0ddd8b8.js\",\"63\",\"static/chunks/63-ef4ffe428c84fbc3.js\",\"909\",\"static/chunks/app/blog/%5B...slug%5D/page-55fdf120c49a8b1e.js\"],\"\"]\n6:I[4159,[\"545\",\"static/chunks/c16f53c3-5b47b7f1ae12d8f6.js\",\"874\",\"static/chunks/874-7cca39d2e0ddd8b8.js\",\"430\",\"static/chunks/430-f83175351bcd3192.js\",\"177\",\"static/chunks/app/layout-6cdc32e6ffe9019a.js\"],\"KBarButton\"]\n7:I[1762,[\"545\",\"static/chunks/c16f53c3-5b47b7f1ae12d8f6.js\",\"874\",\"static/chunks/874-7cca39d2e0ddd8b8.js\",\"430\",\"static/chunks/430-f83175351bcd3192.js\",\"177\",\"static/chunks/app/layout-6cdc32e6ffe9019a.js\"],\"default\"]\n8:I[7298,[\"545\",\"static/chunks/c16f53c3-5b47b7f1ae12d8f6.js\",\"874\",\"static/chunks/874-7cca39d2e0ddd8b8.js\",\"430\",\"static/chunks/430-f83175351bcd3192.js\",\"177\",\"static/chunks/app/layout-6cdc32e6ffe9019a.js\"],\"default\"]\n9:I[7555,[],\"\"]\na:I[1295,[],\"\"]\ne:I[9665,[],\"OutletBoundary\"]\n11:I[9665,[],\"ViewportBoundary\"]\n13:I[9665,[],\"MetadataBoundary\"]\n15:I[6614,[],\"\"]\n:HL[\"/_next/static/media/36966cca54120369-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/css/51ff4ab09cd9a322.css\",\"style\"]\n:HL[\"/_next/static/css/ec75326fdf363785.css\",\"style\"]\n:HL[\"/_next/static/css/7abc17aba6a0edf4.css\",\"style\"]\nb:T69f,M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 "])</script><script>self.__next_f.push([1,"4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439zc:T498,M12.186 24h-.007c-3.581-.024-6.334-1.205-8.184-3.509C2.35 18.44 1.5 15.586 1.472 12.01v-.017c.03-3.579.879-6.43 2.525-8.482C5.845 1.205 8.6.024 12.18 0h.014c2.746.02 5.043.725 6.826 2.098 1.677 1.29 2.858 3.13 3.509 5.467l-2.04.569c-1.104-3.96-3.898-5.984-8.304-6.015-2.91.022-5.11.936-6.54 2.717C4.307 6.504 3.616 8.914 3.589 12c.027 3.086.718 5.496 2.057 7.164 1.43 1.783 3.631 2.698 6.54 2.717 2.623-.02 4.358-.631 5.8-2.045 1.647-1.613 1.618-3.593 1.09-4.798"])</script><script>self.__next_f.push([1,"-.31-.71-.873-1.3-1.634-1.75-.192 1.352-.622 2.446-1.284 3.272-.886 1.102-2.14 1.704-3.73 1.79-1.202.065-2.361-.218-3.259-.801-1.063-.689-1.685-1.74-1.752-2.964-.065-1.19.408-2.285 1.33-3.082.88-.76 2.119-1.207 3.583-1.291a13.853 13.853 0 0 1 3.02.142c-.126-.742-.375-1.332-.75-1.757-.513-.586-1.308-.883-2.359-.89h-.029c-.844 0-1.992.232-2.721 1.32L7.734 7.847c.98-1.454 2.568-2.256 4.478-2.256h.044c3.194.02 5.097 1.975 5.287 5.388.108.046.216.094.321.142 1.49.7 2.58 1.761 3.154 3.07.797 1.82.871 4.79-1.548 7.158-1.85 1.81-4.094 2.628-7.277 2.65Zm1.003-11.69c-.242 0-.487.007-.739.021-1.836.103-2.98.946-2.916 2.143.067 1.256 1.452 1.839 2.784 1.767 1.224-.065 2.818-.543 3.086-3.71a10.5 10.5 0 0 0-2.215-.221z"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"sCS18nH11lqaRF2xVLwHp\",\"p\":\"\",\"c\":[\"\",\"blog\",\"introducing-tailwind-nextjs-starter-blog\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"blog\",{\"children\":[[\"slug\",\"introducing-tailwind-nextjs-starter-blog\",\"c\"],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/51ff4ab09cd9a322.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/ec75326fdf363785.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en-us\",\"className\":\"__variable_dd5b2f scroll-smooth\",\"suppressHydrationWarning\":true,\"children\":[[\"$\",\"link\",null,{\"rel\":\"apple-touch-icon\",\"sizes\":\"76x76\",\"href\":\"/static/favicons/apple-touch-icon.png\"}],[\"$\",\"link\",null,{\"rel\":\"icon\",\"type\":\"image/png\",\"sizes\":\"32x32\",\"href\":\"/static/favicons/favicon-32x32.png\"}],[\"$\",\"link\",null,{\"rel\":\"icon\",\"type\":\"image/png\",\"sizes\":\"16x16\",\"href\":\"/static/favicons/favicon-16x16.png\"}],[\"$\",\"link\",null,{\"rel\":\"manifest\",\"href\":\"/static/favicons/site.webmanifest\"}],[\"$\",\"link\",null,{\"rel\":\"mask-icon\",\"href\":\"/static/favicons/safari-pinned-tab.svg\",\"color\":\"#5bbad5\"}],[\"$\",\"meta\",null,{\"name\":\"msapplication-TileColor\",\"content\":\"#000000\"}],[\"$\",\"meta\",null,{\"name\":\"theme-color\",\"media\":\"(prefers-color-scheme: light)\",\"content\":\"#fff\"}],[\"$\",\"meta\",null,{\"name\":\"theme-color\",\"media\":\"(prefers-color-scheme: dark)\",\"content\":\"#000\"}],[\"$\",\"link\",null,{\"rel\":\"alternate\",\"type\":\"application/rss+xml\",\"href\":\"/feed.xml\"}],[\"$\",\"body\",null,{\"className\":\"bg-white pl-[calc(100vw-100%)] text-black antialiased dark:bg-gray-950 dark:text-white\",\"children\":[\"$\",\"$L2\",null,{\"children\":[[\"$undefined\",\"$undefined\",\"$undefined\",[\"$\",\"$L3\",null,{\"async\":true,\"defer\":true,\"src\":\"https://analytics.umami.is/script.js\"}],\"$undefined\",\"$undefined\"],[\"$\",\"section\",null,{\"className\":\"mx-auto max-w-3xl px-4 sm:px-6 xl:max-w-5xl xl:px-0\",\"children\":[[\"$\",\"$L4\",null,{\"kbarConfig\":{\"searchDocumentsPath\":\"/search.json\"},\"children\":[[\"$\",\"header\",null,{\"className\":\"flex items-center w-full bg-white dark:bg-gray-950 justify-between py-10\",\"children\":[[\"$\",\"$L5\",null,{\"className\":\"break-words\",\"href\":\"/\",\"aria-label\":\"TailwindBlog\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mr-3\",\"children\":[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"xmlnsXlink\":\"http://www.w3.org/1999/xlink\",\"width\":53.87,\"height\":43.61,\"viewBox\":\"344.564 330.278 111.737 91.218\",\"children\":[[\"$\",\"defs\",null,{\"children\":[[\"$\",\"linearGradient\",null,{\"id\":\"logo_svg__b\",\"x1\":420.97,\"x2\":420.97,\"y1\":331.28,\"y2\":418.5,\"gradientUnits\":\"userSpaceOnUse\",\"children\":[[\"$\",\"stop\",null,{\"offset\":\"0%\",\"style\":{\"stopColor\":\"#06b6d4\",\"stopOpacity\":1}}],[\"$\",\"stop\",null,{\"offset\":\"100%\",\"style\":{\"stopColor\":\"#67e8f9\",\"stopOpacity\":1}}]]}],[\"$\",\"linearGradient\",null,{\"id\":\"logo_svg__d\",\"x1\":377.89,\"x2\":377.89,\"y1\":331.28,\"y2\":418.5,\"gradientUnits\":\"userSpaceOnUse\",\"children\":[[\"$\",\"stop\",null,{\"offset\":\"0%\",\"style\":{\"stopColor\":\"#06b6d4\",\"stopOpacity\":1}}],[\"$\",\"stop\",null,{\"offset\":\"100%\",\"style\":{\"stopColor\":\"#67e8f9\",\"stopOpacity\":1}}]]}],[\"$\",\"path\",null,{\"id\":\"logo_svg__a\",\"d\":\"M453.3 331.28v28.57l-64.66 58.65v-30.08z\"}],[\"$\",\"path\",null,{\"id\":\"logo_svg__c\",\"d\":\"M410.23 331.28v28.57l-64.67 58.65v-30.08z\"}]]}],[\"$\",\"use\",null,{\"xlinkHref\":\"#logo_svg__a\",\"fill\":\"url(#logo_svg__b)\"}],[\"$\",\"use\",null,{\"xlinkHref\":\"#logo_svg__c\",\"fill\":\"url(#logo_svg__d)\"}]]}]}],[\"$\",\"div\",null,{\"className\":\"hidden h-6 text-2xl font-semibold sm:block\",\"children\":\"TailwindBlog\"}]]}]}],[\"$\",\"div\",null,{\"className\":\"flex items-center space-x-4 leading-5 sm:-mr-6 sm:space-x-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"no-scrollbar hidden max-w-40 items-center gap-x-4 overflow-x-auto sm:flex md:max-w-72 lg:max-w-96\",\"children\":[[\"$\",\"$L5\",\"Blog\",{\"className\":\"hover:text-primary-500 dark:hover:text-primary-400 m-1 font-medium text-gray-900 dark:text-gray-100\",\"href\":\"/blog\",\"children\":\"Blog\"}],[\"$\",\"$L5\",\"Tags\",{\"className\":\"hover:text-primary-500 dark:hover:text-primary-400 m-1 font-medium text-gray-900 dark:text-gray-100\",\"href\":\"/tags\",\"children\":\"Tags\"}],[\"$\",\"$L5\",\"Projects\",{\"className\":\"hover:text-primary-500 dark:hover:text-primary-400 m-1 font-medium text-gray-900 dark:text-gray-100\",\"href\":\"/projects\",\"children\":\"Projects\"}],[\"$\",\"$L5\",\"About\",{\"className\":\"hover:text-primary-500 dark:hover:text-primary-400 m-1 font-medium text-gray-900 dark:text-gray-100\",\"href\":\"/about\",\"children\":\"About\"}]]}],[\"$\",\"$L6\",null,{\"aria-label\":\"Search\",\"children\":[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"strokeWidth\":1.5,\"stroke\":\"currentColor\",\"className\":\"hover:text-primary-500 dark:hover:text-primary-400 h-6 w-6 text-gray-900 dark:text-gray-100\",\"children\":[\"$\",\"path\",null,{\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"d\":\"M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z\"}]}]}],[\"$\",\"$L7\",null,{}],[\"$\",\"$L8\",null,{}]]}]]}],[\"$\",\"main\",null,{\"className\":\"mb-auto\",\"children\":[\"$\",\"$L9\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$La\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"div\",null,{\"className\":\"flex flex-col items-start justify-start md:mt-24 md:flex-row md:items-center md:justify-center md:space-x-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"space-x-2 pt-6 pb-8 md:space-y-5\",\"children\":[\"$\",\"h1\",null,{\"className\":\"text-6xl leading-9 font-extrabold tracking-tight text-gray-900 md:border-r-2 md:px-6 md:text-8xl md:leading-14 dark:text-gray-100\",\"children\":\"404\"}]}],[\"$\",\"div\",null,{\"className\":\"max-w-md\",\"children\":[[\"$\",\"p\",null,{\"className\":\"mb-4 text-xl leading-normal font-bold md:text-2xl\",\"children\":\"Sorry we couldn't find this page.\"}],[\"$\",\"p\",null,{\"className\":\"mb-8\",\"children\":\"But dont worry, you can find plenty of other things on our homepage.\"}],[\"$\",\"$L5\",null,{\"className\":\"focus:shadow-outline-blue inline rounded-lg border border-transparent bg-blue-600 px-4 py-2 text-sm leading-5 font-medium text-white shadow-xs transition-colors duration-150 hover:bg-blue-700 focus:outline-hidden dark:hover:bg-blue-500\",\"href\":\"/\",\"children\":\"Back to homepage\"}]]}]]}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]]}],[\"$\",\"footer\",null,{\"children\":[\"$\",\"div\",null,{\"className\":\"mt-16 flex flex-col items-center\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-3 flex space-x-4\",\"children\":[[\"$\",\"a\",null,{\"className\":\"text-sm text-gray-500 transition hover:text-gray-600\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"mailto:address@yoursite.com\",\"children\":[[\"$\",\"span\",null,{\"className\":\"sr-only\",\"children\":\"mail\"}],[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 20 20\",\"className\":\"hover:text-primary-500 dark:hover:text-primary-400 fill-current text-gray-700 dark:text-gray-200 h-6 w-6\",\"children\":[[\"$\",\"title\",null,{\"children\":\"Mail\"}],[\"$\",\"path\",null,{\"d\":\"M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z\"}],[\"$\",\"path\",null,{\"d\":\"M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z\"}]]}]]}],[\"$\",\"a\",null,{\"className\":\"text-sm text-gray-500 transition hover:text-gray-600\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://github.com\",\"children\":[[\"$\",\"span\",null,{\"className\":\"sr-only\",\"children\":\"github\"}],[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 24 24\",\"className\":\"hover:text-primary-500 dark:hover:text-primary-400 fill-current text-gray-700 dark:text-gray-200 h-6 w-6\",\"children\":[[\"$\",\"title\",null,{\"children\":\"GitHub\"}],[\"$\",\"path\",null,{\"d\":\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"}]]}]]}],[\"$\",\"a\",null,{\"className\":\"text-sm text-gray-500 transition hover:text-gray-600\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://facebook.com\",\"children\":[[\"$\",\"span\",null,{\"className\":\"sr-only\",\"children\":\"facebook\"}],[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 24 24\",\"className\":\"hover:text-primary-500 dark:hover:text-primary-400 fill-current text-gray-700 dark:text-gray-200 h-6 w-6\",\"children\":[[\"$\",\"title\",null,{\"children\":\"Facebook\"}],[\"$\",\"path\",null,{\"d\":\"M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z\"}]]}]]}],[\"$\",\"a\",null,{\"className\":\"text-sm text-gray-500 transition hover:text-gray-600\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://youtube.com\",\"children\":[[\"$\",\"span\",null,{\"className\":\"sr-only\",\"children\":\"youtube\"}],[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 24 24\",\"className\":\"hover:text-primary-500 dark:hover:text-primary-400 fill-current text-gray-700 dark:text-gray-200 h-6 w-6\",\"children\":[[\"$\",\"title\",null,{\"children\":\"Youtube\"}],[\"$\",\"path\",null,{\"d\":\"M23.499 6.203a3.008 3.008 0 00-2.089-2.089c-1.87-.501-9.4-.501-9.4-.501s-7.509-.01-9.399.501a3.008 3.008 0 00-2.088 2.09A31.258 31.26 0 000 12.01a31.258 31.26 0 00.523 5.785 3.008 3.008 0 002.088 2.089c1.869.502 9.4.502 9.4.502s7.508 0 9.399-.502a3.008 3.008 0 002.089-2.09 31.258 31.26 0 00.5-5.784 31.258 31.26 0 00-.5-5.808zm-13.891 9.4V8.407l6.266 3.604z\"}]]}]]}],[\"$\",\"a\",null,{\"className\":\"text-sm text-gray-500 transition hover:text-gray-600\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://www.linkedin.com\",\"children\":[[\"$\",\"span\",null,{\"className\":\"sr-only\",\"children\":\"linkedin\"}],[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 24 24\",\"className\":\"hover:text-primary-500 dark:hover:text-primary-400 fill-current text-gray-700 dark:text-gray-200 h-6 w-6\",\"children\":[[\"$\",\"title\",null,{\"children\":\"Linkedin\"}],[\"$\",\"path\",null,{\"d\":\"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z\"}]]}]]}],null,[\"$\",\"a\",null,{\"className\":\"text-sm text-gray-500 transition hover:text-gray-600\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://bsky.app/\",\"children\":[[\"$\",\"span\",null,{\"className\":\"sr-only\",\"children\":\"bluesky\"}],[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 24 24\",\"className\":\"hover:text-primary-500 dark:hover:text-primary-400 fill-current text-gray-700 dark:text-gray-200 h-6 w-6\",\"children\":[[\"$\",\"title\",null,{\"children\":\"Bluesky\"}],[\"$\",\"path\",null,{\"d\":\"M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565C.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479c.815 2.736 3.713 3.66 6.383 3.364q.204-.03.415-.056q-.207.033-.415.056c-3.912.58-7.387 2.005-2.83 7.078c5.013 5.19 6.87-1.113 7.823-4.308c.953 3.195 2.05 9.271 7.733 4.308c4.267-4.308 1.172-6.498-2.74-7.078a9 9 0 0 1-.415-.056q.21.026.415.056c2.67.297 5.568-.628 6.383-3.364c.246-.828.624-5.79.624-6.478c0-.69-.139-1.861-.902-2.206c-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8\"}]]}]]}],[\"$\",\"a\",null,{\"className\":\"text-sm text-gray-500 transition hover:text-gray-600\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://twitter.com/x\",\"children\":[[\"$\",\"span\",null,{\"className\":\"sr-only\",\"children\":\"x\"}],[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 24 24\",\"className\":\"hover:text-primary-500 dark:hover:text-primary-400 fill-current text-gray-700 dark:text-gray-200 h-6 w-6\",\"children\":[[\"$\",\"title\",null,{\"children\":\"X\"}],[\"$\",\"path\",null,{\"d\":\"M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z\"}]]}]]}],[\"$\",\"a\",null,{\"className\":\"text-sm text-gray-500 transition hover:text-gray-600\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://www.instagram.com\",\"children\":[[\"$\",\"span\",null,{\"className\":\"sr-only\",\"children\":\"instagram\"}],[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 24 24\",\"className\":\"hover:text-primary-500 dark:hover:text-primary-400 fill-current text-gray-700 dark:text-gray-200 h-6 w-6\",\"children\":[[\"$\",\"title\",null,{\"children\":\"Instagram\"}],[\"$\",\"path\",null,{\"d\":\"$b\"}]]}]]}],[\"$\",\"a\",null,{\"className\":\"text-sm text-gray-500 transition hover:text-gray-600\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://www.threads.net\",\"children\":[[\"$\",\"span\",null,{\"className\":\"sr-only\",\"children\":\"threads\"}],[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 24 24\",\"className\":\"hover:text-primary-500 dark:hover:text-primary-400 fill-current text-gray-700 dark:text-gray-200 h-6 w-6\",\"children\":[[\"$\",\"title\",null,{\"children\":\"Threads\"}],[\"$\",\"path\",null,{\"d\":\"$c\"}]]}]]}],[\"$\",\"a\",null,{\"className\":\"text-sm text-gray-500 transition hover:text-gray-600\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://medium.com\",\"children\":[[\"$\",\"span\",null,{\"className\":\"sr-only\",\"children\":\"medium\"}],[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 24 24\",\"className\":\"hover:text-primary-500 dark:hover:text-primary-400 fill-current text-gray-700 dark:text-gray-200 h-6 w-6\",\"children\":[[\"$\",\"title\",null,{\"children\":\"Medium\"}],[\"$\",\"path\",null,{\"d\":\"M13.54 12a6.8 6.8 0 01-6.77 6.82A6.8 6.8 0 010 12a6.8 6.8 0 016.77-6.82A6.8 6.8 0 0113.54 12zM20.96 12c0 3.54-1.51 6.42-3.38 6.42-1.87 0-3.39-2.88-3.39-6.42s1.52-6.42 3.39-6.42 3.38 2.88 3.38 6.42M24 12c0 3.17-.53 5.75-1.19 5.75-.66 0-1.19-2.58-1.19-5.75s.53-5.75 1.19-5.75C23.47 6.25 24 8.83 24 12z\"}]]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"mb-2 flex space-x-2 text-sm text-gray-500 dark:text-gray-400\",\"children\":[[\"$\",\"div\",null,{\"children\":\"Tails Azimuth\"}],[\"$\",\"div\",null,{\"children\":\" • \"}],[\"$\",\"div\",null,{\"children\":\"© 2026\"}],[\"$\",\"div\",null,{\"children\":\" • \"}],[\"$\",\"$L5\",null,{\"className\":\"break-words\",\"href\":\"/\",\"children\":\"Next.js Starter Blog\"}]]}],[\"$\",\"div\",null,{\"className\":\"mb-8 text-sm text-gray-500 dark:text-gray-400\",\"children\":[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://github.com/timlrx/tailwind-nextjs-starter-blog\",\"children\":\"Tailwind Nextjs Theme\"}]}]]}]}]]}]]}]}]]}]]}],{\"children\":[\"blog\",[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L9\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$La\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"slug\",\"introducing-tailwind-nextjs-starter-blog\",\"c\"],[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L9\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$La\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[\"__PAGE__\",[\"$\",\"$1\",\"c\",{\"children\":[\"$Ld\",\"$undefined\",[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/7abc17aba6a0edf4.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"$Le\",null,{\"children\":[\"$Lf\",\"$L10\",null]}]]}],{},null,false]},null,false]},null,false]},null,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$1\",\"hylI_WrT5Pf0oIjKV57s0\",{\"children\":[[\"$\",\"$L11\",null,{\"children\":\"$L12\"}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}],[\"$\",\"$L13\",null,{\"children\":\"$L14\"}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$15\",\"$undefined\"],\"s\":false,\"S\":true}\n"])</script><script>self.__next_f.push([1,"16:I[1839,[\"874\",\"static/chunks/874-7cca39d2e0ddd8b8.js\",\"63\",\"static/chunks/63-ef4ffe428c84fbc3.js\",\"909\",\"static/chunks/app/blog/%5B...slug%5D/page-55fdf120c49a8b1e.js\"],\"default\"]\n17:I[3063,[\"874\",\"static/chunks/874-7cca39d2e0ddd8b8.js\",\"63\",\"static/chunks/63-ef4ffe428c84fbc3.js\",\"909\",\"static/chunks/app/blog/%5B...slug%5D/page-55fdf120c49a8b1e.js\"],\"Image\"]\n18:I[2100,[\"874\",\"static/chunks/874-7cca39d2e0ddd8b8.js\",\"63\",\"static/chunks/63-ef4ffe428c84fbc3.js\",\"909\",\"static/chunks/app/blog/%5B...slug%5D/page-55fdf120c49a8b1e.js\"],\"default\"]\n19:I[1449,[\"874\",\"static/chunks/874-7cca39d2e0ddd8b8.js\",\"63\",\"static/chunks/63-ef4ffe428c84fbc3.js\",\"909\",\"static/chunks/app/blog/%5B...slug%5D/page-55fdf120c49a8b1e.js\"],\"default\"]\n"])</script><script>self.__next_f.push([1,"d:[[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"BlogPosting\\\",\\\"headline\\\":\\\"Introducing Tailwind Nextjs Starter Blog\\\",\\\"datePublished\\\":\\\"2021-01-12T00:00:00.000Z\\\",\\\"dateModified\\\":\\\"2024-08-16T00:00:00.000Z\\\",\\\"description\\\":\\\"Looking for a performant, out of the box template, with all the best in web technology to support your blogging needs? Checkout the Tailwind Nextjs Starter Blog template.\\\",\\\"image\\\":\\\"/static/images/canada/mountains.jpg\\\",\\\"url\\\":\\\"https://tailwind-nextjs-starter-blog.vercel.app/blog/introducing-tailwind-nextjs-starter-blog\\\",\\\"author\\\":[{\\\"@type\\\":\\\"Person\\\",\\\"name\\\":\\\"Tails Azimuth\\\"},{\\\"@type\\\":\\\"Person\\\",\\\"name\\\":\\\"Sparrow Hawk\\\"}]}\"}}],[\"$\",\"section\",null,{\"className\":\"mx-auto max-w-3xl px-4 sm:px-6 xl:max-w-5xl xl:px-0\",\"children\":[[\"$\",\"$L16\",null,{}],[\"$\",\"article\",null,{\"children\":[\"$\",\"div\",null,{\"className\":\"xl:divide-y xl:divide-gray-200 xl:dark:divide-gray-700\",\"children\":[[\"$\",\"header\",null,{\"className\":\"pt-6 xl:pb-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"space-y-1 text-center\",\"children\":[[\"$\",\"dl\",null,{\"className\":\"space-y-10\",\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"dt\",null,{\"className\":\"sr-only\",\"children\":\"Published on\"}],[\"$\",\"dd\",null,{\"className\":\"text-base leading-6 font-medium text-gray-500 dark:text-gray-400\",\"children\":[\"$\",\"time\",null,{\"dateTime\":\"2021-01-12T00:00:00.000Z\",\"children\":\"Tuesday, January 12, 2021\"}]}]]}]}],[\"$\",\"div\",null,{\"children\":[\"$\",\"h1\",null,{\"className\":\"text-3xl leading-9 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10 md:text-5xl md:leading-14 dark:text-gray-100\",\"children\":\"Introducing Tailwind Nextjs Starter Blog\"}]}]]}]}],[\"$\",\"div\",null,{\"className\":\"grid-rows-[auto_1fr] divide-y divide-gray-200 pb-8 xl:grid xl:grid-cols-4 xl:gap-x-6 xl:divide-y-0 dark:divide-gray-700\",\"children\":[[\"$\",\"dl\",null,{\"className\":\"pt-6 pb-10 xl:border-b xl:border-gray-200 xl:pt-11 xl:dark:border-gray-700\",\"children\":[[\"$\",\"dt\",null,{\"className\":\"sr-only\",\"children\":\"Authors\"}],[\"$\",\"dd\",null,{\"children\":[\"$\",\"ul\",null,{\"className\":\"flex flex-wrap justify-center gap-4 sm:space-x-12 xl:block xl:space-y-8 xl:space-x-0\",\"children\":[[\"$\",\"li\",\"Tails Azimuth\",{\"className\":\"flex items-center space-x-2\",\"children\":[[\"$\",\"$L17\",null,{\"src\":\"/static/images/avatar.png\",\"width\":38,\"height\":38,\"alt\":\"avatar\",\"className\":\"h-10 w-10 rounded-full\"}],[\"$\",\"dl\",null,{\"className\":\"text-sm leading-5 font-medium whitespace-nowrap\",\"children\":[[\"$\",\"dt\",null,{\"className\":\"sr-only\",\"children\":\"Name\"}],[\"$\",\"dd\",null,{\"className\":\"text-gray-900 dark:text-gray-100\",\"children\":\"Tails Azimuth\"}],[\"$\",\"dt\",null,{\"className\":\"sr-only\",\"children\":\"Twitter\"}],[\"$\",\"dd\",null,{\"children\":[\"$\",\"a\",null,{\"className\":\"text-primary-500 hover:text-primary-600 dark:hover:text-primary-400\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://twitter.com/Twitter\",\"children\":\"@Twitter\"}]}]]}]]}],[\"$\",\"li\",\"Sparrow Hawk\",{\"className\":\"flex items-center space-x-2\",\"children\":[[\"$\",\"$L17\",null,{\"src\":\"/static/images/sparrowhawk-avatar.jpg\",\"width\":38,\"height\":38,\"alt\":\"avatar\",\"className\":\"h-10 w-10 rounded-full\"}],[\"$\",\"dl\",null,{\"className\":\"text-sm leading-5 font-medium whitespace-nowrap\",\"children\":[[\"$\",\"dt\",null,{\"className\":\"sr-only\",\"children\":\"Name\"}],[\"$\",\"dd\",null,{\"className\":\"text-gray-900 dark:text-gray-100\",\"children\":\"Sparrow Hawk\"}],[\"$\",\"dt\",null,{\"className\":\"sr-only\",\"children\":\"Twitter\"}],[\"$\",\"dd\",null,{\"children\":[\"$\",\"a\",null,{\"className\":\"text-primary-500 hover:text-primary-600 dark:hover:text-primary-400\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://twitter.com/sparrowhawk\",\"children\":\"@sparrowhawk\"}]}]]}]]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"divide-y divide-gray-200 xl:col-span-3 xl:row-span-2 xl:pb-0 dark:divide-gray-700\",\"children\":[[\"$\",\"div\",null,{\"className\":\"prose dark:prose-invert max-w-none pt-10 pb-8\",\"children\":[[\"$\",\"div\",null,{\"children\":[\"$\",\"$L17\",null,{\"src\":\"/static/images/twitter-card.png\",\"alt\":\"tailwind-nextjs-banner\",\"width\":\"1200\",\"height\":\"600\"}]}],[\"$\",\"h1\",null,{\"className\":\"content-header\",\"id\":\"tailwind-nextjs-starter-blog\",\"children\":[[\"$\",\"a\",null,{\"className\":\"break-words\",\"href\":\"#tailwind-nextjs-starter-blog\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"content-header-link\",\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 20 20\",\"className\":\"h-5 linkicon w-5\",\"fill\":\"currentColor\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"}],[\"$\",\"path\",null,{\"d\":\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"}]]}]}]}],\"Tailwind Nextjs Starter Blog\"]}],[\"$\",\"p\",null,{\"children\":[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://vercel.com/new/git/external?repository-url=https://github.com/timlrx/tailwind-nextjs-starter-blog\",\"children\":[\"$\",\"img\",null,{\"alt\":\"Deploy with Vercel\",\"src\":\"https://vercel.com/button\"}]}]}],[\"$\",\"div\",null,{\"className\":\"markdown-alert markdown-alert-caution\",\"dir\":\"auto\",\"children\":[[\"$\",\"p\",null,{\"className\":\"markdown-alert-title\",\"dir\":\"auto\",\"children\":[[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"aria-hidden\":\"true\",\"className\":\"octicon\",\"height\":\"16\",\"width\":\"16\",\"children\":[\"$\",\"path\",null,{\"d\":\"M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z\"}]}],\"CAUTION\"]}],[\"$\",\"p\",null,{\"children\":[\"This is the README of version 1 of the template. It is kept for historical reasons, but is no longer supported. It also serves as a nice example of \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts\",\"children\":\"Github Alert\"}],\". For the actual documentation, please refer to the \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://github.com/timlrx/tailwind-nextjs-starter-blog\",\"children\":\"Github repository\"}],\".\"]}]]}],[\"$\",\"p\",null,{\"children\":[\"This is a \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://nextjs.org/\",\"children\":\"Next.js\"}],\", \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://tailwindcss.com/\",\"children\":\"Tailwind CSS\"}],\" blogging starter template. Probably the most feature-rich Next.js markdown blogging template out there. Comes out of the box configured with the latest technologies to make technical writing a breeze. Easily configurable and customizable. Perfect as a replacement to existing Jekyll and Hugo individual blogs.\"]}],[\"$\",\"p\",null,{\"children\":\"Check out the documentation below to get started.\"}],[\"$\",\"p\",null,{\"children\":[\"Facing issues? Check the \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://github.com/timlrx/tailwind-nextjs-starter-blog/wiki\",\"children\":\"FAQ page\"}],\" and do a search on past issues. Feel free to open a new issue if none has been posted previously.\"]}],[\"$\",\"p\",null,{\"children\":\"Feature request? Check the past discussions to see if it has been brought up previously. Otherwise, feel free to start a new discussion thread. All ideas are welcomed!\"}],[\"$\",\"h2\",null,{\"className\":\"content-header\",\"id\":\"examples\",\"children\":[[\"$\",\"a\",null,{\"className\":\"break-words\",\"href\":\"#examples\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"content-header-link\",\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 20 20\",\"className\":\"h-5 linkicon w-5\",\"fill\":\"currentColor\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"}],[\"$\",\"path\",null,{\"d\":\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"}]]}]}]}],\"Examples\"]}],[\"$\",\"ul\",null,{\"children\":[[\"$\",\"li\",null,{\"children\":[[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://tailwind-nextjs-starter-blog.vercel.app/\",\"children\":\"Demo Blog\"}],\" - this repo\"]}],[\"$\",\"li\",null,{\"children\":[[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://www.timlrx.com\",\"children\":\"My personal blog\"}],\" - modified to auto-generate blog posts with dates\"]}],[\"$\",\"li\",null,{\"children\":[[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://tambouille.vercel.app/\",\"children\":\"Aloisdg's cookbook\"}],\" - with pictures and recipes!\"]}],[\"$\",\"li\",null,{\"children\":[[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://tailwind-nextjs-starter-blog-seven.vercel.app/\",\"children\":\"GautierArcin's demo with next translate\"}],\" - includes translation of mdx posts, \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://github.com/GautierArcin/tailwind-nextjs-starter-blog/tree/demo/next-translate\",\"children\":\"source code\"}]]}],[\"$\",\"li\",null,{\"children\":[[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://davidlevai.com/\",\"children\":\"David Levai's digital garden\"}],\" - customized design and added email subscriptions\"]}],[\"$\",\"li\",null,{\"children\":[[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://thinhcorner.com/\",\"children\":\"Thinh's Corner\"}],\" - \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://github.com/Th1nhNg0/th1nhng0.vercel.app/blob/5e73a420828d82f01e7147512a2c3273c4ec19f8/layouts/PostLayout.js\",\"children\":\"customized layout\"}],\" with sticky side table of contents\"]}]]}],[\"$\",\"p\",null,{\"children\":\"Using the template? Feel free to create a PR and add your blog to this list.\"}],[\"$\",\"h2\",null,{\"className\":\"content-header\",\"id\":\"motivation\",\"children\":[[\"$\",\"a\",null,{\"className\":\"break-words\",\"href\":\"#motivation\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"content-header-link\",\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 20 20\",\"className\":\"h-5 linkicon w-5\",\"fill\":\"currentColor\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"}],[\"$\",\"path\",null,{\"d\":\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"}]]}]}]}],\"Motivation\"]}],[\"$\",\"p\",null,{\"children\":[\"I wanted to port my existing blog to Nextjs and Tailwind CSS but there was no easy out of the box template to use so I decided to create one. Design is adapted from \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://github.com/tailwindlabs/blog.tailwindcss.com\",\"children\":\"Tailwindlabs blog\"}],\".\"]}],[\"$\",\"p\",null,{\"children\":[\"I wanted it to be nearly as feature-rich as popular blogging templates like \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://github.com/daattali/beautiful-jekyll\",\"children\":\"beautiful-jekyll\"}],\" and \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://github.com/wowchemy/wowchemy-hugo-modules\",\"children\":\"Hugo Academic\"}],\" but with the best of React's ecosystem and current web development's best practices.\"]}],[\"$\",\"h2\",null,{\"className\":\"content-header\",\"id\":\"features\",\"children\":[[\"$\",\"a\",null,{\"className\":\"break-words\",\"href\":\"#features\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"content-header-link\",\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 20 20\",\"className\":\"h-5 linkicon w-5\",\"fill\":\"currentColor\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"}],[\"$\",\"path\",null,{\"d\":\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"}]]}]}]}],\"Features\"]}],[\"$\",\"ul\",null,{\"children\":[[\"$\",\"li\",null,{\"children\":[\"Easy styling customization with \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://tailwindcss.com/blog/tailwindcss-v3\",\"children\":\"Tailwind 3.0\"}],\" and primary color attribute\"]}],[\"$\",\"li\",null,{\"children\":[\"Near perfect lighthouse score - \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://www.webpagetest.org/result/210111_DiC1_08f3670c3430bf4a9b76fc3b927716c5/\",\"children\":\"Lighthouse report\"}]]}],[\"$\",\"li\",null,{\"children\":\"Lightweight, 45kB first load JS, uses Preact in production build\"}],[\"$\",\"li\",null,{\"children\":\"Mobile-friendly view\"}],[\"$\",\"li\",null,{\"children\":\"Light and dark theme\"}],[\"$\",\"li\",null,{\"children\":[\"Self-hosted font with \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://fontsource.org/\",\"children\":\"Fontsource\"}]]}],[\"$\",\"li\",null,{\"children\":[\"Supports \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://plausible.io/\",\"children\":\"plausible\"}],\", \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://simpleanalytics.com/\",\"children\":\"simple analytics\"}],\" and google analytics\"]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://mdxjs.com/\",\"children\":\"MDX - write JSX in markdown documents!\"}]}],[\"$\",\"li\",null,{\"children\":[\"Server-side syntax highlighting with line numbers and line highlighting via \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://github.com/timlrx/rehype-prism-plus\",\"children\":\"rehype-prism-plus\"}]]}],[\"$\",\"li\",null,{\"children\":[\"Math display supported via \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://katex.org/\",\"children\":\"KaTeX\"}]]}],[\"$\",\"li\",null,{\"children\":[\"Citation and bibliography support via \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://github.com/timlrx/rehype-citation\",\"children\":\"rehype-citation\"}]]}],[\"$\",\"li\",null,{\"children\":[\"Automatic image optimization via \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://nextjs.org/docs/basic-features/image-optimization\",\"children\":\"next/image\"}]]}],[\"$\",\"li\",null,{\"children\":[\"Flexible data retrieval with \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://github.com/kentcdodds/mdx-bundler\",\"children\":\"mdx-bundler\"}]]}],[\"$\",\"li\",null,{\"children\":\"Support for tags - each unique tag will be its own page\"}],[\"$\",\"li\",null,{\"children\":\"Support for multiple authors\"}],[\"$\",\"li\",null,{\"children\":\"Blog templates\"}],[\"$\",\"li\",null,{\"children\":\"TOC component\"}],[\"$\",\"li\",null,{\"children\":\"Support for nested routing of blog posts\"}],[\"$\",\"li\",null,{\"children\":\"Newsletter component with support for Mailchimp, Buttondown, Convertkit, Klaviyo, Revue, Emailoctopus and Beehiiv\"}],[\"$\",\"li\",null,{\"children\":[\"Supports \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://github.com/laymonage/giscus\",\"children\":\"giscus\"}],\", \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://github.com/utterance/utterances\",\"children\":\"utterances\"}],\" or disqus\"]}],[\"$\",\"li\",null,{\"children\":\"Projects page\"}],[\"$\",\"li\",null,{\"children\":\"Preconfigured security headers\"}],[\"$\",\"li\",null,{\"children\":\"SEO friendly with RSS feed, sitemaps and more!\"}]]}],[\"$\",\"h2\",null,{\"className\":\"content-header\",\"id\":\"sample-posts\",\"children\":[[\"$\",\"a\",null,{\"className\":\"break-words\",\"href\":\"#sample-posts\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"content-header-link\",\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 20 20\",\"className\":\"h-5 linkicon w-5\",\"fill\":\"currentColor\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"}],[\"$\",\"path\",null,{\"d\":\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"}]]}]}]}],\"Sample posts\"]}],[\"$\",\"ul\",null,{\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://tailwind-nextjs-starter-blog.vercel.app/blog/github-markdown-guide\",\"children\":\"A markdown guide\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://tailwind-nextjs-starter-blog.vercel.app/blog/guide-to-using-images-in-nextjs\",\"children\":\"Learn more about images in Next.js\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://tailwind-nextjs-starter-blog.vercel.app/blog/deriving-ols-estimator\",\"children\":\"A tour of math typesetting\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://tailwind-nextjs-starter-blog.vercel.app/blog/pictures-of-canada\",\"children\":\"Simple MDX image grid\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://tailwind-nextjs-starter-blog.vercel.app/blog/the-time-machine\",\"children\":\"Example of long prose\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://tailwind-nextjs-starter-blog.vercel.app/blog/nested-route/introducing-multi-part-posts-with-nested-routing\",\"children\":\"Example of Nested Route Post\"}]}]]}],[\"$\",\"h2\",null,{\"className\":\"content-header\",\"id\":\"quick-start-guide\",\"children\":[[\"$\",\"a\",null,{\"className\":\"break-words\",\"href\":\"#quick-start-guide\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"content-header-link\",\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 20 20\",\"className\":\"h-5 linkicon w-5\",\"fill\":\"currentColor\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"}],[\"$\",\"path\",null,{\"d\":\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"}]]}]}]}],\"Quick Start Guide\"]}],[\"$\",\"ol\",null,{\"children\":[[\"$\",\"li\",null,{\"children\":[\"JS (official support) - \",[\"$\",\"code\",null,{\"children\":\"npx degit https://github.com/timlrx/tailwind-nextjs-starter-blog.git\"}],\" or TS (community support) - \",[\"$\",\"code\",null,{\"children\":\"npx degit timlrx/tailwind-nextjs-starter-blog#typescript\"}]]}],[\"$\",\"li\",null,{\"children\":[\"Personalize \",[\"$\",\"code\",null,{\"children\":\"siteMetadata.js\"}],\" (site related information)\"]}],[\"$\",\"li\",null,{\"children\":[\"Modify the content security policy in \",[\"$\",\"code\",null,{\"children\":\"next.config.js\"}],\" if you want to use any analytics provider or a commenting solution other than giscus.\"]}],[\"$\",\"li\",null,{\"children\":[\"Personalize \",[\"$\",\"code\",null,{\"children\":\"authors/default.md\"}],\" (main author)\"]}],[\"$\",\"li\",null,{\"children\":[\"Modify \",[\"$\",\"code\",null,{\"children\":\"projectsData.ts\"}]]}],[\"$\",\"li\",null,{\"children\":[\"Modify \",[\"$\",\"code\",null,{\"children\":\"headerNavLinks.ts\"}],\" to customize navigation links\"]}],[\"$\",\"li\",null,{\"children\":\"Add blog posts\"}],[\"$\",\"li\",null,{\"children\":\"Deploy on Vercel\"}]]}],[\"$\",\"h2\",null,{\"className\":\"content-header\",\"id\":\"development\",\"children\":[[\"$\",\"a\",null,{\"className\":\"break-words\",\"href\":\"#development\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"content-header-link\",\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 20 20\",\"className\":\"h-5 linkicon w-5\",\"fill\":\"currentColor\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"}],[\"$\",\"path\",null,{\"d\":\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"}]]}]}]}],\"Development\"]}],[\"$\",\"p\",null,{\"children\":\"First, run the development server:\"}],[\"$\",\"$L18\",null,{\"className\":\"language-bash\",\"children\":[\"$\",\"code\",null,{\"className\":\"code-highlight language-bash\",\"children\":[[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"npm\"}],\" start\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token comment\",\"children\":\"# or\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"npm\"}],\" run dev\\n\"]}]]}]}],[\"$\",\"p\",null,{\"children\":[\"Open \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"http://localhost:3000\",\"children\":\"http://localhost:3000\"}],\" with your browser to see the result.\"]}],[\"$\",\"p\",null,{\"children\":[\"You can start editing the page by modifying \",[\"$\",\"code\",null,{\"children\":\"pages/index.js\"}],\". The page auto-updates as you edit the file.\"]}],[\"$\",\"h2\",null,{\"className\":\"content-header\",\"id\":\"extend--customize\",\"children\":[[\"$\",\"a\",null,{\"className\":\"break-words\",\"href\":\"#extend--customize\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"content-header-link\",\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 20 20\",\"className\":\"h-5 linkicon w-5\",\"fill\":\"currentColor\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"}],[\"$\",\"path\",null,{\"d\":\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"}]]}]}]}],\"Extend / Customize\"]}],[\"$\",\"p\",null,{\"children\":[[\"$\",\"code\",null,{\"children\":\"data/siteMetadata.js\"}],\" - contains most of the site related information which should be modified for a user's need.\"]}],[\"$\",\"p\",null,{\"children\":[[\"$\",\"code\",null,{\"children\":\"data/authors/default.md\"}],\" - default author information (required). Additional authors can be added as files in \",[\"$\",\"code\",null,{\"children\":\"data/authors\"}],\".\"]}],[\"$\",\"p\",null,{\"children\":[[\"$\",\"code\",null,{\"children\":\"data/projectsData.js\"}],\" - data used to generate styled card on the projects page.\"]}],[\"$\",\"p\",null,{\"children\":[[\"$\",\"code\",null,{\"children\":\"data/headerNavLinks.js\"}],\" - navigation links.\"]}],[\"$\",\"p\",null,{\"children\":[[\"$\",\"code\",null,{\"children\":\"data/logo.svg\"}],\" - replace with your own logo.\"]}],[\"$\",\"p\",null,{\"children\":[[\"$\",\"code\",null,{\"children\":\"data/blog\"}],\" - replace with your own blog posts.\"]}],[\"$\",\"p\",null,{\"children\":[[\"$\",\"code\",null,{\"children\":\"public/static\"}],\" - store assets such as images and favicons.\"]}],[\"$\",\"p\",null,{\"children\":[[\"$\",\"code\",null,{\"children\":\"tailwind.config.js\"}],\" and \",[\"$\",\"code\",null,{\"children\":\"css/tailwind.css\"}],\" - contain the tailwind stylesheet which can be modified to change the overall look and feel of the site.\"]}],[\"$\",\"p\",null,{\"children\":[[\"$\",\"code\",null,{\"children\":\"css/prism.css\"}],\" - controls the styles associated with the code blocks. Feel free to customize it and use your preferred prismjs theme e.g. \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://github.com/PrismJS/prism-themes\",\"children\":\"prism themes\"}],\".\"]}],[\"$\",\"p\",null,{\"children\":[[\"$\",\"code\",null,{\"children\":\"components/social-icons\"}],\" - to add other icons, simply copy an svg file from \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://simpleicons.org/\",\"children\":\"Simple Icons\"}],\" and map them in \",[\"$\",\"code\",null,{\"children\":\"index.js\"}],\". Other icons use \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://heroicons.com/\",\"children\":\"heroicons\"}],\".\"]}],[\"$\",\"p\",null,{\"children\":[[\"$\",\"code\",null,{\"children\":\"components/MDXComponents.js\"}],\" - pass your own JSX code or React component by specifying it over here. You can then call them directly in the \",[\"$\",\"code\",null,{\"children\":\".mdx\"}],\" or \",[\"$\",\"code\",null,{\"children\":\".md\"}],\" file. By default, a custom link and image component is passed.\"]}],[\"$\",\"p\",null,{\"children\":[[\"$\",\"code\",null,{\"children\":\"layouts\"}],\" - main templates used in pages.\"]}],[\"$\",\"p\",null,{\"children\":[[\"$\",\"code\",null,{\"children\":\"pages\"}],\" - pages to route to. Read the \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://nextjs.org/docs\",\"children\":\"Next.js documentation\"}],\" for more information.\"]}],[\"$\",\"p\",null,{\"children\":[[\"$\",\"code\",null,{\"children\":\"next.config.js\"}],\" - configuration related to Next.js. You need to adapt the Content Security Policy if you want to load scripts, images etc. from other domains.\"]}],[\"$\",\"h2\",null,{\"className\":\"content-header\",\"id\":\"post\",\"children\":[[\"$\",\"a\",null,{\"className\":\"break-words\",\"href\":\"#post\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"content-header-link\",\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 20 20\",\"className\":\"h-5 linkicon w-5\",\"fill\":\"currentColor\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"}],[\"$\",\"path\",null,{\"d\":\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"}]]}]}]}],\"Post\"]}],[\"$\",\"h3\",null,{\"className\":\"content-header\",\"id\":\"frontmatter\",\"children\":[[\"$\",\"a\",null,{\"className\":\"break-words\",\"href\":\"#frontmatter\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"content-header-link\",\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 20 20\",\"className\":\"h-5 linkicon w-5\",\"fill\":\"currentColor\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"}],[\"$\",\"path\",null,{\"d\":\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"}]]}]}]}],\"Frontmatter\"]}],[\"$\",\"p\",null,{\"children\":[\"Frontmatter follows \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://gohugo.io/content-management/front-matter/\",\"children\":\"Hugo's standards\"}],\".\"]}],[\"$\",\"p\",null,{\"children\":\"Currently 10 fields are supported.\"}],[\"$\",\"$L18\",null,{\"className\":\"language-js\",\"children\":[\"$\",\"code\",null,{\"className\":\"language-js code-highlight\",\"children\":[[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"title\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"required\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"date\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"required\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"tags\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"required\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\" can be empty array\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"lastmod\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"optional\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"draft\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"optional\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"summary\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"optional\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"images\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"optional\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token keyword control-flow\",\"children\":\"if\"}],\" none provided defaults to socialBanner \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"in\"}],\" siteMetadata config\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"authors\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"optional list which should correspond to the file names \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"in\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token template-string\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token string template-punctuation\",\"children\":\"`\"}],[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"data/authors\"}],[\"$\",\"span\",null,{\"className\":\"token string template-punctuation\",\"children\":\"`\"}]]}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token property-access\",\"children\":[\"$\",\"span\",null,{\"className\":\"token maybe-class-name\",\"children\":\"Uses\"}]}],\" \",[\"$\",\"span\",null,{\"className\":\"token template-string\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token string template-punctuation\",\"children\":\"`\"}],[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"default\"}],[\"$\",\"span\",null,{\"className\":\"token string template-punctuation\",\"children\":\"`\"}]]}],\" \",[\"$\",\"span\",null,{\"className\":\"token keyword control-flow\",\"children\":\"if\"}],\" none is specified\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"layout\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"optional list which should correspond to the file names \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"in\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token template-string\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token string template-punctuation\",\"children\":\"`\"}],[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"data/layouts\"}],[\"$\",\"span\",null,{\"className\":\"token string template-punctuation\",\"children\":\"`\"}]]}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"canonicalUrl\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"optional\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\" canonical url \",[\"$\",\"span\",null,{\"className\":\"token keyword control-flow\",\"children\":\"for\"}],\" the post \",[\"$\",\"span\",null,{\"className\":\"token keyword control-flow\",\"children\":\"for\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token constant\",\"children\":\"SEO\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\"\\n\"]}]]}]}],[\"$\",\"p\",null,{\"children\":\"Here's an example of a post's frontmatter:\"}],[\"$\",\"$L18\",null,{\"className\":\"language-js\",\"children\":[\"$\",\"code\",null,{\"className\":\"language-js code-highlight\",\"children\":[[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"--\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"-\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token literal-property property\",\"children\":\"title\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'Introducing Tailwind Nexjs Starter Blog'\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token literal-property property\",\"children\":\"date\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'2021-01-12'\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token literal-property property\",\"children\":\"lastmod\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'2021-01-18'\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token literal-property property\",\"children\":\"tags\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"[\"}],[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'next-js'\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'tailwind'\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'guide'\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"]\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token literal-property property\",\"children\":\"draft\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token boolean\",\"children\":\"false\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token literal-property property\",\"children\":\"summary\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'Looking for a performant, out of the box template, with all the best in web technology to support your blogging needs? Checkout the Tailwind Nextjs Starter Blog template.'\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token literal-property property\",\"children\":\"images\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"[\"}],[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'/static/images/canada/mountains.jpg'\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'/static/images/canada/toronto.jpg'\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"]\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token literal-property property\",\"children\":\"authors\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"[\"}],[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'default'\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"'sparrowhawk'\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"]\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token literal-property property\",\"children\":\"layout\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token maybe-class-name\",\"children\":\"PostLayout\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token literal-property property\",\"children\":\"canonicalUrl\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" https\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"/\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"/\"}],\"tailwind\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"-\"}],\"nextjs\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"-\"}],\"starter\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"-\"}],\"blog\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],[\"$\",\"span\",null,{\"className\":\"token property-access\",\"children\":\"vercel\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],[\"$\",\"span\",null,{\"className\":\"token property-access\",\"children\":\"app\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"/\"}],\"blog\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"/\"}],\"introducing\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"-\"}],\"tailwind\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"-\"}],\"nextjs\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"-\"}],\"starter\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"-\"}],\"blog\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"--\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"-\"}],\"\\n\"]}]]}]}],[\"$\",\"h3\",null,{\"className\":\"content-header\",\"id\":\"compose\",\"children\":[[\"$\",\"a\",null,{\"className\":\"break-words\",\"href\":\"#compose\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"content-header-link\",\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 20 20\",\"className\":\"h-5 linkicon w-5\",\"fill\":\"currentColor\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"}],[\"$\",\"path\",null,{\"d\":\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"}]]}]}]}],\"Compose\"]}],[\"$\",\"p\",null,{\"children\":[\"Run \",[\"$\",\"code\",null,{\"children\":\"node ./scripts/compose.js\"}],\" to bootstrap a new post.\"]}],[\"$\",\"p\",null,{\"children\":\"Follow the interactive prompt to generate a post with pre-filled front matter.\"}],[\"$\",\"h2\",null,{\"className\":\"content-header\",\"id\":\"deploy\",\"children\":[[\"$\",\"a\",null,{\"className\":\"break-words\",\"href\":\"#deploy\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"content-header-link\",\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 20 20\",\"className\":\"h-5 linkicon w-5\",\"fill\":\"currentColor\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"}],[\"$\",\"path\",null,{\"d\":\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"}]]}]}]}],\"Deploy\"]}],[\"$\",\"p\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"Vercel\"}],[\"$\",\"br\",null,{}],\"The easiest way to deploy the template is to use the \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://vercel.com\",\"children\":\"Vercel Platform\"}],\" from the creators of Next.js. Check out the \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://nextjs.org/docs/deployment\",\"children\":\"Next.js deployment documentation\"}],\" for more details.\"]}],[\"$\",\"p\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"Netlify / GitHub Pages / Firebase etc.\"}],[\"$\",\"br\",null,{}],\"As the template uses \",[\"$\",\"code\",null,{\"children\":\"next/image\"}],\" for image optimization, additional configurations have to be made to deploy on other popular static hosting websites like \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://www.netlify.com/\",\"children\":\"Netlify\"}],\" or \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://pages.github.com/\",\"children\":\"GitHub Pages\"}],\". An alternative image optimization provider such as Imgix, Cloudinary or Akamai has to be used. Alternatively, replace the \",[\"$\",\"code\",null,{\"children\":\"next/image\"}],\" component with a standard \",[\"$\",\"code\",null,{\"children\":\"\u003cimg\u003e\"}],\" tag. See \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://nextjs.org/docs/basic-features/image-optimization\",\"children\":[[\"$\",\"code\",null,{\"children\":\"next/image\"}],\" documentation\"]}],\" for more details.\"]}],[\"$\",\"p\",null,{\"children\":\"The API routes used in the newsletter component cannot be used in a static site export. You will need to use a form API endpoint provider and substitute the route in the newsletter component accordingly. Other hosting platforms such as Netlify also offer alternative solutions - please refer to their docs for more information.\"}],[\"$\",\"h2\",null,{\"className\":\"content-header\",\"id\":\"support\",\"children\":[[\"$\",\"a\",null,{\"className\":\"break-words\",\"href\":\"#support\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"content-header-link\",\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 20 20\",\"className\":\"h-5 linkicon w-5\",\"fill\":\"currentColor\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"}],[\"$\",\"path\",null,{\"d\":\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"}]]}]}]}],\"Support\"]}],[\"$\",\"p\",null,{\"children\":[\"Using the template? Support this effort by giving a star on GitHub, sharing your own blog and giving a shoutout on Twitter or be a project \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://github.com/sponsors/timlrx\",\"children\":\"sponsor\"}],\".\"]}],[\"$\",\"h2\",null,{\"className\":\"content-header\",\"id\":\"licence\",\"children\":[[\"$\",\"a\",null,{\"className\":\"break-words\",\"href\":\"#licence\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"content-header-link\",\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 20 20\",\"className\":\"h-5 linkicon w-5\",\"fill\":\"currentColor\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"}],[\"$\",\"path\",null,{\"d\":\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"}]]}]}]}],\"Licence\"]}],[\"$\",\"p\",null,{\"children\":[[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://github.com/timlrx/tailwind-nextjs-starter-blog/blob/main/LICENSE\",\"children\":\"MIT\"}],\" © \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://www.timrlx.com\",\"children\":\"Timothy Lin\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"pt-6 pb-6 text-sm text-gray-700 dark:text-gray-300\",\"children\":[[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"nofollow\",\"href\":\"https://mobile.twitter.com/search?q=https%3A%2F%2Ftailwind-nextjs-starter-blog.vercel.app%2Fblog%2Fintroducing-tailwind-nextjs-starter-blog\",\"children\":\"Discuss on Twitter\"}],\" • \",[\"$\",\"a\",null,{\"className\":\"break-words\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"href\":\"https://github.com/timlrx/tailwind-nextjs-starter-blog/blob/main/data/blog/introducing-tailwind-nextjs-starter-blog.mdx\",\"children\":\"View on GitHub\"}]]}],[\"$\",\"div\",null,{\"className\":\"pt-6 pb-6 text-center text-gray-700 dark:text-gray-300\",\"id\":\"comment\",\"children\":[\"$\",\"$L19\",null,{\"slug\":\"introducing-tailwind-nextjs-starter-blog\"}]}]]}],[\"$\",\"footer\",null,{\"children\":[[\"$\",\"div\",null,{\"className\":\"divide-gray-200 text-sm leading-5 font-medium xl:col-start-1 xl:row-start-2 xl:divide-y dark:divide-gray-700\",\"children\":[[\"$\",\"div\",null,{\"className\":\"py-4 xl:py-8\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"text-xs tracking-wide text-gray-500 uppercase dark:text-gray-400\",\"children\":\"Tags\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-wrap\",\"children\":[[\"$\",\"$L5\",\"next-js\",{\"href\":\"/tags/next-js\",\"className\":\"text-primary-500 hover:text-primary-600 dark:hover:text-primary-400 mr-3 text-sm font-medium uppercase\",\"children\":\"next-js\"}],[\"$\",\"$L5\",\"tailwind\",{\"href\":\"/tags/tailwind\",\"className\":\"text-primary-500 hover:text-primary-600 dark:hover:text-primary-400 mr-3 text-sm font-medium uppercase\",\"children\":\"tailwind\"}],[\"$\",\"$L5\",\"guide\",{\"href\":\"/tags/guide\",\"className\":\"text-primary-500 hover:text-primary-600 dark:hover:text-primary-400 mr-3 text-sm font-medium uppercase\",\"children\":\"guide\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"flex justify-between py-4 xl:block xl:space-y-8 xl:py-8\",\"children\":[[\"$\",\"div\",null,{\"children\":[[\"$\",\"h2\",null,{\"className\":\"text-xs tracking-wide text-gray-500 uppercase dark:text-gray-400\",\"children\":\"Previous Article\"}],[\"$\",\"div\",null,{\"className\":\"text-primary-500 hover:text-primary-600 dark:hover:text-primary-400\",\"children\":[\"$\",\"$L5\",null,{\"className\":\"break-words\",\"href\":\"/blog/deriving-ols-estimator\",\"children\":\"Deriving the OLS Estimator\"}]}]]}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"h2\",null,{\"className\":\"text-xs tracking-wide text-gray-500 uppercase dark:text-gray-400\",\"children\":\"Next Article\"}],[\"$\",\"div\",null,{\"className\":\"text-primary-500 hover:text-primary-600 dark:hover:text-primary-400\",\"children\":[\"$\",\"$L5\",null,{\"className\":\"break-words\",\"href\":\"/blog/nested-route/introducing-multi-part-posts-with-nested-routing\",\"children\":\"Introducing Multi-part Posts with Nested Routing\"}]}]]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"pt-4 xl:pt-8\",\"children\":[\"$\",\"$L5\",null,{\"className\":\"text-primary-500 hover:text-primary-600 dark:hover:text-primary-400\",\"href\":\"/blog\",\"aria-label\":\"Back to the blog\",\"children\":\"← Back to the blog\"}]}]]}]]}]]}]}]]}]]\n"])</script><script>self.__next_f.push([1,"12:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\nf:null\n"])</script><script>self.__next_f.push([1,"10:null\n"])</script><script>self.__next_f.push([1,"14:[[\"$\",\"title\",\"0\",{\"children\":\"Introducing Tailwind Nextjs Starter Blog | Next.js Starter Blog\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Looking for a performant, out of the box template, with all the best in web technology to support your blogging needs? Checkout the Tailwind Nextjs Starter Blog template.\"}],[\"$\",\"meta\",\"2\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"meta\",\"3\",{\"name\":\"googlebot\",\"content\":\"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1\"}],[\"$\",\"link\",\"4\",{\"rel\":\"canonical\",\"href\":\"https://tailwind-nextjs-starter-blog.vercel.app/blog/introducing-tailwind-nextjs-starter-blog\"}],[\"$\",\"link\",\"5\",{\"rel\":\"alternate\",\"type\":\"application/rss+xml\",\"href\":\"https://tailwind-nextjs-starter-blog.vercel.app/feed.xml\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:title\",\"content\":\"Introducing Tailwind Nextjs Starter Blog\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:description\",\"content\":\"Looking for a performant, out of the box template, with all the best in web technology to support your blogging needs? Checkout the Tailwind Nextjs Starter Blog template.\"}],[\"$\",\"meta\",\"8\",{\"property\":\"og:url\",\"content\":\"https://tailwind-nextjs-starter-blog.vercel.app/blog/introducing-tailwind-nextjs-starter-blog\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:site_name\",\"content\":\"Next.js Starter Blog\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:locale\",\"content\":\"en_US\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:image\",\"content\":\"https://tailwind-nextjs-starter-blog.vercel.app/static/images/canada/mountains.jpg\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:image\",\"content\":\"https://tailwind-nextjs-starter-blog.vercel.app/static/images/canada/toronto.jpg\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"14\",{\"property\":\"article:published_time\",\"content\":\"2021-01-12T00:00:00.000Z\"}],[\"$\",\"meta\",\"15\",{\"property\":\"article:modified_time\",\"content\":\"2024-08-16T00:00:00.000Z\"}],[\"$\",\"meta\",\"16\",{\"property\":\"article:author\",\"content\":\"Tails Azimuth\"}],[\"$\",\"meta\",\"17\",{\"property\":\"article:author\",\"content\":\"Sparrow Hawk\"}],[\"$\",\"meta\",\"18\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"19\",{\"name\":\"twitter:title\",\"content\":\"Introducing Tailwind Nextjs Starter Blog\"}],[\"$\",\"meta\",\"20\",{\"name\":\"twitter:description\",\"content\":\"Looking for a performant, out of the box template, with all the best in web technology to support your blogging needs? Checkout the Tailwind Nextjs Starter Blog template.\"}],[\"$\",\"meta\",\"21\",{\"name\":\"twitter:image\",\"content\":\"https://tailwind-nextjs-starter-blog.vercel.app/static/images/canada/mountains.jpg\"}],[\"$\",\"meta\",\"22\",{\"name\":\"twitter:image\",\"content\":\"https://tailwind-nextjs-starter-blog.vercel.app/static/images/canada/toronto.jpg\"}]]\n"])</script></body></html>
Reference in New Issue View Git Blame Copy Permalink