This script automatically adds a prefix to all class names in HTML files. It's particularly useful for projects using Tailwind CSS, where you may want to prefix all class names with "tw-" for clarity and consistency.
- Node.js installed on your system
-
Clone this repository to your local machine:
git clone https://github.com/aliakbarmotallebi/tw-prefix-class.git
-
Navigate to the project directory:
cd tw-prefix-class -
Install dependencies:
npm install
-
Place your HTML files in the
inputdirectory. -
Open the
index.jsfile in a text editor. -
Modify the
prefixvariable to the prefix you want to add to your class names (e.g., "tw-"). -
Run the script:
npm run output
-
The prefixed HTML files will be generated in the
outputdirectory.
Suppose you have an HTML file named index.html with the following content:
Input :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container mx-auto">
<p class="text-center">Hello, world!</p>
</div>
</body>
</html>Output:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="tw-container tw-mx-auto">
<p class="tw-text-center">Hello, world!</p>
</div>
</body>
</html>