tailwind-obfuscator v1.0.15

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

• Tailwind Classes Obfuscator
  • Prerequisites
  • Table of contents
  • Getting Started
  • Installation
  • Usage
    • Build your CSS with Tailwind CLI
    • Obfuscate TailwindCSS classes
    • Config Svelte Project
  • Command Properties
    • twobfus
      • Parameters
  • Contributing
  • Authors
  • License

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'; // Import your custom attribute replacement function

const config = {
  preprocess: [
    vitePreprocess({}),
    twObfuscator({
      enable: true, // Set to true to enable class obfuscation (default is 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

delay

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Add your changes: git add .
4. Commit your changes: git commit -am 'Add some feature'
5. Push to the branch: git push origin my-new-feature
6. Submit a pull request :sunglasses:

Authors

• xinnypie - Noob

See also the list of contributors who participated in this project.

License

MIT License © xinnypie