[Bug]: Official way of Nuxt 3 integration is out of date but here's how to get it working

[jyotirmaybarman]

version

3.0.1

Link to minimal reproduction

NA

Steps to reproduce

NA

What is expected?

NA

What is actually happening?

NA

System Info

No response

Any additional comments?

Official way of Nuxt 3 integration is out of date but here's how to get it working -

1. Install

npm i -D unplugin-tailwindcss-mangle tailwindcss-patch

2. Use the vite plugin in nuxt.config.ts

import utwm from 'unplugin-tailwindcss-mangle/vite';

export default defineNuxtConfig({
   .... // Other cofigurations
  vite:{
    plugins: [ process.env.NODE_ENV === "production" ? utwm() : undefined ]
  },
})

3. create tailwindcss-mangle.config.ts

import { defineConfig } from "tailwindcss-patch";

export default defineConfig({
  patch: {
    output: {
      filename: "./.tw-patch/tw-class-list.json",
      loose: true,
      removeUniversalSelector: true
    },
    tailwindcss: {
      config: "tailwind.config.js",
      cwd: __dirname,
    },
  },
});

4. Patch tailwind

npx tw-patch install

5. Extract the classes -

npx tw-patch extract

5. Build

npm run build

And you are good to go, you can start the preview. I got into few issues after build as the class specificity was messed up because of the class names generated by the plugin. I saw we can specify our custom class name generator functions too, but I didn't play with it much. I removed few classes from the tw-class-list.json which were causing issue for me and it did the job for me.

Thank you @sonofmagic For this awesome engineering.

[jyotirmaybarman]

Hey, @idesignzone @Jing-sir I think this solves our issues. Hail Vue & Nuxt !!

[dev-anonymous03]

I followed this guide but it didn't work, I checked the tw-class-list.json file after running npm run build there is only an empty array and the following message appears during production build: [plugin unplugin-tailwindcss-mangle] Sourcemap is likely to be incorrect: a plugin (unplugin-tailwindcss-mangle) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help

[jyotirmaybarman]

I followed this guide but it didn't work, I checked the tw-class-list.json file after running npm run build there is only an empty array and the following message appears during production build: [plugin unplugin-tailwindcss-mangle] Sourcemap is likely to be incorrect: a plugin (unplugin-tailwindcss-mangle) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help

You have to run the patch and then run the extract command to populate that empty array.