New Cool Tailwind CSS Properties

I love how they are evolving by taking care of accessibility as well

Let’s begin with what’s new in Tailwind CSS after version 3, I might be late as version 3.4 is the latest one.

Most of us usually don’t update our packages in the repository unless it’s required or becomes mandatory ?

I can understand that feeling and that is why most at least I am thinking will only upgrade the package whenever we are creating a new repository ?

Coming back to the point, I have been using Tailwind CSS for the past 4 years and I am in love with it. Most of us might raise an argument that writing tailwind CSS won’t make you a good front-end developer when it comes to styling part or core CSS.

Over time, I’ve experienced that tailwind CSS do bring some problems related to writing simple CSS but that’s mostly related to syntax thing the core concepts of styling the elements and adding animations are still the same.

Just a syntax difference

CSS in JSX
transform: “”,

Tailwind CSS
transform:transition-all,

Now once you understand the basics the syntax won’t make much difference.

For writing animations, I prefer CSS in JSX and for simple styling, I go with Tailwind and that is why most of the repositories do come with flexibility for the developer to write in his/her favourable syntax.

What’s New or Cool in Tailwind CSS?

Tailwind devs are working very hard on accessibility and animations as well.

Developers have raised a concern for writing complex animations using Tailwind CSS just like we did with simple CSS or other animation libraries like GSAP or framer-motion.

Divide

https://tailwindcss.com/docs/divide-style

Most of the time we want to add dividers between the columns and that is what Divider property does under the hood. Add border width to the elements arranged in a flex order that needs a dividing appearance.

Linear Gradients

https://tailwindcss.com/docs/background-image#linear-gradients

Screen Readers

https://tailwindcss.com/docs/screen-readers

Caret Styling

https://tailwindcss.com/docs/caret-color

Snap Control

https://tailwindcss.com/docs/scroll-snap-type

Resize

https://tailwindcss.com/docs/resize

Appearance

https://tailwindcss.com/docs/appearance?source=post_page-----eeea98808df1

Accent Color

https://tailwindcss.com/docs/accent-color

That’s it for today, see you in the next one

Feel free to follow and subscribe!!

Shrey

The above is the detailed content of New Cool Tailwind CSS Properties. For more information, please follow other related articles on the PHP Chinese website!