Utilities added in v3.0

We have added more utilities in 3.0, and all utilities have a good inline playground, try it out and have fun.

Backface Visibility

Isolation

Mix Blend Mode

Shadow Color

Background Blend Mode

Background Origin

Box Decoration Break

Caret Color

Caret Opacity

Image Rendering

List Style Type

Stroke DashArray

Stroke DashOffset

Stroke LineCap

Stroke LineJoin

Hyphens

Tab Size

Text Decoration Color

Text Decoration Opacity

Text Decoration Length

Text Decoration Offset

Text Indent

Text Stroke Width

Text Stroke Color

Text Shadow

Writing Mode

Writing Orientation

Table Empty Cells

Table Caption Side

Transform Style

Rotate X

Rotate Y

Rotate Z

Scale Z

Translate Z

Perspective

Perspective Origin

Filter

Backdrop Filter

Backface Visibility

The backface utility sets whether the back face of an element is visible when turned towards the user.

Isolation

Utilities for controlling whether an element should explicitly create a new stacking context. These utilities are especially helpful when used in conjunction with mix-blend-mode and z-index.

Mix Blend Mode

Utilities for controlling how an element should blend with the background.

Box Shadow Color

export default {
  theme: {
    boxShadowColor: {
      gray: '#1c1c1e',
    },
  },
}

</Customizing>

Background Blend Mode

Utilities for controlling how an element's background image should blend with its background color.

Background Origin

Utilities for controlling the background origin of an element's background image.

<PlaygroundWithVariants variant='border' :variants="['border', 'padding', 'content']" prefix='bg-origin' fixed='dark:text-white opacity-85 overflow-hidden' nested=true appended='p-6 rounded-md border-4 border-blue-400 border-dashed font-extrabold text-white flex justify-center items-center bg-no-repeat' html='<div class="{class} bg-no-repeat p-6 rounded-md border-4 border-blue-400 border-dashed font-extrabold text-white flex justify-center items-center" style="background-image: url(/assets/bg-shop.jpg);"> <span>Hello World</span> </div>' />

Box Decoration Break

Utilities for controlling how element fragments should be rendered across multiple lines, columns, or pages.

<PlaygroundWithVariants variant='slice' :variants="['slice', 'clone']" prefix='decoration' fixed='dark:text-white opacity-85 overflow-hidden p-2 h-full' nested=true appended='text-5xl font-extrabold bg-gradient-to-r from-green-400 to-blue-500 rounded-16px px-4 text-sm text-white' html=" <div> <span class="{class} bg-gradient-to-r px-4 from-green-400 to-blue-500 text-sm text-white rounded-16px">The<br>quick<br>brown fox<br>over the lazy dog</span> </div>" />

Caret Color

Utilities for controlling the color of insertion text.

export default {
  theme: {
    caretColor: {
      primary: '#3490dc',
      secondary: '#ffed4a',
      danger: '#e3342f',
    },
  },
}

</Customizing>

Caret Opacity

Utilities for controlling the opacity of an element's caret color.

export default {
  theme: {
    extend: {
      caretOpacity: {
        light: '0.1',
      },
    },
  },
}

</Customizing>

Image Rendering

The image-render utility defines how the browser should render an image if it is scaled up or down from its original dimensions. By default, each browser will attempt to apply aliasing to this scaled image in order to prevent distortion, but this can sometimes be a problem if we want the image to preserve its original pixelated form.

List Style Type

Utilities for controlling the bullet/number style of a list.

<PlaygroundWithVariants variant='disc' :variants="['none', 'disc', 'circle', 'square', 'decimal', 'zero-decimal', 'greek', 'roman', 'upper-roman', 'alpha', 'upper-alpha']" prefix='list' fixed='p-2 dark:text-white opacity-85' nested=true html="<ul class='{class}'> <li>One</li> <li>Two</li> <li>Three</li> </ul>" />

export default {
  theme: {
    listStyleType: {
      none: 'none',
      disc: 'disc',
      decimal: 'decimal',
      square: 'square',
      roman: 'upper-roman',
    },
  },
}

</Customizing>

Stroke DashArray

