Nuxt 3 + Tailwind CSS 3 Starter: How to add Tailwind CSS v3 to your Nuxt 3 application

In this tutorial, you will learn how to build a new Nuxt 3 application and use Tailwind CSS v3 in it. Once you have everything installed correctly you will learn how to build out a simple template using Vue 3 and Tailwind v3. You will also learn how to use Tailwind UI in your Nuxt 3 application.

🔗Resources & Links mentioned in this video:

👋🏻Connect with me:

[soliduscode]

great video Dan. I am a veteran of nuxt 2 and starting a development of a startup using nuxt 3.0. This video was helpful. Thank you

[adeleke]

this saved me hours of being frustrated, thank you very much

[arescatalin]

Thanks. this should be added into the docs

[didefix]

Unfortunately, I always get an error after I create the components folder. After I copied a file into assets I also got an error.
Do I have to pay attention to something when creating folders such as middleware, components, etc. that nuxt uses?

[ismailonly]

Thank.
In my nuxt.config.ts postcss already has a defined type. Therefore I am unable to add the 'plugins' attribute to it.

[cheryljones]

Thanks for spending the time to do this. For some reason, I cannot get tailwind to update properly. In order for any changes to take place, I have to restart the server. Do you have any ideas why this might be happening?

[ExtraServingsBTS]

Please see Alex Gulko's comment. You'll get errors if you don't remove line 7 of tailwind.config.js - must have changed since the video was created.

[pi-dev]

Not sure what has changed but I tried cloning the repo (even after removing the defineNuxtConfig import in nuxt.config.ts) but the dev server can't start because nuxt isn't found. That's a pity.

[PickledEngineer]

If you are experiencing issues when generating a build, uncomment "./nuxt.config.{js, ts}", in tailwind config