Nuxt3: how to use tailwindcss

Question

Very first try on Nuxt3 via Nuxt3 Starter

I wonder how can I use tailwindcss in Nuxt3 Starter manually.

(Not via @nuxtjs/tailwindcss , because it's for Nuxt2, and not work with Nuxt3.)

I created a blank Nuxt3 project by

npx degit "nuxt/starter#v3" my-nuxt3-project

then, I installed the tailwindcss manually

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

nuxt.config.ts

export default {
    css: [
        '~/assets/tailwind.css',
    ]
}

assets/tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

but I can only get the raw code but not the compiled css:

How can I use tailwindcss in Nuxt3?

Any help is greatly appreciated!

---

online mini demo

Answer 1

Using Windi CSS is great and I'm giving it a try myself, but it's only compatible with the version 2 of Tailwind CSS, and not with the new version 3. So, if you want to use Tailwind CSS v3 and it's new features within your Nuxt3 project, you can follow the instructions provided in the answer to this question.

Answer 2

If you want to use Tailwind with Nuxt 3, you can use Windi CSS or you can follow the instructions in this video if you want to use the actual Tailwind. I would still recommend Windi CSS as it uses the same syntax as Tailwind CSS and works great with Nuxt 3, plus has a few unique features (such as the WindiCSS Analyzer). Also, Nuxt specifically sponsors the project, and it's a lot faster. Or, if you are unsatisfied with both, you could also try UnoCSS which is even faster than Windi and Tailwind (it is, however, still in beta).

You can check out the benchmarks of each CSS type here.

Answer 3

1. yarn add postcss && tailwindcss

2. Add tailwind.config.js to your directory.

3. Update your nuxt.config.ts with:

   css: ['~/assets/styles/tailwind.css'],
   build: {
       postcss: {
           postcssOptions: {
               plugins: {
                   tailwindcss: {},
                   autoprefixer: {}
               }
           }
       }
   },
   

4. Create tailwind.css in styles and add:

   @import 'tailwindcss/base';
   @import 'tailwindcss/components';
   @import 'tailwindcss/utilities';
   

5. yarn dev

Answer 4

Maybe your problem is because you need a tailwindcss.config.js.

For this, simply type in the console:

yarn run tailwindcss init