Templating and styling with Alpine.js

For an Alpine.js app, we can easily and quickly add ad hoc styling to our templates:

• use the x-bind:style or, in shorthand, the :style directive

For those familiar with React, the CSS style properties will use the similar style object "camelCase" property name convention: instead of font-size, we must use the fontSize instead!

Also, notice how we can use the data in the x-data directive's value by referring to any of its property names as a value in an x-text directive attribute!