x-if is used for toggling elements on the page, similarly to
x-show, however it completely adds and removes the element it's applied to rather than just changing its CSS display property to "none".
Because of this difference in behavior,
x-if should not be applied directly to the element, but instead to a
<template> tag that encloses the element. This way, Alpine can keep a record of the element once it's removed from the page.
x-if, does NOT support transitioning toggles with
<template>tags can only contain one root level element.
Code highlighting provided by Torchlight