Integrating Vuetify v4 with TailwindCSS v4 in a Vite project

This post was originally posted on the official Vuetify blog This time we will go through the steps to pair Vuetify v4 with TailwindCSS v4 on a plain Vite setup with both running as Vite plugins. Vuetify v4 ships with CSS layers enabled by default, which makes integrating TailwindCSS significantly smoother than before. We will go through the following steps: Scaffold a starter project and wire up TailwindCSS Restore rounded-* utilities Customize fonts Discuss strategy for theme colors management Ensure Vuetify's light/dark themes work with TailwindCSS light:* and dark:* prefixes Align breakpoints configuration Disclaimer : Since Vuetify v4.0.1 you can follow roughly the same steps with Nuxt. The manual configuration is fully documented, but you can also skip right into the working project by using @vuetify/cli (the init command). Table of Contents Scaffold and install TailwindCSS Create the project Add TailwindCSS v4 via the Vite plugin Disable Vuetify utilities Migrate HelloWorld.vue