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