Some way to either parse class names or create class names with custom prefix

[daniel-brenot-wbd]

I am trying to integrate tailwind into our codebase and i want to make sure tailwind can work alongside what we already have. As a result, we need to have the prefix appended to class names(example: tw-p-4).

While it is trivial to have developers at my workplace ad the prefix manually, it is annoying for them, and they are entering it through something that will pass through javascript, so I have the opportunity to add that prefix in code. The problem I have run into is that the way in which prefixes is added can be somewhat complex to automate without parsing the code entirely.

The tailwind codebase of course parses these class names in the candidate.ts file, but this is not exposed on the package on NPM, so I have no way of using it to create my own class names.

My ask is this: Can we expose the candidate.ts file or some kind of function to programatically add in this prefix. I feel like this would help substantially.

There is a library on npm that does something similar but is maintained by a third party and doesn't cover all cases, so something first party would be nice:
https://www.npmjs.com/package/@xengine/tailwindcss-class-parser

Oh, and the obligatory: These opinions are my own and are not representative of my employer.

[bella964]

Hello,

Current Approach and Workarounds
While Tailwind itself doesn't expose candidate.ts for this purpose, here are some potential workarounds:
safeco agent portal
Tailwind Config Prefix Option
Tailwind already provides a built-in configuration for prefixes:

javascript
module.exports = {
prefix: 'tw-', // This will add the tw- prefix to all Tailwind class names
// other Tailwind configurations...
};
By adding this to your tailwind.config.js, Tailwind automatically prefixes all its class names with tw-, so you don’t need to manage it manually. This is the simplest and most efficient solution.

Custom Utility in JavaScript
If you want more granular control or need to dynamically prefix classes in your JavaScript code, you can write a utility function to do this. Here's a basic example:

javascript
function addPrefixToClasses(classes, prefix = 'tw-') {
return classes
.split(/\s+/) // Split by spaces
.map(cls => cls.startsWith(prefix) ? cls : ${prefix}${cls})
.join(' ');
}

// Example usage
const originalClasses = 'p-4 text-center bg-blue-500';
const prefixedClasses = addPrefixToClasses(originalClasses);
console.log(prefixedClasses); // "tw-p-4 tw-text-center tw-bg-blue-500"
Leverage PostCSS Plugins
If you need to automate the process at build time, consider using a custom PostCSS plugin. A plugin could parse the CSS, identify Tailwind class names, and append the prefix programmatically.

Fork Tailwind and Expose candidate.ts
If none of the above works for your use case, you could fork the Tailwind repository and expose the necessary functionality. While not ideal, it gives you full control over the parsing logic:

Clone the Tailwind repository.
Modify the candidate.ts module to export the desired function.
Use it as part of your custom integration.
Community Request or Contribution
Consider raising an issue or submitting a pull request to the TailwindCSS GitHub repository. The Tailwind team is responsive to community feedback, and this feature might align with their goals to make the library more extensible.

Why Candidate Parsing Is Complex
Tailwind's candidate.ts includes logic to handle dynamic class names (e.g., bg-[color]-500, hover:bg-blue-500) and variants. Reimplementing this from scratch can be challenging. If exposing candidate.ts as a utility isn't feasible, you could request a lighter-weight abstraction for handling class prefixing as part of Tailwind's core functionality.

Would you like guidance on submitting a formal feature request to the Tailwind team or expanding on any of these solutions?

Best Regards
bella964

[daniel-brenot-wbd]

I can see you are new to github, so a word of advice, don't respond using ai generated answers, especially when they are not specifically helpful. I've already asked all the ai models, and this is not usually received well by most people.

Making my own function like the one mentioned in your response doesn't work. The prefix location is actually rather complicated logic because it depends on if there is a not selector used, a hover selector, or if theres a custom value for a utility class. Examples:

Becomes:
&:not(.example):tw-h-50

Becomes:
&:hover:tw-md:h-[50px]

h-0
Becomes: tw-h-0

inline
Becomes:
tw-inline