Pseudo state Management

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.

Interactive States

Modify

• Open the selector and click the required pseudo state.

• Modify any CSS property supported by Tailwind.

Exit

• To exit the current pseudo state, simply click the corresponding pseudo tag.

Non interactive States

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.

Add

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.

Modify

• To modify a property on a non interactive state, open the non-interactive state selector.

• Click the desired state.

• Modify as required.

Stack

You can also stack multiple non interactive states together.

Parent/Sibling states

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.

Don’t hesitate to check out the Tailwind documentation for more information.

Example

The following example also applies to peers.

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.

All groups and peers will appear in their respective categories.

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