docs: add UnoCSS and Tailwind integration guide

AndreyYolkin · AndreyYolkin · commit f231cef4585f · 2026-03-12T23:08:30.000+01:00
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -121,6 +121,7 @@ export default withPwa(defineConfig({
           { text: 'Common Setup', link: '/guide/styling/common-setup' },
           { text: 'SASS Customization', link: '/guide/styling/sass' },
           { text: 'Experimental Cache', link: '/guide/styling/caching' },
+          { text: 'UnoCSS and Tailwind', link: '/guide/styling/other-frameworks' },
         ],
       },
       {
diff --git a/docs/guide/styling/other-frameworks.md b/docs/guide/styling/other-frameworks.md
@@ -0,0 +1,24 @@
+# Other Frameworks
+
+Integrating Vuetify with utility-first CSS frameworks like Tailwind CSS or UnoCSS can significantly reduce your bundle size and provide a more flexible styling system. This approach allows you to leverage the best of both worlds: Vuetify's comprehensive component library and the modern, utility-first styling capabilities of other frameworks.
+
+## New Project
+
+The easiest way to start a new project with Vuetify and a CSS utility framework is to use the official scaffolding tool.
+
+```bash
+pnpm create vuetify --platform nuxt
+# or
+npm create vuetify --platform nuxt
+# or
+yarn create vuetify --platform nuxt
+```
+
+During the setup process, you can select **Nuxt** as the preset and then choose **UnoCSS** or **Tailwind CSS** as an optional module. This will automatically configure the project with the selected framework.
+
+## Integration Guides
+
+For detailed instructions and best practices on integrating Vuetify with existing projects or new setups, please refer to the following official resources:
+
+- [CSS Utilities - Integration with existing projects](https://vuetifyjs.com/en/features/css-utilities/overview/#integration-with-existing-projects)
+- [Build with Nuxt and UnoCSS](https://vuetifyjs.com/en/blog/building-with-nuxt-and-unocss/)

Original file line number	Diff line number	Diff line change
`@@ -121,6 +121,7 @@ export default withPwa(defineConfig({`
`121`	`121`	`{ text: 'Common Setup', link: '/guide/styling/common-setup' },`
`122`	`122`	`{ text: 'SASS Customization', link: '/guide/styling/sass' },`
`123`	`123`	`{ text: 'Experimental Cache', link: '/guide/styling/caching' },`
	`124`	`+ { text: 'UnoCSS and Tailwind', link: '/guide/styling/other-frameworks' },`
`124`	`125`	`],`
`125`	`126`	`},`
`126`	`127`	`{`