The stroke-dash utility is a presentation utility defining the pattern of dashes and gaps used to paint the outline of the shape;

Stroke DashOffset

The stroke-offset utility is a presentation utility defining an offset on the rendering of the associated dash array.

Stroke LineCap

The stroke-cap utility is a presentation utility defining the shape to be used at the end of open subpaths when they are stroked.

Stroke LineJoin

The stroke-join utility is a presentation utility defining the shape to be used at the corners of paths when they are stroked.

Hyphens

The hyphens utilities specifies how words should be hyphenated when text wraps across multiple lines. It can prevent hyphenation entirely, hyphenate at manually-specified points within the text, or let the browser automatically insert hyphens where appropriate.

<PlaygroundWithVariants variant='auto' :variants="['none', 'manual', 'auto']" prefix='hyphens' fixed='dark:text-white opacity-85 overflow-hidden' appended='border border-blue-300 border-dashed p-2' nested=true html="<p class='{class} border p-2 border-blue-300 border-dashed'>An extraordinarily long English word!</>" />

Tab Size

The tab-size utilities are used to customize the width of tab characters (U+0009).

<PlaygroundWithVariants variant='' :variants="['', '0', '2', '4', '8', '7.5px', '2rem']" fixed='dark:text-white opacity-85 overflow-scroll font-mono text-xs' prefix='tab' nested=true appended='w-full whitespace-pre-wrap' html="<p class='w-full whitespace-pre-wrap {class}'>without tab with 1 tab with 2 tabs </>" />

export default {
  theme: {
    tabSize: {
      sm: '2',
      md: '4',
      lg: '8',
    },
  },
}

</Customizing>

Text Decoration

Utilities for controlling the decoration of text.

Text Decoration Type

Utilities for controlling the type of text decoration.

Text Decoration Color

Utilities for controlling the color of text decoration.

export default {
  theme: {
    textDecorationColor: {
      primary: '#3490dc',
      secondary: '#ffed4a',
      danger: '#e3342f',
    },
  },
}

</Customizing>

Text Decoration Opacity

Utilities for controlling the opacity of an element's decoration color.

<PlaygroundWithVariants variant='50' type='opacity' prefix='underline-opacity' fixed='p-2 dark:text-white opacity-85 overflow-hidden' appended='text-black underline underline-teal-600 underline-2' nested=true html="<p class='text-black underline underline-2 underline-teal-600 {class}'>The quick brown fox jumps over the lazy dog</>" />

export default {
  theme: {
    extend: {
      textDecorationOpacity: {
        10: '0.1',
        20: '0.2',
        95: '0.95',
      },
    },
  },
}

</Customizing>

Text Decoration Length

Utilities for controlling the length of text decoration.

<PlaygroundWithVariants variant='auto' :variants="['auto', '0', '1', '2', '3', '4', '5', '6', '7', '8', '0.1rem', '3px', '0.3em']" prefix='underline' fixed='p-2 dark:text-white opacity-85 overflow-hidden' appended='text-black underline underline-teal-600' nested=true html="<p class='text-black underline underline-teal-600 {class}'>The quick brown fox jumps over the lazy dog</>" />

export default {
  theme: {
    extend: {
      textDecorationLength: {
        sm: '1px',
        md: '2px',
        lg: '4px',
      },
    },
  },
}

</Customizing>

Text Decoration Offset

Utilities for controlling the offset of text decoration.

export default {
  theme: {
    textDecorationOffset: {
      sm: '1px',
      md: '2px',
      lg: '4px',
    },
  },
}

</Customizing>

Text Indent

Utilities for controlling the indentation of text.

export default {
  theme: {
    extend: {
      textIndent: {
        '4xl': '5rem',
        '5xl': '6rem',
      },
    },
  },
}

</Customizing>

Text Stroke

Utilities for controlling the stroke of a text element.

Text Stroke Width

Utilities for controlling the width of text stroke.

export default {
  theme: {
    extend: {
      textStrokeWidth: {
        'xl': '6',
        '2xl': '8',
      },
    },
  },
}

</Customizing>

Text Stroke Color

Utilities for controlling the color of text stroke.

