text: (self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[8827],{21370:function(a,b){"use strict";b.Z="/_next/static/media/social-square.b622e290e82093c36cca57092ffe494f.jpg"},53829:function(a,b,c){(window.__NEXT_P=window.__NEXT_P||[]).push(["/docs/functions-and-directives",function(){return c(51269)}])},51269:function(a,b,c){"use strict";c.r(b),c.d(b,{"default":function(){return m}}),c(67294);var d=c(3905),e=c(41664),f=c(59533),g=c(5679),h=c(53339),i=c(50156),j=c(55390),k={Layout:h.DocumentationLayout,meta:{title:"Functions & Directives",description:"A reference for the custom functions and directives Tailwind exposes to your CSS."},slug:"functions-and-directives",tableOfContents:[{title:"Directives",slug:"directives",children:[{title:"@tailwind",slug:"tailwind",children:[]},{title:"@layer",slug:"layer",children:[]},{title:"@apply",slug:"apply",children:[{title:"Using @apply with per-component CSS",slug:"using-apply-with-per-component-css"}]}]},{title:"Functions",slug:"functions",children:[{title:"theme()",slug:"theme",children:[]},{title:"screen()",slug:"screen",children:[]}]}]},l=i.ContentsLayout;function m(a){var b=a.components,c=function(a,b){if(null==a)return{};var c,d,e=function(a,b){if(null==a)return{};var c,d,e={},f=Object.keys(a);for(d=0;d<f.length;d++)c=f[d],b.indexOf(c)>=0||(e[c]=a[c]);return e}(a,b);if(Object.getOwnPropertySymbols){var f=Object.getOwnPropertySymbols(a);for(d=0;d<f.length;d++)c=f[d],!(b.indexOf(c)>=0)&&Object.prototype.propertyIsEnumerable.call(a,c)&&(e[c]=a[c])}return e}(a,["components"]);return(0,d.mdx)(l,Object.assign({},k,c,{components:b,mdxType:"MDXLayout"}),(0,d.mdx)(g.Heading,{level:2,id:"directives",nextElement:{type:"paragraph"}},"Directives"),(0,d.mdx)("p",null,"Directives are custom Tailwind-specific ",(0,d.mdx)("a",Object.assign({parentName:"p"},{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule"}),"at-rules")," you can use in your CSS that offer special functionality for Tailwind CSS projects."),(0,d.mdx)(g.Heading,{level:3,id:"tailwind",nextElement:{type:"paragraph"}},"@tailwind"),(0,d.mdx)("p",null,"Use the ",(0,d.mdx)("inlineCode",{parentName:"p"},"@tailwind")," directive to insert Tailwind’s ",(0,d.mdx)("inlineCode",{parentName:"p"},"base"),", ",(0,d.mdx)("inlineCode",{parentName:"p"},"components"),", ",(0,d.mdx)("inlineCode",{parentName:"p"},"utilities")," and ",(0,d.mdx)("inlineCode",{parentName:"p"},"variants")," styles into your CSS."),(0,d.mdx)("pre",Object.assign({},{className:"language-css"}),(0,d.mdx)("code",Object.assign({parentName:"pre"},{className:"language-css"}),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token comment"}),"/**\n * This injects Tailwind's base styles and any base styles registered by\n * plugins.\n */"),"\n",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token atrule"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token rule"}),"@tailwind")," base",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),";")),"\n\n",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token comment"}),"/**\n * This injects Tailwind's component classes and any component classes\n * registered by plugins.\n */"),"\n",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token atrule"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token rule"}),"@tailwind")," components",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),";")),"\n\n",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token comment"}),"/**\n * This injects Tailwind's utility classes and any utility classes registered\n * by plugins.\n */"),"\n",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token atrule"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token rule"}),"@tailwind")," utilities",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),";")),"\n\n",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token comment"}),"/**\n * Use this directive to control where Tailwind injects the hover, focus,\n * responsive, dark mode, and other variants of each class.\n *\n * If omitted, Tailwind will append these classes to the very end of\n * your stylesheet by default.\n */"),"\n",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token atrule"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token rule"}),"@tailwind")," variants",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),";")))),(0,d.mdx)(g.Heading,{level:3,id:"layer",nextElement:{type:"paragraph"}},"@layer"),(0,d.mdx)("p",null,"Use the ",(0,d.mdx)("inlineCode",{parentName:"p"},"@layer")," directive to tell Tailwind which “bucket” a set of custom styles belong to. Valid layers are ",(0,d.mdx)("inlineCode",{parentName:"p"},"base"),", ",(0,d.mdx)("inlineCode",{parentName:"p"},"components"),", and ",(0,d.mdx)("inlineCode",{parentName:"p"},"utilities"),"."),(0,d.mdx)("pre",Object.assign({},{className:"language-css"}),(0,d.mdx)("code",Object.assign({parentName:"pre"},{className:"language-css"}),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token atrule"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token rule"}),"@tailwind")," base",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),";")),"\n",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token atrule"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token rule"}),"@tailwind")," components",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),";")),"\n",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token atrule"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token rule"}),"@tailwind")," utilities",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),";")),"\n\n",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token atrule"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token rule"}),"@layer")," base")," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token selector"}),"h1")," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n    ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token atrule atapply"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token rule"}),"@apply")," text-2",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token unit"}),"xl"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),";")),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token selector"}),"h2")," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n    ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token atrule atapply"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token rule"}),"@apply")," text-xl",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),";")),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token atrule"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token rule"}),"@layer")," components")," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token selector"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token class"}),".btn-blue"))," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n    ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token atrule atapply"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token rule"}),"@apply")," bg-blue-500 ",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token property"}),"hover"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),":"),"bg-blue-700 text-white font-bold py-2 px-4 rounded",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),";")),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token atrule"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token rule"}),"@layer")," utilities")," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token selector"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token class"}),".filter-none"))," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n    ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token property"}),"filter"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," none",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token selector"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token class"}),".filter-grayscale"))," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n    ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token property"}),"filter"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token function"}),"grayscale"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token number"}),"100"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token unit"}),"%"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"))),(0,d.mdx)("p",null,"Tailwind will automatically move any CSS within a ",(0,d.mdx)("inlineCode",{parentName:"p"},"@layer")," directive to the same place as the corresponding ",(0,d.mdx)("inlineCode",{parentName:"p"},"@tailwind")," rule, so you don’t have to worry about authoring your CSS in a specific order to avoid specificity issues."),(0,d.mdx)("p",null,"Any custom CSS added to a layer will only be included in the final build if that CSS is actually used in your HTML, just like all of the classes built in to Tailwind by default."),(0,d.mdx)("p",null,"Wrapping any custom CSS in a ",(0,d.mdx)("inlineCode",{parentName:"p"},"@layer")," directive also makes it possible to use modifiers with those rules, like ",(0,d.mdx)("inlineCode",{parentName:"p"},"hover:")," and ",(0,d.mdx)("inlineCode",{parentName:"p"},"focus:")," or responsive modifiers like ",(0,d.mdx)("inlineCode",{parentName:"p"},"md:")," and ",(0,d.mdx)("inlineCode",{parentName:"p"},"lg:"),"."),(0,d.mdx)(g.Heading,{level:3,id:"apply",nextElement:{type:"paragraph"}},"@apply"),(0,d.mdx)("p",null,"Use ",(0,d.mdx)("inlineCode",{parentName:"p"},"@apply")," to inline any existing utility classes into your own custom CSS."),(0,d.mdx)("p",null,"This is useful when you need to write custom CSS (like to override the styles in a third-party library) but still want to work with your design tokens and use the same syntax you’re used to using in your HTML."),(0,d.mdx)("pre",Object.assign({},{className:"language-css"}),(0,d.mdx)("code",Object.assign({parentName:"pre"},{className:"language-css"}),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token selector"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token class"}),".select2-dropdown"))," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token atrule atapply"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token rule"}),"@apply")," rounded-b-lg shadow-md",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),";")),"\n",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token selector"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token class"}),".select2-search"))," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token atrule atapply"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token rule"}),"@apply")," border border-gray-300 rounded",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),";")),"\n",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token selector"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token class"}),".select2-results__group"))," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token atrule atapply"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token rule"}),"@apply")," text-lg font-bold text-gray-900",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),";")),"\n",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"))),(0,d.mdx)("p",null,"Any rules inlined with ",(0,d.mdx)("inlineCode",{parentName:"p"},"@apply")," will have ",(0,d.mdx)("inlineCode",{parentName:"p"},"!important")," ",(0,d.mdx)("strong",{parentName:"p"},"removed")," by default to avoid specificity issues:"),(0,d.mdx)("pre",Object.assign({},{className:"language-css"}),(0,d.mdx)("code",Object.assign({parentName:"pre"},{className:"language-css"}),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token comment"}),"/* Input */"),"\n",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token selector"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token class"}),".foo"))," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token property"}),"color"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token color"}),"blue")," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token important"}),"!important"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token selector"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token class"}),".bar"))," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token atrule atapply"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token rule"}),"@apply")," foo",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),";")),"\n",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token comment"}),"/* Output */"),"\n",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token selector"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token class"}),".foo"))," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token property"}),"color"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token color"}),"blue")," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token important"}),"!important"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token selector"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token class"}),".bar"))," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token property"}),"color"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token color"}),"blue"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"))),(0,d.mdx)("p",null,"If you’d like to ",(0,d.mdx)("inlineCode",{parentName:"p"},"@apply")," an existing class and make it ",(0,d.mdx)("inlineCode",{parentName:"p"},"!important"),", simply add ",(0,d.mdx)("inlineCode",{parentName:"p"},"!important")," to the end of the declaration:"),(0,d.mdx)("pre",Object.assign({},{className:"language-css"}),(0,d.mdx)("code",Object.assign({parentName:"pre"},{className:"language-css"}),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token comment"}),"/* Input */"),"\n",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token selector"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token class"}),".btn"))," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token atrule atapply"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token rule"}),"@apply")," font-bold py-2 px-4 rounded ",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token important"}),"!important"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),";")),"\n",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token comment"}),"/* Output */"),"\n",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token selector"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token class"}),".btn"))," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token property"}),"font-weight"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token number"}),"700")," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token important"}),"!important"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token property"}),"padding-top"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token number"}),".5"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token unit"}),"rem")," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token important"}),"!important"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token property"}),"padding-bottom"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token number"}),".5"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token unit"}),"rem")," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token important"}),"!important"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token property"}),"padding-right"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token number"}),"1"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token unit"}),"rem")," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token important"}),"!important"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token property"}),"padding-left"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token number"}),"1"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token unit"}),"rem")," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token important"}),"!important"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token property"}),"border-radius"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token number"}),".25"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token unit"}),"rem")," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token important"}),"!important"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"))),(0,d.mdx)("p",null,"Note that if you’re using Sass/SCSS, you’ll need to use Sass’ interpolation feature to get this to work:"),(0,d.mdx)("pre",Object.assign({},{className:"language-css"}),(0,d.mdx)("code",Object.assign({parentName:"pre"},{className:"language-css"}),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token selector"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token class"}),".btn"))," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token atrule atapply"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token rule"}),"@apply")," font-bold py-2 px-4 rounded #"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token important"}),"!important"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"))),(0,d.mdx)(g.Heading,{level:4,id:"using-apply-with-per-component-css",nextElement:{type:"paragraph"}},"Using @apply with per-component CSS"),(0,d.mdx)("p",null,"Component frameworks like Vue and Svelte support adding per-component styles within a ",(0,d.mdx)("inlineCode",{parentName:"p"},"<style>")," block that lives in each component file."),(0,d.mdx)("p",null,"If you try to ",(0,d.mdx)("inlineCode",{parentName:"p"},"@apply")," a custom class you’ve defined in your global CSS in one of these per-component ",(0,d.mdx)("inlineCode",{parentName:"p"},"<style>")," blocks, you’ll get an error about the class not existing:"),(0,d.mdx)(f.Editor,{filename:"main.css"},(0,d.mdx)("pre",Object.assign({},{className:"language-css"}),(0,d.mdx)("code",Object.assign({parentName:"pre"},{className:"language-css"}),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token atrule"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token rule"}),"@tailwind")," base",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),";")),"\n",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token atrule"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token rule"}),"@tailwind")," components",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),";")),"\n",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token atrule"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token rule"}),"@tailwind")," utilities",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),";")),"\n\n",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token atrule"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token rule"}),"@layer")," components")," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token selector"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token class"}),".card"))," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n    ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token property"}),"background-color"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token function"}),"theme"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token string"}),"'colors.white'"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n    ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token property"}),"border-radius"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token function"}),"theme"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token string"}),"'borderRadius.lg'"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n    ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token property"}),"padding"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token function"}),"theme"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token string"}),"'spacing.6'"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n    ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token property"}),"box-shadow"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token function"}),"theme"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token string"}),"'boxShadow.xl'"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}")))),(0,d.mdx)(f.Editor,{filename:"Card.svelte"},(0,d.mdx)("pre",Object.assign({},{className:"language-html"}),(0,d.mdx)("code",Object.assign({parentName:"pre"},{className:"language-html"}),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"div"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"slot"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"slot"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"div"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n\n",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"style"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token style"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token language-css"}),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token selector"}),"div")," ",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"{"),"\n    ",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token comment"}),"/* Won't work because this file and main.css are processed separately */"),"\n    ",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token atrule atapply"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token rule"}),"@apply")," card",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),";")),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"}"),"\n")),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"style"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">"))))),(0,d.mdx)("p",null,"This is because under-the-hood, frameworks like Vue and Svelte are processing every single ",(0,d.mdx)("inlineCode",{parentName:"p"},"<style>")," block independently, and running your PostCSS plugin chain against each one in isolation."),(0,d.mdx)("p",null,"That means if you have 10 components that each have a ",(0,d.mdx)("inlineCode",{parentName:"p"},"<style>")," block, Tailwind is being run 10 separate times, and each run has zero knowledge about the other runs. Because of this, when you try to ",(0,d.mdx)("inlineCode",{parentName:"p"},"@apply card")," in ",(0,d.mdx)("inlineCode",{parentName:"p"},"Card.svelte")," it fails, because Tailwind has no idea that the ",(0,d.mdx)("inlineCode",{parentName:"p"},"card")," class exists since Svelte processed ",(0,d.mdx)("inlineCode",{parentName:"p"},"Card.svelte")," and ",(0,d.mdx)("inlineCode",{parentName:"p"},"main.css")," in total isolation from each other."),(0,d.mdx)("p",null,"The solution to this problem is to define any custom styles you want to ",(0,d.mdx)("inlineCode",{parentName:"p"},"@apply")," in your components using the ",(0,d.mdx)(e.default,{href:"/docs/plugins",passHref:!0},(0,d.mdx)("a",null,"plugin system"))," instead:"),(0,d.mdx)(f.Editor,{filename:"tailwind.config.js"},(0,d.mdx)("pre",Object.assign({},{className:"language-js"}),(0,d.mdx)("code",Object.assign({parentName:"pre"},{className:"language-js"}),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"const")," plugin ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token function"}),"require"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token string"}),"'tailwindcss/plugin'"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n\nmodule",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"."),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token property-access"}),"exports")," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token operator"}),"=")," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token comment"}),"// ..."),"\n  plugins",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token operator"}),":")," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"["),"\n    ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token function"}),"plugin"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token keyword"}),"function")," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token parameter"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"{")," addComponents",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),",")," theme ",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"}")),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")")," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n      ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token function"}),"addComponents"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n        ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token string"}),"'.card'"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token operator"}),":")," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n          backgroundColor",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token operator"}),":")," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token function"}),"theme"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token string"}),"'colors.white'"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n          borderRadius",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token operator"}),":")," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token function"}),"theme"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token string"}),"'borderRadius.lg'"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n          padding",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token operator"}),":")," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token function"}),"theme"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token string"}),"'spacing.6'"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n          boxShadow",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token operator"}),":")," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token function"}),"theme"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token string"}),"'boxShadow.xl'"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n        ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),"\n      ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n    ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"]"),"\n",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}")))),(0,d.mdx)("p",null,"This way any file processed by Tailwind that uses this config file will have access to those styles."),(0,d.mdx)("p",null,"Honestly though the best solution is to just not do weird stuff like this at all. Use Tailwind’s utilities directly in your markup the way they are intended to be used, and don’t abuse the ",(0,d.mdx)("inlineCode",{parentName:"p"},"@apply")," feature to do things like this and you will have a much better experience."),(0,d.mdx)("hr",null),(0,d.mdx)(g.Heading,{level:2,id:"functions",nextElement:{type:"paragraph"}},"Functions"),(0,d.mdx)("p",null,"Tailwind adds a few custom functions you can use in your CSS to access Tailwind-specific values. These functions are evaluated at build-time, and are replaced by static values in your final CSS."),(0,d.mdx)(g.Heading,{level:3,id:"theme",nextElement:{type:"paragraph"}},"theme()"),(0,d.mdx)("p",null,"Use the ",(0,d.mdx)("inlineCode",{parentName:"p"},"theme()")," function to access your Tailwind config values using dot notation."),(0,d.mdx)("p",null,"This can be a useful alternative to ",(0,d.mdx)("inlineCode",{parentName:"p"},"@apply")," when you want to reference a value from your theme configuration for only part of a declaration:"),(0,d.mdx)("pre",Object.assign({},{className:"language-css"}),(0,d.mdx)("code",Object.assign({parentName:"pre"},{className:"language-css"}),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token selector"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token class"}),".content-area"))," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token property"}),"height"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token function"}),"calc"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token number"}),"100"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token unit"}),"vh")," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token operator"}),"-")," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token function"}),"theme"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token string"}),"'spacing.12'"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"))),(0,d.mdx)("p",null,"If you need to access a value that contains a dot (like the ",(0,d.mdx)("inlineCode",{parentName:"p"},"2.5")," value in the spacing scale), you can use square bracket notation:"),(0,d.mdx)("pre",Object.assign({},{className:"language-css"}),(0,d.mdx)("code",Object.assign({parentName:"pre"},{className:"language-css"}),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token selector"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token class"}),".content-area"))," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token property"}),"height"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token function"}),"calc"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token number"}),"100"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token unit"}),"vh")," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token operator"}),"-")," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token function"}),"theme"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token string"}),"'spacing[2.5]'"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"))),(0,d.mdx)("p",null,"Since Tailwind uses a ",(0,d.mdx)(e.default,{href:"/docs/colors#nested-object-syntax",passHref:!0},(0,d.mdx)("a",null,"nested object syntax"))," to define its default color palette, make sure to use dot notation to access the nested colors."),(0,d.mdx)(j.TipBad,{mdxType:"TipBad"},"Don't use the dash syntax when accessing nested color values"),(0,d.mdx)("pre",Object.assign({},{className:"language-css"}),(0,d.mdx)("code",Object.assign({parentName:"pre"},{className:"language-css"}),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token selector"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token class"}),".btn-blue"))," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token property"}),"background-color"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token function"}),"theme"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token string"}),"'colors.blue-500'"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"))),(0,d.mdx)(j.TipGood,{mdxType:"TipGood"},"Use dot notation to access nested color values"),(0,d.mdx)("pre",Object.assign({},{className:"language-css"}),(0,d.mdx)("code",Object.assign({parentName:"pre"},{className:"language-css"}),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token selector"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token class"}),".btn-blue"))," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token property"}),"background-color"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),":")," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token function"}),"theme"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"("),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token string"}),"'colors.blue.500'"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),")"),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"))),(0,d.mdx)(g.Heading,{level:3,id:"screen",nextElement:{type:"paragraph"}},"screen()"),(0,d.mdx)("p",null,"The ",(0,d.mdx)("inlineCode",{parentName:"p"},"screen")," function allows you to create media queries that reference your breakpoints by name instead of duplicating their values in your own CSS."),(0,d.mdx)("pre",Object.assign({},{className:"language-css"}),(0,d.mdx)("code",Object.assign({parentName:"pre"},{className:"language-css"}),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token atrule"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token rule"}),"@media")," ",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token function"}),"screen"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"("),"sm",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),")"))," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token comment"}),"/* ... */"),"\n",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"))),(0,d.mdx)("p",null,"This will resolve to the underlying screen value at build-time, generating a regular media query that matches specificied breakpoint:"),(0,d.mdx)("pre",Object.assign({},{className:"language-css"}),(0,d.mdx)("code",Object.assign({parentName:"pre"},{className:"language-css"}),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token atrule"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token rule"}),"@media")," ",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"("),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token property"}),"min-width"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),":")," ",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token number"}),"640"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token unit"}),"px"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),")"))," ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"{"),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token comment"}),"/* ... */"),"\n",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token punctuation"}),"}"))))}m.isMDXComponent=!0,m.layoutProps=k},59533:function(a,b,c){"use strict";c.r(b),c.d(b,{Editor:function(){return f}});var d=c(85893),e=c(6774);function f(a){var b=a.filename,c=a.children;return(0,d.jsxs)("div",{className:"mt-5 mb-8 first:mt-0 last:mb-0 pt-2 bg-gray-800 rounded-xl shadow-lg overflow-hidden",children:[(0,d.jsx)(e.n,{primary:{name:b},showTabMarkers:!1}),(0,d.jsx)("div",{className:"children:my-0",children:c})]})}},6774:function(a,b,c){"use strict";c.d(b,{n:function(){return f}});var d=c(85893),e=c(86010);function f(a){var b=a.primary,c=a.secondary,f=a.showTabMarkers,g=a.side,h=a.children;return(0,d.jsxs)("div",{className:"flex text-gray-400 text-xs leading-6",children:[(0,d.jsxs)("div",{className:"flex-none text-sky-300 border-t border-b border-t-transparent border-b-sky-300 px-4 py-1 flex items-center",children:[b.name,(void 0===f||f)&&(b.saved?(0,d.jsx)("svg",{viewBox:"0 0 4 4",className:"ml-2.5 flex-none w-1 h-1 text-gray-500 overflow-visible",children:(0,d.jsx)("path",{d:"M-1 -1L5 5M5 -1L-1 5",fill:"none",stroke:"currentColor",strokeLinecap:"round"})}):(0,d.jsx)("div",{className:"ml-2.5 flex-none w-1 h-1 rounded-full bg-current"}))]}),(0,d.jsxs)("div",{className:(0,e.Z)("flex-auto flex items-center bg-gray-700/50 border border-gray-500/30","left"===g?"rounded-tl lg:rounded-tr":"rounded-tl"),children:[(void 0===c?[]:c).map(function(a){var b=a.name,c=a.open,f=a.className;return(0,d.jsx)("div",{className:(0,e.Z)("px-4 py-1 border-r border-gray-200/5",f,{italic:!(void 0===c||c)}),children:b},b)}),h&&(0,d.jsx)("div",{className:"flex-auto flex items-center justify-end px-4 space-x-4",children:h})]})]})}},55390:function(a,b,c){"use strict";c.r(b),c.d(b,{TipGood:function(){return e},TipBad:function(){return f},TipCompat:function(){return g},TipInfo:function(){return h}});var d=c(85893);function e(a){var b=a.children;return(0,d.jsxs)("div",{className:"flex items-start my-6 space-x-4",children:[(0,d.jsxs)("div",{className:"relative mt-1 w-4 h-4 rounded-full bg-cyan-500 text-white flex items-center justify-center ring-2 ring-cyan-500",children:[(0,d.jsx)("svg",{width:"6",height:"4.5",className:"overflow-visible","aria-hidden":"true",children:(0,d.jsx)("path",{d:"M6 0L2 4.5L0 2.5",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}),(0,d.jsx)("div",{className:"absolute top-full mt-1 left-[0.46875rem] w-px h-[1.375rem] bg-cyan-500/30 rounded-full"})]}),(0,d.jsx)("p",{className:"m-0 flex-1 text-base font-semibold text-gray-900",children:b})]})}function f(a){var b=a.children;return(0,d.jsxs)("div",{className:"flex items-start my-6 space-x-4",children:[(0,d.jsxs)("div",{className:"relative mt-1 w-4 h-4 rounded-full bg-rose-400 text-white flex items-center justify-center ring-2 ring-rose-400",children:[(0,d.jsx)("svg",{width:"6",height:"6",className:"overflow-visible","aria-hidden":"true",children:(0,d.jsx)("path",{d:"M0 0L6 6M6 0L0 6",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}),(0,d.jsx)("div",{className:"absolute top-full mt-1 left-[0.46875rem] w-px h-[1.375rem] bg-rose-200 rounded-full"})]}),(0,d.jsx)("p",{className:"m-0 flex-1 text-base font-semibold text-gray-900",children:b})]})}function g(a){var b=a.children;return(0,d.jsx)("div",{className:"text-sm bg-light-blue-100 text-light-blue-800 font-medium px-4 py-3 mb-4 rounded-xl",children:(0,d.jsxs)("div",{className:"flex items-start space-x-3",children:[(0,d.jsx)("svg",{width:"20",height:"20",className:"text-light-blue-500",fill:"currentColor",children:(0,d.jsx)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M6.998 2a1 1 0 00-.707 1.707l.707.707v3.758a1 1 0 01-.293.707l-4 4C.815 14.769 2.154 18 4.826 18H15.17c2.672 0 4.01-3.231 2.12-5.121l-4-4a1 1 0 01-.292-.707V4.414l.707-.707A1 1 0 0012.998 2h-6zm2 6.172V4h2v4.172a3 3 0 00.879 2.12l1.027 1.028a4 4 0 00-2.171.102l-.47.156a4 4 0 01-2.53 0l-.563-.187a1.992 1.992 0 00-.114-.035l1.063-1.063a3 3 0 00.879-2.121z"})}),(0,d.jsx)("p",{className:"flex-1",children:b})]})})}function h(a){var b=a.children;return(0,d.jsxs)("div",{className:"not-prose mt-6 -mb-1 flex space-x-2",children:[(0,d.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",className:"flex-none w-5 h-5 text-gray-400",viewBox:"0 0 20 20",fill:"currentColor",children:(0,d.jsx)("path",{fillRule:"evenodd",d:"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z",clipRule:"evenodd"})}),(0,d.jsx)("p",{className:"text-gray-700 text-sm font-medium",children:b})]})}},53339:function(a,b,c){"use strict";c.r(b),c.d(b,{DocumentationLayout:function(){return l}});var d=c(85893),e=c(21744),f=c(9008),g=c(11163),h=c(21370),i=c(68224),j=c(54713);function k(a,b,c){return b in a?Object.defineProperty(a,b,{value:c,enumerable:!0,configurable:!0,writable:!0}):a[b]=c,a}function l(a){var b=(0,g.useRouter)();return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(i.D,{suffix:"/"===b.pathname?void 0:"Tailwind CSS",children:a.layoutProps.meta.metaTitle||a.layoutProps.meta.title}),(0,d.jsxs)(f.default,{children:[(0,d.jsx)("meta",{name:"twitter:card",content:"summary"},"twitter:card"),(0,d.jsx)("meta",{name:"twitter:image",content:"https://tailwindcss.com".concat(h.Z)},"twitter:image")]}),(0,d.jsx)(e.C,function(a){for(var b=1;b<arguments.length;b++){var c=null!=arguments[b]?arguments[b]:{},d=Object.keys(c);"function"==typeof Object.getOwnPropertySymbols&&(d=d.concat(Object.getOwnPropertySymbols(c).filter(function(a){return Object.getOwnPropertyDescriptor(c,a).enumerable}))),d.forEach(function(b){k(a,b,c[b])})}return a}({nav:j.u},a))]})}l.nav=j.u}},function(a){a.O(0,[9774,6401,6852,1350,4713,2888,179],function(){return a(a.s=53829)}),_N_E=a.O()}])