How to Install Tailwind CSS in Nuxt | Full-Stack Web Dev #5
3This is Episode #5 of my Nuxt Full-Stack Web Development series.
In this video, I’ll show you how to install and configure Tailwind CSS in a Nuxt 3 project. Tailwind gives us a utility-first approach to styling that makes it fast and easy to build clean, responsive designs. We’ll walk through setting up Tailwind, connecting it to our Nuxt project, and confirming that it works by adding some basic styles.
What’s covered in this video:
Installing Tailwind CSS in Nuxt
Configuring Tailwind with nuxt.config.ts
Using Tailwind utility classes in components
Verifying everything works with a quick styling test
Subscribe to follow along with the full series as we continue building this project step by step.
00:00 Intro & Recap of Episode 4
00:12 What is Tailwind CSS?
00:33 Stopping the Dev Server
00:47 Installing Tailwind CSS and Tailwind/Vite
01:00 Updating nuxt.config.ts (Vite Plugins)
01:25 Injecting Tailwind into main.css
01:39 Restarting Dev Server & Testing Setup
01:47 Applying Tailwind Utility Classes (text, font)
01:56 Using @apply in CSS with Tailwind
02:12 Styling Background and Text with Tailwind
02:20 Tailwind Setup Complete
02:26 Wrap-Up & Next Steps