text: _N_E=(window.webpackJsonp_N_E=window.webpackJsonp_N_E||[]).push([[36],{"5xSE":function(e,t,a){"use strict";e.exports=function(e){return"[object RegExp]"===Object.prototype.toString.call(e)}},"8C7G":function(e,t,a){"use strict";a.d(t,"a",(function(){return u}));var n=a("rePB"),r=a("q1tI"),o=a.n(r),c=a("98BF"),s=a("Zb5r"),i=a("AOjV"),p=o.a.createElement;function u(e){var t=e.plugin,a=e.name,r=c.defaultConfig.variants[t]||["responsive"];a=a||t.replace(/([a-z])([A-Z])/g,(function(e,t,a){return"".concat(t," ").concat(a.toLowerCase())}));var o=["responsive","hover","focus","active","group-hover"].filter((function(e){return!r.includes(e)})).slice(0,2),u="By default, ".concat(r.length?"only ".concat(Object(s.a)(r).replace("dark","dark mode <em>(if enabled)</em>")):"no"," variants are generated for ").concat(a," utilities.");return p("div",{className:"prose"},p("p",{dangerouslySetInnerHTML:{__html:u}}),p("p",null,"You can control which variants are generated for the ",a," utilities by modifying the"," ",p("code",null,t)," property in the ",p("code",null,"variants")," section of your"," ",p("code",null,"tailwind.config.js")," file."),p("p",null,"For example, this config will ",r.length>0?"also ":"","generate"," ",Object(s.a)(o)," variants:"),p(i.a,{path:"variants.extend",before:"...",add:Object(n.a)({},t,o)}))}},AOjV:function(e,t,a){"use strict";a.d(t,"a",(function(){return u}));var n=a("q1tI"),r=a.n(n),o=(a("Btb4"),a("AI3G")),c=a("iuhU"),s=r.a.createElement;function i(e){var t=e.value;return"string"===typeof t?s("span",{className:"token string"},"'",t,"'"):Array.isArray(t)?s(r.a.Fragment,null,s("span",{className:"token punctuation"},"["),t.map((function(e,a){return s(n.Fragment,{key:a},s(i,{value:e}),a===t.length-1?null:s("span",{className:"token punctuation"},", "))})),s("span",{className:"token punctuation"},"]")):"boolean"===typeof t?s("span",{className:"token boolean"},t.toString()):t.toString()}function p(e){var t=e.edits,a=e.indent,r=void 0===a?"":a,o=e.type,p=void 0===o?"inserted":o;return s("span",{className:Object(c.a)("token",{"inserted-sign inserted":"inserted"===p,"deleted-sign deleted":"inserted"!==p})},Object.keys(t).map((function(e,a){return s(n.Fragment,{key:a},s("span",{className:Object(c.a)("token prefix",{inserted:"inserted"===p,deleted:"inserted"!==p})},"inserted"===p?"+":"-")," ",r,/^[a-z_$][a-z0-9_$]*$/i.test(o=e)?o:"'".concat(o,"'"),s("span",{className:"token operator"},":")," ",s(i,{value:t[e]}),s("span",{className:"token punctuation"},","),"\n");var o})))}function u(e){var t=e.path,a=e.add,r=e.remove,c=e.before,i=e.after;return t="string"===typeof t?t.split("."):t,s("div",{className:"prose"},s("div",{className:"my-6 rounded-xl overflow-hidden bg-gray-800"},s("pre",{className:"language-diff"},s("code",{className:"language-diff"},s("span",{className:"token unchanged"},"  ",s("span",{className:"token comment"},"// tailwind.config.js"),"\n","  module",s("span",{className:"token punctuation"},"."),s("span",{className:"token property-access"},"exports")," ",s("span",{className:"token operator"},"=")," ",s("span",{className:"token punctuation"},"{"),"\n",t.map((function(e,t){return s(n.Fragment,{key:t},"  ","  ".repeat(t+1),e,s("span",{className:"token operator"},":")," ",s("span",{className:"token punctuation"},"{"),"\n")})),c&&Object(o.a)(c).map((function(e,a){return s(n.Fragment,{key:a},"  ".repeat(t.length+2),s("span",{className:"token comment"},"// ".concat(e)),"\n")}))),r&&s(p,{edits:r,type:"deleted",indent:"  ".repeat(t.length+1)}),a&&s(p,{edits:a,type:"inserted",indent:"  ".repeat(t.length+1)}),s("span",{className:"token unchanged"},i&&Object(o.a)(i).map((function(e){return"".concat("  ".repeat(t.length+2)).concat(e,"\n")})),t.map((function(e,a){return s(n.Fragment,{key:a},"  ","  ".repeat(t.length-a),"}\n")})),"  }")))))}},Btb4:function(e,t,a){"use strict";const n=a("5xSE"),r=a("p+I8"),o=a("GAX2").default;e.exports=(e,t,a)=>{const c=[];return function e(t,a,s){let i;(a=a||{}).indent=a.indent||"\t",s=s||"",i=void 0===a.inlineCharacterLimit?{newLine:"\n",newLineOrSpace:"\n",pad:s,indent:s+a.indent}:{newLine:"@@__STRINGIFY_OBJECT_NEW_LINE__@@",newLineOrSpace:"@@__STRINGIFY_OBJECT_NEW_LINE_OR_SPACE__@@",pad:"@@__STRINGIFY_OBJECT_PAD__@@",indent:"@@__STRINGIFY_OBJECT_INDENT__@@"};const p=e=>{if(void 0===a.inlineCharacterLimit)return e;const t=e.replace(new RegExp(i.newLine,"g"),"").replace(new RegExp(i.newLineOrSpace,"g")," ").replace(new RegExp(i.pad+"|"+i.indent,"g"),"");return t.length<=a.inlineCharacterLimit?t:e.replace(new RegExp(i.newLine+"|"+i.newLineOrSpace,"g"),"\n").replace(new RegExp(i.pad,"g"),s).replace(new RegExp(i.indent,"g"),s+a.indent)};if(-1!==c.indexOf(t))return'"[Circular]"';if(null===t||void 0===t||"number"===typeof t||"boolean"===typeof t||"function"===typeof t||"symbol"===typeof t||n(t))return String(t);if(t instanceof Date)return`new Date('${t.toISOString()}')`;if(Array.isArray(t)){if(0===t.length)return"[]";c.push(t);const n="["+i.newLine+t.map((n,r)=>{const o=t.length-1===r?i.newLine:","+i.newLineOrSpace;let c=e(n,a,s+a.indent);return a.transform&&(c=a.transform(t,r,c)),i.indent+c+o}).join("")+i.pad+"]";return c.pop(),p(n)}if(r(t)){let n=Object.keys(t).concat(o(t));if(a.filter&&(n=n.filter(e=>a.filter(t,e))),0===n.length)return"{}";c.push(t);const r="{"+i.newLine+n.map((r,o)=>{const c=n.length-1===o?i.newLine:","+i.newLineOrSpace,p="symbol"===typeof r,u=!p&&/^[a-z$_][a-z$_0-9]*$/i.test(r),l=p||u?r:e(r,a);let d=e(t[r],a,s+a.indent);return a.transform&&(d=a.transform(t,r,d)),i.indent+String(l)+": "+d+c}).join("")+i.pad+"}";return c.pop(),p(r)}return t=String(t).replace(/[\r\n]/g,e=>"\n"===e?"\\n":"\\r"),!1===a.singleQuotes?`"${t=t.replace(/"/g,'\\"')}"`:`'${t=t.replace(/\\?'/g,"\\'")}'`}(e,t,a)}},GAX2:function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=e=>Object.getOwnPropertySymbols(e).filter(t=>Object.prototype.propertyIsEnumerable.call(e,t))},Zb5r:function(e,t,a){"use strict";function n(e){return e.reduce((function(t,a,n){return 0===n?a:n===e.length-1?"".concat(t," and ").concat(a):"".concat(t,", ").concat(a)}),"")}a.d(t,"a",(function(){return n}))},ap0H:function(e,t,a){"use strict";a.d(t,"a",(function(){return i}));var n=a("q1tI"),r=a.n(n),o=a("8Kt/"),c=a.n(o),s=r.a.createElement;function i(e){var t=e.suffix,a=e.children+(t?" - ".concat(t):"");return s(c.a,null,s("title",{key:"title"},a),s("meta",{key:"twitter:title",name:"twitter:title",content:a}),s("meta",{key:"og:title",property:"og:title",content:a}))}},ioG3:function(e,t,a){"use strict";a.r(t),a.d(t,"default",(function(){return f}));var n=a("wx14"),r=a("Ff2n"),o=a("q1tI"),c=a.n(o),s=a("7ljp"),i=a("YFqc"),p=a.n(i),u=a("tc9R"),l=a("vRWG"),d=a("I6Nb"),m=a("8C7G"),b=a("wH44"),g=(c.a.createElement,{Layout:l.DocumentationLayout,classes:{plugin:function(){return function(e){(0,e.addUtilities)({".-backdrop-hue-rotate-180":{"--tw-backdrop-hue-rotate":"hue-rotate(-180deg)"},".-backdrop-hue-rotate-90":{"--tw-backdrop-hue-rotate":"hue-rotate(-90deg)"},".-backdrop-hue-rotate-60":{"--tw-backdrop-hue-rotate":"hue-rotate(-60deg)"},".-backdrop-hue-rotate-30":{"--tw-backdrop-hue-rotate":"hue-rotate(-30deg)"},".-backdrop-hue-rotate-15":{"--tw-backdrop-hue-rotate":"hue-rotate(-15deg)"},".backdrop-hue-rotate-0":{"--tw-backdrop-hue-rotate":"hue-rotate(0deg)"},".backdrop-hue-rotate-15":{"--tw-backdrop-hue-rotate":"hue-rotate(15deg)"},".backdrop-hue-rotate-30":{"--tw-backdrop-hue-rotate":"hue-rotate(30deg)"},".backdrop-hue-rotate-60":{"--tw-backdrop-hue-rotate":"hue-rotate(60deg)"},".backdrop-hue-rotate-90":{"--tw-backdrop-hue-rotate":"hue-rotate(90deg)"},".backdrop-hue-rotate-180":{"--tw-backdrop-hue-rotate":"hue-rotate(180deg)"}})}}},meta:{title:"Backdrop Hue Rotate",description:"Utilities for applying backdrop hue-rotate filters to an element.",featureVersion:"v2.1+"},tableOfContents:[{title:"Usage",slug:"usage",children:[]},{title:"Responsive",slug:"responsive",children:[]},{title:"Customizing",slug:"customizing",children:[{title:"Variants",slug:"variants"},{title:"Disabling",slug:"disabling"}]}]}),O=d.ContentsLayout;function f(e){var t=e.components,a=Object(r.a)(e,["components"]);return Object(s.a)(O,Object(n.a)({},g,a,{components:t,mdxType:"MDXLayout"}),Object(s.a)("div",{className:"prose"},Object(s.a)(u.a,{level:2,id:"usage",toc:!0},"Usage"),Object(s.a)("p",null,"Use the ",Object(s.a)("inlineCode",{parentName:"p"},"backdrop-hue-rotate-{amount}")," utilities alongside the ",Object(s.a)("inlineCode",{parentName:"p"},"backdrop-filter")," utility to blur an element."),Object(s.a)("div",{className:"my-6 rounded-xl overflow-hidden bg-gray-800"},Object(s.a)("pre",Object(n.a)({parentName:"div"},{className:"language-html"}),Object(s.a)("code",Object(n.a)({parentName:"pre"},{className:"language-html"}),Object(s.a)("span",Object(n.a)({parentName:"code"},{className:"token tag"}),Object(s.a)("span",Object(n.a)({parentName:"span"},{className:"token tag"}),Object(s.a)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),"<"),"div")," ",Object(s.a)("span",Object(n.a)({parentName:"span"},{className:"token attr-name"}),"class"),Object(s.a)("span",Object(n.a)({parentName:"span"},{className:"token attr-value"}),Object(s.a)("span",Object(n.a)({parentName:"span"},{className:"token punctuation attr-equals"}),"="),Object(s.a)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),'"'),"backdrop-filter backdrop-hue-rotate-15 ...",Object(s.a)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),'"')),Object(s.a)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),">")),"\n  ",Object(s.a)("span",Object(n.a)({parentName:"code"},{className:"token comment"}),"\x3c!-- ... --\x3e"),"\n",Object(s.a)("span",Object(n.a)({parentName:"code"},{className:"token tag"}),Object(s.a)("span",Object(n.a)({parentName:"span"},{className:"token tag"}),Object(s.a)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),"</"),"div"),Object(s.a)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),">"))))),Object(s.a)(u.a,{level:2,id:"responsive",toc:!0},"Responsive"),Object(s.a)("p",null,"To control an element's backdrop hue rotation at a specific breakpoint, add a ",Object(s.a)("inlineCode",{parentName:"p"},"{screen}:")," prefix to any existing backdrop hue-rotate utility. For example, use ",Object(s.a)("inlineCode",{parentName:"p"},"md:backdrop-hue-rotate-60")," to apply the ",Object(s.a)("inlineCode",{parentName:"p"},"backdrop-hue-rotate-60")," utility at only medium screen sizes and above."),Object(s.a)("div",{className:"my-6 rounded-xl overflow-hidden bg-gray-800"},Object(s.a)("pre",Object(n.a)({parentName:"div"},{className:"language-html"}),Object(s.a)("code",Object(n.a)({parentName:"pre"},{className:"language-html"}),Object(s.a)("span",Object(n.a)({parentName:"code"},{className:"token tag"}),Object(s.a)("span",Object(n.a)({parentName:"span"},{className:"token tag"}),Object(s.a)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),"<"),"div")," ",Object(s.a)("span",Object(n.a)({parentName:"span"},{className:"token attr-name"}),"class"),Object(s.a)("span",Object(n.a)({parentName:"span"},{className:"token attr-value"}),Object(s.a)("span",Object(n.a)({parentName:"span"},{className:"token punctuation attr-equals"}),"="),Object(s.a)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),'"'),"backdrop-filter backdrop-hue-rotate-15 ",Object(s.a)("span",Object(n.a)({parentName:"span"},{className:"code-highlight bg-code-highlight"}),"md:backdrop-hue-rotate-60")," ...",Object(s.a)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),'"')),Object(s.a)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),">")),"\n  ",Object(s.a)("span",Object(n.a)({parentName:"code"},{className:"token comment"}),"\x3c!-- ... --\x3e"),"\n",Object(s.a)("span",Object(n.a)({parentName:"code"},{className:"token tag"}),Object(s.a)("span",Object(n.a)({parentName:"span"},{className:"token tag"}),Object(s.a)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),"</"),"div"),Object(s.a)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),">"))))),Object(s.a)("p",null,"For more information about Tailwind's responsive design features, check out the ",Object(s.a)(p.a,{href:"/docs/responsive-design",passHref:!0},Object(s.a)("a",null,"Responsive Design"))," documentation."),Object(s.a)(u.a,{level:2,id:"customizing",toc:!0},"Customizing"),Object(s.a)(u.a,{level:3,id:"variants",toc:!0},"Variants")),Object(s.a)(m.a,{plugin:"backdropHueRotate",name:"backdrop hue-rotate",mdxType:"Variants"}),Object(s.a)("div",{className:"prose"},Object(s.a)(u.a,{level:3,id:"disabling",toc:!0},"Disabling")),Object(s.a)(b.a,{plugin:"backdropHueRotate",name:"backdrop hue-rotate",mdxType:"Disabling"}))}f.isMDXComponent=!0,f.layoutProps=g},jdZq:function(e,t,a){(window.__NEXT_P=window.__NEXT_P||[]).push(["/docs/backdrop-hue-rotate",function(){return a("ioG3")}])},"p+I8":function(e,t,a){"use strict";e.exports=function(e){var t=typeof e;return null!==e&&("object"===t||"function"===t)}},vRWG:function(e,t,a){"use strict";a.r(t),a.d(t,"DocumentationLayout",(function(){return m}));var n=a("wx14"),r=a("q1tI"),o=a.n(r),c=a("ekQu"),s=a("8Kt/"),i=a.n(s),p=a("nOHt"),u=a("ap0H"),l=a("1Q1k"),d=o.a.createElement;function m(e){var t=Object(p.useRouter)();return d(o.a.Fragment,null,d(u.a,{suffix:"/"===t.pathname?void 0:"Tailwind CSS"},e.layoutProps.meta.metaTitle||e.layoutProps.meta.title),d(i.a,null,d("meta",{key:"twitter:card",name:"twitter:card",content:"summary"}),d("meta",{key:"twitter:image",name:"twitter:image",content:"https://tailwindcss.com".concat("/_next/static/media/twitter-square.daf77586b35e90319725e742f6e069f9.jpg")})),d(c.b,Object(n.a)({nav:l.a},e)))}},wH44:function(e,t,a){"use strict";a.d(t,"a",(function(){return d}));var n=a("rePB"),r=a("q1tI"),o=a.n(r),c=a("AOjV"),s=a("AI3G"),i=a("Zb5r"),p=o.a.createElement;function u(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function l(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?u(Object(a),!0).forEach((function(t){Object(n.a)(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):u(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function d(e){var t=e.plugin,a=e.name,r=Object(s.a)(t);return a=a||t.replace(/([a-z])([A-Z])/g,(function(e,t,a){return"".concat(t," ").concat(a.toLowerCase())})),p("div",{className:"prose"},p("p",null,"If you don't plan to use the ",a," utilities in your project, you can disable them entirely by setting the"," ",p("span",{dangerouslySetInnerHTML:{__html:Object(i.a)(r.map((function(e){return"<code>".concat(e,"</code>")})))}})," ",r.length>1?"properties":"property"," to ",p("code",null,"false")," in the"," ",p("code",null,"corePlugins")," section of your config file:"),p(c.a,{path:"corePlugins",before:"...",add:r.reduce((function(e,t){return l(l({},e),{},Object(n.a)({},t,!1))}),{})}))}}},[["jdZq",0,2,1,3,4,5]]]);