export default {
  theme: {
    textStrokeColor: {
      primary: '#3490dc',
      secondary: '#ffed4a',
      danger: '#e3342f',
    },
  },
}

</Customizing>

Text Shadow

Utilities for controlling the shadow of a text element.

export default {
  theme: {
    textShadow: {
      'DEFAULT': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)', // If a DEFAULT shadow is provided, it will be used for the non-suffixed shadow utility.
      '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
      '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
    },
  },
}

</Customizing>

Writing Mode

The writing-mode utility sets whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress. When set for an entire document, it should be set on the root element (html element for HTML documents).

Writing Orientation

The writing-orientation utility sets the orientation of the text characters in a line. It only affects text in vertical mode (when writing-mode is not horizontal-tb). It is useful for controlling the display of languages that use vertical script, and also for making vertical table headers.

Table Caption Side

The caption utility puts the content of a table's <caption> on the specified side. The values are relative to the writing-mode of the table.

<PlaygroundWithVariants variant='top' :variants="['top', 'bottom']" prefix='caption' fixed='dark:text-white opacity-85' nested=true appended='table table-caption text-center table-header-group table-row table-cell table-row-group table-footer-group text-xs border border-emerald-500 bg-emerald-200 p-1 py-2 text-emerald-600 font-medium font-bold' html='<div class="table {class} text-xs"> <div class="table-caption text-center text-emerald-600 py-2 font-bold">Council budget</div> <div class="table-header-group bg-emerald-200"> <div class="table-row"> <div class="table-cell border border-emerald-500 p-1 text-emerald-600 font-medium">Items</div> <div class="table-cell border border-emerald-500 p-1 text-emerald-600 font-medium" scope="col">Expenditure</div> </div> </div> <div class="table-row-group"> <div class="table-row"> <div class="table-cell border border-emerald-500 p-1 text-emerald-600">Donuts</div> <div class="table-cell border border-emerald-500 p-1 text-emerald-600">3,000</div> </div> <div class="table-row"> <div class="table-cell border border-emerald-500 p-1 text-emerald-600">Stationery</div> <div class="table-cell border border-emerald-500 p-1 text-emerald-600">18,000</div> </div> </div> <div class="table-footer-group"> <div class="table-row"> <div class="table-cell border border-emerald-500 p-1 text-emerald-600">Totals</div> <div class="table-cell border border-emerald-500 p-1 text-emerald-600">21,000</div> </div> </div> </div>' />

Table Empty Cells

The empty-cells utility sets whether borders and backgrounds appear around <table>cells that have no visible content. A good use case for empty-cells could be a situation where you may not know whether a table will or will not contain empty data points and you decide to hide them.

<PlaygroundWithVariants variant='visible' :variants="['visible', 'hidden']" prefix='empty-cells' fixed='dark:text-white opacity-85 text-xs' nested=true appended='border-separate text-emerald-600 border border-emerald-500 p-1 font-medium font-bold py-2 text-center' html='<table class="border-separate text-emerald-600 {class}"> <caption class="text-center py-2 font-bold">Client Info</caption> <tbody> <tr> <th class="border border-emerald-500 p-1 font-medium">Client Name</th> <th class="border border-emerald-500 p-1 font-medium">Age</th> </tr> <tr> <td class="border border-emerald-500 p-1"></td> <td class="border border-emerald-500 p-1">25</td> </tr> <tr> <td class="border border-emerald-500 p-1">Louise Q.</td> <td class="border border-emerald-500 p-1"></td> </tr> <tr> <td class="border border-emerald-500 p-1">Owen B.</td> <td class="border border-emerald-500 p-1"></td> </tr> </tbody> </table>' />

Transform Type

Utilities for controlling transform behavior.

Transform Style

The transform-style utility sets whether children of an element are positioned in the 3D space or are flattened in the plane of the element.

Rotate X

Rotate Y

Rotate Z

Scale Z

export default {
  theme: {
    scale: {
      half: '.5',
      full: '1',
    },
  },
}

</Customizing>

Translate Z

You can customize the global spacing scale in the theme.spacing or theme.extend.spacing sections of your windi.config.js file:

