0build.dev
Choose a layout

skew

Report an Issue
Class Description

skew

Sets X & Y skew via --skew. E.g. 10deg.

CSS Rules 

.skew {
  --tw-skew-x: skewX(var(--skew));
  --tw-skew-y: skewX(var(--skew));
  transform: skewX(var(--skew));
}

Usage

The .skew class is flagged as a value-driven selector. The variable --skew is required. 
<element class="skew" style="--skew: /* value */;" />

Responsive

Prefix .skew utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:skew" style="--md-skew: /* value */;" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="skew:hover" style="--skew-hover: /* value */;" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="skew:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before skew::before" style="--skew-before: /* value */;" />

<element class="content-after skew::after" style="--skew-after: /* value */;" />

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style. 

<!-- Input -->
<element class="skew=value" />

<!-- Output -->
<element class="skew" style="--skew: value;" />

CLS Alert

This feature may cause CLS (Cumulative Layout Shift). Make sure to include a z-not-ready class in your <head> tag.

.skew Sets X & Y skew via --skew. E.g. 10deg.

skew-x

Sets horizontal skew via --skew-x.

CSS Rules 

.skew-x {
  --tw-skew-x: skewX(var(--skew-x));
  transform: skewX(var(--skew-x));
}

Usage

The .skew-x class is flagged as a value-driven selector. The variable --skew-x is required. 
<element class="skew-x" style="--skew-x: /* value */;" />

Responsive

Prefix .skew-x utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:skew-x" style="--md-skew-x: /* value */;" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="skew-x:hover" style="--skew-x-hover: /* value */;" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="skew-x:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before skew-x::before" style="--skew-x-before: /* value */;" />

<element class="content-after skew-x::after" style="--skew-x-after: /* value */;" />

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style. 

<!-- Input -->
<element class="skew-x=value" />

<!-- Output -->
<element class="skew-x" style="--skew-x: value;" />

CLS Alert

This feature may cause CLS (Cumulative Layout Shift). Make sure to include a z-not-ready class in your <head> tag.

.skew-x Sets horizontal skew via --skew-x.

skew-y

Sets vertical skew via --skew-y.

CSS Rules 

.skew-y {
  --tw-skew-y: skewY(var(--skew-y));
  transform: skewY(var(--skew-y));
}

Usage

The .skew-y class is flagged as a value-driven selector. The variable --skew-y is required. 
<element class="skew-y" style="--skew-y: /* value */;" />

Responsive

Prefix .skew-y utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:skew-y" style="--md-skew-y: /* value */;" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="skew-y:hover" style="--skew-y-hover: /* value */;" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="skew-y:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before skew-y::before" style="--skew-y-before: /* value */;" />

<element class="content-after skew-y::after" style="--skew-y-after: /* value */;" />

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style. 

<!-- Input -->
<element class="skew-y=value" />

<!-- Output -->
<element class="skew-y" style="--skew-y: value;" />

CLS Alert

This feature may cause CLS (Cumulative Layout Shift). Make sure to include a z-not-ready class in your <head> tag.

.skew-y Sets vertical skew via --skew-y.