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.

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...

Coming soon...

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

Check here

📑 If you have your own idea submit it here

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

• 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

• Blur not working in the Firefox browser.

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

⚖️ CC0-1.0 License

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.

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.

Make sure to install the dependencies:

# npm
npm install

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

npm run dev

Build the application for production:

npm run build

Locally preview production build:

npm run preview

Check out the deployment documentation for more information.