Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/onwidget/qwind

⭕️ Qwind: A template to make your website using Qwik + Tailwind CSS.
https://github.com/onwidget/qwind

astrowind javascript landing-page qwik qwik-city qwik-framework qwik-starter qwind static-site static-site-generator tailnext tailwind tailwind-css-template tailwindcss template theme

Last synced: 2 months ago
JSON representation

⭕️ Qwind: A template to make your website using Qwik + Tailwind CSS.

Awesome Lists containing this project

README 

        
# 💠 Qwind



**Qwind** is a free and open-source template to make your website using **[Qwik](https://qwik.builder.io/) + [Tailwind CSS](https://tailwindcss.com/)**. Ready to start a new project and designed taking into account best practices.



## Features



- ✅ Integration with **Tailwind CSS** supporting **Dark mode**.

- ✅ **Production-ready** scores in [Lighthouse](https://web.dev/measure/) and [PageSpeed Insights](https://pagespeed.web.dev/) reports.

- ✅ **Image optimization** and **Font optimization**.







Qwind Theme Screenshot



[![onWidget](https://custom-icon-badges.demolab.com/badge/made%20by%20-onWidget-556bf2?style=flat-square&logo=onwidget&logoColor=white&labelColor=101827)](https://onwidget.com)

[![License](https://img.shields.io/github/license/onwidget/qwind?style=flat-square&color=dddddd&labelColor=000000)](https://github.com/onwidget/qwind/blob/main/LICENSE.md)

[![Maintained](https://img.shields.io/badge/maintained%3F-yes-brightgreen.svg?style=flat-square)](https://github.com/onwidget)

[![Contributions Welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat-square)](https://github.com/onwidget/qwind#contributing)

[![Known Vulnerabilities](https://snyk.io/test/github/onwidget/qwind/badge.svg?style=flat-square)](https://snyk.io/test/github/onwidget/qwind)







Table of Contents



- [Demo](#demo)

- [Getting started](#getting-started)

  - [Project structure](#project-structure)

  - [Commands](#commands)

  - [Configuration](#configuration)

  - [Deploy](#deploy)

- [Roadmap](#roadmap)

- [Contributing](#contributing)

- [Acknowledgements](#acknowledgements)

- [License](#license)







## Demo



📌 [https://qwind.pages.dev/](https://qwind.pages.dev/)







## Getting started



This project is using Qwik with [QwikCity](https://qwik.builder.io/qwikcity/overview/). QwikCity is just a extra set of tools on top of Qwik to make it easier to build a full site, including directory-based routing, layouts, and more.



### Project structure



Inside **Qwind** template, you'll see the following folders and files:



```

/

├── adaptors/

|   └── static/

|       └── vite.config.ts

├── public/

│   ├── favicon.svg

│   ├── manifest.json

│   └── robots.txt

├── src/

│   ├── assets/

│   │   ├── images/

|   |   └── styles/

|   |       └── global.css

│   ├── components/

│   │   ├── atoms/

│   │   ├── core/

│   │   ├── icons/

|   |   └── widgets/

|   |       ├── Hero.tsx

|   |       ├── Features.tsx

|   |       └── ...

│   ├── content/

│   |   └── blog/

│   |       ├── post-slug-1.md

│   |       ├── post-slug-2.md

│   |       └── ...

│   ├── routes/

│   |   ├── blog/

│   |   ├── index.tsx

|   |   ├── layout.tsx

|   |   ├-- service-worker.ts

│   |   └-- ...

│   ├── config.mjs

│   ├── entry.dev.tsx

│   ├── entry.preview.tsx

│   ├── entry.ssr.tsx

│   └── root.tsx

├── package.json

└── ...

```



- `src/routes`: Provides the directory based routing, which can include a hierarchy of `layout.tsx` layout files, and an `index.tsx` file as the page. Additionally, `index.ts` files are endpoints. Please see the [routing docs](https://qwik.builder.io/qwikcity/routing/overview/) for more info.



- `src/components`: Recommended directory for components.



- `public`: Any static assets, like images, can be placed in the public directory. Please see the [Vite public directory](https://vitejs.dev/guide/assets.html#the-public-directory) for more info.



[![Edit Qwind on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/onwidget/qwind/tree/main)



> **Seasoned qwik expert?** Delete this file. Update `config.mjs` and contents. Have fun!







### Commands



All commands are run from the root of the project, from a terminal:



| Command            | Action                                         |

| :----------------- | :--------------------------------------------- |

| `npm install`      | Installs dependencies                          |

| `npm run dev`      | Starts local dev server at `127.0.0.1:5173/`   |

| `npm run build`    | Build your production site to `./dist/`        |

| `npm run preview`  | Preview your build locally, before deploying   |

| `npm run fmt`      | Format codes with Prettier                     |

| `npm run lint`     | Run Eslint                                     |

| `npm run qwik ...` | Run CLI commands like `qwik add`, `qwik build` |







### Configuration



Basic configuration file: `./src/config.mjs`



```javascript

export const SITE = {

  name: "Example",



  origin: "https://example.com",

  basePathname: "/", // Change this if you need to deploy to Github Pages, for example

  trailingSlash: true, // Generate permalinks with or without "/" at the end

};

```







### Deploy



#### Deploy to production (manual)



You can create an optimized production build with:



```shell

npm run build

```



Now, your website is ready to be deployed. All generated files are located at

`dist` folder, which you can deploy the folder to any hosting service you

prefer.



#### Deploy to Netlify



Clone this repository on own GitHub account and deploy to Netlify:



[![Netlify Deploy button](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/onwidget/qwind)



#### Deploy to Vercel



Clone this repository on own GitHub account and deploy to Vercel:



[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fonwidget%2Fqwind)







## Roadmap



### Base



- [ ] Create utilities to generate permalinks tailored to the domain and base pathname.

- [ ] Simplify the way to optimize images.

- [ ] Create component to make SEO simpler and more intuitive.

- [ ] Create configurable blog with categories, tags and authors using MDX.

- [ ] Add more frequently used pages (Portfolio, Services, Contact, Docs ...).

- [ ] Find or create a library to have more icon sources available.

- [ ] Refactor some code that doesn't follow Qwik conventions yet.



### Advanced



- [ ] Achieve perfect 100% Google Page Speed score.

- [ ] Insert complex javascript example widget on home page to demonstrate Qwik features.

- [ ] Create small illustrative admin backend.







## Contributing



If you have any idea, suggestions or find any bugs, feel free to open a discussion, an issue or create a pull request.

That would be very useful for all of us and we would be happy to listen and take action.



## Acknowledgements



Initially created by [onWidget](https://onwidget.com) and maintained by a community of [contributors](https://github.com/onwidget/qwind/graphs/contributors).



## License



**Qwind** is licensed under the MIT license — see the [LICENSE](https://github.com/onwidget/qwind/blob/main/LICENSE.md) file for details.