Inline Styles

[bnikkhah]

Is it possible to have inline styles in AlpineJS? I've tried something on CodePen, but nothing was working. Consider the following code:

<div class="box" :style="{ backgroundColor: 'red' }"></div>

Assuming .box has width: 100px;, height: 100px, and a background-color: 'blue', the code above should make the box the color of red, but it does not.

I've tried the same code in VueJS and it did work with inline styles. Here is the same code in VueJS:

<div id="app">
  <div class="box" :style="{ backgroundColor: 'red' }"></div>
</div>

Is there an extra step to consider when working with inline styles in AlpineJS? I didn't see anything mentioned about inline styles in the GitHub documentation.

Thanks for the help!

[tlgreg]

Object syntax in inline styles is not supported at the moment.
For the time being you can construct the string if you need dynamic inline styles.

<div x-data="{ color: 'red' }">
  <div :style="`background-color: ${color}`"></div>
</div>

[bnikkhah]

Ah, I see. So it's not a feature yet. Okay, no problem!

By the way, this is quite an excellent framework. jQuery is good in terms of targeting elements without adding extra code to the DOM, but can get troubling with the query selectors (especially loops). VueJS is also good in terms of being a very robust framework, but might be too big for some cases. AlpineJS really delivers that mid-point front-end developers look for!

[calebporzio]

Thanks for the kind words @bnikkhah

Yeah, it's a feature that really should be added, I just haven't gotten to it.

[HugoDF]

@calebporzio is it cool if I give this a shot? Any weird cases you're aware of?

[HugoDF]

For anyone still looking/confused as to how to achieve this, I've found the stylenames package and forked it https://github.com/shatstack/stylenames

It's installable from npm with npm install @shat/stylenames or from CDN using <script src="https://cdn.jsdelivr.net/npm/@shat/stylenames@v1.x.x/lib/index.umd.js"></script>.

You can then use it as follows:

<div x-data="">
  <div class="box" :style="styleNames({ backgroundColor: 'red' })"></div>
</div>

[HugoDF]

I'll close this for now, the proposed changes aren't going into v2 and I'm supporting a package to achieve this kind of functionality outside of Alpine.js

Feel free to comment and reopen.

[gemae]

Hi, how about alpine dynamic inline style with conditional? someone knows here the syntax?

<div x-data="{active: true,color:'red'}">
  <div :style="`background-color: ${color}`"></div>
</div>

How do i insert the conditional . that it will just initialize once passed the condition