# Tutorial: Using Tailwind Classes in Elements

**URL:** <https://forums.realmacsoftware.com/t/tutorial-using-tailwind-classes-in-elements/44627>\
**Category:** RapidWeaver Elements\
**Created:** [September 13, 2024, 3:58pm UTC](https://forums.realmacsoftware.com/t/tutorial-using-tailwind-classes-in-elements/44627 "2024-09-13T15:58:36Z")\
**Posts on this page:** 2\
**Page:** 1

<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:** [September 13, 2024, 3:58pm UTC](https://forums.realmacsoftware.com/t/tutorial-using-tailwind-classes-in-elements/44627/1 "2024-09-13T15:58:36Z")

</div>

Hello again,

In this weeks video tutorial I show you the basics of using Tailwind CSS Classes. While you don’t need to know any code to use Elements, it can sometimes be handy to apply Tailwind classes for simple adjustments or effects.

[![](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/d/d/dd7757e5ccab22acc24f242ab296dc818dc0d171.jpeg "Using Tailwind Classes in Elements for macOS") ](https://www.youtube.com/watch?v=yKBmzEqxWdk)

### Get Project

If you’re using Elements, you can click the link below to open the project directly in Elements so you can follow along — Thanks to Elements Cloud 💪

[⬇ Open Tailwind Classes Tutorial Project in Elements](elementsapp://downloadDocument/ZMrVAQio7pGm).

### Project Notes

```auto
Animate
animate-bounce 
animate-ping
animate-spin

Hover
hover:hue-rotate-60
duration-1000

Skew
-skew-x-6 
-skew-x-[17deg]
https://tailwindcss.com/docs/skew

Effects
invert
https://tailwindcss.com/docs/backdrop-invert

contrast-150
https://tailwindcss.com/docs/contrast

sepia
sepia-[.50]
https://tailwindcss.com/docs/sepia

hue-rotate-60
https://tailwindcss.com/docs/backdrop-hue-rotate

Cursor
cursor-alias
cursor-wait
https://tailwindcss.com/docs/cursor

Breakpoints
sm, md, lg, xl, 2xl

Z-Index Order
z-50
https://tailwindcss.com/docs/z-index

```

### Feedback

Let me know what you thought of the tutorial, was it helpful? what else would you like to see covered? Let me know in the comments below.

Cheers,  
Dan & Team Realmac

---

<div class="post-metadata">

**Author:** ![logrunner](https://avatars.discourse-cdn.com/v4/letter/l/59ef9b/32.png) [@logrunner](https://forums.realmacsoftware.com/u/logrunner)\
**Post date:** [September 13, 2024, 4:42pm UTC](https://forums.realmacsoftware.com/t/tutorial-using-tailwind-classes-in-elements/44627/2 "2024-09-13T16:42:51Z")

</div>

Clicking on the **Open Tailwind Classes Tutorial Project in Elements** link and it launching in elements works well - great feature! 🙂