Tailnext is a free, open-source Next.js and Tailwind CSS website template from onWidget that ships with a blog, dark mode, and production-ready performance optimizations.
What is Tailnext?
Tailnext is a free and open-source template for building websites with Next.js 14 (App Router) and Tailwind CSS, created by onWidget. It takes configuration from a config.mjs file and blog posts written in Markdown under src/content/blog/, and generates a complete website with a sitemap and robots.txt. The template runs on any Node.js environment and is ready to deploy to Vercel or Netlify.
What makes Tailnext stand out?
- Next.js 14 App Router — The project uses the modern
app/directory structure withlayout.js,page.js, and a dynamic[slug]route for blog posts. - Tailwind CSS with dark mode — Styling is utility-first via Tailwind CSS, and dark mode is supported out of the box.
- Production-ready scores — The template reports production-ready scores in Lighthouse and PageSpeed Insights.
- Image and font optimization — Next.js's built-in image optimization and font optimization are integrated.
- SEO-friendly blog — Blog content is authored in Markdown files under
src/content/blog/and rendered as static pages with clean URLs. - Sitemap and robots.txt generation — The build generates a project sitemap and robots.txt based on your routes.
- Storybook integration — Includes
.storybook/andsrc/stories/so you can develop and document UI widgets in isolation. - One-click deployment — Provides deploy buttons for Netlify and Vercel, plus a CodeSandbox editor link.
Who should use Tailnext?
- Developers starting a new Next.js project — Clone the repo, run
npm installandnpm run dev, and you have a modern project structure with best practices already configured. - Bloggers and content creators — Use the built-in Markdown blog to publish posts without setting up a CMS or database.
- Agencies and freelancers — Use the template as a base for client websites that need strong SEO and performance from the start.
What can you do with Tailnext?
- Launch a landing page or company site — Edit
src/config.mjsto set site metadata and navigation, then deploy to Vercel or Netlify in a few clicks. - Publish a blog — Add Markdown files to
src/content/blog/, and they automatically appear under /blog with SEO-friendly URLs. - Build and document UI components — Use Storybook to develop widgets in isolation and keep a living style guide.
How does Tailnext work?
Clone the repository with git clone https://github.com/onwidget/tailnext.git, install dependencies with npm install, and run npm run dev to view the site at localhost:3000. Customize the site through src/config.mjs and add blog posts as Markdown files. When you are ready, npm run build creates an optimized production build in ./dist/.
FAQ
Is Tailnext free?
Yes, Tailnext is free and open-source, released under the MIT license. You can use it for personal or commercial projects without paying a fee.
What kind of blog does Tailnext include?
Tailnext includes a fast, SEO-friendly blog. Posts are written as Markdown files in src/content/blog/, and the template generates static pages from them with sitemap support.
How do I deploy Tailnext?
You can build the site with npm run build and deploy the generated files to any hosting service. Netlify and Vercel one-click deploy buttons are also included in the README.
