How to Use Whitespace Property with Hover, Focus, and Active States of Tailwind
Tailwind is a CSS framework that contains utility first classes that are used to design elements by mix and match approach. It has various states or variants that are used to make a website look interactive. These states include “Hover”, “Focus”, and “Active”. These states can also be utilized along with the whitespace. A whitespace in programming is simply a text string that is composed of line breaks and spaces only.
This write-up will present the usage of whitespace property with the various states of Tailwind.
How to Use Whitespace Property with Hover, Focus, and Active States of Tailwind?
Tailwind states can be used with whitespace properties easily. To learn the usage of the Tailwind states with the whitespace properties see these examples:
Example 1: Use the Whitespace Property with Hover State of Tailwind
First, add the “Tailwind” CSS in the <head> section of the HTML, as presented below:
<script src="https://cdn.tailwindcss.com"></script>
</head>
Now, add the “whitespace-normal” property which will apply to all the screens normally. After that, use the “hover:” stated tag and specify the “whitespace:pre” tag which will apply when the user hovers over the element:
<div class = "whitespace-normal hover:whitespace-pre">
<p>Linux Hint is one of the best e-learning platforms in the world.</p>
</div>
</body>
Before Hover
After Hover
As this can be observed, the whitespace or line break has been added successfully:
Example 2: Use the Whitespace Property with Active State of Tailwind
The other Tailwind state that can be used while using whitespace is “active”. When the “active” state is applied on the whitespace property. Then, whenever the user clicks on the text the whitespace will be applied due to the “active” state.
To apply the “active” state, first, add the “whitespace-normal” property that will apply normally. After that add the “active:” state and specify the “whitespace-pre” property to apply it when the text is clicked:
<div class = "whitespace-normal active:whitespace-pre">
<p>Linux Hint is one of the best e-learning platforms in the world.</p>
</div>
</body>
As it can be observed when the text is clicked, the whitespace has been added:
Example 3: Use the Whitespace Property with Focus State of Tailwind
Another state that is used to add the whitespace in Tailwind CSS is “Focus”. The “Focus” state gets activated when the user presses the “tab” is pressed. To use the whitespace property, first, use the “Focus:” state and specify the “whitespace-pre” property:
<textarea class = "whitespace-normal focus:whitespace-pre">
Linux Hint is one of the best e-learning platforms in the world.
</textarea>
</body>
It can be observed from the below output that when the “tab” is pressed, the text area gets activated:
Conclusion
To use the whitespace property with Tailwind states, first, use any of the states including “Hover”, “Focus”, and “Active” and specify the whitespace property that will be applied when any of these states will be in action. This post has explained the procedure to use the whitespace property with Tailwind states.
Source: linuxhint.com