Tutorial: Using Tailwind Classes in Elements

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.

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 :muscle:

:arrow_down: Open Tailwind Classes Tutorial Project in Elements.

Project Notes

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

2 Likes

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

1 Like