Nuxt3: how to use tailwindcss

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

---

update:

@nuxtjs/tailwindcss is already supported in Nuxt3

basic example

Since accepted answer can mislead, as if Tailwind is not supported on Nuxt 3, here is what you need to do to make it work:

1. Install dependancies by running npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

2. Run npx tailwindcss init to create tailwind.config.js file

3. Configure nuxt.config.js build settings to run postcss while building:

   build: {
           postcss: {
               postcssOptions: {
                   plugins: {
                       tailwindcss: {},
                       autoprefixer: {},
                   },
               },
           },
   }
   
   

also configure your tailwind.css file location inside nuxt.config.js by adding:

css: ["~/assets/css/tailwind.css"]

4. Populate your tailwind.css file

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

That should be it.

Edit:

Also, make sure to include following in tailwind.config.js

content: [
    "./components/**/*.{vue,js}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
  ],

Edit 2:

Refer to latest documentation on Tailwind CSS website https://tailwindcss.com/docs/guides/nuxtjs#3