@tailwindcss/upgrade single files

[alexcroox]

I'm bringing a large Vue component over from an old project. I've already upgraded my current project to v4 however I'd like to run the upgrade script on the single Button.vue I'm bringing over. The usual command isn't possible because it checks if the entire project has already been run first, which it has in my case.

Thanks.

[wongjn]

You could have a temporary Tailwind v3 project somewhere and drop the Button.vue file in there, run the upgrade script, and then copy it into your real project. The temporary project doesn't even need any build system to be set up, just the minimum for the upgrade script to pass its checks:

1. Install Tailwind v3:

   npm install tailwindcss@3

2. Create a config:

   npx tailwindcss init

3. Add the Button.vue to the content:

   module.exports = {
    content: ['./Button.vue'],
   }

4. Add a minimum CSS file:

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

5. Copy the Button.vue to the project root.
6. Run the script:

   npx @tailwindcss/upgrade