export default {
  theme: {
    extend: {
      spacing: {
        72: '18rem',
        84: '21rem',
        96: '24rem',
      },
    },
  },
}

To customize the translate scale separately, use the theme.translate section of your windi.config.js file.

export default {
  theme: {
    extend: {
      translate: {
        '1/7': '14.2857143%',
        '2/7': '28.5714286%',
        '3/7': '42.8571429%',
        '4/7': '57.1428571%',
        '5/7': '71.4285714%',
        '6/7': '85.7142857%',
      },
    },
  },
}

</Customizing>

Perspective

The perspect utility determines the distance between the z=0 plane and the user in order to give a 3D-positioned element some perspective.

export default {
  theme: {
    extend: {
      perspective: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
    },
  },
}

</Customizing>

Perspective Origin

The perspect-origin utility determines the position at which the viewer is looking. It is used as the vanishing point by the perspect utility.

export default {
  theme: {
    extend: {
      perspectiveOrigin: {
        tb150: '150% 150%',
        tb200: '200% 200%',
      },
    },
  },
}

</Customizing>

Filter

Utilities for enabling and disabling filters on an element.

Filter Blur

export default {
  theme: {
    blur: {
      '4xl': '72px',
      '5xl': '96px',
      '6xl': '128px',
    },
  },
}

</Customizing>

Filter Brightness

export default {
  theme: {
    brightness: {
      sm: '50',
      md: '100',
      lg: '150',
    },
  },
}

</Customizing>

Filter Contrast

export default {
  theme: {
    contrast: {
      sm: '50',
      md: '100',
      lg: '150',
    },
  },
}

</Customizing>

Filter Drop Shadow

export default {
  theme: {
    dropShadow: {
      '3xl': 'drop-shadow(0 30px 30px rgba(0, 0, 0, 0.2))',
      '4xl': 'drop-shadow(0 40px 40px rgba(0, 0, 0, 0.3))',
    },
  },
}

</Customizing>

Filter Grayscale

export default {
  theme: {
    grayscale: {
      50: '0.5',
      80: '0.8',
    },
  },
}

</Customizing>

Filter Hue Rotate

export default {
  theme: {
    hueRotate: {
      sm: '60',
      lg: '90',
      xl: '180',
    },
  },
}

</Customizing>

Filter Invert

export default {
  theme: {
    invert: {
      sm: '0.5',
      lg: '0.8',
    },
  },
}

</Customizing>

Filter Saturate

export default {
  theme: {
    saturate: {
      sm: '0.5',
      md: '1',
      lg: '1.5',
    },
  },
}

</Customizing>

Filter Sepia

export default {
  theme: {
    sepia: {
      sm: '0.5',
      md: '0.8',
    },
  },
}

</Customizing>

Backdrop Filter

Utilities for enabling and disabling backdrop filters on an element.

<PlaygroundWithVariants variant='' :variants="['', 'none']" prefix='backdrop-filter' fixed='dark:text-white opacity-85 h-full overflow-hidden' appended='w-screen h-full bg-no-repeat bg-center bg-cover !backdrop-blur-md rounded-md text-sm bg-white bg-opacity-30 text-center p-2 p-4 flex flex-col justify-center overflow-hidden' nested=true html=' <div class="p-2 w-screen h-full bg-no-repeat bg-center bg-cover flex flex-col justify-center overflow-hidden" style="background-image: url(/assets/bg-shop.jpg), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));"> <div class="{class} !backdrop-blur-md rounded-md text-sm bg-white bg-opacity-30 text-center p-4"> <p>backdrop-blur</p> </div> </div>' />

Backdrop Blur

<PlaygroundWithVariants variant='sm' :variants="['', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '0', '1', '2', '3', '9', '12', '24px', '2rem']" prefix='backdrop-blur' fixed='dark:text-white opacity-85' appended='w-screen h-full bg-no-repeat bg-center bg-cover backdrop-filter rounded-md text-sm bg-white bg-opacity-30 text-center p-2 p-4 flex flex-col justify-center overflow-hidden' nested=true html=' <div class="p-2 w-screen h-full bg-no-repeat bg-center bg-cover flex flex-col justify-center overflow-hidden" style="background-image: url(/assets/bg-shop.jpg), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));"> <div class="backdrop-filter {class} rounded-md text-sm bg-white bg-opacity-30 text-center p-4"> <p>backdrop-blur</p> </div> </div>' />

