{"componentChunkName":"component---src-templates-post-js","path":"/blog/2021/03/05/a-hack-for-missing-at-root-for-tailwind-css-plugin/","result":{"data":{"site":{"siteMetadata":{"siteUrl":"https://sung.codes"}},"mdx":{"id":"ae939c4d-2142-5bdd-8aa3-15749ab66b10","body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n \"title\": \"A hack for missing @at-root for Tailwind CSS Plugin\",\n \"date\": \"2021-03-05\",\n \"published\": true,\n \"tags\": \"tailwind, tailwindcss, hack, SASS\",\n \"author\": \"Sung M. Kim\",\n \"banner\": \"./images/featured-image.jpg\",\n \"bannerCredit\": \"Image by [Peter H](https://pixabay.com/users/tama66-1032521/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=1644155) from [Pixabay](https://pixabay.com/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=1644155)\"\n};\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, [\"components\"]);\n\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"h2\", null, \"Introduction\"), mdx(\"p\", null, \"I was creating a Tailwind CSS (\\\"TW\\\") plugin, \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://github.com/downwindcss/debug\"\n }), \"@downwindcss/debug\"), \". for a utility \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"outline-{n}\"), \" to apply outline.\"), mdx(\"p\", null, \"The utility should apply to a whole page when a user adds the utility class anywhere in the DOM tree.\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"Basically \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://sass-lang.com/documentation/at-rules/at-root\"\n }), \"@at-root\"), \" in SASS.\"), mdx(\"h2\", null, \"Problems and Attempts\"), mdx(\"p\", null, \"When you add a utility, you can use a \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://tailwindcss.com/docs/plugins#css-in-js-syntax\"\n }), \"CSS-in-JS syntax\"), \", to refer to the parent with \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"&\"), \" (ampersand).\"), mdx(\"h3\", null, \"Attempt #1\"), mdx(\"p\", null, \"My attempt was to do was to apply to descendants of \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"\"), \" (line #5, \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"\\\"body *, &\\\"\"), \").\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", _extends({\n parentName: \"div\"\n }, {\n \"className\": \"language-js\"\n }), mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-js\"\n }), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token keyword\"\n }), \"const\"), \" numberedOutlines \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), \"=\"), \" Object\", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \".\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token function\"\n }), \"entries\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"(\"), \"values\", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \")\"), \"\\n \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \".\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token function\"\n }), \"filter\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"(\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"(\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token parameter\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), \"[\"), \"key\", mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), \"]\")), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \")\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), \"=>\"), \" key \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), \"!==\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token string\"\n }), \"\\\"DEFAULT\\\"\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \")\"), \"\\n \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \".\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token function\"\n }), \"map\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"(\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"(\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token parameter\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), \"[\"), \"key\", mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), \",\"), \" value\", mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), \"]\")), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \")\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), \"=>\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"(\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"{\"), \"\\n \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"[\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token template-string\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token template-punctuation string\"\n }), \"`\"), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token string\"\n }), \".\"), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token interpolation\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token interpolation-punctuation punctuation\"\n }), \"${\"), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token function\"\n }), \"e\"), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), \"(\"), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token template-string\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token template-punctuation string\"\n }), \"`\"), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token string\"\n }), \"outline-\"), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token interpolation\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token interpolation-punctuation punctuation\"\n }), \"${\"), \"key\", mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token interpolation-punctuation punctuation\"\n }), \"}\")), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token template-punctuation string\"\n }), \"`\")), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), \")\"), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token interpolation-punctuation punctuation\"\n }), \"}\")), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token template-punctuation string\"\n }), \"`\")), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"]\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \":\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"{\"), \"\\n \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token string\"\n }), \"\\\"body > *\\\"\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \":\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"{\"), \"\\n outline\", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \":\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token template-string\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token template-punctuation string\"\n }), \"`\"), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token interpolation\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token interpolation-punctuation punctuation\"\n }), \"${\"), \"value\", mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token interpolation-punctuation punctuation\"\n }), \"}\")), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token string\"\n }), \" solid red\"), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token template-punctuation string\"\n }), \"`\")), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \",\"), \"\\n \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"}\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \",\"), \"\\n \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"}\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \",\"), \"\\n \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"}\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \")\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \")\")))), mdx(\"p\", null, \"But TW appended \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \".outline\"), \" to the output.\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"css\"\n }, mdx(\"pre\", _extends({\n parentName: \"div\"\n }, {\n \"className\": \"language-css\"\n }), mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-css\"\n }), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token selector\"\n }), \".outline body > *\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"{\"), \"\\n \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token property\"\n }), \"outline\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \":\"), \" 1px solid red\", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \";\"), \"\\n\", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"}\")))), mdx(\"p\", null, \"That's not the selector I wanted. I wanted a simple \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"body > *\"), \" to apply the outline to the whole page!\"), mdx(\"h3\", null, \"Attempt #2\"), mdx(\"p\", null, \"As \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"&\"), \" refers to the parent selector, \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \".outline\"), \", I was adding \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"&\"), \" either to the left or to the right separated by \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \",\"), \".\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", _extends({\n parentName: \"div\"\n }, {\n \"className\": \"language-js\"\n }), mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-js\"\n }), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token string\"\n }), \"\\\"body > *, &\\\"\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \":\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"{\"), \"\\n outline\", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \":\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token template-string\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token template-punctuation string\"\n }), \"`\"), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token interpolation\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token interpolation-punctuation punctuation\"\n }), \"${\"), \"value\", mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token interpolation-punctuation punctuation\"\n }), \"}\")), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token string\"\n }), \" solid red\"), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token template-punctuation string\"\n }), \"`\")), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \",\"), \"\\n\", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"}\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \",\"), \"\\n\\n\", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token comment\"\n }), \"// or\"), \"\\n\\n\", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token string\"\n }), \"\\\"&, body > *\\\"\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \":\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"{\"), \"\\n outline\", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \":\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token template-string\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token template-punctuation string\"\n }), \"`\"), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token interpolation\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token interpolation-punctuation punctuation\"\n }), \"${\"), \"value\", mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token interpolation-punctuation punctuation\"\n }), \"}\")), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token string\"\n }), \" solid red\"), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token template-punctuation string\"\n }), \"`\")), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \",\"), \"\\n\", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"}\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \",\")))), mdx(\"p\", null, \"But both of them still appeneded \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \".outline\"), \" in front of \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"body\"), \" like,\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"css\"\n }, mdx(\"pre\", _extends({\n parentName: \"div\"\n }, {\n \"className\": \"language-css\"\n }), mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-css\"\n }), \".outline body > *\", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \",\"), \" .outline\\n// or\\n.outline\", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \",\"), \" .outline body > *\"))), mdx(\"h2\", null, \"Working Code\"), mdx(\"p\", null, \"Ok, frustrated I was, I decided to hack it by excluding the current \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"&\"), \" and including it again (\", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"body * > :not(&), &\"), \").\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", _extends({\n parentName: \"div\"\n }, {\n \"className\": \"language-js\"\n }), mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-js\"\n }), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token keyword\"\n }), \"const\"), \" numberedOutlines \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), \"=\"), \" Object\", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \".\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token function\"\n }), \"entries\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"(\"), \"values\", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \")\"), \"\\n \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \".\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token function\"\n }), \"filter\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"(\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"(\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token parameter\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), \"[\"), \"key\", mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), \"]\")), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \")\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), \"=>\"), \" key \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), \"!==\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token string\"\n }), \"\\\"DEFAULT\\\"\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \")\"), \"\\n \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \".\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token function\"\n }), \"map\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"(\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"(\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token parameter\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), \"[\"), \"key\", mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), \",\"), \" value\", mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), \"]\")), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \")\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), \"=>\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"(\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"{\"), \"\\n \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"[\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token template-string\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token template-punctuation string\"\n }), \"`\"), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token string\"\n }), \".\"), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token interpolation\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token interpolation-punctuation punctuation\"\n }), \"${\"), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token function\"\n }), \"e\"), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), \"(\"), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token template-string\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token template-punctuation string\"\n }), \"`\"), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token string\"\n }), \"outline-\"), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token interpolation\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token interpolation-punctuation punctuation\"\n }), \"${\"), \"key\", mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token interpolation-punctuation punctuation\"\n }), \"}\")), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token template-punctuation string\"\n }), \"`\")), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), \")\"), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token interpolation-punctuation punctuation\"\n }), \"}\")), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token template-punctuation string\"\n }), \"`\")), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"]\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \":\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"{\"), \"\\n \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token string\"\n }), \"\\\"body * > :not(&), &\\\"\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \":\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"{\"), \"\\n outline\", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \":\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token template-string\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token template-punctuation string\"\n }), \"`\"), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token interpolation\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token interpolation-punctuation punctuation\"\n }), \"${\"), \"value\", mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token interpolation-punctuation punctuation\"\n }), \"}\")), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token string\"\n }), \" solid red\"), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token template-punctuation string\"\n }), \"`\")), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \",\"), \"\\n \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"}\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \",\"), \"\\n \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"}\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \",\"), \"\\n \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"}\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \")\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \")\")))), mdx(\"p\", null, \"You can see that \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"outline-5\"), \" was applied somewhere in the DOM tree and \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"outline\"), \" was applied to the whole page.\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"(disregard the fact that it's showing \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"outline-4\"), \" cuz it's WIP \\uD83D\\uDE05)\"), mdx(\"p\", null, mdx(\"span\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"1035px\"\n }\n }), \"\\n \", mdx(\"a\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/eb7ecbac8d44540d61ce38740485bc1f/8a29d/working-css.jpg\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": \"noopener\"\n }), \"\\n \", mdx(\"span\", _extends({\n parentName: \"a\"\n }, {\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"59.45945945945946%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAMABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAEGBP/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAHJTSdbTGR//8QAGRAAAwEBAQAAAAAAAAAAAAAAAAECETEy/9oACAEBAAEFAndC5g28nyf/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAZEAACAwEAAAAAAAAAAAAAAAABEAAycZH/2gAIAQEABj8CuewMYv/EABoQAAMAAwEAAAAAAAAAAAAAAAABESFxocH/2gAIAQEAAT8hj9Rb1IQqK4hyBH//2gAMAwEAAgADAAAAEIDP/8QAFxEAAwEAAAAAAAAAAAAAAAAAARARQf/aAAgBAwEBPxCjF//EABURAQEAAAAAAAAAAAAAAAAAAAEQ/9oACAECAQE/EGf/xAAdEAEAAgEFAQAAAAAAAAAAAAABACERMVFhcaHw/9oACAEBAAE/EApArML0CNz1ATTyHA7DHE+JtGpP/9k=')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n })), \"\\n \", mdx(\"img\", _extends({\n parentName: \"a\"\n }, {\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"working!\",\n \"title\": \"working!\",\n \"src\": \"/static/eb7ecbac8d44540d61ce38740485bc1f/af659/working-css.jpg\",\n \"srcSet\": [\"/static/eb7ecbac8d44540d61ce38740485bc1f/8356d/working-css.jpg 259w\", \"/static/eb7ecbac8d44540d61ce38740485bc1f/bc760/working-css.jpg 518w\", \"/static/eb7ecbac8d44540d61ce38740485bc1f/af659/working-css.jpg 1035w\", \"/static/eb7ecbac8d44540d61ce38740485bc1f/8a29d/working-css.jpg 1197w\"],\n \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n })), \"\\n \"), \"\\n \")), mdx(\"hr\", null), mdx(\"p\", null, \"Image by \", mdx(\"a\", {\n href: \"https://pixabay.com/users/tama66-1032521/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=1644155\"\n }, \"Peter H\"), \" from \", mdx(\"a\", {\n href: \"https://pixabay.com/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=1644155\"\n }, \"Pixabay\")));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"A hack for missing @at-root for Tailwind CSS Plugin","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='300'%20viewBox='0%200%20400%20300'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%20144a726%20726%200%20001%20148c-2%202-1%203%201%202h3l1-1c-1-1%200-1%201-2l2%201%203-1%205-3%203-1-1-1-1-1%208-4-2%202c-2%202-3%203-1%203l3-3%203-2h1l2-1c8%200%2014-1%2015-3%200-1%201-1%203%201%203%201%204%201%202-1-1-1-1-1%201-1l4-1%203-1%202%201-1%201c-2%200-3%202-3%203%201%202%205%200%205-2s1-2%203-2h6l-1%202h3c4%200%205%200%206%202%200%202%202%203%204%203l-1-1v-1l9%204h-5c-1-1-4-1-4%201s0%203-2%203l-2%201-4%202c0-1%201-4%203-4l1-1-3-1c-2%200-3%201-3%202l-1%202-1%202c0%202%200%202%204%202h3c-1%201%200%201%202%201l1%201c0%201-7%203-9%202l-2%201c0%201%201%202%205%202l5-1h1l4%201c4-1%205-3%203-3l-2-1%201-2%201-1h-3l-2%201%201-2v-2l-1-1%203-1%202-1h4l4-1h3l3%201%204%201%206%202c2%200%203%200%202%202%200%201%201%201%203-1l2-1h13l2-1h2l-2%202-1%201%201%202h-1l-2-1-1%201-1%202h-1c1-1-1-4-3-4l-1%204c0%203%201%204%203%204l2-1h4l2-1v-2l3-1c2%200%203%200%203-2s0-2-2-2v-1l-1-2h-1c-1-1%200-1%202-1%204%200%206%202%203%202l1%202%201%203v3l1%201%201%201%202%201%201-1-2-2-2-1h1l1-1v-1l1%201h3l1-2%201-1%201%202c-1%202%201%203%201%201h3c1-2%200-2-1-2-2%200-2%200-2-2v-1l-2-1-1-1-1%201-1%201c-1%201-1%200-1-1%201-3%202-3%205-2h2l2-2%201%202-1%202-1%202%201%201%203%201%201-1v-3c-5%200-1-2%207-3l12-3h5l5-1%204-1%204-1%206-1h2c1%201%200%201-1%202l1%201v1c-2%200-2%203%200%203l2%201%202-1%205-2c6%200%2010-1%2010-2l2-1c2%200%203%202%200%202v1l2%201%201-1c1-2%202-2%206-3%202%200%203%200%202%201l-1%201-2%201v1h4l1-2%201%201%202%201c2%200%203-1%202-2l1-1%201%201h2l-1-1v-1l1-2h1l1%202h1l2%201-1-1v-2l2%201h2l2-1c1%200%201%201-1%201-1%201-1%201%201%201%202-1%203%200%203%201v1l-2%201-2%202v-1l-1-3c-2-2-2%201-1%205%201%203%202%203%202%202%201-3%203-1%202%201l1%202%202-2%201-1%201-2%202-2c2-1%202-1%200-3l-4-3v-1c1-2%207-1%207%201l-2%201%202%202h4c0-2%204-1%203%201l1%201h2c1%201%201%201-1%201l-3%201h-1c0-1-3-2-3%200h-2l-3%201h2v3h3l1%202c3%201%201%202-3%201-2%200-3-1-3-2h-1c-2%200-3%204-2%204%202-1%204%201%204%203s1%202%204%202%204%200%204-2l3-2c4%200%204%200%202%202-1%202-1%202%2018%202h20v-4c1-3%204-5%205-4l-2%204-2%204h19c18%200%2019%200%2018-2l-1-2v-21l1-14h3c3%200%204%203%204%2017l1%2014v8h9c7%200%208%200%207-1l-3-1c-1-1%203-7%205-7%203%200%207%204%207%206s1%203%204%203c5%200%205-1%206-11%200-5%200-6-2-4-4%204-7%202-4-3%201-3%205-4%205-1a10517%2010517%200%20000-216%20319%20319%200%2001-3%2066h-6l-1%201-1-2c1-1%200-1-2-2l-5-5-2-4h-4c-4-1-5-1-6%201h-3l-8-3-6-3-2-2c-2%200-2-1-2-3v-2c-1%200-2-1-2-3-2-3-3-4-6-4s-4%202-1%203c2%200%202%200%201%201v2l1%201h2v1l2%201c0%202-13-3-19-8l-8-5-7-5a199%20199%200%2000-24-13l-7-1-8-3-6-1-9-2-24-6c-4-1-5-3-2-3%204%200%206-2%203-5-2-1-3-3-3-7-2-9-2-9-8-11a155%20155%200%2000-31-7c1-1-20-5-26-5-4%200-6%201-7%202h-2v-1l-1-2-2-1h7c6%200%206%200%205-1s-3-2-8-2h-7l-2%205c-1%206-1%2011%201%2011v2l-3%204-1%203v2l-1%203-1%203-2%203-1%206-1%202c0%203-6%2028-7%2027l2-11a128%20128%200%20003-14l1-2-2-1h-4c-1%202-3%201-3%200%200-2-1-2-3-2l-5-1-3-2%202-2c3-3%207-3%207-1h1c1-1%201-1%201%202v3l7-15c1-5%203-8%206-7%201%200%202%200%202-2l1-6%202-5%202-6v-1l-3-2-2-1c0%203%200%203-3%205-4%201-8%200-10-5l-3-5-2-3-1-1-3-4-2-4H0v144M260%2015l-3%204-3%202c-2-1-8%202-8%204l3%205c4%204%203%205-4%207-4%201-7%203-4%203v5c-1%201-2%2012-1%2014h1c4-3%207-2%2011%202%203%203%205%204%206%203l6-1c5-1%207-2%207-4l-7-4-3-3-2-3-3%202c-2%203-3%203-6%202-4-2-5-5-2-7%205-4%207-7%207-9s0-2%201-1h1l3-3c3-2%203-2%206-1%202%202%204%202%204%201v-1c-2%200-2%200-1-1l2-3v-6c-2-2-2-2%200-2%202-1%202-1%201-2l-3%201c-1%202-4%200-4-3h-1l-1-1h-3m31%2033l-2%202%201%205c1%202%205%205%208%205l3%201c1%202%202-2%202-8%200-3-1-4-3-4l-4-1-2-1-3%201m55%202l-6%201h-3v3l3%202%201%202%201%201%202%203c2%202%202%202%200%204l-3%203v3l1-1%202%201c3%202%207%204%208%202l2-1c1%200%201-2-1-4v-6l-1-7-2-8-4%202M134%2067h-3l-1%202-1%202-1%205c-1%204-2%204-4%204h-3c-2-1-5%207-6%2013%200%205-1%206-3%201v-4c1-4-2-8-5-7-3%202-5%207-5%2014s-1%2010-4%2010l-1-10%201-11h-2c-4%200-6%205-6%2012l-3%2014c-1%201%200%205%202%2011l1%2010%201%209-6%202c-6%202-7%201-5-5l2-14%202-10V89l-3-1c-4%200-5%203-5%2012%200%208-1%2011-4%2011l-1-11c0-9-1-10-3-10-3%200-4%202-4%2012l-1%209-1%205c0%203%200%204-1%203l-2-4c-2-1-2-2-1-10%202-11%200-16-5-11-2%202-2%203-2%2011%200%206%200%209-2%2012l-1%204c2%200%204%207%203%2011a116%20116%200%2000-3%2014l-11%206-6%201-7%204-3%205c-3%203%201%2011%205%2011v8c2%201%204%201%209-1%204-2%205-4%202-6-1-2-1-2%201-4l6-2%203-1c1-3%203-5%204-5l2%202c-1%201%201%206%202%207%202%201%207-1%209-2l2-1%207-3%208-3%203-1c1-1%202-2%204-1l1%201-2%204c-1%202-2%203-6%203-2%200-7%201-10%203l-7%203c-3%200-7%205-4%206%201%200-3%2016-5%2018l-1-1-3-1h-4c-6-2-10%205-6%2010l2%202%203-2c3-2%204-2%206-1h4c2%200%205%201%206%205%202%204%205%201%205-5%200-2%201-3%203-4%202-2%202-3%201-6l1-3c3%201%206-1%207-4%201-2%202-3%204-3s2%200%201-1c-2-1-2-1%200-1%202%201%207-3%207-6l1-1%201%201%204-1c4-1%204-1%203%201l-3%202c-4%201-7%205-5%208s0%207-4%207c-3%201-8%205-8%207l-2%202-1%206c1%203%201%204-3%2010l-6%206-2%202c0%202%200%203-2%203l-1%201c1%201%200%202-1%203l-1%202-6%2010c-6%207-8%2012-3%207a353%20353%200%200113-17l2-4%203-4%204-5a225%20225%200%200118-28l3-4%204-4%201-1v-2l1-2%202-3%201-2c0-1%200-2%201-1l2-2%202-2%201-2%202-8v-3l1-2c1%201%201%200%201-1l3-9c4-9%205-13%205-22l2-8v-6l-1-1c1-2%204%202%204%204l-4%2014h1l2-6c4-11%204-12-1-14-4-1-5-2-5-4l1-3%202-6%202-7%201-2c0-2%203-10%205-10v-3l2-4%202-2h-1m214%209c-1%2021%200%2027%203%2025%202-2%201-6-1-6v-2l3-6%202-4c1%200%201-1-1-2l-2-3c-1-2-4-3-4-2m-81%207l-2%204-2%202-1%201-2%203-1%203-1%201-1%201v4l-1%203v3c1%201%201%201-1%201l-2%201%201%201%201%201-1%201c-1-1-5%202-5%204l-2%202v3c-2%201-4%206-3%206v1c-2%200-2%201%201%203l2%202h1c2%202%202%202%203%200%202-2%205-3%208-1%201%201%201%201-1%201h-3c0%201%204%204%206%204l2%201h-3c-3-1-1%201%202%203%203%201%204%200%206-2s2-2%208-1c6%202%2010%202%2010%200l-3-1h-2c1-1%200-1-1-1l-2-1h2l2-1-2-1-8-3-10-4-2-1-1-1c-2-1-2-1%200-2l3-1-2-1h-4l-2-1h1v-2l1-3%202%202%201%201%202%201h7l-1%202-1%202h2l2-2c2-2%203-3%202-1%200%203%2011%207%2013%205h1c0%201%200%202%201%201l3%202%204%201c2-1%203%200%201%203-4%204-3%205%203%205l5%202-1%201-2%202c-1%202%200%203%202%201s8-3%208-2c1%201%200%201-1%201l-3%201c-1%201%201%201%205%201l3%201%203%201c2%200%202%200%200%201s-2%201-1%202l3-1%206%201c6%203%207%203%207%201%201-2%200-4-3-4-2%201-4-1-4-3h1c0%202%203%201%203-1l-2-2-2%201-1%201v-6l1-3%202%201%202%201v-1l-1-2c0-1-5-3-7-2l-2-1c-1-1-1-1%201-1h2l3-1h1v-3l-1-1h-1l-1%202-1-2c1-3%201-4%204-2%201%202%202%202%202%201h5c3%201%204%201%203%202h-3c-3-2-6-1-4%200%203%203%207%203%208%201h1l-1%202v1l2-1%202-1%205%201c2%200%203%201%203%204l-1%204v1l-2%201v3l-2-2c-1-1-1-1-2%201-2%201-4%200-4-2l-2-1c-3%200-3%203-1%205%202%201%202%202%201%202h-1l-1-1c-2%200-2%202-1%203v1l1%201%202-1c0-3%202-1%201%201%200%201%200%202%201%201h12l-2-4-2-2h2l3%201%201%201h-1v2c0%203%200%203%204%203h3c-1-2%200-3%202-1l2%201%203%202c1%201-1%201-6-1l-1%201%204%201c4%201%204%201%203%202-2%201-2%203%201%203v-2l3-1c3%201%203%201%203-1l1-2%2014%204%204%201%203%201c0%201-1%202-5%201-5%200-6-1-4-2l-2-1-5-1c-2-1-2%200-1%204h3l3%201%204%201%202%201c1%201%206%202%209%201%203-2%203-12%200-12v-1c2-1%202-11%200-11v-1l-1-2-1-1h-6c-3-1-3-1-2%202s-1%203-3%200c-2-2-2-2%200-3s0-1-5-2l-5-2c-2%200-3%201%200%203%201%201%201%201-1%201-4-1-6%202-2%204l4%201%202%201-3%201h-2c0%202-1%202-5%200-8-2-9-3-3-3l5%201-6-2-4-2%201-2-2%201c-1%201-1%201-4-1s-4-3-2-4c1-1%201-1-1-1s-5-3-3-3c2-1%208%201%209%203%200%202%201%202%201%201h2l7%201h5l-6-2c-6-2-9-5-5-5l-1-1c-3-1-6%200-3%202v1l-7-3-4-1-4%201c2%201%201%202-3%201-2-1-3-1-2-2%202-1%201-2-4-4l-5-3c-1-5-2-6-3-3l-2%202-2%201-7%201-5-2-3-1c-2%201-2%201%200%200%201-1%201-1-1-2-3-1-3-3%200-2l2-1-2-1-2-1-1-1h-9c-2%202-9%201-11-2-3-3-2-4%202-2%203%202%204%202%201-1h-6l-2%201c-1%200-2%200-1-1l-3-1c-2%200-2%200-1-1h3l1-1c0-1-3-2-4-1-1%200-2-1-2-3v-3c2%200%201-2-1-2l-2-1%202-1%202%201%202%201h2l1%201%206%201c4%203%205%203%206%201v-2c-1-1-1-1%201-1l-2-2c-4-1-5-1-5%201l-1%201v-2l-1-2-1%201h-6l-2-1c0-2-4-1-5%201M30%20101l-1%203c0%205-2%2011-4%2014l-2%203-4%203c-6%203-9%209-9%2018%200%206-1%207-2%208-3%200-4%204-1%206h3l2-1c2%200%203-3%202-8l1-2%201-2%202-2c2%200%203%201%201%202-1%201%200%207%201%208%201%200%206-8%206-12%200-5%202-11%203-11s2-5%202-14l1-11c1-3%200-4-2-2m84%202v5l-1%204-1%209-2%2011-1%203c1%201%208-2%207-3a596%20596%200%2001-2-29m-17%2014a291%20291%200%2000-4%2023c0%203%207%205%209%202l1-2-1-10c0-12-4-22-5-13m-30%200l-2%204v2l1%201c4%202%205%207%201%2010-2%202-2%203-2%206s2%204%208%203h4l-2-4v-9c0-4%200-5-2-9-3-6-3-6-6-4m139%2023v14l-1%2011c-1%201-3%201-3-2l-1-1c-2%200-2%201-2%207l1%206v3l1%203v4c0%203%201%205%204%203h1c0%202%200%202%202%201h4c-1%201%200%201%202%201l2%201h5c2-1%206%200%206%202l-4%203c-3%201-5%203-6%205l-1%202-2-2c-2-2-8-3-10-1-1%201%200%208%201%208l1-1h1c2%201%205%201%207-1l11-1c11-1%2012%200%2010%205-2%203-2%204%200%205%203%202%208%203%2010%201%203-3%208-2%2010%201%201%202%202%203%203%201l3-2c5%200%209-1%2010-3l2-1c3%200%205-3%203-6l-1-5c1-4%201-4-5-7-6-2-8-5-7-7h7l4%203c5%202%207%206%205%209-3%203-2%208%203%209%207%201%209-2%204-7-4-4-3-6%202-3l6%202c2%200%204%202%204%206%200%205%2010%207%2013%202%201-3%207-4%2010-2l2%201-1-11%201-5c2-1%202-2%201-3v-5l-2-4-1-4v-1c1-1%201-1-1-1-3%200-7%203-7%205%201%203-1%205-4%204-2-1-2-2-1-4%201-1%202-3%201-4v-3c0-4-8-3-8%202s0%206-3%206c-5%200-6-8%200-11l3-2-7-2-21-7-10-4-11-4-6-2-4-1-7-3c-30-10-27-9-29-3m68%204h3l2%201v1l3%202%204%202h3l1%201%203%201%202%201h2c3-1%203-1%203%201%201%202%201%202%202%201h9c10%203%2011%203%209%204s0%202%204%201c3%200%204%200%205%202%200%202%201%203%203%203h5l1%201%202%201h4c0%201%206%203%2010%202l4%201%201%201%206%201h5l-4-2-4-1-1-1c-5%200-12-4-15-7l-1-3-1-1c-2-1-2-2-1-3%201-2%201-2-2-3h-8l5%201c3%200%206%202%203%202l-1%202h-3c-3-2-13-2-12-1l2%201%205%202c5%203-6%200-16-4l-10-4-4-2-5-2-2-1-3-1-5-1c-4-1-13-1-13%201m72%2012l1%201v1h2l4%201%204%202%206%203%203%202-3-1c-3%200-3%200-2%201l4%202c2%200%203%200%202-1v-2l-1-1h4l3%201-2%201v1c2%201%203%201%204-1h2c1%200%200-2-5-5-1-1-1-1%202-1%202%201%203%201%202-1h-3l-3-1-2-1v2h-3l-8-2-4-1-5-1-2%201m-17%2034l-2%203c0%202%206%207%209%207l7%205c3%202%204%203%205%202%203-1%202-4-1-6l-4-4c-1-1-2-2-3-1l-2-2-1-3-1-1c0-3-5-2-7%200m-61%2028l-3%204c-5%204-5%205-2%207%202%202%206%202%208-1%203-3%2012-6%2012-3l3%201c4-1%204-1%200-4-2-2-3-2-3%200h-1c-1-3-10-6-12-5h-1l-1-1v2m32%200v1c3%200%203%202%202%204-2%203-3%2011-2%2012v2l3%204c7%203%2011%200%2010-7-1-2-1-2-5-2h-3c3-2%203-7%200-10v-2c2-1%200-4-2-4l-3%202m67%201l1%206v9c0%203%201%204%202%204%203%200%203%201%201%204-2%204-2%207%201%2011%202%203%202%203%201%207-2%203-2%204%200%206%203%204%207%202%2011-5l4-4c2%200%203-2%203-3l5-5c5-3%206-8%201-7-3%200-5-2-5-5s0-3%204-2h4v-4c0-2%200-3-1-2-2%203-10%205-8%202%201-2-1-8-3-8l-2-2-1-2-1%201-2%202c-2%201-2%201-2%203v3c-1%200-6-6-6-8s-5-3-7-1m-144%201c-5%203-6%205-5%208%202%203%207%202%209-2%202-1%203-2%204-1h3c0-1%201-1%201%201l3%202c4%200%205%205%202%209l-3%204h-1l-2-1%202%203c2%201%202%202%201%203-2%201-6%206-7%2011-1%203-3%205-4%205v6c1%200%204-2%203-3l11-11c3-2%208-3%208-1l3%201c4%200%204-2%201-6-2-3-2-4-1-7v-5l-2-3v-1c-1-1%200-2%201-3%203-3%204-6%203-7l-4%203c-3%202-4%202-5%201-2-2-8-4-9-4l-3-1c-3-2-6-3-9-1m62%2012l-1%203-3%205-3%206c0%203%203%207%204%205s4-1%204%201l-4%201-1%202c1%201%200%202-1%203l-2%202-4%205c-3%203-3%206%200%206l2%202c0%202%202%203%204%200%202-1%202-1%203%201l1%201h1c1%201%203%200%203-2l4-6%204-4-4-1c-3-2-7-7-5-7%203%200%205-1%207-3l5-2c2%200%202-1%202-4%200-4%200-4-2-3l-3-1h-2c-2%202-3%201-2-2%201-6-4-11-7-8m-252%203c0%202-2%203-2%201l-2%202-2%203h3l3%201-1%201%201%2010c2%201%206-1%207-3%201-4%202-6%204-6v2l1%201h1c1%201%202%201%203-1l4-3c3-1%203-7%200-7l-3-1h-3c-4-3-13-3-14%200m229%202c-9%204-6%2011%203%209%205-2%205-2%205-6%200-5-2-6-8-3m6%2014l-3%202c-3%202-4%206-2%208%202%201%207%201%208-1%202-1%205-8%205-9h-8m65%2011l-7%207-4%205c0%203-2%206-5%208l-3%204-2%202v2l2%202c1%200%202-1%201-2%200-2%200-2%201-1l4-2%206-3c5-2%207-4%209-11%202-5%203-8%205-8%203-2%202-7-2-7l-5%204m53%2011c-8%203-13%209-11%2011%204%203%2014-1%2016-7%202-4-1-6-5-4M60%20284v2l-1%203-2%201c1-1%200-2-2-2s-3%201-3%202l1%201c2%200%201%201-2%202-4%200-3%201%201%201%205-1%205-1%205%201-1%203%203%203%209%200%204-1%204-1%204-5-1-2%200-3%201-3h1c0-2-3-1-6%201l-4%202%203-3%203-2h-3c-1%201-2%202-3%201l1-1v-1h-3m156%203c1%201%200%202-1%202l-3%201h-2l-2%201c0%201-1%202-3%202l-2%201h-4c-3%200-3%200-2%201v2c-3%203-3%203%202%203%204%200%204%200%204-2-1-1%200-2%201-3%203-2%203-1%202%202v3h14c15%200%2017-1%2014-4-1-1%200-5%201-5l1%205v4h6l6-1c0-2-1-2-4-2-4-1-6-7-3-8%202-1%202-1%201-2l-3%201h-1v-1l-2%201h-1c-2-2-4-1-4%201v1h-3c0-1%200-2-1-1l-1-2-2-1-2%201v1c0%202-4%206-5%204v-1l1-1v-1l2-2h-4m-187%203c2%200%201%202-1%202l-3%201c-2%203-8%206-16%206-8%201-7%201%207%201l16-1%202-1v-1c-2-1-2-1%200-1l3-1%201-1v1l1%201c2-1%202-3%201-3l-3-1c0-2-2-2-2%200l-2%202c-2%201-2%201-2-2%200-2%200-3-2-3v1m227%201l-3%201-4%202h-2l-1-1c-3%200-2%202%201%203l3-1c0-2%203%200%203%202s0%202-2%201l-2%201%208%201c7-1%2011-3%207-4l-2-1-2-1-2-2-1-2-1%201'%20fill='%23FFC600'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.3333333333333333,"src":"/static/26877ea4c4dca5088147aad6887c2ae5/f422e/featured-image.jpg","srcSet":"/static/26877ea4c4dca5088147aad6887c2ae5/e75b5/featured-image.jpg 160w,\n/static/26877ea4c4dca5088147aad6887c2ae5/c01e2/featured-image.jpg 320w,\n/static/26877ea4c4dca5088147aad6887c2ae5/f422e/featured-image.jpg 640w,\n/static/26877ea4c4dca5088147aad6887c2ae5/a6352/featured-image.jpg 960w,\n/static/26877ea4c4dca5088147aad6887c2ae5/ec6c5/featured-image.jpg 1280w","srcWebp":"/static/26877ea4c4dca5088147aad6887c2ae5/991d2/featured-image.webp","srcSetWebp":"/static/26877ea4c4dca5088147aad6887c2ae5/578e8/featured-image.webp 160w,\n/static/26877ea4c4dca5088147aad6887c2ae5/8dbf3/featured-image.webp 320w,\n/static/26877ea4c4dca5088147aad6887c2ae5/991d2/featured-image.webp 640w,\n/static/26877ea4c4dca5088147aad6887c2ae5/1fb14/featured-image.webp 960w,\n/static/26877ea4c4dca5088147aad6887c2ae5/135cd/featured-image.webp 1280w","sizes":"(max-width: 640px) 100vw, 640px"}}}},"excerpt":"Introduction I was creating a Tailwind CSS (\"TW\") plugin, @downwindcss/debug . for a utility outline-{n} to apply outline. The utility…","fields":{"year":"2021","slug":"/blog/2021/03/05/a-hack-for-missing-at-root-for-tailwind-css-plugin/"}}},"pageContext":{"id":"ae939c4d-2142-5bdd-8aa3-15749ab66b10"}},"staticQueryHashes":["398935099"]}