Change Generated Classes

In Tailwind CSS we cannot directly modify the generated class names. However, you can achieve the effect of changing them in several ways using ‘tailwind.config.js’ file .

Theme Customization:

The core idea is to control the building blocks that Tailwind uses to generate classes.
In `tailwind.config.js`, you define theme values like colors, spacing, fonts, etc. These values form the foundation of Tailwind's utility classes.
By changing these theme values, you essentially change the output classes. For instance, modifying the text-red-500 color in the colors section will alter the styles generated for that class.

Extend Theme with Custom Classes

This approach lets you define entirely new utility classes with the desired styles.
We can also use the extend section in `tailwind.config.js` to create these custom classes with standard CSS syntax.

Example:

module.exports = {
 theme: {
   colors: {
     primary: '#2F80ED', // Custom color for a new class
   },
 },
 extend: {
   margin: {
     'half-screen': 'calc(50vh - 50px)', // Custom margin class
   },
   padding: {
     'hero': '4rem 8rem', // Custom padding class
   },
 },
};