MarkTheme - PerfectPanel SMM Theme

A modern, lightweight theme for PerfectPanel built with Tailwind CSS.

🎯 Features

• Tailwind CSS - Lightweight, utility-first CSS framework
• Modern Design - Clean and professional interface inspired by marketerum.com
• Responsive - Fully responsive design for all devices
• RTL Support - Right-to-left language support
• Custom Build - Only generates the CSS you actually use

📦 Installation

1. Install dependencies:

npm install

2. Build Tailwind CSS:

npm run build:css

This will generate CSS/bootstrap.css with only the Tailwind classes you're using.

🛠️ Development

For development with auto-rebuild on file changes:

npm run watch:css

This will watch your HTML/Twig files and automatically rebuild the CSS when you make changes.

📁 Project Structure

MarkTheme/
├── HTML/              # Twig templates
│   ├── layout.twig    # Main layout template
│   └── ...
├── CSS/
│   ├── input.css      # Tailwind directives and custom styles
│   ├── bootstrap.css  # Generated Tailwind CSS (output)
│   └── style.css      # Additional custom styles
├── JS/
│   ├── bootstrap.js   # Vendor JS (do not modify)
│   └── script.js      # Custom scripts
├── tailwind.config.js # Tailwind configuration
└── package.json       # NPM scripts and dependencies

🎨 Customization

Colors

Edit tailwind.config.js to customize the color scheme:

theme: {
  extend: {
    colors: {
      primary: {
        // Your custom colors
      }
    }
  }
}

Custom Styles

Add custom component styles in CSS/input.css under the @layer components section.

📝 Notes

• The generated CSS/bootstrap.css file contains only the Tailwind utilities you're actually using
• Always run npm run build:css after making changes to templates or Tailwind config
• The theme maintains compatibility with PerfectPanel's existing JavaScript and Twig variables