Tailwind 4 auto prefixer for existing projects (VUE / NUXT)

[skoenfaelt]

Hey dudes,
this is a quick and dirty js script for vue codebases (if you wanna improve show and tell). This script is meant to run in codebases with tailwind classes only and add other classes like vuetify or own stuff later --> quick and dirty

This script prefix all classes to tw: --> yeah this might not helpfull if your codebase is already mixed.

IMPORTANT: v-bind:class and :class is untouched due syntax differences and i simply did not achive to get it right ;P

1. commit all changes
2. npm i -d glob
3. create a file named what you want eg.: "tw-prefixer.js"
4. run it with node tw-prefixer.js
5. 🤞🏼
6. verify changes
7. rollback if you did not like the results

open for code

const fs = require("fs/promises");
const { glob } = require("glob");

// edit this for your repo, in my case i have a mono repo
const GLOB_START_DIR = "apps/**/**/*.vue"

// Function to add the "tw:" prefix to static classes and ignore dynamic `:class`
function addPrefixToClasses(content) {
    // Regex for `class="..."`, but explicitly ignores everything with `:class` or `v-bind:class`
    return content.replace(/(^|\s)class="(.*?)"/g, (match, prefix, classNames) => {
        // Split classes into a list and process them
        const updatedClasses = classNames
            .split(" ") // Split classes by spaces
            .filter(Boolean) // Remove empty classes
            .map((className) => {
                // Process breakpoints (e.g., `lg:flex-1` → `tw:lg:flex-1`)
                const breakpointMatch = className.match(/^([a-z]{2,}:)(.+)/); // e.g., lg:flex-1
                if (breakpointMatch) {
                    const breakpoint = breakpointMatch[1]; // e.g., lg:
                    const actualClass = breakpointMatch[2]; // e.g., flex-1
                    if (!breakpoint.startsWith("tw:")) {
                        return `tw:${breakpoint}${actualClass}`; // e.g., tw:lg:flex-1
                    }
                    return className; // Class is already correct
                }

                // Process normal classes without breakpoints (e.g., flex → tw:flex)
                return className.startsWith("tw:") ? className : `tw:${className}`;
            })
            .join(" "); // Combine the processed class list back together

        // Return the result, including the original prefix
        return `${prefix}class="${updatedClasses}"`;
    });
}

// Main logic
async function processVueFiles() {
    try {
        // Search for all Vue files in `apps/**/`
        const files = await glob(GLOB_START_DIR);
        console.log(`Found files: ${files.length}`);

        for (const file of files) {
            console.log(`Processing file: ${file}`);
            try {
                // Read file content
                const content = await fs.readFile(file, "utf-8");

                // Only process static `class="..."` attributes
                const updatedContent = addPrefixToClasses(content);

                // Save the file with the changes
                await fs.writeFile(file, updatedContent);
                console.log(`File updated: ${file}`);
            } catch (err) {
                console.error(`Error processing file ${file}:`, err);
            }
        }
    } catch (err) {
        console.error("Error searching for files:", err);
    }
}

// Execute script
processVueFiles();