{
  "id": 1200503,
  "title": "How I build a Next.js Tailwind marketing site in hours, not days",
  "url": "https://urgent.news/2026/08/16/how-i-build-a-next-js-tailwind-marketing-site-in-hours-not-days",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-08-16T04:58:24.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/nayankyada/how-i-build-a-nextjs-tailwind-marketing-site-in-hours-not-days-4pk2"
  },
  "original_language": "en",
  "account": "Building a Next.js Tailwind marketing site quickly is achievable with the right setup. This specific workflow, applied to client projects, includes design tokens as CSS custom properties, a small component library with clear conventions, and a page-building process that makes decisions affordable. Tailwind CSS v4's shift from tailwind.config.js to a single CSS file simplifies the process, as design tokens remain in one place accessible by the browser, Figma plugins, and the CMS preview.\n\nThe token file, located at app/globals.css, initializes with Tailwind CSS import and defines key design tokens, such as colors, fonts, spacing, and card radius. These utilities can be applied directly via Tailwind classes like bg-brand-500 or text-brand-600. When needed, CSS variables like var(--color-brand-500) can be used in edge cases.\n\nTo set up a Next.js project following this workflow, use create-next-app with --turbopack and other relevant flags. The default boilerplate pages are skipped, and the layout (app/layout.tsx) imports Inter font and sets up the @theme block. Turbopack ensures sub-200 ms hot module replacement (HMR) on component edits, which is crucial for rapid iteration on section layouts.\n\nFont loading is handled next, as it impacts Cumulative Layout Shift (CLS) during the initial render. Inter font is loaded using next/font/google and exposed as a CSS variable for Tailwind to recognize. The project uses component conventions where section components accept a className prop for layout overrides and own their padding via a Section wrapper. This wrapper applies the section spacing token, ensuring individual blocks maintain a consistent vertical rhythm without hardcoding. The Section wrapper is straightforward, accepting children, className, and an optional tag to replace the default section element. With these conventions in place, the build sequence for a new marketing page is streamlined: layout in one file, extracting content into section components, and wiring images with next/image for optimal performance.",
  "summary": "Getting a marketing page from blank canvas to production-ready in a single working day is repeatable once you have the right setup. This is the exact Next.js Tailwind workflow I use across client projects — design tokens as CSS custom properties, a small component library with firm conventions, and a page-building sequence that keeps decisions cheap. Why Tailwind v4 + CSS variables is the right…",
  "key_points": [
    "Setup Next.js with Turbopack for fast HMR",
    "Use design tokens in app/globals.css for consistent styling",
    "Streamline page build with component conventions and next/image"
  ],
  "editors_take": "This workflow for building Next.js Tailwind marketing sites streamlines development by centralizing design tokens, leveraging a small component library, and simplifying page building, allowing for rapid iteration and consistent design.",
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}