Hi there,
I hope you are doing great.
As promised, it's time to test out some of Tailwind CSS v3.3 features (mentioned in our previous issue).
Brace yourself, we are going to have a long ride with use cases, preview images, explanations, and links to working code demos.
Let's get started!
Padding:
padding-inline-start ~
ps-*
padding-inline-end ~
pe-*
The padding-inline-start and padding-inline-end define the logical start and end padding of an element depending on its writing-mode or text orientation i.e rtl, ltr or auto.
Some of the use cases of these two properties are input fields and text areas.
Notice the input placeholders beginning at the very start of the input. By default 👇
Let's add some inline-padding 👇
The link to the code for the above form is here.
This would be vice-versa if the writing-mode is rtl (right-to-left) languages such as Arabic 👇
The link to the code for the above form is here.
Border:
border-inline-start-color ~
border-s-*
border-inline-end-color ~
border-e-*
border-inline-start-width ~
border-s-*
border-inline-end-width ~
border-e-*
The border-inline-start-color, border-inline-end-color plus the border-inline-start-width and border-inline-end-width, are used to specify the border color and width based on the writing-mode or orientation of the text.
A good use case of the above properties, are quotes.
Let's see this in action 👇
Click on this link to the code for the above quote demo.
A preview for languages that support right-to-left writing-mode
Click on this link to the code for the above demo.
Font-size and line-height shorthand
You can now combine the classes of font-size and line-height.
In the below example, we have combined both classes.
Click on this link for the code on the above demo
That is all for today's issue. I hope you have learned something helpful.
We will look at the remaining features as mentioned in the previous issue next Friday.
As always, thank you for taking the time to read the issue. Feel free to comment, like, or share the issue.
Enjoy!
~ Mbaziira