Tailwind Classes Obfuscator
tailwind-obfuscator is a SvelteKit utility that provides advanced obfuscation capabilities for Tailwind CSS classes. Safeguard your CSS code by replacing class names and IDs with randomly generated strings. This utility helps protect your CSS code from reverse engineering and unauthorized copying.
Features
- Easy Setup: Get started quickly with a straightforward installation and setup process.
- Class Name Obfuscation: Replace class selectors with prefixed, simplified, or randomly generated strings to obscure their original tailwind classes.
- Lightweight: The
tailwind-obfuscator
package is over 1GB. Just kidding :cold_face:. - SvelteKit Friendly: Seamlessly integrate into SvelteKit projects.
Prerequisites
This project requires NodeJS (version 8 or later) and NPM.
Node and NPM are really easy to install.
To make sure you have them available on your machine,
try running the following command.
$ npm -v && node -v
6.4.1
v8.16.0
Table of contents
Getting Started
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.
Installation
BEFORE YOU INSTALL: please read the prerequisites
To install and set up the library, run:
$ npm install -D tailwind-obfuscator
Or if you prefer using Yarn:
$ yarn add --dev tailwind-obfuscator
Or if you prefer using PNPM:
$ pnpm add -D tailwind-obfuscator
Usage
Build your CSS with Tailwind CLI
$ npx tailwindcss -i <input path of where css file includes @tailwind directives> -o <output path for built CSS>
Run the twobfus
command to obfuscate your Tailwind CSS classes
$ npx twobfus --tw <path of built CSS file> <length of class name you want>
Config your svelte.config.js
import and add it to the preprocess part
import { vitePreprocess } from '@sveltejs/kit/vite';
import twObfuscator from 'tailwind-obfuscator';
const config = {
preprocess: [
vitePreprocess({}),
twObfuscator({
enable: true,
}),
],
};
export default config;
Once you've configured tailwind-obfuscator
in your svelte.config.js
and run the twobfus
command, your Tailwind CSS classes will be obfuscated automatically during the SvelteKit build process.
Command Properties
twobfus
$ npx twobfus --tw <builtFile> <classLength>
Parameters
builtFile
Type | Default value | Description |
---|
string | null | Time in milliseconds |
delay
Type | Default value | Description |
---|
number | 5 | Time in milliseconds |
Contributing
Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Add your changes:
git add .
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request :sunglasses:
Authors
See also the list of contributors who participated in this project.
License
MIT License © xinnypie