export default {
  theme: {
    backdropBlur: {
      '4xl': '72px',
      '5xl': '96px',
      '6xl': '128px',
    },
  },
}

</Customizing>

Backdrop Brightness

<PlaygroundWithVariants variant='100' :variants="['0', '50', '75', '90', '95', '100', '105', '110', '115', '125', '150', '175', '200', '251']" prefix='backdrop-brightness' fixed='dark:text-white opacity-85' appended='w-screen h-full bg-no-repeat bg-center bg-cover backdrop-filter rounded-md text-sm bg-white bg-opacity-50 text-center p-2 p-4 flex flex-col justify-center overflow-hidden' nested=true html=' <div class="p-2 w-screen h-full bg-no-repeat bg-center bg-cover flex flex-col justify-center overflow-hidden" style="background-image: url(/assets/bg-shop.jpg), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));"> <div class="backdrop-filter {class} rounded-md text-sm bg-white bg-opacity-50 text-center p-4"> <p>backdrop-brightness</p> </div> </div>' />

export default {
  theme: {
    backdropBrightness: {
      sm: '50',
      md: '100',
      lg: '150',
    },
  },
}

</Customizing>

Backdrop Contrast

<PlaygroundWithVariants variant='100' :variants="['0', '50', '75', '90', '95', '100', '105', '110', '115', '125', '150', '175', '200', '251']" prefix='backdrop-contrast' fixed='dark:text-white opacity-85' appended='w-screen h-full bg-no-repeat bg-center bg-cover backdrop-filter rounded-md text-sm bg-white bg-opacity-50 text-center p-2 p-4 flex flex-col justify-center overflow-hidden' nested=true html=' <div class="p-2 w-screen h-full bg-no-repeat bg-center bg-cover flex flex-col justify-center overflow-hidden" style="background-image: url(/assets/bg-shop.jpg), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));"> <div class="backdrop-filter {class} rounded-md text-sm bg-white bg-opacity-50 text-center p-4"> <p>backdrop-contrast</p> </div> </div>' />

export default {
  theme: {
    backdropContrast: {
      sm: '50',
      md: '100',
      lg: '150',
    },
  },
}

</Customizing>

Backdrop Grayscale

<PlaygroundWithVariants variant='' :variants="['', '0', '5', '10', '20', '25', '30', '40' ,'50', '60', '70', '75', '80', '90', '95', '100']" prefix='backdrop-grayscale' fixed='dark:text-white opacity-85' appended='w-screen h-full bg-no-repeat bg-center bg-cover backdrop-filter rounded-md text-sm bg-white bg-opacity-50 text-center p-2 p-4 flex flex-col justify-center overflow-hidden' nested=true html=' <div class="p-2 w-screen h-full bg-no-repeat bg-center bg-cover flex flex-col justify-center overflow-hidden" style="background-image: url(/assets/bg-shop.jpg), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));"> <div class="backdrop-filter {class} rounded-md text-sm bg-white bg-opacity-50 text-center p-4"> <p>backdrop-grayscale</p> </div> </div>' />

export default {
  theme: {
    backdropGrayscale: {
      50: '0.5',
      80: '0.8',
    },
  },
}

</Customizing>

Backdrop Hue Rotate

<PlaygroundWithVariants variant='45' :variants="['0', '15', '30', '45', '60', '90', '120', '180', '-120', '-90', '-60', '-45', '-30', '-15']" prefix='backdrop-hue-rotate' fixed='dark:text-white opacity-85' appended='w-screen h-full bg-no-repeat bg-center bg-cover backdrop-filter rounded-md text-sm bg-white bg-opacity-50 text-center p-2 p-4 flex flex-col justify-center overflow-hidden' nested=true html=' <div class="p-2 w-screen h-full bg-no-repeat bg-center bg-cover flex flex-col justify-center overflow-hidden" style="background-image: url(/assets/bg-shop.jpg), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));"> <div class="backdrop-filter {class} rounded-md text-sm bg-white bg-opacity-50 text-center p-4"> <p>backdrop-hue-rotate</p> </div> </div>' />

