Qwind

Qwind is a free, open-source website template from onWidget that combines the Qwik framework with Tailwind CSS to produce fast, static sites with a built-in markdown blog.

What is Qwind?

Qwind is a project starter that pairs Qwik with QwikCity (Qwik's routing layer) and Tailwind CSS. It takes source files — components, routes, markdown posts, and a site configuration file — and builds them into a production-ready static site in the dist folder. The template is authored by onWidget, distributed under the MIT license, and maintained by a community of contributors.

Key Features

• Tailwind CSS with dark mode — the template integrates Tailwind and supports dark mode out of the box.
• Production-ready performance — the README reports Lighthouse and PageSpeed Insights scores are production-ready, and the template includes image and font optimization to support that goal.
• QwikCity routing — directory-based routing with index.tsx pages, layout.tsx layouts, and index.ts endpoints, so pages are added by creating files in src/routes.
• Markdown blog — blog posts live in src/content/blog as .md files, and the template includes blog routes and components for listing and displaying posts.
• Central site config — src/config.mjs controls the site name, origin URL, base pathname, and trailing-slash behavior, making deployment to GitHub Pages or a custom domain straightforward.
• One-click deploys — the README includes deploy buttons for Netlify and Vercel, plus a static build that works on Cloudflare Pages (the live demo runs at qwind.pages.dev).
• Component structure — the template organizes code into atoms, core, icons, and widgets, with ready-made widgets like Hero and Features.

Who is it for?

• Developers starting with Qwik — use the template as a foundation to learn the project structure and build features without configuring tooling from scratch.
• Static-site creators — publish a landing page and blog with no server, since the build outputs plain HTML, CSS, and JS in dist.
• Designers and agencies — customize the Tailwind styles and component widgets to produce a branded website quickly, with a single config file for site-wide details.

What can you do with Qwind?

• Launch a marketing site — use the included Hero and Features widgets to assemble a landing page, then customize the content and Tailwind classes to match your brand.
• Publish a blog — add markdown files to src/content/blog and the existing routing and list pages display them without extra setup.
• Deploy almost anywhere — run npm run build to generate the dist folder and upload it to Netlify, Vercel, Cloudflare Pages, or any static host. The live demo at qwind.pages.dev shows the default landing page and blog in action.

How does Qwind work?

Getting started is a three-command flow: npm install installs dependencies, npm run dev starts a local server at 127.0.0.1:5173, and npm run build creates a production build in ./dist for deployment. The template also provides helper commands like npm run fmt for Prettier formatting, npm run lint for ESLint, and npm run qwik to access Qwik CLI features.

Pricing

Qwind is free and open source under the MIT license, with no paid tiers or premium features mentioned in the README.

Alternatives

• Astrowind — a similar starter template from the same author, but built on Astro instead of Qwik.
• TailNext — another Tailwind-based starter referenced in the project's topics, focused on Next.js.

FAQ

Is Qwind free?

Yes, Qwind is completely free and open source. It is released under the MIT license, so you can use it for personal and commercial projects, modify it, and even redistribute it.

What does Qwind produce?

Running the build command creates a static site in the dist folder. Because it is static, the output can be hosted on any web server or CDN without needing a Node.js runtime.

Does Qwind include a blog?

Yes, Qwind includes a markdown blog. Blog posts are stored as .md files in src/content/blog, and the template provides routes and components to display them automatically.

How do I deploy Qwind?

The README offers one-click deploy buttons for Netlify and Vercel, and the generic npm run build output can be deployed to any static hosting service. The configuration file lets you set a base pathname for subfolder deployments.

What is the difference between Qwind and Astrowind?

Both are templates by onWidget with similar design and features, but Qwind is built on Qwik and QwikCity, while Astrowind uses Astro. Choose based on which framework you prefer for your project.