Windows 11 in Nuxt 3 + Tailwind CSS

This is an open-source project made in the hope to replicate the Windows 11 desktop experience on the web using standard web technologies like Nuxt.js, SCSS, Tailwind CSS.

Notice

This project is not in any way affiliated with Microsoft and should not be confused with Microsoft’s Operating System or Products. This is not a Windows 365 cloud PC.

Documentation: Coming soon...

This project is still a work in progress.

Live Experience🌈: os-windows11.vercel.app

Translation

Coming soon...

Gallery

Why

Since this is a complex project it will be a valuable source for a lot of developers out there

Features

Check here

📑 If you have your own idea submit it here

Stack

• Framework - Nuxt 3 + Pinia
• Component/UI Library - None
• Styling Solution - SCSS and CSS Modules (Tailwind CSS).
• Icons - nuxt-icon

FAQ

• Is this the full operating system?
  • No, This is not an entire operating system, and It is also not affiliated with Microsoft in any way.
• How long did it take?
  • I started with this project around 1 week ago
• Did you use any UI/Library?
  • No.
• Can I contribute?
  • Yes, you can! Open an issue, create a pull request, head over to discussions, or join the Discord.
• Where did you get the inspiration from, if you have?
  • To be honest, since I am a fan of Windows 11 I came to the random idea to recreate it in the browser

🌟 Star this project

Click here to ⭐️ a project

---

Contributors

Known Issues

• Blur not working in the Firefox browser.

Solution:

1. Open about:config in your firefox browser.
2. Search for layout.css.backdrop-filter.enabled and set it to true.

License

⚖️ CC0-1.0 License

Sharing

Although our license does allow for this project to be reposted, modified and shared without permission from us, we do kindly ask that credits are given to the original GitHub page and the os-windows11 repo when reposting the project publicly.

---

Development

Website preview URL

If you are interested in Nuxt.js visit Nuxt 3 documentation to learn more.

If you are interested in Tailwind visit TailwindCSS documentation to learn more.

Setup

Make sure to install the dependencies:

# npm
npm install

Development Server

Start the development server on http://localhost:3000

npm run dev

Production

Build the application for production:

npm run build

Locally preview production build:

npm run preview

Check out the deployment documentation for more information.