Transform Originv1.2.0+

@include('_partials.class-table', [ 'scroll' => true, 'rows' => $page->config['theme']['transformOrigin']->map(function ($value, $name) { $class = $name = ".origin-{$name}"; $code = "transform-origin: {$value};"; return [$class, $code]; }) ])

Usage

Specify an element's transform origin using the origin-{keyword} utilities.

@component('_partials.code-sample', ['class' => 'bg-white lg:flex justify-around items-center text-sm py-12'])

@slot('code')@endslot @endcomponent

Responsive

To control the transform-origin of an element at a specific breakpoint, add a {screen}: prefix to any existing transform-origin utility. For example, use md:origin-top to apply the origin-top utility at only medium screen sizes and above.

For more information about Tailwind's responsive design features, check out the Responsive Design documentation.

@component('_partials.responsive-code-sample', ['class' => 'bg-white flex justify-center items-center py-12']) @slot('none')

@endslot @slot('sm')@endslot @slot('md')@endslot @slot('lg')@endslot @slot('xl')@endslot @slot('code')@endslot @endcomponent

Customizing

Origin values

By default Tailwind provides transform-origin utilities for all of the built-in browser keyword options. You change, add, or remove these by customizing the transformOrigin section of your Tailwind theme config.

@component('_partials.customized-config', ['key' => 'theme.extend.transformOrigin'])

• '24': '6rem',
• 'full': '100%', @endcomponent

Learn more about customizing the default theme in the theme customization documentation.

@include('_partials.variants-and-disabling', [ 'utility' => [ 'name' => 'transform-origin', 'property' => 'transformOrigin', ], 'variants' => [ 'responsive', ], ])