[FEAT] Prettier Configuration to Sort tailwind classes and code refactoring

[binit2-1]

Is your feature request related to a problem? Please describe.
Tailwind CSS classes in our React components are currently unorganized. One developer might write class="flex p-4 text-center" while another writes class="text-center flex p-4". This lack of consistency makes code reviews difficult, increases cognitive load when reading templates, and creates unnecessary noise in git diffs.

Describe the solution you'd like
I want to implement prettier-plugin-tailwindcss to automatically sort utility classes in a recommended, standard order (based on the official Tailwind sorting logic) whenever Prettier runs.

Describe alternatives you've considered

• Manually sorting classes (impossible to maintain consistently).
• Using a strict linter rule that fails the build if classes aren't sorted (too aggressive; auto-fixing is better).

Additional context

• This should work seamlessly with our existing Prettier configuration.
• VS Code should auto-sort classes on save once this plugin is installed.

✅ Proof of Work

• Install the plugin: npm install -D prettier prettier-plugin-tailwindcss
• Update .prettierrc (or prettier.config.js) to include the plugin.
• Verify that running npx prettier --write . sorts the classes.