Pseudo state Management
Last updated
Was this helpful?
Last updated
Was this helpful?
Cwicly provides cutting-edge Tailwind pseudo state management allowing you to visually apply styles on hover, focus, parent states and much more with ease.
Tailwind provides all the necessary utilities to handle simple to complex pseudo states.
Hover the mouse icon to visualise the interactive states.
Open the selector and click the required pseudo state.
Modify any CSS property supported by Tailwind.
To exit the current pseudo state, simply click the corresponding pseudo tag.
Non-interactive states can be visualised by hovering the Tailwind icon.
Hover over the Tailwind icon.
By default, the main breakpoint will always be visible.
Non-interactive states are stackable and allow you to handle complex rules.
To add more non-interactive state, hover over the Tailwind icon.
Click the "+" icon.
Find the required Tailwind Pseudo.
Click to select.
The selected non interactive state will now be visible in the Tailwind dropdown.
From the Tailwind Pseudos modal, you can manage all available non-interactive states.
To modify a property on a non interactive state, open the non-interactive state selector.
Click the desired state.
Modify as required.
You can also stack multiple non interactive states together.
Tailwind also allows you to apply styles based on the parent or sibling states: group for parents and peers for siblings.
This avoids the need to use relative styling.
To apply a style to the button when hovering the inner pricing wrapper, we can use a group selector.
Select the inner pricing wrapper.
Click the "+" sign to open the Class manager.
Input "group" and push enter.
Select the button block.
Open the non-interactive state selector and click group.
Group appears as shown below.
The hover interactive state is applied by default.
Select the child block to which you want to add styles when the parent block is hovered.
Add the required style change on hover, in this case a colour change to blue.
Click "Group" to exit.
Don’t hesitate to check out the for more information.
