Box Shadow
@include('_partials.class-table', [
'scroll' => true,
'rows' => $page->config['theme']['boxShadow']->map(function ($value, $name) {
$class = $name === 'default' ? '.shadow' : ".shadow-{$name}";
$code = "box-shadow: {$value};";
$description = "Set the width of an element to {$value}.";
return [$class, $code, $description];
})
])
Outer shadow
Use the .shadow-xs, .shadow-sm, .shadow, .shadow-md, .shadow-lg, .shadow-xl, or .shadow-2xl utilities to apply different sized outer box shadows to an element.
@component('_partials.code-sample', ['class' => 'bg-gray-100 lg:flex justify-around items-center text-sm py-8'])
Inner shadow
Use the .shadow-inner utility to apply a subtle inset box shadow to an element. This can be useful for things like form controls or wells.
@component('_partials.code-sample', ['class' => 'flex justify-around text-sm py-8'])
Focus outline shadow
Use the .shadow-outline utility to apply a focus-ring-style shadow to an element. This can be useful when combined with .focus:outline-none to create a better looking focus style that follows an element's border radius.
@component('_partials.code-sample', ['class' => 'flex justify-center text-sm py-8'])
@slot('code')@endslot @endcomponentNo shadow
Use .shadow-none to remove an existing box shadow from an element. This is most commonly used to remove a shadow that was applied at a smaller breakpoint.
@component('_partials.code-sample', ['class' => 'flex justify-around text-sm py-8'])
Responsive
To control the shadow of an element at a specific breakpoint, add a {screen}: prefix to any existing shadow utility. For example, use md:shadow-lg to apply the shadow-lg 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-gray-200 flex justify-around items-center text-sm py-8']) @slot('none')
@endslot @slot('sm')@endslot @slot('md')@endslot @slot('lg')@endslot @slot('xl')@endslot @slot('code')@endslot @endcomponentCustomizing
Box Shadows
By default Tailwind provides three drop shadow utilities, one inner shadow utility, and a utility for removing existing shadows. You can change, add, or remove these by editing the theme.boxShadow section of your Tailwind config.
If a default shadow is provided, it will be used for the non-suffixed .shadow utility. Any other keys will be used as suffixes, for example the key '2' will create a corresponding .shadow-2 utility.
@component('_partials.customized-config', ['key' => 'theme.boxShadow']) default: '0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06)', md: '0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06)', lg: '0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05)', xl: '0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04)', 2xl: '0 25px 50px -12px rgba(0, 0, 0, .25)',
- 3xl: '0 35px 60px -15px rgba(0, 0, 0, .3)', inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
- outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
- focus: '0 0 0 3px rgba(66, 153, 225, 0.5)', 'none': 'none', @endcomponent
@include('_partials.variants-and-disabling', [ 'utility' => [ 'name' => 'box shadow', 'property' => 'boxShadow', ], 'variants' => [ 'responsive', 'hover', 'focus', ], ])
