Skip to main content

Build landing page using TailwindUI and Next.js

· 4 min read
at15
at15
Software Engineer

My tennis coach wants a landing page for his company, I 'built' one using TailwindUi and Next.js in one day.

Why TailwindUI​

Last time I wrote a website outside work I was still using BootStrap with Angular1. Most companies I worked for have internal frameworks and design systems so there is not much to think about. For my blog site I just used docsaursus and it ships with its own UI framework Infima. For a landing page I need something fancy like all the cool kids.

I heard about tailwindcss a lot, google around and found their paid product TailwindUI. For me, I want a template with a lot of built-in components, I don't want to learn how to build my own design systems from scratch. The price (after tax) is about $400 CAD, which is not cheap. But considering the time I saved from searching free alternative and build equivalent components on my own. I feel spend the money is better than pounding my head on the wall for a week and giving up with a unfinished website.

Why Next.js​

I actually never used Next.js before, I tried gatsby and docusaurus for my blog site. The main reason is TailwindUI offers template using Next.js. All I want is copy and paste, plus there is support for Next.js in cloudflare pages, so I don't need to learn Vercel and deploy things in two places.

The building process​

Or we should call it the copy and paste process...

  • First buy the product, I chose all access. I feel they just price the individual component/templates in a way that make you want to buy the all access version.

Read the doc​

  • The official doc doesn't say much, just what you should install via npm install, fonts etc.
  • Each template offers a zip download, which provides javascript and typescript version. I choose typescript.
  • Each component offers the code to copy and paste, though it is not full code. While there are multiple items in previews, code snippet only have one item data and a for loop.

Init new project​

I plan to deploy using cloudflare pages, so I created initial Next.js project. See Connect GitHub repo to Cloudflare Pages If you are using Vercel, you should be able to use the template directly by pushing it to a github repo and configuring Vercel accordingly.

Copy the template​

First run my empty Next.js project and the template project side by side.

Set different port in package.json

{
  "scripts": {
    "dev": "next dev -p 4020",
    "build": "next build",
    "start": "next start -p 4020",
    ",,,": "...."
  }
}

The missing dependencies in pages

  • tailwindcss@latest, cloudflare uses 3.3
  • @tailwindcss/forms to reset form styles
  • @headlessui/react
  • @headlessui/tailwindcss
  • clsx for construct className

Cloudflare also have api for workers (edge function), but I am not using it right now, so I will keep the existing hello world.

Then copy everything to the src folder, you should see everything in the template working in you cloudflare created repo.

Copy components​

For example, I want the team section on the landing page.

Update title and meta​

Add a new page​

Deploy​

Git push.

Conclusion​

In the end it took 3 hours to have the MVP going live. If I were still back at school, I would definitely pick some free UI toolkits, build the layout and components step by step for a week. After working for a couple of years and gave up on multiple side projects. I feel delivery is more important, if myself and users cannot see a viable product in a reasonable time. We all gave up... The timely positive feedback matters. The mindset of building something is different from learning for fun. When building a product, focus should be on the unique part of the project, this applies both to product itself and its tech stack.