# Dev Diary Ep15 - Huge New Feature Revealed - Custom Elements

**URL:** <https://forums.realmacsoftware.com/t/dev-diary-ep15-huge-new-feature-revealed-custom-elements/43117>\
**Category:** RapidWeaver Elements\
**Created:** [April 23, 2024, 4:49pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep15-huge-new-feature-revealed-custom-elements/43117 "2024-04-23T16:49:50Z")\
**Posts on this page:** 15\
**Page:** 2

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [April 25, 2024, 8:46am UTC](https://forums.realmacsoftware.com/t/dev-diary-ep15-huge-new-feature-revealed-custom-elements/43117/22 "2024-04-25T08:46:00Z")

</div>

> [@upssjw](#):
>
> Dan is it possible to target tailwind html to individual screen sizes, so say on mobile size html applies to that screen then md html applies only to that screen, just by selecting each screen at the top of the editor, then putting the putting the html in that screen, but not using the sd: or md: code etc, hopefully you understand that

Not easily, as it’s not really how you’re supposed to build sites. However, you could create 3 Custom Elements, one for each screen size you wanted to target, You then hide and show them at the corresponding break points!

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [April 25, 2024, 8:49am UTC](https://forums.realmacsoftware.com/t/dev-diary-ep15-huge-new-feature-revealed-custom-elements/43117/23 "2024-04-25T08:49:34Z")

</div>

> [@Heroic\_Nonsense](#):
>
> As more and more power features are shown, I understand more and more of the choices you made. Tailwind seems to be an excellent base for RapidWeaver, and the way everything integrates is fantastic!
> 
> I’m absolutely sure Elements will greatly help both pro web designers and WYSIWYG users to stay ahead of the curve.
> 
> I can also understand why the hard break with legacy RapidWeaver (+Stacks) was needed to make this possible.

Thanks so much @Heroic_Nonsense, it’s great to finally show Elements coming together in public and for you guys to start catching on to our grand vision for the app.

Lots more good stuff to come!

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [April 25, 2024, 9:28am UTC](https://forums.realmacsoftware.com/t/dev-diary-ep15-huge-new-feature-revealed-custom-elements/43117/24 "2024-04-25T09:28:17Z")

</div>

Dan thanks, understand, it was more for testing rather than completing all the code for a site, but good to know the program is flexible to allow for this, brilliant

---

<div class="post-metadata">

**Author:** ![scottsteven](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/scottsteven/32/3418_2.png) [@scottsteven](https://forums.realmacsoftware.com/u/scottsteven)\
**Post date:** [April 25, 2024, 6:57pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep15-huge-new-feature-revealed-custom-elements/43117/25 "2024-04-25T18:57:50Z")

</div>

This is the most interesting video of the first 15. I am sitting here late at night wondering what I can build.

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [April 26, 2024, 8:08am UTC](https://forums.realmacsoftware.com/t/dev-diary-ep15-huge-new-feature-revealed-custom-elements/43117/26 "2024-04-26T08:08:58Z")

</div>

Haha, glad you liked it, it sure feels like things are finally starting to come together 🥰

---

<div class="post-metadata">

**Author:** ![scottsteven](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/scottsteven/32/3418_2.png) [@scottsteven](https://forums.realmacsoftware.com/u/scottsteven)\
**Post date:** [April 26, 2024, 8:28am UTC](https://forums.realmacsoftware.com/t/dev-diary-ep15-huge-new-feature-revealed-custom-elements/43117/27 "2024-04-26T08:28:06Z")

</div>

I have earmarked a site to rebuild that is a bit long in the tooth so will rebuild it and and its a prime candidate for custom elements. cant wait to get going.

---

<div class="post-metadata">

**Author:** ![Lion](https://avatars.discourse-cdn.com/v4/letter/l/57b2e6/32.png) [@Lion](https://forums.realmacsoftware.com/u/Lion)\
**Post date:** [April 30, 2024, 1:09pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep15-huge-new-feature-revealed-custom-elements/43117/28 "2024-04-30T13:09:22Z")

</div>

Hi Dan, Really enjoying where RW Elements is going. The versatility is really great! Just wanted to know if you would be incorporating the ability to create forms in Elements? I think it quite a necessary feature needed in websites today (not just signup forms, but something similar to what Chilli Dog has for RW Classic.)

Thank for all the hard work from your side, cannot wait for the beta.

---

<div class="post-metadata">

**Author:** ![Flash](https://avatars.discourse-cdn.com/v4/letter/f/f475e1/32.png) [@Flash](https://forums.realmacsoftware.com/u/Flash)\
**Post date:** [April 30, 2024, 1:49pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep15-huge-new-feature-revealed-custom-elements/43117/32 "2024-04-30T13:49:52Z")

</div>

> [@Lion](#):
>
> something similar to what Chilli Dog has for RW Classic.

Hopefully @barchard will develop his tools for RW Elements. I know I will buy SEO-RX and FormsPlus for sure.

---

<div class="post-metadata">

**Author:** ![Lion](https://avatars.discourse-cdn.com/v4/letter/l/57b2e6/32.png) [@Lion](https://forums.realmacsoftware.com/u/Lion)\
**Post date:** [April 30, 2024, 2:07pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep15-huge-new-feature-revealed-custom-elements/43117/33 "2024-04-30T14:07:50Z")

</div>

That is for sure

---

<div class="post-metadata">

**Author:** ![barchard](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/barchard/32/2292_2.png) [@barchard](https://forums.realmacsoftware.com/u/barchard)\
**Post date:** [May 1, 2024, 2:17am UTC](https://forums.realmacsoftware.com/t/dev-diary-ep15-huge-new-feature-revealed-custom-elements/43117/34 "2024-05-01T02:17:20Z")

</div>

Yes, I will support Elements. cc// @Lion

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [May 6, 2024, 11:07am UTC](https://forums.realmacsoftware.com/t/dev-diary-ep15-huge-new-feature-revealed-custom-elements/43117/35 "2024-05-06T11:07:05Z")

</div>

@dan another test please to check how I would enter this in Elements, works in tailwind play  
html code and config. It is just a multi animation test, still learning this part of tailwind

html code

```auto
<div class="flex justify-center items-center h-screen bg-yellow-200">
   <div class=" animate-steve w-1/2">
    <div class=" animate-spin w-16 h-16 rounded-lg bg-slate-700"></div>
</div>
</div>

```

config code

```auto
export default {
  theme: {
    extend: {
            keyframes: {
        steve: {
            '0%, 60%': {
                transform: 'rotate(-360deg)'
            },
            '30%': {
                transform: 'rotate(360deg)'
            },
        }
    },
    animation: {
        steve: 'steve 5s ease-in-out infinite',
    }
},
},

  plugins: [],
}

```

---

<div class="post-metadata">

**Author:** ![differentdan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/differentdan/32/33530_2.png) [@differentdan](https://forums.realmacsoftware.com/u/differentdan)\
**Post date:** [May 6, 2024, 2:01pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep15-huge-new-feature-revealed-custom-elements/43117/36 "2024-05-06T14:01:05Z")

</div>

> [@upssjw](#):
>
> @dan another test please to check how I would enter this in Elements

I think there’s a high probability you will be in the first wave of beta testers. 😆 😉

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [May 6, 2024, 2:30pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep15-huge-new-feature-revealed-custom-elements/43117/37 "2024-05-06T14:30:09Z")

</div>

cool lots of things to test

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [May 6, 2024, 3:00pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep15-huge-new-feature-revealed-custom-elements/43117/38 "2024-05-06T15:00:32Z")

</div>

> [@upssjw](#):
>
> @dan another test please to check how I would enter this in Elements, works in tailwind play  
> html code and config. It is just a multi animation test, still learning this part of tailwind

You won’t have access to the Tailwind config in RW Elements, so can’t setup custom animations like this. However, animation is on our roadmap just not for the 1.0 release.

Oh, and you could still do this with standard css and custom classes in the meantime.

Hope that helps.

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [May 6, 2024, 3:55pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep15-huge-new-feature-revealed-custom-elements/43117/39 "2024-05-06T15:55:32Z")

</div>

Thanks, I think Tailwind outputs to css for animations, so if there is the option to add to css with the tailwind html probably will work, tailwind generates this css below for my config code, not that I have delved into css yet, but assume this is what is generated

```auto
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
@keyframes steve {
  0%, 60% {
    transform: rotate(-360deg);
  }
  30% {
    transform: rotate(360deg);
  }
}
.animate-steve {
  animation: steve 5s ease-in-out infinite;

```

[Previous page](https://forums.realmacsoftware.com/t/dev-diary-ep15-huge-new-feature-revealed-custom-elements/43117.md?page=1)
