Installing Tailwind CSS version 4 is a streamlined process over version 3. First, we need to install the official Tailwind CSS library, along with the official Tailwind CSS Vite plugin. config, we should import the plugin and register it in the plugins array. css file, we can include all the styles with a single import.
Perfect. Now everything's good to go, and we can use Tailwind's utility classes. If you would like to install Tailwind CSS version 4 in a Nuxt project, the process is extremely similar. Once again, we'll install the Tailwind CSS core library along with the Vite plugin.
config file in order to target the Vite configuration, and then register the plugin there. Lastly, we could create a dedicated CSS file and register it inside of NuxtConfig. View, add in a new non-scoped style section, and import TOEN CSS here, as it applies to every page in your app. There you have it.
TOEN is ready to go. Just a final reminder, as you watch the rest of the course, Do remember that it was originally made for Tailwind v3, but we have made updates along the way to help accommodate those watching and using Tailwind v4.