export default {
  theme: {
    backdropHueRotate: {
      sm: '60',
      lg: '90',
      xl: '180',
    },
  },
}

</Customizing>

Backdrop Invert

<PlaygroundWithVariants variant='' :variants="['', '0', '5', '10', '20', '25', '30', '40' ,'50', '60', '70', '75', '80', '90', '95', '100']" prefix='backdrop-invert' fixed='dark:text-white opacity-85' appended='w-screen h-full bg-no-repeat bg-center bg-cover backdrop-filter rounded-md text-sm bg-white bg-opacity-50 text-center p-2 p-4 flex flex-col justify-center overflow-hidden' nested=true html=' <div class="p-2 w-screen h-full bg-no-repeat bg-center bg-cover flex flex-col justify-center overflow-hidden" style="background-image: url(/assets/bg-shop.jpg), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));"> <div class="backdrop-filter {class} rounded-md text-sm bg-white bg-opacity-50 text-center p-4"> <p>backdrop-invert</p> </div> </div>' />

export default {
  theme: {
    backdropInvert: {
      sm: '0.5',
      lg: '0.8',
    },
  },
}

</Customizing>

Backdrop Opacity

<PlaygroundWithVariants variant='50' type='opacity' prefix='backdrop-opacity' fixed='dark:text-white opacity-85' appended='w-screen h-full bg-no-repeat bg-center bg-cover backdrop-filter rounded-md text-sm text-center p-2 p-4 flex flex-col justify-center overflow-hidden border-2' nested=true html=' <div class="p-2 w-screen h-full bg-no-repeat bg-center bg-cover flex flex-col justify-center overflow-hidden" style="background-image: url(/assets/bg-shop.jpg), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));"> <div class="backdrop-filter {class} rounded-md text-sm text-center p-4 border-2"> <p>backdrop-opacity</p> </div> </div>' />

export default {
  theme: {
    backdropOpacity: {
      sm: '0.5',
      lg: '0.8',
    },
  },
}

</Customizing>

Backdrop Saturate

<PlaygroundWithVariants variant='0' :variants="['', '0', '5', '10', '20', '25', '30', '40' ,'50', '60', '70', '75', '80', '90', '95', '100']" prefix='backdrop-saturate' fixed='dark:text-white opacity-85' appended='w-screen h-full bg-no-repeat bg-center bg-cover backdrop-filter rounded-md text-sm bg-white bg-opacity-50 text-center p-2 p-4 flex flex-col justify-center overflow-hidden' nested=true html=' <div class="p-2 w-screen h-full bg-no-repeat bg-center bg-cover flex flex-col justify-center overflow-hidden" style="background-image: url(/assets/bg-shop.jpg), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));"> <div class="backdrop-filter {class} rounded-md text-sm bg-white bg-opacity-50 text-center p-4"> <p>backdrop-saturate</p> </div> </div>' />

export default {
  theme: {
    backdropSaturate: {
      sm: '0.5',
      md: '1',
      lg: '1.5',
    },
  },
}

</Customizing>

Backdrop Sepia

<PlaygroundWithVariants variant='' :variants="['', '0', '5', '10', '20', '25', '30', '40' ,'50', '60', '70', '75', '80', '90', '95', '100']" prefix='backdrop-sepia' fixed='dark:text-white opacity-85' appended='w-screen h-full bg-no-repeat bg-center bg-cover backdrop-filter rounded-md text-sm bg-white bg-opacity-50 text-center p-2 p-4 flex flex-col justify-center overflow-hidden' nested=true html=' <div class="p-2 w-screen h-full bg-no-repeat bg-center bg-cover flex flex-col justify-center overflow-hidden" style="background-image: url(/assets/bg-shop.jpg), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));"> <div class="backdrop-filter {class} rounded-md text-sm bg-white bg-opacity-50 text-center p-4"> <p>backdrop-sepia</p> </div> </div>' />

export default {
  theme: {
    backdropSepia: {
      sm: '0.5',
      md: '0.8',
    },
  },
}

</Customizing>