Skip to main content

Frontend FAQ

Start by reading the error message and look for it here. If you do not find it, please add a new entry via PR.

Tailwind CSS does not apply​

Symptom: changes to tw-* classes are not reflected in the browser.
Fix:

  1. Make sure the view path is listed in the content array of tailwind.config.js.
  2. Confirm the class starts with the tw- prefix.
  3. Run zex yarn watch and save the file again.
  4. Clear browser cache (Vue hot-reload sometimes keeps old CSS).

Error running zex yarn tailwind-mail​

Symptom: tailwindcss: command not found.
Fix:

  1. Run zex yarn install inside the container.
  2. Execute the command again.
  3. Verify that tailwind-mail.config.js exists and the paths are correct.

Alpine and Vue conflict​

Symptom: x-for does not render or events fire twice.
Fix:

  • Use x-on: instead of @click.
  • Avoid x-for; render collections with Blade or Livewire.
  • Ensure Alpine is initialised after Vue if they share the same root node.

Where should I place complex logic?​

  • Livewire for server communication and business logic.
  • Alpine only for lightweight UI interactions (toggles, clipboard).
  • Blade components for markup and minimal validation.

Invisible focus indicator​

Symptom: keyboard navigation does not show any focus outline.
Fix: add the recommended utilities:

focus-visible:tw-outline-none focus-visible:tw-ring-4 focus-visible:tw-ring-violet-600/50 focus-visible:tw-rounded

Missing translations​

Symptom: English text appears in a Spanish page.
Fix:

  1. Add the key in all language files under lang/{locale}/.
  2. Use trans('file.key') instead of hard-coding text.
  3. For ARIA text use accessibility.php.

Alpine events do not work (missing x-data)​

Symptom: clicking a button with x-on:click does nothing and the console is silent.
Typical cause: x-data="{}" is missing on the element (or an ancestor) so Alpine never initialises.
Fix:

<!-- Wrong -->
<x-button.link x-on:click="open = !open">Toggle</x-button.link>

<!-- Correct -->
<x-button.link x-data="{}" x-on:click="open = !open">Toggle</x-button.link>

If an Alpine ancestor already exists, be sure the event fires inside that scope.

Last updated: 2025-07-14

X

Graph View