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.
os-windows11.vercel.app
Live Experience🌈: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
📑 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:
- Open
about:config
in your firefox browser. - Search for
layout.css.backdrop-filter.enabled
and set it totrue
.
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
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.