Repository: ben-rogerson/twin.macro Branch: master Commit: e477fca539e7 Files: 391 Total size: 2.6 MB Directory structure: gitextract_n8pigfyt/ ├── .babelrc ├── .eslintrc.js ├── .github/ │ ├── FUNDING.yml │ ├── ISSUE_TEMPLATE/ │ │ ├── bug-report.md │ │ └── config.yml │ └── workflows/ │ └── main.yml ├── .gitignore ├── .nvmrc ├── .prettierrc ├── CODE_OF_CONDUCT.md ├── LICENSE ├── README.md ├── docs/ │ ├── advanced-theming.md │ ├── arbitrary-values.md │ ├── customizing-config.md │ ├── fonts.md │ ├── group.md │ ├── index.md │ ├── options.md │ ├── prop-styling-guide.md │ ├── screen-import.md │ └── styled-component-guide.md ├── jest.config.ts ├── package.json ├── sandbox/ │ └── in.tsx ├── src/ │ ├── core/ │ │ ├── constants.ts │ │ ├── createCoreContext.ts │ │ ├── extractRuleStyles.ts │ │ ├── getGlobalStyles.ts │ │ ├── getStyles.ts │ │ ├── index.ts │ │ ├── lib/ │ │ │ ├── configHelpers.ts │ │ │ ├── convertClassName.ts │ │ │ ├── createAssert.ts │ │ │ ├── createTheme.ts │ │ │ ├── defaultTailwindConfig.ts │ │ │ ├── expandVariantGroups.ts │ │ │ ├── getStitchesPath.ts │ │ │ ├── logging.ts │ │ │ ├── twinConfig.ts │ │ │ ├── userPresets.ts │ │ │ └── util/ │ │ │ ├── camelize.ts │ │ │ ├── deepMerge.ts │ │ │ ├── escapeRegex.ts │ │ │ ├── formatProp.ts │ │ │ ├── get.ts │ │ │ ├── isEmpty.ts │ │ │ ├── isObject.ts │ │ │ ├── isShortCss.ts │ │ │ ├── replaceThemeValue.ts │ │ │ ├── sassifySelector.ts │ │ │ ├── splitOnFirst.ts │ │ │ ├── toArray.ts │ │ │ └── twImports.ts │ │ └── types/ │ │ └── index.ts │ ├── macro/ │ │ ├── className.ts │ │ ├── css.ts │ │ ├── dataProp.ts │ │ ├── globalStyles.ts │ │ ├── lib/ │ │ │ ├── astHelpers.ts │ │ │ ├── util/ │ │ │ │ ├── get.ts │ │ │ │ └── isEmpty.ts │ │ │ └── validateImports.ts │ │ ├── screen.ts │ │ ├── shortCss.ts │ │ ├── styled.ts │ │ ├── theme.ts │ │ ├── tw.ts │ │ ├── twin.ts │ │ └── types/ │ │ └── index.ts │ ├── macro.ts │ └── suggestions/ │ ├── index.ts │ ├── lib/ │ │ ├── colors.ts │ │ ├── extractors.ts │ │ ├── getClassSuggestions.ts │ │ ├── getPackageVersions.ts │ │ ├── makeColor.ts │ │ ├── validateVariants.ts │ │ └── validators.ts │ └── types/ │ └── index.ts ├── tests/ │ ├── @applyInPlugins.test.ts │ ├── __fixtures__/ │ │ ├── !general.tsx │ │ ├── !important.tsx │ │ ├── !imports.tsx │ │ ├── !namelessImport.tsx │ │ ├── !ordering.tsx │ │ ├── !properties.tsx │ │ ├── !variantGrouping.tsx │ │ ├── !variants.tsx │ │ ├── .eslintrc.js │ │ ├── addBase/ │ │ │ ├── addBase.tsx │ │ │ └── tailwind.config.js │ │ ├── arbitraryProperties/ │ │ │ └── arbitraryProperties.tsx │ │ ├── arbitraryVariants/ │ │ │ ├── arbitraryVariants.tsx │ │ │ └── config.json │ │ ├── autoCssProp/ │ │ │ └── autoCssProp.tsx │ │ ├── colorFunctions/ │ │ │ ├── colorFunctions.tsx │ │ │ └── tailwind.config.js │ │ ├── comments/ │ │ │ ├── comments.tsx │ │ │ └── config.json │ │ ├── config/ │ │ │ ├── config.tsx │ │ │ └── tailwind.config.js │ │ ├── configTS/ │ │ │ ├── configTS.tsx │ │ │ └── tailwind.config.ts │ │ ├── content/ │ │ │ ├── content.tsx │ │ │ └── tailwind.config.js │ │ ├── cssPropEmotion/ │ │ │ ├── autoCssProp.tsx │ │ │ └── autoCssPropWithStyled.tsx │ │ ├── cssPropStyledComponents/ │ │ │ ├── autoCssProp.tsx │ │ │ ├── autoCssPropWithStyled.tsx │ │ │ └── config.json │ │ ├── darkLightModeArray/ │ │ │ ├── darkLightModeArray.tsx │ │ │ └── tailwind.config.js │ │ ├── directionalBorders/ │ │ │ └── directionalBorders.tsx │ │ ├── fluidContainer/ │ │ │ ├── fluidContainer.tsx │ │ │ └── tailwind.config.js │ │ ├── globalStyles/ │ │ │ ├── config.json │ │ │ ├── globalStyles.tsx │ │ │ └── tailwind.config.js │ │ ├── group/ │ │ │ └── group.tsx │ │ ├── includeClassNames/ │ │ │ ├── config.json │ │ │ └── includeClassNames.tsx │ │ ├── lineClamp/ │ │ │ └── lineClamp.tsx │ │ ├── negative/ │ │ │ ├── negative.tsx │ │ │ └── tailwind.config.js │ │ ├── peers/ │ │ │ └── peers.tsx │ │ ├── pluginAspectRatio/ │ │ │ ├── pluginAspectRatio.tsx │ │ │ └── tailwind.config.js │ │ ├── pluginDaisyUi/ │ │ │ ├── pluginDaisyUi.tsx │ │ │ └── tailwind.config.js │ │ ├── pluginExamples/ │ │ │ ├── pluginExamples.tsx │ │ │ └── tailwind.config.js │ │ ├── pluginForms/ │ │ │ ├── pluginForms.tsx │ │ │ └── tailwind.config.js │ │ ├── pluginFormsClassStrategy/ │ │ │ ├── pluginTypography.tsx │ │ │ └── tailwind.config.js │ │ ├── pluginGapFallback/ │ │ │ ├── pluginGapFallback.tsx │ │ │ └── tailwind.config.js │ │ ├── pluginTypography/ │ │ │ ├── pluginTypography.tsx │ │ │ └── tailwind.config.js │ │ ├── pluginUserParentSelector/ │ │ │ ├── pluginUserParentSelector.tsx │ │ │ └── tailwind.config.js │ │ ├── plugins/ │ │ │ ├── config.json │ │ │ ├── plugins.tsx │ │ │ └── tailwind.config.js │ │ ├── prefix/ │ │ │ ├── config.json │ │ │ ├── prefix.tsx │ │ │ └── tailwind.config.js │ │ ├── preflight/ │ │ │ ├── preflight.tsx │ │ │ └── tailwind.config.js │ │ ├── presets/ │ │ │ ├── presets.tsx │ │ │ └── tailwind.config.js │ │ ├── sassyPseudo/ │ │ │ ├── config.json │ │ │ ├── sassyPseudo.tsx │ │ │ └── tailwind.config.js │ │ ├── screenImport/ │ │ │ ├── screenImport.tsx │ │ │ └── tailwind.config.js │ │ ├── screens/ │ │ │ ├── screens.tsx │ │ │ └── tailwind.config.js │ │ ├── separator/ │ │ │ ├── separator.tsx │ │ │ └── tailwind.config.js │ │ ├── shortCss/ │ │ │ ├── config.json │ │ │ └── shortCss.tsx │ │ ├── stitches/ │ │ │ ├── config.json │ │ │ ├── stitches.config.js │ │ │ ├── stitchesDotSyntax.tsx │ │ │ ├── stitchesGlobals.tsx │ │ │ ├── stitchesImports.tsx │ │ │ └── stitchesProps.tsx │ │ ├── themeValuesToString/ │ │ │ ├── tailwind.config.js │ │ │ └── themeValuesToString.tsx │ │ ├── userPluginOrdering/ │ │ │ ├── tailwind.config.js │ │ │ └── userPluginOrdering.tsx │ │ ├── utilitiesAccessibility/ │ │ │ └── screenReaders.tsx │ │ ├── utilitiesBackgrounds/ │ │ │ ├── backgroundAttachment.tsx │ │ │ ├── backgroundClip.tsx │ │ │ ├── backgroundColor.tsx │ │ │ ├── backgroundImage.tsx │ │ │ ├── backgroundOpacity.tsx │ │ │ ├── backgroundOrigin.tsx │ │ │ ├── backgroundPosition.tsx │ │ │ ├── backgroundRepeat.tsx │ │ │ ├── backgroundSize.tsx │ │ │ ├── gradientColorStops.tsx │ │ │ └── tailwind.config.js │ │ ├── utilitiesBorders/ │ │ │ ├── borderColor.tsx │ │ │ ├── borderOpacity.tsx │ │ │ ├── borderRadius.tsx │ │ │ ├── borderStyle.tsx │ │ │ ├── borderWidth.tsx │ │ │ ├── divideColor.tsx │ │ │ ├── divideOpacity.tsx │ │ │ ├── divideStyle.tsx │ │ │ ├── divideWidth.tsx │ │ │ ├── outlineColor.tsx │ │ │ ├── outlineOffset.tsx │ │ │ ├── outlineStyle.tsx │ │ │ ├── outlineWidth.tsx │ │ │ ├── ringColor.tsx │ │ │ ├── ringMisc.tsx │ │ │ ├── ringOffsetColor.tsx │ │ │ ├── ringOffsetWidth.tsx │ │ │ ├── ringOpacity.tsx │ │ │ ├── ringWidth.tsx │ │ │ └── tailwind.config.js │ │ ├── utilitiesEffects/ │ │ │ ├── backgroundBlendMode.tsx │ │ │ ├── boxShadow.tsx │ │ │ ├── boxShadowColor.tsx │ │ │ ├── mixBlendMode.tsx │ │ │ └── opacity.tsx │ │ ├── utilitiesFilters/ │ │ │ ├── backdropBlur.tsx │ │ │ ├── backdropBrightness.tsx │ │ │ ├── backdropContrast.tsx │ │ │ ├── backdropGrayscale.tsx │ │ │ ├── backdropHueRotate.tsx │ │ │ ├── backdropInvert.tsx │ │ │ ├── backdropOpacity.tsx │ │ │ ├── backdropSaturate.tsx │ │ │ ├── backdropSepia.tsx │ │ │ ├── blur.tsx │ │ │ ├── brightness.tsx │ │ │ ├── contrast.tsx │ │ │ ├── dropShadow.tsx │ │ │ ├── grayscale.tsx │ │ │ ├── hueRotate.tsx │ │ │ ├── invert.tsx │ │ │ ├── misc.tsx │ │ │ ├── saturate.tsx │ │ │ └── sepia.tsx │ │ ├── utilitiesLayout/ │ │ │ ├── aspectRatio.tsx │ │ │ ├── boxDecorationBreak.tsx │ │ │ ├── boxSizing.tsx │ │ │ ├── breakAfter.tsx │ │ │ ├── breakBefore.tsx │ │ │ ├── breakInside.tsx │ │ │ ├── clear.tsx │ │ │ ├── columns.tsx │ │ │ ├── container.tsx │ │ │ ├── display.tsx │ │ │ ├── float.tsx │ │ │ ├── isolation.tsx │ │ │ ├── objectFit.tsx │ │ │ ├── objectPosition.tsx │ │ │ ├── overflow.tsx │ │ │ ├── overscrollBehavior.tsx │ │ │ ├── position.tsx │ │ │ ├── tailwind.config.js │ │ │ ├── topRightBottomLeft.tsx │ │ │ ├── visibility.tsx │ │ │ └── zIndex.tsx │ │ ├── utilitiesSpacing/ │ │ │ ├── margin.tsx │ │ │ ├── padding.tsx │ │ │ └── spaceBetween.tsx │ │ ├── utilitiesSvg/ │ │ │ ├── fill.tsx │ │ │ ├── stroke.tsx │ │ │ ├── strokeWidth.tsx │ │ │ └── tailwind.config.js │ │ ├── utilitiesTransforms/ │ │ │ ├── misc.tsx │ │ │ ├── rotate.tsx │ │ │ ├── scale.tsx │ │ │ ├── skew.tsx │ │ │ ├── tailwind.config.js │ │ │ ├── transformOrigin.tsx │ │ │ └── translate.tsx │ │ ├── utilitiesTransitionsAnimation/ │ │ │ ├── animation.tsx │ │ │ ├── misc.tsx │ │ │ ├── transitionDelay.tsx │ │ │ ├── transitionDuration.tsx │ │ │ ├── transitionProperty.tsx │ │ │ └── transitionTimingFunction.tsx │ │ ├── utiltiesFlexboxGrid/ │ │ │ ├── alignContent.tsx │ │ │ ├── alignItems.tsx │ │ │ ├── alignSelf.tsx │ │ │ ├── flex.tsx │ │ │ ├── flexBasis.tsx │ │ │ ├── flexDirection.tsx │ │ │ ├── flexGrow.tsx │ │ │ ├── flexShrink.tsx │ │ │ ├── flexWrap.tsx │ │ │ ├── gap.tsx │ │ │ ├── gridAutoColumns.tsx │ │ │ ├── gridAutoFlow.tsx │ │ │ ├── gridAutoRows.tsx │ │ │ ├── gridColumn.tsx │ │ │ ├── gridRow.tsx │ │ │ ├── gridTemplateColumns.tsx │ │ │ ├── gridTemplateRows.tsx │ │ │ ├── justifyContent.tsx │ │ │ ├── justifyItems.tsx │ │ │ ├── justifySelf.tsx │ │ │ ├── misc.tsx │ │ │ ├── order.tsx │ │ │ ├── placeContent.tsx │ │ │ ├── placeItems.tsx │ │ │ └── placeSelf.tsx │ │ ├── utiltiesInteractivity/ │ │ │ ├── accentColor.tsx │ │ │ ├── appearance.tsx │ │ │ ├── caretColor.tsx │ │ │ ├── cursor.tsx │ │ │ ├── pointerEvents.tsx │ │ │ ├── resize.tsx │ │ │ ├── scrollBehavior.tsx │ │ │ ├── scrollMargin.tsx │ │ │ ├── scrollPadding.tsx │ │ │ ├── scrollSnapAlign.tsx │ │ │ ├── scrollSnapStop.tsx │ │ │ ├── scrollSnapType.tsx │ │ │ ├── tailwind.config.js │ │ │ ├── touchAction.tsx │ │ │ ├── userSelect.tsx │ │ │ └── willChange.tsx │ │ ├── utiltiesSizing/ │ │ │ ├── height.tsx │ │ │ ├── maxHeight.tsx │ │ │ ├── maxWidth.tsx │ │ │ ├── minHeight.tsx │ │ │ ├── minWidth.tsx │ │ │ └── width.tsx │ │ ├── utiltiesTables/ │ │ │ ├── borderCollapse.tsx │ │ │ ├── borderSpacing.tsx │ │ │ ├── captionSide.tsx │ │ │ └── tableLayout.tsx │ │ ├── utiltiesTypography/ │ │ │ ├── fontFamily.tsx │ │ │ ├── fontSize.tsx │ │ │ ├── fontSmoothing.tsx │ │ │ ├── fontStyle.tsx │ │ │ ├── fontVariantNumeric.tsx │ │ │ ├── fontWeight.tsx │ │ │ ├── hyphens.tsx │ │ │ ├── letterSpacing.tsx │ │ │ ├── lineHeight.tsx │ │ │ ├── listStyleImage.tsx │ │ │ ├── listStylePosition.tsx │ │ │ ├── listStyleType.tsx │ │ │ ├── placeholderColor.tsx │ │ │ ├── placeholderOpacity.tsx │ │ │ ├── tailwind.config.js │ │ │ ├── textAlign.tsx │ │ │ ├── textColor.tsx │ │ │ ├── textDecoration.tsx │ │ │ ├── textDecorationColor.tsx │ │ │ ├── textDecorationStyle.tsx │ │ │ ├── textDecorationThickness.tsx │ │ │ ├── textIndent.tsx │ │ │ ├── textOpacity.tsx │ │ │ ├── textOverflow.tsx │ │ │ ├── textTransform.tsx │ │ │ ├── textUnderlineOffset.tsx │ │ │ ├── verticalAlign.tsx │ │ │ ├── whitespace.tsx │ │ │ └── wordBreak.tsx │ │ ├── variables/ │ │ │ ├── tailwind.config.js │ │ │ └── variables.tsx │ │ ├── variantOrdering/ │ │ │ └── variantOrdering.tsx │ │ └── visitedOpacity/ │ │ └── visitedOpacity.tsx │ ├── __snapshots__/ │ │ └── plugin.test.js.snap │ ├── animations.test.ts │ ├── arbitraryProperties.test.ts │ ├── arbitraryValues.test.ts │ ├── arbitraryVariants.test.ts │ ├── config.test.ts │ ├── containerQueries.test.ts │ ├── dividers.test.ts │ ├── escaping.test.ts │ ├── fontSize.test.ts │ ├── minMaxScreenVariants.test.ts │ ├── plugin.test.js │ ├── presetEmotion.test.ts │ ├── presetGoober.test.ts │ ├── presetSolid.test.ts │ ├── presetStitches.test.ts │ ├── presetStyledComponents.test.ts │ ├── screens.test.ts │ ├── stitches.config.js │ ├── types/ │ │ ├── index.ts │ │ └── types.d.ts │ └── util/ │ ├── customMatchers.ts │ └── run.ts ├── tsconfig.json └── types/ ├── index.d.ts ├── macro.d.ts ├── tests/ │ ├── __fixtures__/ │ │ ├── config/ │ │ │ └── tailwind.config.d.ts │ │ └── configTS/ │ │ └── tailwind.config.d.ts │ ├── basic/ │ │ ├── index.tsx │ │ ├── noDefaultImport.tsx │ │ └── tsconfig.json │ ├── emotion/ │ │ ├── index.tsx │ │ └── tsconfig.json │ └── styled-components/ │ ├── index.tsx │ └── tsconfig.json ├── tsconfig.base.json └── tsconfig.json ================================================ FILE CONTENTS ================================================ ================================================ FILE: .babelrc ================================================ { "presets": [ "@babel/preset-typescript" ], "plugins": [ "@babel/plugin-syntax-jsx", "babel-plugin-macros" ] } ================================================ FILE: .eslintrc.js ================================================ module.exports = { parser: '@typescript-eslint/parser', parserOptions: { sourceType: 'module', project: './tsconfig.json', }, settings: { version: 'detect', }, plugins: [ '@typescript-eslint', 'chai-friendly', 'jest', 'import', 'prettier', ], extends: [ 'eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:unicorn/recommended', 'xo/browser', 'xo-typescript/space', 'xo-react/space', 'plugin:jest/recommended', 'plugin:import/errors', 'plugin:import/warnings', 'plugin:import/typescript', 'prettier', ], overrides: [ { files: ['src/**/*.ts', 'tests/**/*.ts'], rules: { 'no-multiple-empty-lines': ['error', { max: 1, maxEOF: 0, maxBOF: 0 }], 'no-undef': 2, 'no-console': 'error', 'capitalized-comments': 0, 'func-style': ['error', 'declaration'], 'no-constant-binary-expression': 0, 'import/no-unresolved': 'error', 'import/no-relative-parent-imports': 'error', 'import/newline-after-import': 'error', 'import/no-anonymous-default-export': 'error', 'unicorn/filename-case': ['error', { case: 'camelCase' }], 'unicorn/prefer-optional-catch-binding': 0, // Doubleup 'unicorn/consistent-destructuring': 0, 'unicorn/prefer-node-protocol': 0, 'unicorn/import-style': 0, 'unicorn/prefer-array-flat': 0, 'unicorn/no-array-for-each': 0, 'unicorn/prevent-abbreviations': 'off', '@typescript-eslint/naming-convention': 'off', '@typescript-eslint/non-nullable-type-assertion-style': 'off', '@typescript-eslint/explicit-function-return-type': 'error', '@typescript-eslint/no-unused-vars': 'error', '@typescript-eslint/consistent-type-imports': [ 'error', { prefer: 'type-imports', disallowTypeAnnotations: true, }, ], }, }, { files: ['tests/**/*test.ts'], rules: { '@typescript-eslint/no-require-imports': 0, 'unicorn/prefer-module': 0, 'jest/no-conditional-expect': 0, }, }, { files: ['types/tests/**/*.ts', 'types/tests/**/*.tsx'], rules: { 'import/no-unassigned-import': 0, '@typescript-eslint/no-unused-vars': 0, '@typescript-eslint/no-unsafe-call': 0, }, }, { files: ['**/types/**/*.ts'], rules: { 'import/no-relative-parent-imports': 0, 'unicorn/prefer-export-from': 0, }, }, ], ignorePatterns: [ '/tests/plugin.test.js', '/tests/stitches.config.js', '/tests/__fixtures__', '/types/macro.d.ts', '/types', '/.eslintrc.js', '/macro.js', '/sandbox', '/jest.config.ts', ], globals: { JSX: true, AriaAttributes: true, process: true }, env: { browser: false, node: true, es6: true }, } ================================================ FILE: .github/FUNDING.yml ================================================ # These are supported funding model platforms github: ben-rogerson ================================================ FILE: .github/ISSUE_TEMPLATE/bug-report.md ================================================ --- name: 'Bug report' about: 'Report a reproducible bug' title: '' labels: '' assignees: '' --- ================================================ FILE: .github/ISSUE_TEMPLATE/config.yml ================================================ blank_issues_enabled: false contact_links: - name: Help / Question / Feature request url: https://github.com/ben-rogerson/twin.macro/discussions/new about: 'If you have a question, need help or have an idea please ask a question in the discussion forum' ================================================ FILE: .github/workflows/main.yml ================================================ name: Notification on push on: push: branches: - master jobs: build: runs-on: ubuntu-latest steps: - name: Discord notification env: DISCORD_WEBHOOK: ${{ secrets.DISCORD_WEBHOOK }} uses: Ilshidur/action-discord@master ================================================ FILE: .gitignore ================================================ node_modules /macro.js /macro.js.map /utils.umd.js /utils.umd.js.map .vscode yarn.lock # artifacts from type tests *.tsbuildinfo types/build types/core types/macro types/suggestions types/src types/tests/types types/tests/util types/tests/*.ts .eslintcache coverage sandbox/out.tsx ================================================ FILE: .nvmrc ================================================ 16.14.0 ================================================ FILE: .prettierrc ================================================ { "endOfLine": "lf", "semi": false, "singleQuote": true, "bracketSpacing": true, "tabWidth": 2, "trailingComma": "es5", "useTabs": false, "arrowParens": "avoid" } ================================================ FILE: CODE_OF_CONDUCT.md ================================================ # Contributor Covenant Code of Conduct ## Our Pledge In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation. ## Our Standards Examples of behavior that contributes to creating a positive environment include: - Using welcoming and inclusive language - Being respectful of differing viewpoints and experiences - Gracefully accepting constructive criticism - Focusing on what is best for the community - Showing empathy towards other community members Examples of unacceptable behavior by participants include: - The use of sexualized language or imagery and unwelcome sexual attention or advances - Trolling, insulting/derogatory comments, and personal or political attacks - Public or private harassment - Publishing others' private information, such as a physical or electronic address, without explicit permission - Other conduct which could reasonably be considered inappropriate in a professional setting ## Our Responsibilities Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. ## Scope This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. ## Enforcement Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at info@benrogerson.dev. All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. ## Attribution This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html [homepage]: https://www.contributor-covenant.org For answers to common questions about this code of conduct, see https://www.contributor-covenant.org/faq ================================================ FILE: LICENSE ================================================ MIT License Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: README.md ================================================

Twin examples Twin examples

The magic of Tailwind with the flexibility of css-in-js.

Total Downloads Latest Release Discord

Open in StackBlitz

--- Style jsx elements using Tailwind classes: ```js import 'twin.macro' const Input = () => ``` Nest Twin’s `tw` import within a css prop to add conditional styles: ```js import tw from 'twin.macro' const Input = ({ hasHover }) => ( ) ``` Or mix sass styles with the css import: ```js import tw, { css } from 'twin.macro' const hoverStyles = css` &:hover { border-color: black; ${tw`text-black`} } ` const Input = ({ hasHover }) => ( ) ``` ### Styled Components You can also use the tw import to create and style new components: ```js import tw from 'twin.macro' const Input = tw.input`border hover:border-black` ``` And clone and style existing components: ```js const PurpleInput = tw(Input)`border-purple-500` ``` Switch to the styled import to add conditional styling: ```js import tw, { styled } from 'twin.macro' const StyledInput = styled.input(({ hasBorder }) => [ `color: black;`, hasBorder && tw`border-purple-500`, ]) const Input = () => ``` Or use backticks to mix with sass styles: ```js import tw, { styled } from 'twin.macro' const StyledInput = styled.input` color: black; ${({ hasBorder }) => hasBorder && tw`border-purple-500`} ` const Input = () => ``` ## How it works When babel runs over your javascript or typescript files at compile time, twin grabs your classes and converts them into css objects. These css objects are then passed into your chosen css-in-js library without the need for an extra client-side bundle: ```js import tw from 'twin.macro' tw`text-sm md:text-lg` // ↓ ↓ ↓ ↓ ↓ ↓ { fontSize: '0.875rem', '@media (min-width: 768px)': { fontSize: '1.125rem', }, } ``` ## Features **👌 Simple imports** - Twin collapses imports from common styling libraries into a single import: ```diff - import styled from '@emotion/styled' - import css from '@emotion/react' + import { styled, css } from 'twin.macro' ``` **🐹 Adds no size to your build** - Twin converts the classes you’ve used into css objects using Babel and then compiles away, leaving no runtime code **🍱 Apply variants to multiple classes at once with variant groups** ```js import 'twin.macro' const interactionStyles = () => (
) const mediaStyles = () =>
const pseudoElementStyles = () =>
const stackedVariants = () =>
const groupsInGroups = () =>
``` **🛎 Helpful suggestions for mistypings** - Twin chimes in with class and variant values from your Tailwind config: ```bash ✕ ml-1.25 was not found Try one of these classes: - ml-1.5 > 0.375rem - ml-1 > 0.25rem - ml-10 > 2.5rem ``` **🖌️ Use the theme import to add values from your tailwind config** ```js import { css, theme } from 'twin.macro' const Input = () => ``` See more examples [using the theme import →](https://github.com/ben-rogerson/twin.macro/pull/106) **💡 Works with the official tailwind vscode plugin** - Avoid having to look up your classes with auto-completions straight from your Tailwind config - [setup instructions →](https://github.com/ben-rogerson/twin.macro/discussions/227) **💥 Add !important to any class with a trailing or leading bang!** ```js
||
// ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
``` Add !important to multiple classes with bracket groups: ```js
// ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
``` ## Get started Twin works with many modern stacks - take a look at these examples to get started: ### App build tools and libraries - **Parcel**
[styled-components](https://github.com/ben-rogerson/twin.examples/tree/master/react-styled-components) / [emotion](https://github.com/ben-rogerson/twin.examples/tree/master/react-emotion) / [emotion (ts)](https://github.com/ben-rogerson/twin.examples/tree/master/react-emotion-typescript) - **Webpack**
[styled-components (ts)](https://github.com/ben-rogerson/twin.examples/tree/master/webpack-styled-components-typescript) / [emotion (ts)](https://github.com/ben-rogerson/twin.examples/tree/master/webpack-emotion-typescript) - **Preact**
[styled-components](https://github.com/ben-rogerson/twin.examples/tree/master/preact-styled-components) / [emotion](https://github.com/ben-rogerson/twin.examples/tree/master/preact-emotion) / [goober](https://github.com/ben-rogerson/twin.examples/tree/master/preact-goober) - **Create React App**
[styled-components](https://github.com/ben-rogerson/twin.examples/tree/master/cra-styled-components) / [emotion](https://github.com/ben-rogerson/twin.examples/tree/master/cra-emotion) - **Vite**
[styled-components (ts)](https://github.com/ben-rogerson/twin.examples/tree/master/vite-styled-components-typescript) / [emotion (ts)](https://github.com/ben-rogerson/twin.examples/tree/master/vite-emotion-typescript) / [solid (ts)](https://github.com/ben-rogerson/twin.examples/tree/master/vite-solid-typescript) - **Jest / React Testing Library**
[styled-components (ts) / emotion (ts)](https://github.com/ben-rogerson/twin.examples/tree/master/jest-testing-typescript) ### Advanced frameworks - **Next.js**
[styled-components](https://github.com/ben-rogerson/twin.examples/tree/master/next-styled-components) / [styled-components (ts)](https://github.com/ben-rogerson/twin.examples/tree/master/next-styled-components-typescript) / [emotion](https://github.com/ben-rogerson/twin.examples/tree/master/next-emotion) / [emotion (ts)](https://github.com/ben-rogerson/twin.examples/tree/master/next-emotion-typescript) / [stitches (ts)](https://github.com/ben-rogerson/twin.examples/tree/master/next-stitches-typescript) - **T3 App**
[styled-components (ts)](https://github.com/ben-rogerson/twin.examples/tree/master/t3-styled-components-typescript) / [emotion (ts)](https://github.com/ben-rogerson/twin.examples/tree/master/t3-emotion-typescript) - **Blitz.js**
[emotion (ts)](https://github.com/ben-rogerson/twin.examples/tree/master/blitz-emotion-typescript) - **Gatsby**
[styled-components](https://github.com/ben-rogerson/twin.examples/tree/master/gatsby-styled-components) / [emotion](https://github.com/ben-rogerson/twin.examples/tree/master/gatsby-emotion) ### Component libraries - **Storybook**
[styled-components (ts)](https://github.com/ben-rogerson/twin.examples/tree/master/storybook-styled-components-typescript) / [emotion](https://github.com/ben-rogerson/twin.examples/tree/master/storybook-emotion) / [emotion (ts)](https://github.com/ben-rogerson/twin.examples/tree/master/storybook-emotion-typescript) - **yarn/npm workspaces + Next.js + shared ui components**
[styled-components](https://github.com/ben-rogerson/twin.examples/tree/master/component-library-styled-components) - **Yarn workspaces + Rollup**
[emotion](https://github.com/ben-rogerson/twin.examples/tree/master/component-library-emotion) - [**HeadlessUI** (ts)](https://github.com/ben-rogerson/twin.examples/tree/master/headlessui-typescript) ## Community [Drop into our Discord server](https://discord.gg/Xj6x9z7) for announcements, help and styling chat. Discord ## Resources - 🔥 [Docs: The prop styling guide](https://github.com/ben-rogerson/twin.macro/blob/master/docs/prop-styling-guide.md) - A must-read guide to level up on prop styling - 🔥 [Docs: The styled component guide](https://github.com/ben-rogerson/twin.macro/blob/master/docs/styled-component-guide.md) - A must-read guide on getting productive with styled components - [Docs: Options](https://github.com/ben-rogerson/twin.macro/blob/master/docs/options.md) - Learn about the features you can tweak via the twin config - [Plugin: babel-plugin-twin](https://github.com/ben-rogerson/babel-plugin-twin) - Use the tw and css props without adding an import - [Example: Advanced theming](https://github.com/ben-rogerson/twin.macro/blob/master/docs/advanced-theming.md) - Add custom theming the right way using css variables - [Example: React + Tailwind breakpoint syncing](https://gist.github.com/ben-rogerson/b4b406dffcc18ae02f8a6c8c97bb58a8) - Sync your tailwind.config.js breakpoints with react - [Helpers: Twin VSCode snippets](https://gist.github.com/ben-rogerson/c6b62508e63b3e3146350f685df2ddc9) - For devs who want to type less - [Plugins: VSCode plugins](https://github.com/ben-rogerson/twin.macro/discussions/227) - VScode plugins that work with twin - [Article: "Why I Love Tailwind" by Max Stoiber](https://mxstbr.com/thoughts/tailwind) - Max (inventor of styled-components) shares his thoughts on twin ## Special thanks This project stemmed from [babel-plugin-tailwind-components](https://github.com/bradlc/babel-plugin-tailwind-components) so a big shout out goes to [Brad Cornes](https://github.com/bradlc) for the amazing work he produced. Styling with tailwind.macro has been such a pleasure. --- [Consider donating some 🍕 if you enjoy!](https://www.buymeacoffee.com/benrogerson) ================================================ FILE: docs/advanced-theming.md ================================================ # Theming with css variables These examples show how to create themes using css variables rather than relying on the default `dark:` variant supplied in tailwind. This technique is the preferred way to add a dark/light theme and allows you to add more themes when needed. - [react + emotion](https://codesandbox.io/s/github/alexperronnet/codesandbox-examples/tree/master/react/twin-emotion-dark-mode-variables) - [react + styled-components](https://codesandbox.io/s/github/alexperronnet/codesandbox-examples/tree/master/react/twin-styled-components-dark-mode-variables) - [gatsby + emotion](https://codesandbox.io/s/github/alexperronnet/codesandbox-examples/tree/master/gatsby/twin-emotion-dark-mode-variables) - [gatsby + styled-components](https://codesandbox.io/s/github/alexperronnet/codesandbox-examples/tree/master/gatsby/twin-styled-components-dark-mode-variables) --- [‹ Documentation](https://github.com/ben-rogerson/twin.macro/blob/master/docs/index.md) ================================================ FILE: docs/arbitrary-values.md ================================================ # Arbitrary values Twin supports the same arbitrary values syntax popularized by Tailwind’s [jit ("Just-in-Time") mode](https://tailwindcss.com/docs/just-in-time-mode). ```js tw`top-[calc(100vh - 2rem)]` // ↓ ↓ ↓ ↓ ↓ ↓ ;({ top: 'calc(100vh - 2rem)' }) ``` Arbitrary values use square brackets to allow custom css values instead of classes built from your tailwind.config.js. This is a good solution for those unique “once off” values that every project requires which you may not want to add to your tailwind.config.js. ## Supported classes Generally the rule is: Dynamic classes - like `bg-red-500` - support arbitrary values, while static classes like `block` don’t. > For fully custom css properties and values use [arbitrary properties](https://tailwindcss.com/docs/adding-custom-styles#arbitrary-properties). ## Spaces in values In Tailwind, when we add classes within the className prop/attribute, values cannot have spaces in them. ```js // Spaced values won’t work in Tailwind ;
``` But with twin, spaces are okay because Twin is not restricted by the spacing rules of the className prop: ```js // Twin supports values with spaces ;
// Classes can be added on multiple lines when using template literals ;
``` And we can also use Arbitrary values within variant groups: ```js ;
``` ## Dynamic values Just like Tailwind, values can't be dynamically added because Twin doesn’t have the ability to read the variables before converting to a css object: ```js // Dynamic values without the tw call won’t work ;
``` You’ll need to use a full tw class definition to make dynamic values possible: ```js // Dynamic values work when constructed like this ;
``` ## Resources - [The PR for arbitrary values](https://github.com/ben-rogerson/twin.macro/pull/447) --- [‹ Documentation](https://github.com/ben-rogerson/twin.macro/blob/master/docs/index.md) ================================================ FILE: docs/customizing-config.md ================================================ # Customizing the Tailwind config For style customizations, add a `tailwind.config.js` in your project root. > It’s important to know that you don’t need a `tailwind.config.js` to use Twin. You already have access to every class with every variant. Choose from one of the following configs: - a) Start with an empty config: ```js // tailwind.config.js module.exports = { theme: { extend: { colors: {}, }, }, plugins: [], } ``` - b) Start with a [full config](https://raw.githubusercontent.com/tailwindcss/tailwindcss/master/stubs/defaultConfig.stub.js): ```bash # cd into your project folder then: npx tailwindcss-cli@latest init --full ``` ## Plugins You can use all Tailwind plugins with twin, some popular ones are [tailwindcss-typography](https://github.com/tailwindlabs/tailwindcss-typography) and [@tailwindcss/forms](https://github.com/tailwindlabs/tailwindcss-forms). ## Resources - Official [Tailwind theme docs](https://tailwindcss.com/docs/theme) --- [‹ Documentation](https://github.com/ben-rogerson/twin.macro/blob/master/docs/index.md) ================================================ FILE: docs/fonts.md ================================================ # Fonts You can add `@font-face` definitions either [in the global styles provider](#add-the-font-face-in-the-global-styles-provider) or [in a traditional .css file](#add-the-font-face-in-a-traditional-css-file). ## Add `@font-face` in the Global styles provider An option is to add the font with the global provider that comes with your css-in-js library. Here are some examples: ### Styled-components ```js // styles/GlobalStyles.js import React from 'react' import { createGlobalStyle } from 'styled-components' import tw, { theme, GlobalStyles as BaseStyles } from 'twin.macro' const CustomStyles = createGlobalStyle` @font-face { font-family: 'Foo'; src: url('/path/to/exampleFont.woff') format('woff'); font-style: normal; font-weight: 400; /* https://styled-components.com/docs/faqs#how-do-i-fix-flickering-text-after-server-side-rendering */ font-display: fallback; } ` const GlobalStyles = () => ( <> ) export default GlobalStyles ``` [createGlobalStyle docs →](https://styled-components.com/docs/api#createglobalstyle) ### Emotion ```js // styles/GlobalStyles.js import React from 'react' import { Global, css } from '@emotion/react' import tw, { theme, GlobalStyles as BaseStyles } from 'twin.macro' const customStyles = css` @font-face { font-family: 'Foo'; src: url('/path/to/exampleFont.woff') format('woff'); font-style: normal; font-weight: 400; /* https://styled-components.com/docs/faqs#how-do-i-fix-flickering-text-after-server-side-rendering */ font-display: fallback; } ` const GlobalStyles = () => ( <> ) export default GlobalStyles ``` [Global docs →](https://emotion.sh/docs/globals) ### Goober ```js // styles/GlobalStyles.js import React from 'react' import { createGlobalStyle } from 'styled-components' import tw, { GlobalStyles as BaseStyles } from 'twin.macro' const CustomStyles = createGlobalStyle` @font-face { font-family: 'Foo'; src: url('/path/to/exampleFont.woff') format('woff'); font-style: normal; font-weight: 400; /* https://styled-components.com/docs/faqs#how-do-i-fix-flickering-text-after-server-side-rendering */ font-display: fallback; } ` const GlobalStyles = () => ( <> ) export default GlobalStyles ``` [createGlobalStyle docs →](https://goober.js.org/api/createGlobalStyles) ## Add the `@font-face` in a .css file and import it This method may help to remove text flickering in some frameworks. ```css /* styles/fonts.css */ @font-face { font-family: 'Foo'; src: url('/path/to/exampleFont.woff') format('woff'); font-style: normal; font-weight: 400; font-display: fallback; } ``` ```js // index.js / _app.js import '../styles/fonts.css' // ... ``` --- [‹ Documentation](https://github.com/ben-rogerson/twin.macro/blob/master/docs/index.md) ================================================ FILE: docs/group.md ================================================ # Using the group className There’s a couple of Tailwind classes that need to be added to React elements as a `className`. These classes are the `peer` and the `group` classes. A className is used so variants like `group-hover:` and `peer-hover:` can use the className as an anchor to allow their styles to work. Here’s how we use the `group` classes in twin: ```js import 'twin.macro' export default () => ( ) ``` When working in emotion and styled-components without the `group` classes, the equivalent looks like this: ```js import tw, { styled } from 'twin.macro' const Group = tw.button`` Group.Child1 = styled.div` ${Group}:hover & { ${tw`bg-black`} } ` Group.Child2 = styled.div` ${Group}:hover & { ${tw`font-bold`} } ` export default () => ( Child 1 Child 2 ) ``` Not as great right? Here’s some ways you can improve upon that: ## Attrs in 💅 styled‑components In styled-components we have a `styled` function called `attrs`. Here’s what the docs have to say about it: > The rule of thumb is to use attrs when you want every instance of a styled component to have that prop, and pass props directly when every instance needs a different one.
- [styled-components docs](https://styled-components.com/docs/faqs#when-to-use-attrs) But we can also put it to use to define the `group` class in Tailwind. Rather than adding `className="group"` directly onto your jsx element, the class can be more tightly coupled with your styles: ```js import tw, { styled } from 'twin.macro' const Group = styled.button.attrs({ className: 'group' })`` Group.Child1 = tw.div`group-hover:bg-black` Group.Child2 = tw.div`group-hover:font-bold` export default () => ( Child 1 Child 2 ) ``` ## Attrs in emotion Unfortunately emotion [doesn’t have any plans](https://github.com/emotion-js/emotion/issues/821) to add `attrs` so the easiest option is to add `className="group"` directly on the jsx element: ```js import tw from 'twin.macro' const Group = tw.button`` Group.Child1 = tw.div`group-hover:bg-black` Group.Child2 = tw.div`group-hover:font-bold` export default () => ( Child 1 Child 2 ) ``` But if you’d like similar functionality to the attr function in styled-components then you could add the className using a [Higher-Order Component (HOC)](https://reactjs.org/docs/higher-order-components.html): ```js import tw from 'twin.macro' const withAttrs = (Component, attrs) => props => const Button = tw.button`` const Group = withAttrs(Button, { className: 'group' }) Group.Child1 = tw.div`group-hover:bg-black` Group.Child2 = tw.div`group-hover:font-bold` export default () => ( Child 1 Child 2 ) ``` You could also use `defaultProps` but it’s [going to be deprecated at some stage](https://twitter.com/dan_abramov/status/1133878326358171650), which is a shame because it’s a really nice way to add the className: ```js import tw from 'twin.macro' const Group = tw.button`` Group.defaultProps = { className: 'group' } Group.Child1 = tw.div`group-hover:bg-black` Group.Child2 = tw.div`group-hover:font-bold` export default () => ( Child 1 Child 2 ) ``` ## Resources - [Quick Start Guide to Attrs in styled-components](https://scalablecss.com/styled-components-attrs/) - [Emotion issue: .attrs equivalent](https://github.com/emotion-js/emotion/issues/821) --- [‹ Documentation](https://github.com/ben-rogerson/twin.macro/blob/master/docs/index.md) ================================================ FILE: docs/index.md ================================================ [](#documentation) # Documentation [](#usage) ## Usage - [The prop styling guide](https://github.com/ben-rogerson/twin.macro/blob/master/docs/prop-styling-guide.md) - [Styled component guide](https://github.com/ben-rogerson/twin.macro/blob/master/docs/styled-component-guide.md) [](#configuration) ## Configuration - [Twin config options](https://github.com/ben-rogerson/twin.macro/blob/master/docs/options.md) - [Customizing the tailwind config](https://github.com/ben-rogerson/twin.macro/blob/master/docs/customizing-config.md) - [Fonts](https://github.com/ben-rogerson/twin.macro/blob/master/docs/fonts.md) [](#theming) ## Theming - [Theming with css variables](https://github.com/ben-rogerson/twin.macro/blob/master/docs/advanced-theming.md) [](#classes) ## More - [group](https://github.com/ben-rogerson/twin.macro/blob/master/docs/group.md) ================================================ FILE: docs/options.md ================================================ [](#twin-config-options) # Twin config options These options are available in your [twin config](#twin-config-location): | Name | Default | Description | | --------------------------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | | config | `"tailwind.config.js"` | The path to your Tailwind config. Also takes a config object. | | preset | `"emotion"` | The css-in-js library behind the scenes.
Also supported: `"styled-components"` `"goober"` `"stitches"` `"solid"` | | dataTwProp | `true` | Add a prop to jsx components in development showing the original tailwind classes.
Use `"all"` to keep the prop in production. | | debug | `false` | Display information in your terminal about the Tailwind class conversions. | | disableShortCss | `true` | Disable converting short css within the tw import/prop. | | hasLogColors | `true` | Disable log colors to remove the glyphs when the color display is not supported | | includeClassNames | `false` | Check className attributes for tailwind classes to convert. | | dataCsProp | `true` | Add a prop to your elements in development so you can see the original cs prop classes, eg: `
`. | | disableCsProp | `true` | Disable twin from reading values specified in the cs prop. | | sassyPseudo | `false` | Some css-in-js frameworks require the `&` in selectors like `&:hover`, this option ensures it’s added. | | moveKeyframesToGlobalStyles | `false` | `@keyframes` are added next to the `animation-x` classes - this option can move them to global styles instead. | ### Options ---
config
```js config: 'tailwind.config.js', // Path to the tailwind config ``` Set a custom location by specifying a path to your tailwind.config.js file. **Passing in a config**: The config option also accepts a config object: ```js // babel-plugin-macros.config.js const tailwindConfig = { theme: { extend: { colors: { primary: '#ff0000', }, }, }, } module.exports = { twin: { config: tailwindConfig, }, } ``` This can be useful in component libraries, tests, or just to remove the need for a tailwind.config.js file. **Monorepos / Workspaces**: The tailwind.config.js is commonly added as a shared file in the project root so you may need to add a `path.resolve` on the pathname in the twin config: ```js // babel-plugin-macros.config.js const path = require('path') module.exports = { twin: { config: path.resolve(__dirname, '../../', 'tailwind.config.js'), }, } ```
---
preset
```js preset: 'emotion', // Set the css-in-js library to use with twin ``` Supports: `'emotion'` / `'styled-components'` / `'goober'` / `'stitches'`. The preset option primarily assigns the library imports for `css`, `styled` and `GlobalStyles`.
---
dataTwProp
```js dataTwProp: false, // Set the display of the data-tw prop on jsx elements ``` The `data-tw` prop gets added to your elements while in development so you can see the original tailwind classes: ```js
``` If you add the value `all`, twin will add the data-tw prop in production as well as development.
---
debug
```js debug: true, // Display information about class conversions ``` When debug mode is on, twin displays logs on class conversions. This feedback only displays in development. ##
---
hasLogColors
```js hasLogColors: false, // Disable log colors (removes those glyphs in your console/overlay) ``` Sometimes the display of errors and suggestions are pretty poor due to lack of support for custom colors. Use this setting to disable the colors so you can actually read the messages.
---
disableShortCss
```js disableShortCss: false, // Enable converting short css within the tw import/prop ``` When set to `true`, this will throw an error if short css is added within the tw import or tw prop. Disable short css completely with `dataCsProp: false`.
---
includeClassNames
```js includeClassNames: true, // Check className props for tailwind classes to convert ``` When a tailwind class is found in a className prop, it’s plucked out, converted and delivered to the css-in-js library. - Unmatched classes are skipped and preserved within the className - Suggestions aren’t shown for unmatched classes like they are for the tw prop - The tw and css props can be used on the same jsx element - Limitation: classNames with conditional props or variables aren’t touched, eg: `
`
---
dataCsProp
```js dataCsProp: false, // JSX prop twin adds that shows the original cs prop classes ``` If you add short css within the `cs` prop then twin will add a `data-cs` prop to preserve the css you added. This option controls the display of the prop. Shows in development only.
---
disableCsProp
```js disableCsProp: true, // Whether to read short css values added in a `cs` prop ``` If you're using the cs prop for something else or don’t want other developers using the feature you can disable it with this option.
---
sassyPseudo
```js sassyPseudo: true, // Prefix pseudo selectors with a `&` ``` Some css-in-js frameworks require the `&` in selectors like `&:hover`, this option ensures it’s added.
---
moveKeyframesToGlobalStyles
```js moveKeyframesToGlobalStyles: true, // Avoid @keyframes next to animation-x classes ``` Add `@keyframes` matching an `animation-x` class to global styles instead of alongside the `animation-x` class.
In stitches this gets set to `true` to make animations work.
--- [](#twin-config-location) ## Twin config location Twin’s config can be added in a couple of different files. a) Either in `babel-plugin-macros.config.js`: ```js // babel-plugin-macros.config.js module.exports = { twin: { // add options here }, } ``` b) Or in `package.json`: ```js // package.json "babelMacros": { "twin": { // add options here } }, ``` --- [‹ Documentation index](https://github.com/ben-rogerson/twin.macro/blob/master/docs/index.md) ================================================ FILE: docs/prop-styling-guide.md ================================================ # The prop styling guide ## Basic styling Use Twin’s tw prop to add Tailwind classes onto jsx elements: ```js import 'twin.macro' const Component = () => (
) ``` - Use the tw prop when conditional styles aren’t needed - Any import from `twin.macro` activates the tw prop - Remove the need for an import with [babel-plugin-twin](https://github.com/ben-rogerson/babel-plugin-twin) ## Conditional styling To add conditional styles, nest the styles in an array and use the `css` prop: ```js import tw from 'twin.macro' const Component = ({ hasBg }) => (
) ```
TypeScript example ```tsx import tw from 'twin.macro' interface ComponentProps { hasBg?: string } const Component = ({ hasBg }: ComponentProps) => (
) ```
- Twin doesn’t own the css prop, the prop comes from your css-in-js library - Adding values to an array makes it easier to define base styles, conditionals and vanilla css - Use multiple lines to organize styles within the backticks ([template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)) ## Overriding styles Use the `tw` prop after the css prop to add any overriding styles: ```js import tw from 'twin.macro' const Component = () => (
Has black text
) ``` ## Keeping jsx clean It’s no secret that when tailwind class sets become larger, they obstruct the readability of other jsx props. To clean up the jsx, lift the styles out and group them as named entries in an object: ```js import tw from 'twin.macro' const styles = { container: ({ hasBg }) => [ tw`flex w-full`, // Add base styles first hasBg && tw`bg-black`, // Then add conditional styles ], column: tw`w-1/2`, } const Component = ({ hasBg }) => (
) ```
TypeScript example ```js import tw from 'twin.macro' interface ContainerProps { hasBg?: boolean; } const styles = { container: ({ hasBg }: ContainerProps) => [ tw`flex w-full`, // Add base styles first hasBg && tw`bg-black`, // Then add conditional styles ], column: tw`w-1/2`, } const Component = ({ hasBg }: ContainerProps) => (
) ```
## Variants with many values When a variant has many values (eg: `variant="light/dark/etc"`), name the class set in an object and use a prop to grab the entry containing the styles: ```js import tw from 'twin.macro' const containerVariants = { // Named class sets light: tw`bg-white text-black`, dark: tw`bg-black text-white`, crazy: tw`bg-yellow-500 text-red-500`, } const styles = { container: ({ variant = 'dark' }) => [ tw`flex w-full`, containerVariants[variant], // Grab the variant style via a prop ], column: tw`w-1/2`, } const Component = ({ variant }) => (
) ```
TypeScript example Use the `TwStyle` import to type tw blocks: ```tsx import tw, { TwStyle } from 'twin.macro' type WrapperVariant = 'light' | 'dark' | 'crazy' interface ContainerProps { variant?: WrapperVariant } const containerVariants: Record = { // Named class sets light: tw`bg-white text-black`, dark: tw`bg-black text-white`, crazy: tw`bg-yellow-500 text-red-500`, } const styles = { container: ({ variant = 'dark' }: ContainerProps) => [ tw`flex w-full`, containerVariants[variant], // Grab the variant style via a prop ], column: tw`w-1/2`, } const Component = ({ variant }: ContainerProps) => (
) ```
## Interpolation workaround Due to Babel limitations, tailwind classes and arbitrary properties can’t have any part of them dynamically created. So interpolated values like this won’t work: ```js
// Won't work with tailwind classes
// Won't work with arbitrary properties ``` This is because babel doesn’t know the values of the variables and so twin can’t make a conversion to css. Instead, define the classes in objects and grab them using props: ```js import tw from 'twin.macro' const styles = { sm: tw`mt-2`, lg: tw`mt-4` } const Component = ({ spacing = 'sm' }) =>
``` Or combine vanilla css with twins `theme` import: ```js import { theme } from 'twin.macro' // Use theme values from your tailwind config const styles = { sm: theme`spacing.2`, lg: theme`spacing.4` } const Component = ({ spacing = 'sm' }) => (
) ``` Or we can always fall back to vanilla css, which can interpolate anything: ```js import 'twin.macro' const Component = ({ width = 5 }) =>
``` ## Custom selectors (Arbitrary variants) Use square-bracketed arbitrary variants to style elements with a custom selector: ```js import tw from 'twin.macro' const buttonStyles = tw` bg-black [> i]:block [> span]:(text-blue-500 w-10) ` const Component = () => ( ) ```
More examples
```js // Style the current element based on a theming/scoping className ;
Dark theme
// Add custom group selectors ; // Add custom height queries ;
This window is less than 800px height
// Use custom at-rules like @supports ;
A grid
// Style the current element based on a dynamic className const Component = ({ isLarge }) => (
...
) ```
## Custom class values (Arbitrary values) Custom values can be added to many tailwind classes by using square brackets to define the custom value: ```js ;
// ↓ ↓ ↓ ↓ ↓ ↓
``` [Read more about Arbitrary values →](https://github.com/ben-rogerson/twin.macro/blob/master/docs/arbitrary-values.md) ## Custom css Basic css is added using [arbitrary properties](https://tailwindcss.com/docs/adding-custom-styles#arbitrary-properties) or within vanilla css which supports more advanced use cases like dynamic/interpolated values. ### Simple css styling To add simple custom styling, use [arbitrary properties](https://tailwindcss.com/docs/adding-custom-styles#arbitrary-properties): ```js // Set css variables
// Set vendor prefixes
// Set grid areas
``` Use arbitrary properties with variants or twins grouping features: ```js
``` Arbitrary properties also work with the `tw` import: ```js import tw from 'twin.macro' ;
``` - Add a bang to make the custom css !important: `![grid-area:1 / 1 / 4 / 2]` - Arbitrary properties can have camelCase properties: `[gridArea:1 / 1 / 4 / 2]` ### Advanced css styling The css prop accepts a sass-like syntax, allowing both custom css and tailwind styles with values that can come from your tailwind config: ```js import tw, { css, theme } from 'twin.macro' const Components = () => ( ) ``` But it’s often cleaner to use an object to add styles as it avoids the interpolation cruft seen above: ```js import tw, { css, theme } from 'twin.macro' const Components = () => ( ) ``` ## Learn more - [Styled component guide](https://github.com/ben-rogerson/twin.macro/blob/master/docs/styled-component-guide.md) - A must-read guide on getting productive with styled-components ## Resources - [babel-plugin-twin](https://github.com/ben-rogerson/babel-plugin-twin) - Use the tw and css props without adding an import - [React + Tailwind breakpoint syncing](https://gist.github.com/ben-rogerson/b4b406dffcc18ae02f8a6c8c97bb58a8) - Sync your tailwind.config.js breakpoints with react - [Twin VSCode snippits](https://gist.github.com/ben-rogerson/c6b62508e63b3e3146350f685df2ddc9) - For devs who want to type less - [Twin VSCode extensions](https://github.com/ben-rogerson/twin.macro/discussions/227) - For faster class suggestions and feedback --- [‹ Documentation](https://github.com/ben-rogerson/twin.macro/blob/master/docs/index.md) ================================================ FILE: docs/screen-import.md ================================================ # Screen import The screen import creates media queries for custom css that sync with your tailwind config screen values (sm, md, lg, etc). **Usage with the css prop** ```js import tw, { screen, css } from 'twin.macro' const styles = [ screen`sm`({ display: 'block', ...tw`inline` }), ]
``` **Usage with styled components** ```js import tw, { styled, screen, css } from 'twin.macro' const Component = styled.div(() => [ screen`sm`({ display: 'block', ...tw`inline` }), ]) ``` ## Screen as a key Without the styles, the screen import just creates a media query, so you can use it as a key: ```js
// ↓ ↓ ↓ ↓ ↓ ↓
``` ## Relaxed usage The screen import can be used in different ways: ```js screen`sm`({ ... }) screen('sm')({ ... }) screen(`sm`)({ ... }) screen.sm({ ... }) // Dot syntax can’t be used when the screen begins with a number, eg: screen.2xl ``` ## Custom media queries Since the screen import always adds a min-width query, it’s not suitable for constructing custom media queries. So to add custom media queries, use the theme import instead. **With the css prop** ```js import tw, { theme } from 'twin.macro' const styles = { [`@media (max-width: ${theme`screens.sm`})`]: { display: 'block', ...tw`inline`, }, } ;
``` **With a styled component** ```js import tw, { styled, theme } from 'twin.macro' const Component = styled.div({ [`@media (max-width: ${theme`screens.sm`})`]: { display: 'block', ...tw`inline`, }, }) ``` --- [‹ Documentation](https://github.com/ben-rogerson/twin.macro/blob/master/docs/index.md) ================================================ FILE: docs/styled-component-guide.md ================================================ # Styled component guide ## Basic styling Use Twin’s `tw` import to create and style new components with Tailwind classes: ```js import tw from 'twin.macro' const Wrapper = tw.section`flex w-full` const Column = tw.div`w-1/2` const Component = () => ( ) ``` ## Conditional styling To add conditional styles, nest the styles in an array and use the `styled` import: ```js import tw, { styled } from 'twin.macro' const Container = styled.div(({ hasBg }) => [ tw`flex w-full`, // Add base styles first hasBg && tw`bg-black`, // Then add conditional styles ]) const Column = tw.div`w-1/2` const Component = ({ hasBg }) => ( ) ```
TypeScript example ```tsx import tw, { styled } from 'twin.macro' interface ContainerProps { hasBg?: string } const Container = styled.div(({ hasBg }) => [ tw`flex w-full`, // Add base styles first hasBg && tw`bg-black`, // Then add conditional styles ]) const Column = tw.div`w-1/2` const Component = ({ hasBg }: ContainerProps) => ( ) ```
- Adding styles in an array makes it easier to separate base styles, conditionals and vanilla css - The `styled` import comes from the css-in-js library, twin just exports it - Use multiple lines to organize styles within the backticks ([template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)) ## Variants with many values When a variant has many values (eg: `variant="light/dark/etc"`), name the class set in an object and use a prop to grab the entry containing the styles. Note that you must return a function as follows: ```js import tw, { styled } from 'twin.macro' const containerVariants = { // Named class sets light: tw`bg-white text-black`, dark: tw`bg-black text-white`, crazy: tw`bg-yellow-500 text-red-500`, } const Container = styled.section(() => [ // Return a function here tw`flex w-full`, ({ variant = 'dark' }) => containerVariants[variant], // Grab the variant style via a prop ]) const Column = tw.div`w-1/2` const Component = () => ( ) ```
TypeScript example Use the `TwStyle` import to type tw blocks: ```tsx import tw, { styled, TwStyle } from 'twin.macro' type ContainerVariant = 'light' | 'dark' | 'crazy' interface ContainerProps { variant?: ContainerVariant } // Use the `TwStyle` import to type tw blocks const containerVariants: Record = { // Named class sets light: tw`bg-white text-black`, dark: tw`bg-black text-white`, crazy: tw`bg-yellow-500 text-red-500`, } const Container = styled.section(() => [ // Return a function here tw`flex w-full`, ({ variant = 'dark' }) => containerVariants[variant], // Grab the variant style via a prop ]) const Column = tw.div`w-1/2` const Component = () => ( ) ```
## Interpolation workaround Due to Babel limitations, tailwind classes and arbitrary properties can’t have any part of them dynamically created. So interpolated values like this won’t work: ```js const Component = styled.div(({ spacing }) => [ tw`mt-${spacing === 'sm' ? 2 : 4}`, // Won't work with tailwind classes `[margin-top:${spacing === 'sm' ? 2 : 4}rem]`, // Won't work with arbitrary properties ]) ``` This is because babel doesn’t know the values of the variables and so twin can’t make a conversion to css. Instead, define the classes in objects and grab them using props: ```js import tw, { styled } from 'twin.macro' const styles = { sm: tw`mt-2`, lg: tw`mt-4` } const Card = styled.div(({ spacing }) => styles[spacing]) const Component = ({ spacing = 'sm' }) => ``` Or combine vanilla css with twins `theme` import: ```js import { styled, theme } from 'twin.macro' // Use theme values from your tailwind config const styles = { sm: theme`spacing.2`, lg: theme`spacing.4` } const Card = styled.div(({ spacing }) => ({ marginTop: styles[spacing] })) const Component = ({ spacing = 'sm' }) => ``` Or you can always fall back to “vanilla css” which can interpolate anything: ```js import { styled } from 'twin.macro' const Card = styled.div(({ spacing }) => ({ marginTop: `${spacing === 'sm' ? 2 : 4}rem`, })) const Component = ({ spacing = 'sm' }) => ``` ## Overriding styles You can use the `tw` jsx prop to override styles in the styled-component: ```tsx import tw from 'twin.macro' const Text = tw.div`text-white` const Component = () => Has black text ``` ## Extending components Wrap components using the component extending feature to copy/override styles from another component: ```tsx import tw, { styled } from 'twin.macro' const Container = tw.div`bg-black text-white` // Extend with tw: for basic styling const BlueContainer = tw(Container)`bg-blue-500` // Or extend with styled: For conditionals const RedContainer = styled(Container)(({ hasBorder }) => [ tw`bg-red-500 text-black`, hasBorder && tw`border`, ]) // Extending more than once like this is not recommended const BlueContainerBold = tw(BlueContainer)`font-bold` const Component = () => ( <> ) ``` ## Changing elements Reuse styled components with a different element using the `as` prop: ```tsx import tw from 'twin.macro' const Heading = tw.h1`font-bold` // or styled.h1(tw`font-bold`) const Component = () => ( <> I am a H1 I am a H2 with the same style ) ``` ## Custom selectors (Arbitrary variants) Use square-bracketed arbitrary variants to style elements with a custom selector: ```js import tw from 'twin.macro' const Button = tw.button` bg-black [> i]:block [> span]:(text-blue-500 w-10) ` const Component = () => ( ) ```
More examples
```js // Style the current element based on a theming/scoping className const Theme = tw.div`[.dark-theme &]:(bg-black text-white)` ; Dark theme // Add custom group selectors const Text = tw.div`[.group:disabled &]:text-gray-500` ; // Add custom height queries const SmallHeightOnly = tw.div`[@media (min-height: 800px)]:hidden` ;Burger menu // Use custom at-rules like @supports const Grid = tw.div`[@supports (display: grid)]:grid` ;A grid // Style the component based on a dynamic className const Text = tw.div`text-base [&.is-large]:text-lg` const Container = ({ isLarge }) => ( ... ) ```
## Custom class values (Arbitrary values) Custom values can be added to many tailwind classes by using square brackets to define the custom value: ```js tw.div`top-[calc(100vh - 2rem)]` // ↓ ↓ ↓ ↓ ↓ ↓ styled.div({ top: 'calc(100vh - 2rem)' }) ``` [Read more about Arbitrary values →](https://github.com/ben-rogerson/twin.macro/blob/master/docs/arbitrary-values.md) ## Custom css Basic css is added using [arbitrary properties](https://tailwindcss.com/docs/adding-custom-styles#arbitrary-properties) or within vanilla css which supports more advanced use cases like dynamic/interpolated values. ### Simple css styling To add simple custom styling, use [arbitrary properties](https://tailwindcss.com/docs/adding-custom-styles#arbitrary-properties): ```js // Set css variables tw.div`[--my-width-variable:calc(100vw - 10rem)]` // Set vendor prefixes tw.div`[-webkit-line-clamp:3]` // Set grid areas tw.div`[grid-area:1 / 1 / 4 / 2]` ``` Use arbitrary properties with variants or twins grouping features: ```js tw.div`block md:(relative [grid-area:1 / 1 / 4 / 2])` ``` Use a theme value to grab a value from your tailwind.config: ```js tw.div`[color:theme('colors.gray.300')]` tw.div`[margin:theme('spacing[2.5]')]` tw.div`[box-shadow: 5px 10px theme('colors.black')]` ``` - Add a bang to make the custom css !important: `![grid-area:1 / 1 / 4 / 2]` - Arbitrary properties can have camelCase properties: `[gridArea:1 / 1 / 4 / 2]` ### Advanced css styling The styled import accepts a sass-like syntax, allowing both custom css and tailwind styles with values that can come from your tailwind config: ```js import tw, { styled, css, theme } from 'twin.macro' const Input = styled.div` ${css` -webkit-tap-highlight-color: transparent; /* add css styles */ background-color: ${theme`colors.red.500`}; /* add values from your tailwind config */ ${tw`text-blue-500 border-2`}; /* tailwind classes */ &::selection { ${tw`text-purple-500`}; /* style custom css selectors with tailwind classes */ } `} ` const Component = () => ``` - Prefix css styles with the `css` import to apply css highlighting in your editor - Add semicolons to the end of each line It can be cleaner to use an object to add styles as it avoids the interpolation cruft seen in the last example: ```js import tw, { styled, theme } from 'twin.macro' const Input = styled.div({ WebkitTapHighlightColor: 'transparent', // css properties are camelCased backgroundColor: theme`colors.red.500`, // values don’t require interpolation ...tw`text-blue-500 border-2`, // merge tailwind classes into the container '&::selection': tw`text-purple-500`, // allows single-line tailwind selector styling }) const Component = () => ``` ### Mixing css with tailwind classes Mix tailwind classes and custom css in an array: ```js import tw, { styled } from 'twin.macro' const Input = styled.div(({ tapColor }) => [ tw`block`, `-webkit-tap-highlight-color: ${tapColor};`, ]) const Component = () => ``` When you move the styles out of jsx, prefix them with the `css` import: ```js import tw, { styled, css } from 'twin.macro' const widthStyles = ({ tapColor }) => css` -webkit-tap-highlight-color: ${tapColor}; ` const Input = styled.div(({ tapColor }) => [ tw`block`, widthStyles({ tapColor }), ]) const Component = () => ``` ## Learn more - [Prop styling guide](https://github.com/ben-rogerson/twin.macro/blob/master/docs/prop-styling-guide.md) - A must-read guide to level up on prop styling ## Resources - [babel-plugin-twin](https://github.com/ben-rogerson/babel-plugin-twin) - Use the tw and css props without adding an import - [React + Tailwind breakpoint syncing](https://gist.github.com/ben-rogerson/b4b406dffcc18ae02f8a6c8c97bb58a8) - Sync your tailwind.config.js breakpoints with react - [Twin VSCode snippits](https://gist.github.com/ben-rogerson/c6b62508e63b3e3146350f685df2ddc9) - For devs who want to type less - [Twin VSCode extensions](https://github.com/ben-rogerson/twin.macro/discussions/227) - For faster class suggestions and feedback --- [‹ Documentation](https://github.com/ben-rogerson/twin.macro/blob/master/docs/index.md) ================================================ FILE: jest.config.ts ================================================ module.exports = { preset: 'ts-jest', testEnvironment: 'node', transform: { '^.+\\.ts?$': 'ts-jest', }, transformIgnorePatterns: ['/node_modules/', '/types'], setupFilesAfterEnv: ['/tests/util/customMatchers.ts'], } ================================================ FILE: package.json ================================================ { "name": "twin.macro", "version": "3.4.1", "description": "Twin blends the magic of Tailwind with the flexibility of css-in-js", "main": "macro.js", "types": "types/index.d.ts", "scripts": { "dev": "concurrently npm:dev:* -p none", "dev:macro": "NODE_ENV=dev nodemon -q --watch 'src/**/*.ts' --watch package.json -x \"npm run build:macro\" --delay .01", "dev:sandbox": "NODE_ENV=dev nodemon -q --watch sandbox/in.tsx --watch package.json --watch macro.js -x \"npm run build:sandbox\" --delay .01", "build": "npm run build:macro", "build:macro": "microbundle -i src/macro.ts -f cjs -o ./macro.js --target node", "build:sandbox": "babel sandbox/in.tsx --out-file sandbox/out.tsx", "test": "npm run build && jest && npm run test:types", "test:types": "tsc -b ./types/tsconfig.json", "test:update": "npm run build && jest --u", "prepublishOnly": "npm run build" }, "nodemonConfig": { "ignore": [], "watch": [ "src" ], "ext": "ts", "delay": "0" }, "husky": { "hooks": { "pre-commit": "lint-staged" } }, "engines": { "node": ">=16.14.0" }, "lint-staged": { "*.{js,ts,jsx,tsx}": [ "eslint src --cache --fix", "jest plugin.test.js" ], "*.{js,ts,jsx,tsx,json,md}": [ "prettier --write" ] }, "files": [ "macro.js", "types/index.d.ts" ], "repository": { "type": "git", "url": "git+https://github.com/ben-rogerson/twin.macro.git" }, "keywords": [ "emotion", "styled-components", "stitches", "goober", "tailwind", "tailwindcss", "css-in-js", "babel-plugin", "babel-plugin-macros" ], "author": "Ben Rogerson ", "license": "MIT", "bugs": { "url": "https://github.com/ben-rogerson/twin.macro/issues" }, "homepage": "https://github.com/ben-rogerson/twin.macro#readme", "peerDependencies": { "tailwindcss": ">=3.3.1" }, "dependencies": { "@babel/template": "^7.22.15", "babel-plugin-macros": "^3.1.0", "chalk": "4.1.2", "lodash.get": "^4.4.2", "lodash.merge": "^4.6.2", "postcss-selector-parser": "^6.0.13" }, "devDependencies": { "@babel/cli": "^7.19.3", "@babel/plugin-syntax-jsx": "^7.18.6", "@babel/preset-typescript": "^7.18.6", "@emotion/react": "^11.10.5", "@emotion/styled": "^11.10.5", "@tailwindcss/aspect-ratio": "^0.4.2", "@tailwindcss/container-queries": "^0.1.0", "@tailwindcss/forms": "^0.5.3", "@tailwindcss/typography": "^0.5.7", "@types/babel-plugin-macros": "^2.8.5", "@types/didyoumean": "^1.2.0", "@types/dlv": "^1.1.2", "@types/jest": "^29.2.2", "@types/lodash.flatmap": "^4.5.7", "@types/lodash.get": "^4.4.7", "@types/lodash.merge": "^4.6.7", "@types/react": "^18.0.25", "@types/string-similarity": "^4.0.0", "@types/styled-components": "^5.1.26", "@typescript-eslint/eslint-plugin": "^5.42.0", "@typescript-eslint/parser": "^5.42.0", "babel-plugin-tester": "^10.1.0", "concurrently": "^7.5.0", "daisyui": "^2.38.0", "escalade": "^3.1.1", "eslint": "^8.26.0", "eslint-config-prettier": "^8.5.0", "eslint-config-xo": "^0.42.0", "eslint-config-xo-react": "^0.27.0", "eslint-config-xo-space": "^0.33.0", "eslint-config-xo-typescript": "^0.53.0", "eslint-plugin-chai-friendly": "^0.7.2", "eslint-plugin-import": "^2.26.0", "eslint-plugin-jest": "^27.1.4", "eslint-plugin-prettier": "^4.2.1", "eslint-plugin-react": "^7.31.10", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-unicorn": "^44.0.2", "glob-all": "^3.3.0", "husky": "4.3.8", "jest": "^29.2.2", "lint-staged": "^13.0.3", "microbundle": "^0.15.1", "nodemon": "^2.0.20", "prettier": "^2.8.7", "react": "^18.2.0", "string-similarity": "^4.0.4", "styled-components": "^5.3.6", "tailwindcss-typography": "3.1.0", "ts-jest": "^29.0.3", "ts-node": "^10.9.1", "typescript": "^4.8.4" } } ================================================ FILE: sandbox/in.tsx ================================================ /** * Twin Sandbox * A place to test the output twin creates. * Good for general testing or for developing new features. * * Getting started * 1. Run the script: `npm run dev` * 2. Make a change to this file or to a file in the `src` folder * 3. Check `sandbox/out.tsx` for the macro output */ // @ts-nocheck import tw, { globalStyles, css, styled, screen, theme } from '../macro' // Tw block tw`bg-black/25` // Styled component tw.div`bg-black/25` // Inline tw ;
================================================ FILE: src/core/constants.ts ================================================ const CLASS_SEPARATOR = /\S+/g const DEFAULTS_UNIVERSAL = '*, ::before, ::after' const EMPTY_CSS_VARIABLE_VALUE = 'var(--tw-empty,/*!*/ /*!*/)' const PRESERVED_ATRULE_TYPES = new Set([ 'charset', 'counter-style', 'document', 'font-face', 'font-feature-values', 'import', 'keyframes', 'namespace', ]) const LAYER_DEFAULTS = 'defaults' const LINEFEED = /\n/g const WORD_CHARACTER = /\w/ const SPACE_ID = '_' const SPACE = /\s/ const SPACES = /\s+/g export { CLASS_SEPARATOR, DEFAULTS_UNIVERSAL, EMPTY_CSS_VARIABLE_VALUE, PRESERVED_ATRULE_TYPES, LAYER_DEFAULTS, LINEFEED, SPACE_ID, SPACE, SPACES, WORD_CHARACTER, } ================================================ FILE: src/core/createCoreContext.ts ================================================ /* eslint-disable @typescript-eslint/prefer-nullish-coalescing */ import { getTailwindConfig, getConfigTwinValidated } from './lib/configHelpers' import getStitchesPath from './lib/getStitchesPath' import userPresets from './lib/userPresets' import createTheme from './lib/createTheme' import createAssert from './lib/createAssert' import { createDebug } from './lib/logging' import { createContext } from './lib/util/twImports' import type { PresetItem, GetPackageUsed, PossiblePresets, CoreContext, CreateCoreContext, TwinConfig, Assert, } from './types' function packageCheck( packageToCheck: PossiblePresets, params: GetPackageConfig, hasNoFallback?: boolean ): boolean { if (params.config && params.config.preset === packageToCheck) return true if (hasNoFallback) return false return ( params.styledImport.from.includes(packageToCheck) || params.cssImport.from.includes(packageToCheck) ) } type GetPackageConfig = { config?: TwinConfig cssImport: PresetItem styledImport: PresetItem } function getPackageUsed(params: GetPackageConfig): GetPackageUsed { return { isEmotion: packageCheck('emotion', params), isStyledComponents: packageCheck('styled-components', params, true), isGoober: packageCheck('goober', params), isSolid: packageCheck('solid', params), isStitches: packageCheck('stitches', params), } } type ConfigParameters = { sourceRoot?: string filename: string config?: TwinConfig assert: Assert } function getStyledConfig({ sourceRoot, filename, config, }: ConfigParameters): PresetItem { const usedConfig = (config?.styled && config) || (config?.preset && userPresets[config.preset]) || userPresets.emotion if (typeof usedConfig.styled === 'string') { return { import: 'default', from: usedConfig.styled } } if (config && config.preset === 'stitches') { const stitchesPath = getStitchesPath({ sourceRoot, filename, config }) if (stitchesPath && usedConfig.styled) { // Overwrite the stitches import data with the path from the current file usedConfig.styled.from = stitchesPath } } return usedConfig.styled as PresetItem } function getCssConfig({ sourceRoot, filename, config, }: ConfigParameters): PresetItem { const usedConfig = (config?.css && config) || (config?.preset && userPresets[config.preset]) || userPresets.emotion if (typeof usedConfig.css === 'string') { return { import: 'css', from: usedConfig.css } } if (config && config.preset === 'stitches') { const stitchesPath = getStitchesPath({ sourceRoot, filename, config }) if (stitchesPath && usedConfig.css) { // Overwrite the stitches import data with the path from the current file usedConfig.css.from = stitchesPath } } return usedConfig.css as PresetItem } function getGlobalConfig(config: TwinConfig): PresetItem { const usedConfig = (config.global && config) || (config.preset && userPresets[config.preset]) || userPresets.emotion return usedConfig.global as PresetItem } function createCoreContext(params: CreateCoreContext): CoreContext { const { sourceRoot, filename, config, isDev = false, CustomError } = params const assert = createAssert(CustomError, false, config?.hasLogColors) const configParameters = { sourceRoot, assert, filename: filename ?? '', config, } const styledImport = getStyledConfig(configParameters) const cssImport = getCssConfig(configParameters) const tailwindConfig = params.tailwindConfig ?? getTailwindConfig(configParameters) const packageUsed = getPackageUsed({ config, cssImport, styledImport }) const twinConfig = getConfigTwinValidated(config, { ...packageUsed, isDev }) const importConfig = { styled: styledImport, css: cssImport, global: getGlobalConfig(config ?? {}), } return { isDev, assert, debug: createDebug(isDev, twinConfig), theme: createTheme(tailwindConfig), tailwindContext: createContext(tailwindConfig), packageUsed, tailwindConfig, twinConfig, CustomError, importConfig, } } export default createCoreContext ================================================ FILE: src/core/extractRuleStyles.ts ================================================ import camelize from './lib/util/camelize' import deepMerge from './lib/util/deepMerge' import get from './lib/util/get' import replaceThemeValue from './lib/util/replaceThemeValue' import sassifySelector from './lib/util/sassifySelector' import { splitAtTopLevelOnly, unescape } from './lib/util/twImports' import { DEFAULTS_UNIVERSAL, EMPTY_CSS_VARIABLE_VALUE, PRESERVED_ATRULE_TYPES, LAYER_DEFAULTS, LINEFEED, } from './constants' import getStyles from './getStyles' import type { ExtractRuleStyles, CssObject, TransformDecl } from './types' import type * as P from 'postcss' const ESC_COMMA = /\\2c/g const ESC_DIGIT = /\\3(\d)/g const UNDERSCORE_ESCAPING = /\\+(_)/g const SLASH_DOT_ESCAPING = /\\\./g const BACKSLASH_ESCAPING = /\\\\/g function transformImportant(value: string, params: TransformDecl): string { if (params.passChecks === true) return value if (!params.hasImportant) return value // Avoid adding important if the rule doesn't respect it if (params.hasImportant && params.options?.respectImportant === false) return value return `${value} !important` } function transformEscaping(value: string): string { return ( value .replace(UNDERSCORE_ESCAPING, '$1') // Remove slash dot encoding in values // eg: calc(\\.5 * .25rem) .replace(SLASH_DOT_ESCAPING, '.') // Fix the duplicate escaping babel delivers .replace(BACKSLASH_ESCAPING, '\\') ) } const transformValueTasks = [ replaceThemeValue, transformImportant, transformEscaping, ] function transformDeclValue(value: string, params: TransformDecl): string { const valueOriginal = value for (const task of transformValueTasks) { value = task(value, params) } if (value !== valueOriginal) params.debug('converted theme/important', { old: valueOriginal, new: value, }) return value } function extractFromRule( rule: P.Rule, params: ExtractRuleStyles ): [string, CssObject] { const selectorForUnescape = rule.selector.replace(ESC_DIGIT, '$1') // Remove digit escaping const selector = unescape(selectorForUnescape).replace(LINEFEED, ' ') return [selector, extractRuleStyles(rule.nodes, params)] as [ string, CssObject ] } function extractSelectorFromAtRule( name: string, value: string, params: ExtractRuleStyles ): string | undefined { if (name === LAYER_DEFAULTS) { if (params.includeUniversalStyles === false) return return DEFAULTS_UNIVERSAL } const val = value.replace(ESC_COMMA, ',') // Handle @screen usage in plugins, eg: `@screen md` if (name === 'screen') { const screenConfig = get(params, 'tailwindConfig.theme.screens') as Record< string, string > return `@media (min-width: ${screenConfig[val]})` } return `@${name} ${val}`.trim() } const ruleTypes = { decl(decl: P.Declaration, params: ExtractRuleStyles): CssObject | undefined { const property = decl.prop.startsWith('--') ? decl.prop : camelize(decl.prop) const value = decl.prop.startsWith('--') && decl.value === ' ' ? EMPTY_CSS_VARIABLE_VALUE // valid empty value in js, unlike ` ` : transformDeclValue(decl.value, { ...params, decl, property }) if (value === null) return // `background-clip: text` is still in "unofficial" phase and needs a // prefix in Firefox, Chrome and Safari. // https://caniuse.com/background-img-opts if ( property === 'backgroundClip' && (value === 'text' || value === 'text !important') ) return { WebkitBackgroundClip: value, [property]: value, } return { [property]: value } }, // General styles, eg: `{ display: block }` rule(rule: P.Rule, params: ExtractRuleStyles): CssObject | undefined { if (!rule.selector) { if (rule.nodes) { const styles = extractRuleStyles(rule.nodes, params) params.debug('rule has no selector, returning nodes', styles) return styles } params.debug('no selector found in rule', rule, 'error') return } let [selector, styles] = extractFromRule(rule, params) if (selector && styles === null) return if (params.passChecks) { const out = selector ? { [selector]: styles } : styles params.debug('style pass return', out) return out } params.debug('styles extracted', { selector, styles }) // As classes aren't used in css-in-js we split the selector into // multiple selectors and strip the ones that don't affect the current // element, eg: In `.this, .sub`, .sub is stripped as it has no target const selectorList = [...splitAtTopLevelOnly(selector, ',')].filter(s => { // Match the selector as a class const result = params.selectorMatchReg?.test(s) // Only keep selectors if they contain a `&` || aren’t // targeting multiple elements with classes if (!result && (s.includes('&') || !s.includes('.'))) return true return result }) if (selectorList.length === 0) { params.debug('no selector match', selector, 'warn') return } if (selectorList.length === 1) params.debug('matched whole selector', selectorList[0]) if (selectorList.length > 1) params.debug('matched multiple selectors', selectorList) selector = selectorList .map(s => sassifySelector( s, params as ExtractRuleStyles & { selectorMatchReg: RegExp sassyPseudo: boolean } ) ) .filter(Boolean) .join(',') params.debug('sassified key', selector || styles) if (!selector) return styles return { [selector]: styles } }, // At-rules, eg: `@media __` && `@screen md` atrule(atrule: P.AtRule, params: ExtractRuleStyles): CssObject | undefined { const selector = extractSelectorFromAtRule( atrule.name, atrule.params, params ) if (!selector) { params.debug( 'no atrule selector found, removed', { name: atrule.name, params: atrule.params }, 'warn' ) return } // Add @apply support in plugins if (selector.startsWith('@apply ')) { const { styles, unmatched } = getStyles( selector.slice(7), params.coreContext ) params.coreContext.assert(unmatched.length === 0, ({ color }) => { const extraMessage = selector === `@apply ${unmatched.join(' ')}` ? '.' : ` as:\n\`${selector}\`` return `${color( `✕ ${color(unmatched.join(' '), 'errorLight')} ${ unmatched.length > 1 ? 'classes' : 'class' } can’t be used.\n\nThis is defined in a tailwind plugin${extraMessage}` )}` }) return styles } // Strip keyframes from animate-* classes if ( selector.startsWith('@keyframes ') && !params.passChecks && params.twinConfig.moveKeyframesToGlobalStyles ) return if (PRESERVED_ATRULE_TYPES.has(atrule.name)) { params.debug(`${atrule.name} pass given`, selector) // Rules that pass checks have no further style transformations params.passChecks = true } const styles = extractRuleStyles(atrule.nodes, params) if (!styles) return let ruleset = { [selector]: styles } if (selector === DEFAULTS_UNIVERSAL) { // Add a cloned backdrop style ruleset = { ...ruleset, '::backdrop': styles } params.debug('universal default', styles) } params.debug('atrule', selector) return ruleset }, } type Styles = CssObject | undefined function extractRuleStyles(nodes: P.Node[], params: ExtractRuleStyles): Styles { const styles: Styles[] = nodes .map((rule): CssObject | undefined => { const handler = ruleTypes[rule.type as keyof typeof ruleTypes] if (!handler) return return handler(rule as never, params) }) .filter(Boolean) if (styles.length === 0) return undefined // eslint-disable-next-line @typescript-eslint/no-unsafe-return return deepMerge(styles[0], ...styles.slice(1)) } export default extractRuleStyles ================================================ FILE: src/core/getGlobalStyles.ts ================================================ import deepMerge from './lib/util/deepMerge' import extractRuleStyles from './extractRuleStyles' import { LAYER_DEFAULTS } from './constants' import type { CoreContext, CssObject, Candidate } from './types' function getGlobalStyles(params: CoreContext): CssObject | undefined { const candidates = [...params.tailwindContext.candidateRuleMap] const globalPluginStyles = candidates .flatMap(([, candidate]: [unknown, Candidate[]]) => { const out = candidate.map(([data, rule]) => { if (data.layer !== LAYER_DEFAULTS) return return extractRuleStyles([rule], { ...params, coreContext: params, passChecks: true, }) }) if (out.length === 0) return return out }) .filter(Boolean) const [globalKey, preflightRules]: [string, Candidate[]] = candidates[0] // @ts-expect-error TOFIX: Fix tuple type error if (globalKey.trim() !== '*') return deepMerge(...globalPluginStyles) // @ts-expect-error TOFIX: Fix tuple type error if (!Array.isArray(preflightRules)) return deepMerge(...globalPluginStyles) const preflightStyles = preflightRules.flatMap(([, rule]) => extractRuleStyles([rule], { ...params, coreContext: params, passChecks: true, }) ) return deepMerge( // @ts-expect-error TOFIX: Fix tuple type error ...preflightStyles, ...globalPluginStyles, ...globalKeyframeStyles(params) ) } function globalKeyframeStyles( params: CoreContext ): Array> { if (params.twinConfig.moveKeyframesToGlobalStyles === false) return [] const keyframes = params.theme('keyframes') if (!keyframes) return [] return Object.entries(keyframes).map( ([name, frames]: [string, Record]) => ({ [`@keyframes ${name}`]: frames, }) ) } export default getGlobalStyles ================================================ FILE: src/core/getStyles.ts ================================================ import extractRuleStyles from './extractRuleStyles' import createAssert from './lib/createAssert' import expandVariantGroups from './lib/expandVariantGroups' import deepMerge from './lib/util/deepMerge' import { resolveMatches, splitAtTopLevelOnly } from './lib/util/twImports' import escapeRegex from './lib/util/escapeRegex' import convertClassName from './lib/convertClassName' import { WORD_CHARACTER } from './constants' import type { CoreContext, CssObject, ExtractRuleStyles, AssertContext, TailwindMatch, TailwindContext, TailwindConfig, Assert, } from './types' const IMPORTANT_OUTSIDE_BRACKETS = /(:!|^!)(?=(?:(?:(?!\)).)*\()|[^()]*$)(?=(?:(?:(?!]).)*\[)|[^[\]]*$)/ const COMMENTS_MULTI_LINE = /(? extractRuleStyles([rule], { ...params, options: data.options }) ) .filter(Boolean) if (rulesets.length === 0) { params.debug('no node rulesets found', {}, 'error') return } // @ts-expect-error Avoid tuple type error return deepMerge(...rulesets) } // When removing a multiline comment, determine if a space is left or not // eg: You'd want a space left in this situation: tw`class1/* comment */class2` function multilineReplaceWith( match: string, index: number, input: string ): ' ' | '' { const charBefore = input[index - 1] const directPrefixMatch = charBefore && WORD_CHARACTER.exec(charBefore) const charAfter = input[Number(index) + Number(match.length)] const directSuffixMatch = charAfter && WORD_CHARACTER.exec(charAfter) return directPrefixMatch?.[0] && directSuffixMatch && directSuffixMatch[0] ? ' ' : '' } function validateClasses( classes: string, { assert, tailwindConfig, }: { tailwindConfig: TailwindConfig; assert: CoreContext['assert'] } ): boolean { // TOFIX: Avoid counting brackets within arbitrary values assert( (classes.match(ALL_BRACKET_SQUARE_LEFT) ?? []).length === (classes.match(ALL_BRACKET_SQUARE_RIGHT) ?? []).length, ({ color }: AssertContext) => `${color( `✕ Unbalanced square brackets found in classes:\n\n${color( classes, 'errorLight' )}` )}` ) // TOFIX: Avoid counting brackets within arbitrary values assert( (classes.match(ALL_BRACKET_ROUND_LEFT) ?? []).length === (classes.match(ALL_BRACKET_ROUND_RIGHT) ?? []).length, ({ color }: AssertContext) => `${color( `✕ Unbalanced round brackets found in classes:\n\n${color( classes, 'errorLight' )}` )}` ) for (const className of splitAtTopLevelOnly(classes, ' ')) { // Check for missing class attached to a variant const classCheck = className.replace(ESCAPE_CHARACTERS, ' ').trim() assert( !classCheck.endsWith(tailwindConfig.separator ?? ':'), ({ color }: AssertContext) => `${color( `✕ The variant ${String( color(classCheck, 'errorLight') )} doesn’t look right` )}\n\nUpdate to ${String( color(`${classCheck}block`, 'success') )} or ${String(color(`${classCheck}(block mt-4)`, 'success'))}` ) } return true } const tasks: Array< (classes: string, tailwindConfig: TailwindConfig, assert: Assert) => string > = [ (classes): string => classes.replace(CLASS_DIVIDER_PIPE, ' '), (classes): string => classes.replace(COMMENTS_MULTI_LINE, multilineReplaceWith), (classes): string => classes.replace(COMMENTS_SINGLE_LINE, ''), (classes, tailwindConfig, assert): string => expandVariantGroups(classes, { assert, tailwindConfig }), // Expand grouped variants to individual classes ] function sortBigSign(bigIntValue: bigint): number { return Number(bigIntValue > 0n) - Number(bigIntValue < 0n) } function getOrderedClassList( tailwindContext: TailwindContext, convertedClassList: string[], classList: string[], assert: CoreContext['assert'] ): Array<[order: bigint, className: string, preservedClassName: string]> { assert(typeof tailwindContext?.getClassOrder === 'function', ({ color }) => color('Twin requires a newer version of tailwindcss, please update') ) // `getClassOrder` was added in tailwindcss@3.0.23 let orderedClassList try { orderedClassList = tailwindContext .getClassOrder(convertedClassList) .map(([className, order], index): [bigint, string, string] => [ order || 0n, className, classList[index], ]) .sort(([a], [z]) => sortBigSign(a - z)) } catch (error: unknown) { assert( false, ({ color }) => `${color( String(error).replace('with \\ may', 'with a single \\ may') // Improve error )}\n\n${color('Found in:')} ${color( convertedClassList.join(' '), 'errorLight' )}` ) } return orderedClassList as Array<[bigint, string, string]> } function getStyles( classes: string, params: CoreContext ): { styles: CssObject | undefined; unmatched: string[]; matched: string[] } { const assert = createAssert( params.CustomError, params.isSilent, params.twinConfig.hasLogColors ) params.debug('string in', classes) assert( ![null, 'null', undefined].includes(classes), ({ color }: AssertContext) => `${color( `✕ Your classes need to be complete strings for Twin to detect them correctly` )}\n\nRead more at https://twinredirect.page.link/template-literals` ) const result = validateClasses(classes, { tailwindConfig: params.tailwindConfig, assert, }) if (!result) return { styles: undefined, matched: [], unmatched: [] } for (const task of tasks) { classes = task(classes, params.tailwindConfig, assert) } params.debug('classes after format', classes) const matched: string[] = [] const unmatched: string[] = [] const styles: CssObject[] = [] const commonContext = { assert, theme: params.theme, debug: params.debug, } const convertedClassNameContext = { ...commonContext, tailwindConfig: params.tailwindConfig, isShortCssOnly: params.isShortCssOnly, disableShortCss: params.twinConfig.disableShortCss, } const classList = [...splitAtTopLevelOnly(classes, ' ')] const convertedClassList = classList.map(c => convertClassName(c, convertedClassNameContext) ) const orderedClassList = getOrderedClassList( params.tailwindContext, convertedClassList, classList, assert ) const commonMatchContext = { ...commonContext, includeUniversalStyles: false, coreContext: params, twinConfig: params.twinConfig, tailwindConfig: params.tailwindConfig, tailwindContext: params.tailwindContext, sassyPseudo: params.twinConfig.sassyPseudo, } for (const [, convertedClassName, className] of orderedClassList) { const matches = [ ...resolveMatches(convertedClassName, params.tailwindContext), ] const results = getStylesFromMatches(matches, { ...commonMatchContext, hasImportant: IMPORTANT_OUTSIDE_BRACKETS.test( escapeRegex(convertedClassName) ), selectorMatchReg: new RegExp( // This regex specifies a list of characters allowed for the character // immediately after the class ends - this avoids matching other classes // eg: Input 'btn' will avoid matching '.btn-primary' in `.btn + .btn-primary` `(${escapeRegex(`.${convertedClassName}`)})(?=[\\[.# >~+*:$\\)]|$)` ), original: convertedClassName, }) if (!results) { params.debug('🔥 No matching rules found', className, 'error') // Allow tw``/tw="" to pass through if (className !== '') unmatched.push(className) // If non-match and is on silent mode: Continue next iteration if (params.isSilent) continue // If non-match: Stop iteration and return // (This "for of" loop returns to the parent function) return { styles: undefined, matched, unmatched } } matched.push(className) params.debug('✨ ruleset out', results, 'success') styles.push(results) } if (styles.length === 0) return { styles: undefined, matched, unmatched } // @ts-expect-error Avoid tuple type error const mergedStyles = deepMerge(...styles) return { styles: mergedStyles, matched, unmatched } } export default getStyles ================================================ FILE: src/core/index.ts ================================================ export { default as createCoreContext } from './createCoreContext' export { default as getGlobalStyles } from './getGlobalStyles' export { default as getStyles } from './getStyles' export { splitAtTopLevelOnly } from './lib/util/twImports' ================================================ FILE: src/core/lib/configHelpers.ts ================================================ import { resolve, dirname } from 'path' import { existsSync } from 'fs' import escalade from 'escalade/sync' import { configTwinValidators, configDefaultsTwin } from './twinConfig' import defaultTwinConfig from './defaultTailwindConfig' import { resolveTailwindConfig, getAllConfigs } from './util/twImports' import isObject from './util/isObject' import { logGeneralError } from './logging' import type { TwinConfig, TwinConfigAll, GetConfigTwinValidatedParameters, TailwindConfig, Assert, AssertContext, } from 'core/types' import loadConfig from 'tailwindcss/loadConfig' type Validator = [(value: unknown) => boolean, string] type GetTailwindConfig = { sourceRoot?: string filename: string config?: TwinConfig assert: Assert } function getTailwindConfig({ sourceRoot, filename, config, assert, }: GetTailwindConfig): TailwindConfig { sourceRoot = sourceRoot ?? '.' const baseDirectory = filename ? dirname(filename) : process.cwd() const userTailwindConfig = config?.config if (isObject(userTailwindConfig)) return resolveTailwindConfig([ // User config ...getAllConfigs(userTailwindConfig as Record), // Default config ...getAllConfigs(defaultTwinConfig), ]) const configPath = userTailwindConfig ? resolve(sourceRoot, userTailwindConfig) : escalade(baseDirectory, (_, names) => { if (names.includes('tailwind.config.js')) return 'tailwind.config.js' if (names.includes('tailwind.config.cjs')) return 'tailwind.config.cjs' if (names.includes('tailwind.config.ts')) return 'tailwind.config.ts' }) ?? '' const configExists = Boolean(configPath && existsSync(configPath)) if (userTailwindConfig) assert(configExists, ({ color }: AssertContext) => [ `${String( color( `✕ The tailwind config ${color( String(userTailwindConfig), 'errorLight' )} wasn’t found` ) )}`, `Update the \`config\` option in your twin config`, ].join('\n\n') ) const configs = [ // User config ...(configExists ? getAllConfigs(loadConfig(configPath)) : []), // Default config ...getAllConfigs(defaultTwinConfig), ] const tailwindConfig = resolveTailwindConfig(configs) return tailwindConfig } function runConfigValidator([item, value]: [ keyof typeof configTwinValidators, string | boolean ]): boolean { const validatorConfig: Validator = configTwinValidators[item] if (!validatorConfig) return true const [validator, errorMessage] = validatorConfig if (typeof validator !== 'function') return false if (!validator(value)) { throw new Error(logGeneralError(String(errorMessage))) } return true } function getConfigTwin( config: TwinConfig | undefined, params: GetConfigTwinValidatedParameters ): TwinConfigAll { const output: TwinConfigAll = { ...configDefaultsTwin(params), ...config, } return output } function getConfigTwinValidated( config: TwinConfig | undefined, params: GetConfigTwinValidatedParameters ): TwinConfigAll { const twinConfig = getConfigTwin(config, params) // eslint-disable-next-line unicorn/no-array-reduce return Object.entries(twinConfig).reduce((result, item) => { const validatedItem = item as [ keyof typeof configTwinValidators, string | boolean ] return { ...result, ...(runConfigValidator(validatedItem) && { [validatedItem[0]]: validatedItem[1], }), } }, {}) as TwinConfigAll } export { getTailwindConfig, getConfigTwinValidated } ================================================ FILE: src/core/lib/convertClassName.ts ================================================ import replaceThemeValue from './util/replaceThemeValue' import isShortCss from './util/isShortCss' import splitOnFirst from './util/splitOnFirst' import { splitAtTopLevelOnly } from './util/twImports' import type { AssertContext, CoreContext, TailwindConfig } from 'core/types' // eslint-disable-next-line import/no-relative-parent-imports import { SPACE_ID, SPACES } from '../constants' const ALL_COMMAS = /,/g const ALL_AMPERSANDS = /&/g const ENDING_AMP_THEN_WHITESPACE = /&[\s_]*$/ const ALL_CLASS_DOTS = /(?[_~])[\w-])/g const BASIC_SELECTOR_TYPES = /^#|^\\.|[^\W_]/ type ConvertShortCssToArbitraryPropertyParameters = { disableShortCss: CoreContext['twinConfig']['disableShortCss'] origClassName: string } & Pick function convertShortCssToArbitraryProperty( className: string, { tailwindConfig, assert, disableShortCss, isShortCssOnly, origClassName, }: ConvertShortCssToArbitraryPropertyParameters ): string { const splitArray = [ ...splitAtTopLevelOnly(className, tailwindConfig.separator ?? ':'), ] const lastValue = splitArray.slice(-1)[0] let [property, value] = splitOnFirst(lastValue, '[') value = value.slice(0, -1).trim() let preSelector = '' if (property.startsWith('!')) { property = property.slice(1) preSelector = '!' } const template = `${preSelector}[${[ property, value === '' ? "''" : value, ].join(tailwindConfig.separator ?? ':')}]` splitArray.splice(-1, 1, template) const arbitraryProperty = splitArray.join(tailwindConfig.separator ?? ':') const isShortCssDisabled = disableShortCss && !isShortCssOnly assert(!isShortCssDisabled, ({ color }) => [ `${String( color( `✕ ${String( color(origClassName, 'errorLight') )} uses twin’s deprecated short-css syntax` ) )}`, `Update to ${String(color(arbitraryProperty, 'success'))}`, `To ignore this notice, add this to your twin config:\n{ "disableShortCss": false }`, `Read more at https://twinredirect.page.link/short-css`, ].join('\n\n') ) return arbitraryProperty } type ConvertClassNameParameters = { disableShortCss: CoreContext['twinConfig']['disableShortCss'] } & Pick< CoreContext, 'tailwindConfig' | 'theme' | 'assert' | 'debug' | 'isShortCssOnly' > function checkForVariantSupport({ className, tailwindConfig, assert, }: { className: string } & Pick< CoreContext, 'tailwindConfig' | 'assert' >): void { const pieces = [ ...splitAtTopLevelOnly(className, tailwindConfig.separator ?? ':'), ] const hasMultipleVariants = pieces.length > 2 // One is the class name const hasACommaInVariants = pieces.some( p => splitAtTopLevelOnly(p.slice(1, -1), ',').length > 1 ) const hasIssue = hasMultipleVariants && hasACommaInVariants assert( !hasIssue, ({ color }: AssertContext) => `${color( `✕ The variants on ${String( color(className, 'errorLight') )} are invalid tailwind and twin classes` )}\n\n${color( `To fix, either reduce all variants into a single arbitrary variant:`, 'success' )}\nFrom: \`[.this, .that]:first:block\`\nTo: \`[.this:first, .that:first]:block\`\n\n${color( `Or split the class into separate classes instead of using commas:`, 'success' )}\nFrom: \`[.this, .that]:first:block\`\nTo: \`[.this]:first:block [.that]:first:block\`\n\nRead more at https://twinredirect.page.link/arbitrary-variants-with-commas` ) } // Convert a twin class to a tailwindcss friendly class function convertClassName( className: string, { tailwindConfig, theme, isShortCssOnly, disableShortCss, assert, debug, }: ConvertClassNameParameters ): string { checkForVariantSupport({ className, tailwindConfig, assert }) const origClassName = className // Convert spaces to class friendly underscores className = className.replace(SPACES, SPACE_ID) // Move the bang to the front of the class if (className.endsWith('!')) { debug('trailing bang found', className) const splitArray = [ ...splitAtTopLevelOnly( className.slice(0, -1), tailwindConfig.separator ?? ':' ), ] // Place a ! before the class splitArray.splice(-1, 1, `!${splitArray[splitArray.length - 1]}`) className = splitArray.join(tailwindConfig.separator ?? ':') } // Convert short css to an arbitrary property, eg: `[display:block]` // (Short css is deprecated) if (isShortCss(className, tailwindConfig)) { debug('short css found', className) className = convertShortCssToArbitraryProperty(className, { tailwindConfig, assert, disableShortCss, isShortCssOnly, origClassName, }) } // Replace theme values throughout the class className = replaceThemeValue(className, { assert, theme }) // Add missing parent selectors and collapse arbitrary variants className = sassifyArbitraryVariants(className, { tailwindConfig }) debug('class after format', className) return className } function isArbitraryVariant(variant: string): boolean { return variant.startsWith('[') && variant.endsWith(']') } function unbracket(variant: string): string { return variant.slice(1, -1) } function sassifyArbitraryVariants( fullClassName: string, { tailwindConfig }: { tailwindConfig: TailwindConfig } ): string { const splitArray = [ ...splitAtTopLevelOnly(fullClassName, tailwindConfig.separator ?? ':'), ] const variants = splitArray.slice(0, -1) const className = splitArray.slice(-1)[0] if (variants.length === 0) return fullClassName // Collapse arbitrary variants when they don't contain `&`. // `[> div]:[.nav]:(flex block)` -> `[> div_.nav]:flex [> div_.nav]:block` const collapsed = [] as string[] variants.forEach((variant, index) => { // We can’t match the selector if there's a character right next to the parent selector (eg: `[§ion]:block`) otherwise we'd accidentally replace `.step` in classes like this: // Bad: `.steps-primary .steps` -> `&-primary &` // Good: `.steps-primary .steps` -> `.steps-primary &` // So here we replace it with crazy brackets to identify and unwrap it later if (isArbitraryVariant(variant)) variant = variant.replace(ALL_WRAPPABLE_PARENT_SELECTORS, '(((&)))') if ( index === 0 || !isArbitraryVariant(variant) || !isArbitraryVariant(variants[index - 1]) ) return collapsed.push(variant) const prev = collapsed[collapsed.length - 1] if (variant.includes('&')) { const prevHasParent = prev.includes('&') // Merge with current if (prevHasParent) { const mergedWithCurrent = variant.replace( ALL_AMPERSANDS, unbracket(prev) ) const isLast = index === variants.length - 1 collapsed[index - 1] = isLast ? mergedWithCurrent.replace(ALL_AMPERSANDS, '') : mergedWithCurrent return } // Merge with previous if (!prevHasParent) { const mergedWithPrev = `[${unbracket(variant).replace( ALL_AMPERSANDS, unbracket(prev) )}]` collapsed[collapsed.length - 1] = mergedWithPrev return } } // Parentless variants are merged into the previous arbitrary variant const mergedWithPrev = `[${[ unbracket(prev).replace(ENDING_AMP_THEN_WHITESPACE, ''), unbracket(variant), ].join('_')}]` collapsed[collapsed.length - 1] = mergedWithPrev }) // The supplied class requires the reversal of it's variants as resolveMatches adds them in reverse order const reversedVariantList = [...collapsed].slice().reverse() const allVariants = reversedVariantList.map((v, idx) => { if (!isArbitraryVariant(v)) return v const unwrappedVariant = unbracket(v) // Unescaped dots incorrectly add the prefix within arbitrary variants (only when`prefix` is set in tailwind config) // eg: tw`[.a]:first:tw-block` -> `.tw-a &:first-child` .replace(ALL_CLASS_DOTS, '\\.') // Unescaped ats will throw a conversion error .replace(ALL_CLASS_ATS, '\\@') const variantList = unwrappedVariant.startsWith('@') ? [unwrappedVariant] : // Arbitrary variants with commas are split, handled as separate selectors then joined [...splitAtTopLevelOnly(unwrappedVariant, ',')] const out = variantList .map(variant => addParentSelector(variant, collapsed[idx - 1], collapsed[idx + 1] ?? '') ) // Tailwindcss removes everything from a comma onwards in arbitrary variants, so we need to encode to preserve them // Underscore is needed to distance the code from another possible number // Eg: [path[fill='rgb(51,100,51)']]:[fill:white] .join('\\2c_') .replace(ALL_COMMAS, '\\2c_') return `[${out}]` }) return [...allVariants, className].join(tailwindConfig.separator ?? ':') } function addParentSelector( selector: string, prev: string, next: string ): string { // Preserve selectors with a parent selector and media queries if (selector.includes('&') || selector.startsWith('@')) return selector // Arbitrary variants // Pseudo elements get an auto parent selector prefixed if (selector.startsWith(':')) return `&${selector}` // Variants that start with a class/id get treated as a child if (BASIC_SELECTOR_TYPES.test(selector) && !prev) return `& ${selector}` // When there's more than one variant and it's at the end then prefix it if (!next && prev) return `&${selector}` return `& ${selector}` } export default convertClassName ================================================ FILE: src/core/lib/createAssert.ts ================================================ import type { AssertContext } from 'core/types' import { makeColor } from './logging' function createAssert( CustomError = Error, isSilent = false, hasLogColors = true ) { return ( expression: boolean | string | (({ color }: AssertContext) => string), message: string | (({ color }: AssertContext) => string) ): void => { if (isSilent) return if (typeof expression === 'string') { throw new CustomError(`\n\n${expression}\n`) } const messageContext = { color: makeColor(hasLogColors) } if (typeof expression === 'function') { throw new CustomError(`\n\n${expression(messageContext)}\n`) } if (expression) return if (typeof message === 'string') { throw new CustomError(`\n\n${message}\n`) } if (typeof message === 'function') { throw new CustomError(`\n\n${message(messageContext)}\n`) } } } export default createAssert ================================================ FILE: src/core/lib/createTheme.ts ================================================ import dlv from 'dlv' import { transformThemeValue, toPath } from './util/twImports' import isObject from './util/isObject' import type { TailwindConfig } from 'core/types' function createTheme( tailwindConfig: TailwindConfig ): ( dotSeparatedItem: string, extra?: string ) => Record | boolean | number { function getConfigValue(path: string[], defaultValue?: string): unknown { return dlv(tailwindConfig, path, defaultValue) } function resolveThemeValue( path: string, defaultValue?: string, options = {} ): number | boolean | Record { let [pathRoot, ...subPaths] = toPath(path) // Retain dots in spacing values, eg: `ml-[theme(spacing.0.5)]` if ( pathRoot === 'spacing' && subPaths.length === 2 && subPaths.every(x => !Number.isNaN(Number(x))) ) { subPaths = [subPaths.join('.')] } const value = getConfigValue( path ? ['theme', pathRoot, ...subPaths] : ['theme'], defaultValue ) return sassifyValues(transformThemeValue(pathRoot)(value, options)) } const out = Object.assign( (path: string, defaultValue?: string) => resolveThemeValue(path, defaultValue), { withAlpha: (path: string, opacityValue?: string) => resolveThemeValue(path, undefined, { opacityValue }), } ) return out } function sassifyValues( values: Record ): Record { if (!isObject(values)) return values const transformed: Array<[string, unknown]> = Object.entries(values).map( ([k, v]: [string, unknown]) => [ k, (isObject(v) && sassifyValues(v)) || (typeof v === 'number' && String(v)) || v, ] ) return Object.fromEntries(transformed) } export default createTheme ================================================ FILE: src/core/lib/defaultTailwindConfig.ts ================================================ import toArray from './util/toArray' import type { PluginAPI } from 'tailwindcss/types/config' const AMPERSAND_AFTER = /&(.+)/g const AMPERSAND = /&/g function stripAmpersands(string: string): string { return typeof string === 'string' ? string.replace(AMPERSAND, '').trim() : string } const EXTRA_VARIANTS = [ ['all', '& *'], ['all-child', '& > *'], ['sibling', '& ~ *'], ['hocus', ['&:hover', '&:focus']], 'link', 'read-write', ['svg', '& svg'], ['even-of-type', '&:nth-of-type(even)'], ['odd-of-type', '&:nth-of-type(odd)'], ] const EXTRA_NOT_VARIANTS = [ // Positional ['first', '&:first-child'], ['last', '&:last-child'], ['only', '&:only-child'], ['odd', '&:nth-child(odd)'], ['even', '&:nth-child(even)'], 'first-of-type', 'last-of-type', 'only-of-type', // State 'target', ['open', '&[open]'], // Forms 'default', 'checked', 'indeterminate', 'placeholder-shown', 'autofill', 'optional', 'required', 'valid', 'invalid', 'in-range', 'out-of-range', 'read-only', // Content 'empty', // Interactive 'focus-within', 'hover', 'focus', 'focus-visible', 'active', 'enabled', 'disabled', ] function defaultVariants({ config, addVariant }: PluginAPI): void { const extraVariants = EXTRA_VARIANTS.flatMap(v => { let [name, selector] = toArray(v) selector = selector || `&:${String(name)}` const variant = [name, selector] // Create a :not() version of the selectors above const notVariant = [ `not-${String(name)}`, (toArray(selector) as string[]).map( (s: string) => `&:not(${stripAmpersands(s)})` ), ] return [variant, notVariant] }) // Create :not() versions of these selectors const notPseudoVariants = EXTRA_NOT_VARIANTS.map(v => { const [name, selector] = toArray(v) const notConfig = [ `not-${name as string}`, (toArray(selector || `&:${name as string}`) as string[]).map( s => `&:not(${stripAmpersands(s)})` ), ] return notConfig }) const variants = [...extraVariants, ...notPseudoVariants] for (const [name, selector] of variants) { addVariant(name as string, toArray(selector) as string[]) } for (const [name, selector] of variants) { const groupSelector = (toArray(selector) as string[]).map(s => s.replace(AMPERSAND_AFTER, ':merge(.group)$1 &') ) addVariant(`group-${name as string}`, groupSelector) } for (const [name, selector] of variants) { const peerSelector = (toArray(selector) as string[]).map(s => s.replace(AMPERSAND_AFTER, ':merge(.peer)$1 ~ &') ) addVariant(`peer-${name as string}`, peerSelector) } // https://developer.mozilla.org/en-US/docs/Web/CSS/@media/any-pointer addVariant('any-pointer-none', '@media (any-pointer: none)') addVariant('any-pointer-fine', '@media (any-pointer: fine)') addVariant('any-pointer-coarse', '@media (any-pointer: coarse)') // https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer addVariant('pointer-none', '@media (pointer: none)') addVariant('pointer-fine', '@media (pointer: fine)') addVariant('pointer-coarse', '@media (pointer: coarse)') // https://developer.mozilla.org/en-US/docs/Web/CSS/@media/any-hover addVariant('any-hover-none', '@media (any-hover: none)') addVariant('any-hover', '@media (any-hover: hover)') // https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover addVariant('can-hover', '@media (hover: hover)') addVariant('cant-hover', '@media (hover: none)') addVariant('screen', '@media screen') // Light mode // eslint-disable-next-line unicorn/prefer-spread let [mode, className = '.light'] = ([] as Array).concat( config('lightMode', 'media') ) if (mode === false) mode = 'media' if (mode === 'class') { addVariant('light', `${String(className)} &`) } else if (mode === 'media') { addVariant('light', '@media (prefers-color-scheme: light)') } // eslint-disable-next-line unicorn/prefer-spread ;[mode, className = '.light'] = ([] as string[]).concat( config('lightMode', 'media') ) if (mode === 'class') { addVariant('light', `${className} &`) } else if (mode === 'media') { addVariant('light', '@media (prefers-color-scheme: light)') } } const defaultTailwindConfig = { presets: [ { content: [''], // Silence empty content warning theme: { extend: { content: { DEFAULT: '' }, // Add a `content` class zIndex: { 1: '1' }, // Add a handy small zIndex (`z-1` / `-z-1`) }, }, plugins: [defaultVariants], // Add extra variants }, ], } export default defaultTailwindConfig ================================================ FILE: src/core/lib/expandVariantGroups.ts ================================================ import type { Assert, AssertContext, TailwindConfig } from 'core/types' import { splitAtTopLevelOnly } from './util/twImports' const BRACKETED = /^\(.*?\)$/ const BRACKETED_MAYBE_IMPORTANT = /\)!?$/ const ESCAPE_CHARACTERS = /\n|\t/g type Context = { variants?: string beforeImportant?: string afterImportant?: string tailwindConfig: TailwindConfig assert: Assert } function spreadVariantGroups(classes: string, context: Context): string[] { const pieces = [ ...splitAtTopLevelOnly( classes.trim(), context.tailwindConfig.separator ?? ':' ), ] as string[] let groupedClasses = pieces.pop() if (!groupedClasses) return [] // type guard // Check for too many dividers used // Added here instead of "validateClasses" as it's less error prone to check here context.assert( !pieces.includes(''), ({ color }: AssertContext) => `${color( `✕ ${String(color(classes, 'errorLight'))} has too many dividers` )}\n\nUpdate to ${String( color( `${pieces .filter(Boolean) .join(context.tailwindConfig.separator ?? ':')}`, 'success' ) )}` ) let beforeImportant = context?.beforeImportant ?? '' let afterImportant = context?.afterImportant ?? '' if (!beforeImportant && groupedClasses.startsWith('!')) { groupedClasses = groupedClasses.slice(1) beforeImportant = '!' } if (!afterImportant && groupedClasses.endsWith('!')) { groupedClasses = groupedClasses.slice(0, -1) afterImportant = '!' } // Remove () brackets and split const unwrapped = BRACKETED.test(groupedClasses) ? groupedClasses.slice(1, -1) : groupedClasses const classList = [...splitAtTopLevelOnly(unwrapped, ' ')].filter(Boolean) const group = classList .map(className => { if ( BRACKETED_MAYBE_IMPORTANT.test(className) && // Avoid infinite loop due to lack of separator, eg: `[em](block)` !className.includes('](') ) { const ctx = { ...context, beforeImportant, afterImportant } return expandVariantGroups( [...pieces, className].join(context.tailwindConfig.separator ?? ':'), ctx ) } return [...pieces, [beforeImportant, className, afterImportant].join('')] .filter(Boolean) .join(context.tailwindConfig.separator ?? ':') }) .filter(Boolean) return group } function expandVariantGroups(classes: string, context: Context): string { const classList = [ ...splitAtTopLevelOnly(classes.replace(ESCAPE_CHARACTERS, ' ').trim(), ' '), ] if (classList.length === 1 && ['', '()'].includes(classList[0])) return '' const expandedClasses = classList.flatMap(item => spreadVariantGroups(item, context) ) return expandedClasses.join(' ') } export default expandVariantGroups ================================================ FILE: src/core/lib/getStitchesPath.ts ================================================ import { resolve, relative, parse } from 'path' import { existsSync } from 'fs' import { logGeneralError } from './logging' import toArray from './util/toArray' import type { TwinConfig } from 'core/types' function getFirstValue( list: ListItem[], getValue: ( params: ListItem, options: { index: number; isLast: boolean } ) => unknown ): [unknown, ListItem | undefined] { let firstValue const listLength = list.length - 1 const listItem = list.find((listItem, index) => { const isLast = index === listLength firstValue = getValue(listItem, { index, isLast }) return Boolean(firstValue) }) return [firstValue, listItem] } function checkExists( fileName: string | string[], sourceRoot: string ): string | undefined { const [, value] = getFirstValue( toArray(fileName) as string[], existingFileName => existsSync(resolve(sourceRoot, `./${existingFileName}`)) ) return value } function getRelativePath(comparePath: string, filename: string): string { const pathName = parse(filename).dir return relative(pathName, comparePath) } function getStitchesPath({ sourceRoot, filename, config, }: { sourceRoot?: string filename: string config: TwinConfig }): string { sourceRoot = sourceRoot ?? '.' const configPathCheck = config.stitchesConfig ?? [ 'stitches.config.ts', 'stitches.config.js', ] const configPath = checkExists(configPathCheck, sourceRoot) if (!configPath) throw new Error( logGeneralError( `Couldn’t find the Stitches config at ${ config.stitchesConfig ? `“${String(config.stitchesConfig)}”` : 'the project root' }.\nUse the twin config: stitchesConfig="PATH_FROM_PROJECT_ROOT" to set the location.` ) ) return getRelativePath(configPath, filename) } export default getStitchesPath ================================================ FILE: src/core/lib/logging.ts ================================================ import chalk from 'chalk' import type { MakeColor, ColorType, ColorValue, TwinConfigAll, } from 'core/types' const colors = { error: chalk.hex('#ff8383'), errorLight: chalk.hex('#ffd3d3'), warn: chalk.yellowBright, success: chalk.greenBright, highlight: chalk.yellowBright, subdued: chalk.hex('#999'), } function makeColor(hasColor: boolean): MakeColor { return (message: string, type: keyof typeof colors = 'error') => { if (!hasColor) return message return colors[type](message) } } function spaced(string: string): string { return `\n\n${string}\n` } function warning(string: string): string { return colors.error(`✕ ${string}`) } function logGeneralError(error: string | [ColorValue, string]): string { return Array.isArray(error) ? spaced( `${warning( typeof error[0] === 'function' ? error[0](colors) : error[0] )}\n\n${error[1]}` ) : spaced(warning(error)) } function createDebug(isDev: boolean, twinConfig: TwinConfigAll) { return ( reference: string, data: unknown, type: ColorType = 'subdued' ): void => { if (!isDev) return if (!twinConfig.debug) return const log = `${String(colors[type]('-'))} ${reference} ${String( colors[type](JSON.stringify(data)) )}` // eslint-disable-next-line no-console console.log(log) } } export { makeColor, spaced, warning, colors, logGeneralError, createDebug } ================================================ FILE: src/core/lib/twinConfig.ts ================================================ import type { GetPackageUsed, TwinConfigAll } from 'core/types' const TWIN_CONFIG_DEFAULTS = { allowStyleProp: false, autoCssProp: false, config: undefined, convertHtmlElementToStyled: false, convertStyledDotToParam: false, convertStyledDotToFunction: false, css: { import: '', from: '' }, dataCsProp: false, dataTwProp: false, debug: false, disableCsProp: true, disableShortCss: true, global: { import: '', from: '' }, hasLogColors: true, includeClassNames: false, moveTwPropToStyled: false, moveKeyframesToGlobalStyles: false, preset: undefined, sassyPseudo: false, stitchesConfig: undefined, styled: { import: '', from: '' }, } as const // Defaults for different css-in-js libraries const configDefaultsStyledComponents = { sassyPseudo: true, // Sets selectors like hover to &:hover } as const const configDefaultsGoober = { sassyPseudo: true, // Sets selectors like hover to &:hover } as const const configDefaultsSolid = { sassyPseudo: true, // Sets selectors like hover to &:hover moveTwPropToStyled: true, // Move the tw prop to a styled definition convertHtmlElementToStyled: true, // Add a styled definition on css prop elements convertStyledDotToFunction: true, // Convert styled.[element] to a default syntax } as const const configDefaultsStitches = { sassyPseudo: true, // Sets selectors like hover to &:hover convertStyledDotToParam: true, // Convert styled.[element] to a default syntax moveTwPropToStyled: true, // Move the tw prop to a styled definition convertHtmlElementToStyled: true, // Add a styled definition on css prop elements stitchesConfig: undefined, // Set the path to the stitches config moveKeyframesToGlobalStyles: true, // Stitches doesn't support inline @keyframes } as const function configDefaultsTwin({ isSolid, isStyledComponents, isGoober, isStitches, isDev, }: GetPackageUsed & { isDev: boolean }): TwinConfigAll { return { ...TWIN_CONFIG_DEFAULTS, ...(isSolid && configDefaultsSolid), ...(isStyledComponents && configDefaultsStyledComponents), ...(isGoober && configDefaultsGoober), ...(isStitches && configDefaultsStitches), dataTwProp: isDev, dataCsProp: isDev, } } function isBoolean(value: unknown): boolean { return typeof value === 'boolean' } const allowedPresets = [ 'styled-components', 'emotion', 'goober', 'stitches', 'solid', ] type ConfigTwinValidators = Record< keyof typeof TWIN_CONFIG_DEFAULTS & 'disableColorVariables', [(value: unknown) => boolean, string] > const configTwinValidators: ConfigTwinValidators = { preset: [ (value: unknown): boolean => value === undefined || (typeof value === 'string' && allowedPresets.includes(value)), `The config “preset” can only be:\n${allowedPresets .map(p => `'${p}'`) .join(', ')}`, ], allowStyleProp: [ isBoolean, 'The config “allowStyleProp” can only be a boolean', ], autoCssProp: [ (value: unknown): boolean => !value, 'The “autoCssProp” feature has been removed from twin.macro@2.8.2+\nThis means the css prop must be added by styled-components instead.\nSetup info at https://twinredirect.page.link/auto-css-prop\n\nRemove the “autoCssProp” item from your config to avoid this message.', ], convertStyledDot: [ (value: unknown): boolean => !value, 'The “convertStyledDot” feature was changed to “convertStyledDotParam”.', ], disableColorVariables: [ (value: unknown): boolean => !value, 'The disableColorVariables feature has been removed from twin.macro@3+\n\nRemove the disableColorVariables item from your config to avoid this message.', ], sassyPseudo: [isBoolean, 'The config “sassyPseudo” can only be a boolean'], dataTwProp: [ (value: unknown): boolean => isBoolean(value) || value === 'all', 'The config “dataTwProp” can only be true, false or "all"', ], dataCsProp: [ (value: unknown): boolean => isBoolean(value) || value === 'all', 'The config “dataCsProp” can only be true, false or "all"', ], includeClassNames: [ isBoolean, 'The config “includeClassNames” can only be a boolean', ], disableCsProp: [ isBoolean, 'The config “disableCsProp” can only be a boolean', ], convertStyledDotToParam: [ isBoolean, 'The config “convertStyledDotToParam” can only be a boolean', ], convertStyledDotToFunction: [ isBoolean, 'The config “convertStyledDotToFunction” can only be a boolean', ], moveTwPropToStyled: [ isBoolean, 'The config “moveTwPropToStyled” can only be a boolean', ], convertHtmlElementToStyled: [ isBoolean, 'The config “convertHtmlElementToStyled” can only be a boolean', ], } export { configDefaultsTwin, configTwinValidators, TWIN_CONFIG_DEFAULTS } ================================================ FILE: src/core/lib/userPresets.ts ================================================ /** * Config presets * * To change the preset, add the following in `package.json`: * `{ "babelMacros": { "twin": { "preset": "styled-components" } } }` * * Or in `babel-plugin-macros.config.js`: * `module.exports = { twin: { preset: "styled-components" } }` */ const userPresets = { 'styled-components': { styled: { import: 'default', from: 'styled-components' }, css: { import: 'css', from: 'styled-components' }, global: { import: 'createGlobalStyle', from: 'styled-components' }, }, emotion: { styled: { import: 'default', from: '@emotion/styled' }, css: { import: 'css', from: '@emotion/react' }, global: { import: 'Global', from: '@emotion/react' }, }, goober: { styled: { import: 'styled', from: 'goober' }, css: { import: 'css', from: 'goober' }, global: { import: 'createGlobalStyles', from: 'goober/global' }, }, stitches: { styled: { import: 'styled', from: 'stitches.config' }, css: { import: 'css', from: 'stitches.config' }, global: { import: 'global', from: 'stitches.config' }, }, solid: { styled: { import: 'styled', from: 'solid-styled-components' }, css: { import: 'css', from: 'solid-styled-components' }, global: { import: 'createGlobalStyles', from: 'solid-styled-components' }, }, } export default userPresets ================================================ FILE: src/core/lib/util/camelize.ts ================================================ const CAMEL_FIND = /\W+(.)/g export default function camelize(string: string): string { return string?.replace(CAMEL_FIND, (_, chr: string) => chr.toUpperCase()) } ================================================ FILE: src/core/lib/util/deepMerge.ts ================================================ import deepMerge from 'lodash.merge' // eslint-disable-next-line unicorn/prefer-export-from export default deepMerge ================================================ FILE: src/core/lib/util/escapeRegex.ts ================================================ const REGEX_SPECIAL_CHARACTERS = /[$()*+./?[\\\]^{|}-]/g export default function escapeRegex(string: string): string { return string.replace(REGEX_SPECIAL_CHARACTERS, '\\$&') } ================================================ FILE: src/core/lib/util/formatProp.ts ================================================ // eslint-disable-next-line import/no-relative-parent-imports import { SPACE_ID, LINEFEED } from '../../constants' const EXTRA_WHITESPACE = /\s\s+/g export default function formatProp(classes: string): string { return ( classes // Normalize spacing .replace(EXTRA_WHITESPACE, ' ') // Remove newline characters .replace(LINEFEED, ' ') // Replace the space id .replace(SPACE_ID, ' ') .trim() ) } ================================================ FILE: src/core/lib/util/get.ts ================================================ import get from 'lodash.get' // eslint-disable-next-line unicorn/prefer-export-from export default get ================================================ FILE: src/core/lib/util/isEmpty.ts ================================================ export default function isEmpty(value: unknown): boolean { return ( value === undefined || value === null || (typeof value === 'object' && Object.keys(value).length === 0) || (typeof value === 'string' && value.trim().length === 0) ) } ================================================ FILE: src/core/lib/util/isObject.ts ================================================ export default function isObject( value: unknown ): value is Record { // eslint-disable-next-line eqeqeq, no-eq-null return value != null && typeof value === 'object' && !Array.isArray(value) } ================================================ FILE: src/core/lib/util/isShortCss.ts ================================================ import { splitAtTopLevelOnly } from './twImports' import type { TailwindConfig } from 'core/types' export default function isShortCss( fullClassName: string, tailwindConfig: TailwindConfig ): boolean { const classPieces = [ ...splitAtTopLevelOnly(fullClassName, tailwindConfig.separator ?? ':'), ] const className = classPieces.slice(-1)[0] if (!className.includes('[')) return false // Replace brackets before splitting on them as the split function already // reads brackets to determine where the top level is const splitAtArbitrary = [ ...splitAtTopLevelOnly(className.replace(/\[/g, '∀'), '∀'), ] // Normal class if (splitAtArbitrary[0].endsWith('-')) return false // Important suffix if (splitAtArbitrary[0].endsWith('!')) return false // Arbitrary property if (splitAtArbitrary[0] === '') return false // Slash opacity, eg: bg-red-500/fromConfig/[.555] if (splitAtArbitrary[0].endsWith('/')) return false return true } ================================================ FILE: src/core/lib/util/replaceThemeValue.ts ================================================ import type { AssertContext, CoreContext } from 'core/types' const MATCH_THEME = /theme\((.+?)\)/ const MATCH_QUOTES = /["'`]/g function replaceThemeValue( value: string, { assert, theme, }: { assert: CoreContext['assert']; theme: CoreContext['theme'] } ): string { const match = MATCH_THEME.exec(value) if (!match) return value const themeFunction = match[0] const themeParameters = match[1].replace(MATCH_QUOTES, '').trim() const [main, second] = themeParameters.split(',') let themeValue = theme(main, second) assert(Boolean(themeValue), ({ color }: AssertContext) => color( `✕ ${color( themeParameters, 'errorLight' )} doesn’t match a theme value from the config` ) ) // Account for the 'DEFAULT' key if (typeof themeValue === 'object' && 'DEFAULT' in themeValue) { themeValue = themeValue.DEFAULT as typeof themeValue } // Escape spaces in the value - without this we get an incorrect order // in class groups like this: // tw`w-[calc(100%-theme('spacing.1'))] w-[calc(100%-theme('spacing[0.5]'))]` // theme: { spacing: { 0.5: "calc(.5 * .25rem)", 1: "calc(1 * .25rem)" } } const stringValue = String(themeValue).replace(/\./g, '\\.') const replacedValue = value.replace(themeFunction, stringValue) return replacedValue } export default replaceThemeValue ================================================ FILE: src/core/lib/util/sassifySelector.ts ================================================ import type { ExtractRuleStyles } from 'core/types' const SELECTOR_PARENT_CANDIDATE = /^[ #.[]/ const SELECTOR_SPECIAL_STARTS = /^ [>@]/ const SELECTOR_ROOT = /(^| ):root(?!\w)/g const UNDERSCORE_ESCAPING = /\\+(_)/g const WRAPPED_PARENT_SELECTORS = /(\({3}&(.*?)\){3})/g type OptionalSassifyContext = { selectorMatchReg: RegExp sassyPseudo: boolean original?: string } type SassifySelectorTasks = Array< (selector: string, params: OptionalSassifyContext) => string > const sassifySelectorTasks: SassifySelectorTasks = [ (selector): string => selector.trim(), // Prefix with the parent selector when sassyPseudo is enabled, // otherwise just replace the class with the parent selector (selector, { selectorMatchReg, sassyPseudo, original }): string => { const out = selector.replace( selectorMatchReg, (match, __, offset: number) => { if (selector === match) return '' if ( /\w/.test(selector[offset - 1]) && selector[offset + match.length] === ':' ) { if (sassyPseudo && selector[offset - 1] === undefined) return '&' return '' // Cover [section&]:hover:block / .btn.loading&:before } return offset === 0 ? '' : '&' } ) // Fix certain matches not covered by the previous task, eg: `first:[section]:m-1` // (Arbitrary variants targeting html elements) if (original && out === selector && selector.includes(`.${original}`)) return selector.replace(`.${original}`, '') return out }, // Unwrap the pre-wrapped parent selectors (pre-wrapping avoids matching issues against word characters, eg: `[§ion]:block`) (selector): string => selector.replace(WRAPPED_PARENT_SELECTORS, '&$2'), // Remove unneeded escaping from the selector (selector): string => selector.replace(UNDERSCORE_ESCAPING, '$1'), // Prefix classes/ids/attribute selectors with a parent selector so styles // are applied to the current element rather than its children (selector): string => { if (selector.includes('&')) return selector const addParentSelector = SELECTOR_PARENT_CANDIDATE.test(selector) if (!addParentSelector) return selector // Fix: ` > :not([hidden]) ~ :not([hidden])` / ` > *` // Fix: `[@page]:x` if (SELECTOR_SPECIAL_STARTS.test(selector)) return selector return `&${selector}` }, // Fix the spotty `:root` support in emotion/styled-components (selector): string => selector.replace(SELECTOR_ROOT, '*:root'), // Escape selectors containing forward slashes, eg: group-hover/link:bg-black (selector): string => selector.replace(/\//g, '\\/'), (selector): string => selector.trim(), ] function sassifySelector( selector: string, params: ExtractRuleStyles & OptionalSassifyContext ): string { // Remove the selector if it only contains the parent selector if (selector === '&') { params.debug('selector not required', selector) return '' } for (const task of sassifySelectorTasks) { selector = task(selector, params) } return selector } export default sassifySelector ================================================ FILE: src/core/lib/util/splitOnFirst.ts ================================================ // Split a string at a value and return an array of the two parts export default function splitOnFirst(input: string, delim: string): string[] { return (([first, ...rest]): [string, string] => [first, rest.join(delim)])( input.split(delim) ) } ================================================ FILE: src/core/lib/util/toArray.ts ================================================ export default function toArray(array: T): T | [T] { if (Array.isArray(array)) return array return [array] } ================================================ FILE: src/core/lib/util/twImports.ts ================================================ import type { Config } from 'tailwindcss' import type { TailwindConfig, TailwindContext, TailwindMatch } from 'core/types' // @ts-expect-error Types added below import { toPath as toPathRaw } from 'tailwindcss/lib/util/toPath' // @ts-expect-error Types added below import { resolveMatches as resolveMatchesRaw } from 'tailwindcss/lib/lib/generateRules' // @ts-expect-error Types added below import { createContext as createContextRaw } from 'tailwindcss/lib/lib/setupContextUtils' // @ts-expect-error Types added below import { default as defaultTailwindConfigRaw } from 'tailwindcss/stubs/config.full' // @ts-expect-error Types added below import { default as transformThemeValueRaw } from 'tailwindcss/lib/util/transformThemeValue' // @ts-expect-error Types added below import { default as resolveTailwindConfigRaw } from 'tailwindcss/lib/util/resolveConfig' // @ts-expect-error Types added below import { default as getAllConfigsRaw } from 'tailwindcss/lib/util/getAllConfigs' // @ts-expect-error Types added below import { splitAtTopLevelOnly as splitAtTopLevelOnlyRaw } from 'tailwindcss/lib/util/splitAtTopLevelOnly' // @ts-expect-error Types added below import unescapeRaw from 'postcss-selector-parser/dist/util/unesc' const toPath = toPathRaw as (path: string[] | string) => string[] const createContext = createContextRaw as (config: Config) => TailwindContext const defaultTailwindConfig = defaultTailwindConfigRaw as Config const resolveMatches = resolveMatchesRaw as ( candidate: string, context: TailwindContext ) => TailwindMatch[] const transformThemeValue = transformThemeValueRaw as ( themeValue: string ) => ( value: unknown, options: Record ) => Record const resolveTailwindConfig = resolveTailwindConfigRaw as ( config: unknown[] ) => TailwindConfig const getAllConfigs = getAllConfigsRaw as ( config: Record ) => TailwindConfig[] const splitAtTopLevelOnly = splitAtTopLevelOnlyRaw as ( input: string, separator: string ) => string[] const unescape = unescapeRaw as (string: string) => string export { toPath, createContext, defaultTailwindConfig, resolveMatches, transformThemeValue, resolveTailwindConfig, getAllConfigs, splitAtTopLevelOnly, unescape, } ================================================ FILE: src/core/types/index.ts ================================================ import type { MacroParams } from 'babel-plugin-macros' import type { NodePath, types as T } from '@babel/core' import type * as P from 'postcss' import type { Config as TailwindConfig } from 'tailwindcss' import type { colors } from '../lib/logging' import type userPresets from '../lib/userPresets' type KeyValuePair = Record // eslint-disable-next-line @typescript-eslint/consistent-type-definitions interface RecursiveKeyValuePair { [key: string]: V | RecursiveKeyValuePair } export type CssObject = RecursiveKeyValuePair // Make all properties in T optional type Partial = { [P in keyof T]?: T[P] } export type ColorValue = (c: typeof colors) => string export type ColorType = keyof typeof colors export type MakeColor = (message: string, type?: keyof typeof colors) => string export type PresetItem = { import: string; from: string } export type PresetConfig = { styled: PresetItem css: PresetItem global: PresetItem } export type TwinConfigAll = { preset?: keyof typeof userPresets allowStyleProp: boolean autoCssProp: boolean dataTwProp: boolean | 'all' sassyPseudo: boolean debug: boolean includeClassNames: boolean dataCsProp: boolean | 'all' disableCsProp: boolean disableShortCss: boolean config?: string | Partial convertStyledDotToParam?: boolean convertStyledDotToFunction?: boolean moveTwPropToStyled?: boolean moveKeyframesToGlobalStyles?: boolean convertHtmlElementToStyled?: boolean hasLogColors?: boolean stitchesConfig?: string } & PresetConfig export type Candidate = [ data: { layer: string }, rule: P.Rule | P.AtRule | P.Declaration ] export type TailwindContext = { getClassOrder: ( classes: string[] ) => Array<[className: string, order: bigint]> candidateRuleMap: Array<[string, Candidate[]]> variantMap: Array> } export type AssertContext = { color: MakeColor } export type Assert = ( expression: boolean | string, message: ({ color }: AssertContext) => string ) => void export type CoreContext = { isDev: boolean assert: Assert debug: (reference: string, data: unknown, type?: ColorType) => void theme: ( dotSeparatedItem: string, extra?: string ) => Record | boolean | number tailwindContext: TailwindContext packageUsed: GetPackageUsed tailwindConfig: TailwindConfig twinConfig: TwinConfigAll CustomError: typeof Error importConfig: PresetConfig isShortCssOnly?: boolean isSilent?: boolean options?: TailwindMatchOptions } export type ExtractRuleStyles = { includeUniversalStyles?: boolean original?: string hasImportant?: boolean selectorMatchReg?: RegExp passChecks?: boolean sassyPseudo?: TwinConfigAll['sassyPseudo'] coreContext: CoreContext } & Pick< CoreContext, | 'assert' | 'debug' | 'theme' | 'tailwindConfig' | 'tailwindContext' | 'options' | 'twinConfig' > export type TransformDecl = { decl: P.Declaration property: string } & ExtractRuleStyles export type CreateCoreContext = { isDev?: boolean config?: TwinConfig sourceRoot?: string filename?: string tailwindConfig?: TailwindConfig CustomError: typeof Error } export type PossiblePresets = keyof typeof userPresets export type GetPackageUsed = { isEmotion: boolean isStyledComponents: boolean isGoober: boolean isStitches: boolean isSolid: boolean } export type TailwindMatchOptions = { preserveSource?: boolean respectPrefix?: boolean respectImportant?: boolean values?: Record } export type TailwindMatch = [ { options?: TailwindMatchOptions; layer?: string }, P.Rule | P.AtRule | P.Declaration ] export type GetConfigTwinValidatedParameters = GetPackageUsed & { isDev: boolean } export type TwinConfig = Partial export type { T, NodePath, MacroParams, TailwindConfig, KeyValuePair } ================================================ FILE: src/macro/className.ts ================================================ // eslint-disable-next-line import/no-relative-parent-imports import { getStyles } from '../core' import { addDataTwPropToPath, addDataPropToExistingPath } from './dataProp' import isEmpty from './lib/util/isEmpty' import { astify, getParentJSX, getAttributeNames, getCssAttributeData, } from './lib/astHelpers' import type { JSXAttributeHandler, T, NodePath } from './types' function makeJsxAttribute( [key, value]: [string, T.Expression | T.JSXEmptyExpression], t: typeof T ): T.JSXAttribute { return t.jsxAttribute(t.jsxIdentifier(key), t.jsxExpressionContainer(value)) } function handleClassNameProperty({ path, t, state, coreContext, }: JSXAttributeHandler): void { if (!coreContext.twinConfig.includeClassNames) return if (path.node.name.name !== 'className') return const nodeValue = path.node.value if (!nodeValue) return // Ignore className if it cannot be resolved if ((nodeValue as T.JSXExpressionContainer).expression) return const rawClasses = (nodeValue as T.StringLiteral).value if (!rawClasses) return const { styles, unmatched, matched } = getStyles(rawClasses, { ...coreContext, isSilent: true, }) if (matched.length === 0) return const astStyles = astify(isEmpty(styles) ? {} : styles, t) // When classes can't be matched we add them back into the className (it exists as a few properties) const unmatchedClasses = unmatched.join(' ') if (!path.node.value) return ;(path.node.value as T.StringLiteral).value = unmatchedClasses if (path.node.value.extra) { path.node.value.extra.rawValue = unmatchedClasses path.node.value.extra.raw = `"${unmatchedClasses}"` } const jsxPath = getParentJSX(path) const attributes = jsxPath.get('attributes') const { attribute: cssAttribute } = getCssAttributeData(attributes) if (!cssAttribute) { const attribute = makeJsxAttribute(['css', astStyles], t) if (unmatchedClasses) { path.insertAfter(attribute) } else { path.replaceWith(attribute) } const pathParameters = { t, path, state, attributes, coreContext, rawClasses: matched.join(' '), } addDataTwPropToPath(pathParameters) return } const cssExpression = (cssAttribute as NodePath) .get('value') .get('expression') as NodePath const attributeNames = getAttributeNames(jsxPath) const isBeforeCssAttribute = attributeNames.indexOf('className') - attributeNames.indexOf('css') < 0 if (cssExpression.isArrayExpression()) { // The existing css prop is an array, eg: css={[...]} if (isBeforeCssAttribute) { cssExpression.unshiftContainer('elements', astStyles) } else { cssExpression.pushContainer('elements', astStyles) } } else { // The existing css prop is not an array, eg: css={{ ... }} / css={`...`} const existingCssAttribute = cssExpression.node coreContext.assert(Boolean(existingCssAttribute), ({ color }) => color( `✕ An empty css prop (css="") isn’t supported alongside the className prop` ) ) const styleArray = isBeforeCssAttribute ? [astStyles, existingCssAttribute] : [existingCssAttribute, astStyles] cssExpression.replaceWith(t.arrayExpression(styleArray)) } if (!unmatchedClasses) path.remove() addDataPropToExistingPath({ t, attributes, rawClasses: matched.join(' '), path: jsxPath, state, coreContext, }) } export { handleClassNameProperty } ================================================ FILE: src/macro/css.ts ================================================ import { addImport, makeStyledComponent } from './lib/astHelpers' import isEmpty from './lib/util/isEmpty' import type { T, AdditionalHandlerParameters, HandlerParameters, NodePath, } from './types' function updateCssReferences({ references, state, }: AdditionalHandlerParameters): void { if (state.existingCssIdentifier) return const cssReferences = references.css if (isEmpty(cssReferences)) return cssReferences.forEach(path => { // @ts-expect-error Setting value on target path.node.name = state.cssIdentifier.name }) } function addCssImport({ references, program, t, state, coreContext, }: AdditionalHandlerParameters): void { if (!state.isImportingCss) { const shouldImport = !isEmpty(references.css) && !state.existingCssIdentifier if (!shouldImport) return } if (state.existingCssIdentifier) return if (!coreContext.importConfig.css) return addImport({ types: t, program, name: coreContext.importConfig.css.import, mod: coreContext.importConfig.css.from, identifier: state.cssIdentifier, }) } function convertHtmlElementToStyled( params: HandlerParameters & { path: NodePath } ): void { const { path, t, coreContext } = params if (!coreContext.twinConfig.convertHtmlElementToStyled) return const jsxPath = path.get('openingElement') makeStyledComponent({ ...params, jsxPath, secondArg: t.objectExpression([]), fromProp: 'css', }) } export { updateCssReferences, addCssImport, convertHtmlElementToStyled } ================================================ FILE: src/macro/dataProp.ts ================================================ import type { AddDataPropToExistingPath, T } from './types' const SPACE_ID = '_' const EXTRA_WHITESPACE = /\s\s+/g const LINEFEED = /\n/g function formatProp(classes: string): string { return ( classes // Normalize spacing .replace(EXTRA_WHITESPACE, ' ') // Remove newline characters .replace(LINEFEED, ' ') // Replace the space id .replace(SPACE_ID, ' ') .trim() ) } function addDataTwPropToPath({ t, attributes, rawClasses, path, state, coreContext, propName = 'data-tw', }: AddDataPropToExistingPath): void { const dataTwPropAllEnvironments = propName === 'data-tw' && coreContext.twinConfig.dataTwProp === 'all' const dataCsPropAllEnvironments = propName === 'data-cs' && coreContext.twinConfig.dataCsProp === 'all' if (!state.isDev && !dataTwPropAllEnvironments && !dataCsPropAllEnvironments) return if (propName === 'data-tw' && !coreContext.twinConfig.dataTwProp) return if (propName === 'data-cs' && !coreContext.twinConfig.dataCsProp) return // A for in loop looping over attributes and removing the one we want for (const p of attributes) { if (p.type === 'JSXSpreadAttribute') continue const nodeName = p.node as T.JSXAttribute if (nodeName?.name && nodeName.name.name === propName) p.remove() } const classes = formatProp(rawClasses) // Add the attribute path.insertAfter( t.jsxAttribute(t.jsxIdentifier(propName), t.stringLiteral(classes)) ) } function addDataPropToExistingPath({ t, attributes, rawClasses, path, state, coreContext, propName = 'data-tw', }: AddDataPropToExistingPath): void { const dataTwPropAllEnvironments = propName === 'data-tw' && coreContext.twinConfig.dataTwProp === 'all' const dataCsPropAllEnvironments = propName === 'data-cs' && coreContext.twinConfig.dataCsProp === 'all' if (!state.isDev && !dataTwPropAllEnvironments && !dataCsPropAllEnvironments) return if (propName === 'data-tw' && !coreContext.twinConfig.dataTwProp) return if (propName === 'data-cs' && !coreContext.twinConfig.dataCsProp) return // Append to the existing debug attribute const dataProperty = attributes.find( p => (p.node as T.JSXAttribute)?.name && (p.node as T.JSXAttribute).name.name === propName ) if (dataProperty) { try { // Existing data prop if ( ((dataProperty.node as T.JSXAttribute).value as T.StringLiteral).value ) { ;( (dataProperty.node as T.JSXAttribute).value as T.StringLiteral ).value = `${[ ((dataProperty.node as T.JSXAttribute).value as T.StringLiteral) .value, rawClasses, ] .filter(Boolean) .join(' | ')}` return } // New data prop const attribute = (dataProperty.node as T.JSXAttribute) .value as T.JSXExpressionContainer // @ts-expect-error Setting value on target attribute.expression.value = `${[ // @ts-expect-error Okay with value not on all expression types (dataProperty.node.value as T.JSXExpressionContainer).expression.value, rawClasses, ] .filter(Boolean) .join(' | ')}` } catch (_: unknown) {} return } const classes = formatProp(rawClasses) // Add a new attribute path.pushContainer( // @ts-expect-error Key is never 'attributes', t.jSXAttribute( t.jSXIdentifier(propName), t.jSXExpressionContainer(t.stringLiteral(classes)) ) ) } export { addDataTwPropToPath, addDataPropToExistingPath } ================================================ FILE: src/macro/globalStyles.ts ================================================ // eslint-disable-next-line import/no-relative-parent-imports import { getGlobalStyles } from '../core' import template from '@babel/template' import { addImport, generateUid, generateTaggedTemplateExpression, } from './lib/astHelpers' import type { CoreContext, AdditionalHandlerParameters, NodePath, State, T, CssObject, } from './types' const KEBAB_CANDIDATES = /([\da-z]|(?=[A-Z]))([A-Z])/g type AddGlobalStylesImport = { program: NodePath t: typeof T identifier: T.Identifier coreContext: CoreContext } function addGlobalStylesImport({ program, t, identifier, coreContext, }: AddGlobalStylesImport): void { addImport({ types: t, program, identifier, name: coreContext.importConfig.global.import, mod: coreContext.importConfig.global.from, }) } export type DeclarationParameters = { t: typeof T state: State globalUid: T.Identifier stylesUid: T.Identifier styles: string | undefined } function getGlobalDeclarationTte({ t, stylesUid, globalUid, styles, }: DeclarationParameters): T.VariableDeclaration { return t.variableDeclaration('const', [ t.variableDeclarator( globalUid, generateTaggedTemplateExpression({ t, identifier: stylesUid, styles }) ), ]) } function getGlobalDeclarationProperty( params: DeclarationParameters ): T.VariableDeclaration { const { t, stylesUid, globalUid, state, styles } = params const ttExpression = generateTaggedTemplateExpression({ t, identifier: state.cssIdentifier as T.Identifier, styles, }) const openingElement = t.jsxOpeningElement( t.jsxIdentifier(stylesUid.name), [ t.jsxAttribute( t.jsxIdentifier('styles'), t.jsxExpressionContainer(ttExpression) ), ], true ) const closingElement = t.jsxClosingElement(t.jsxIdentifier('close')) const arrowFunctionExpression = t.arrowFunctionExpression( [], t.jsxElement(openingElement, closingElement, [], true) ) const code = t.variableDeclaration('const', [ t.variableDeclarator(globalUid, arrowFunctionExpression), ]) return code } function kebabize(string: string): string { return string.replace(KEBAB_CANDIDATES, '$1-$2').toLowerCase() } function convert(k: string, v: string | number): string { return typeof v === 'string' ? ` ${kebabize(k)}: ${v};` : `${k} { ${convertCssObjectToString(v)} }` } function convertCssObjectToString( cssObject: CssObject | string | number | undefined ): string { if (!cssObject) return '' return Object.entries(cssObject) .map(([k, v]) => convert(k, v)) .join('\n') } function handleGlobalStylesFunction(params: AdditionalHandlerParameters): void { const { references } = params if (references.GlobalStyles) handleGlobalStylesJsx(params) if (references.globalStyles) handleGlobalStylesVariable(params) } function handleGlobalStylesVariable(params: AdditionalHandlerParameters): void { const { references } = params if (references.globalStyles.length === 0) return const styles = getGlobalStyles(params.coreContext) references.globalStyles.forEach(path => { const templateStyles = `(${JSON.stringify(styles)})` // `template` requires () wrapping const convertedStyles = template(templateStyles, { placeholderPattern: false, })() path.replaceWith(convertedStyles as NodePath) }) } function handleGlobalStylesJsx(params: AdditionalHandlerParameters): void { const { references, program, t, state, coreContext } = params if (references.GlobalStyles.length === 0) return coreContext.assert( references.GlobalStyles.length < 2, ({ color }) => `${color( `✕ Only one can be added per file` )}\n\nNeed something custom?\nUse the \`globalStyles\` import for a style object you can work with` ) const path = references.GlobalStyles[0] const parentPath = path.findParent(x => x.isJSXElement()) coreContext.assert( Boolean(parentPath), ({ color }) => `${color( `✕ The \`GlobalStyles\` import must be added as a JSX element` )}\neg: \`\`\n\nNeed something custom?\nUse the \`globalStyles\` import for a style object you can work with` ) const globalStyles = getGlobalStyles(params.coreContext) const styles = convertCssObjectToString(globalStyles) const globalUid = generateUid('GlobalStyles', program) const stylesUid = generateUid('globalImport', program) const declarationData = { t, globalUid, stylesUid, styles, state } if (coreContext.packageUsed.isStyledComponents) { const declaration = getGlobalDeclarationTte(declarationData) program.unshiftContainer('body', declaration) path.replaceWith(t.jSXIdentifier(globalUid.name)) } if (coreContext.packageUsed.isEmotion) { const declaration = getGlobalDeclarationProperty(declarationData) program.unshiftContainer('body', declaration) path.replaceWith(t.jSXIdentifier(globalUid.name)) // Check if the css import has already been imported // https://github.com/ben-rogerson/twin.macro/issues/313 state.isImportingCss = !state.existingCssIdentifier } if (coreContext.packageUsed.isGoober || coreContext.packageUsed.isSolid) { const declaration = getGlobalDeclarationTte(declarationData) program.unshiftContainer('body', declaration) path.replaceWith(t.jSXIdentifier(globalUid.name)) } coreContext.assert( Boolean(!coreContext.packageUsed.isStitches), ({ color }) => `${color( `✕ The ${color( 'GlobalStyles', 'errorLight' )} import can’t be used with stitches` )}\n\nUse the ${color(`globalStyles`, 'success')} import instead` ) addGlobalStylesImport({ identifier: stylesUid, t, program, coreContext, }) } export { handleGlobalStylesFunction } ================================================ FILE: src/macro/lib/astHelpers.ts ================================================ import get from './util/get' import type { T, State, NodePath, CoreContext, ImportDeclarationHandler, } from 'macro/types' function addImport({ types: t, program, mod, name, identifier, }: { types: typeof T program: NodePath mod: string name: string identifier: T.Identifier }): void { const importName = name === 'default' ? [t.importDefaultSpecifier(identifier)] : name ? [t.importSpecifier(identifier, t.identifier(name))] : [] program.unshiftContainer( 'body', t.importDeclaration(importName, t.stringLiteral(mod)) ) } /** * Convert plain js into babel ast */ function astify( literal: unknown, t: typeof T ): | T.NullLiteral | T.UnaryExpression | T.NumericLiteral | T.BooleanLiteral | T.StringLiteral | T.Expression { if (literal === null) { return t.nullLiteral() } switch (typeof literal) { case 'function': { return t.unaryExpression('void', t.numericLiteral(0), true) } case 'number': { return t.numericLiteral(literal) } case 'boolean': { return t.booleanLiteral(literal) } case 'undefined': { return t.unaryExpression('void', t.numericLiteral(0), true) } case 'string': { return t.stringLiteral(literal) } default: { if (Array.isArray(literal)) { return t.arrayExpression(literal.map(x => astify(x, t))) } return t.objectExpression( objectExpressionElements(literal as Record, t) ) } } } function objectExpressionElements( literal: Record, t: typeof T ): T.ObjectProperty[] { return Object.keys(literal) .filter(k => typeof literal[k] !== 'undefined') .map( (k: string): T.ObjectProperty => t.objectProperty(t.stringLiteral(k), astify(literal[k], t)) ) } function setStyledIdentifier({ state, path, coreContext, }: ImportDeclarationHandler): void { const importFromStitches = coreContext.packageUsed.isStitches && coreContext.importConfig.styled.from.includes(path.node.source.value) const importFromLibrary = path.node.source.value === coreContext.importConfig.styled.from if (!importFromLibrary && !importFromStitches) return // Look for an existing import that matches the config, // if found then reuse it for the rest of the function calls path.node.specifiers.some(specifier => { if ( specifier.type === 'ImportDefaultSpecifier' && coreContext.importConfig.styled.import === 'default' && // fixes an issue in gatsby where the styled-components plugin has run // before twin. fix is to ignore import aliases which babel creates // https://github.com/ben-rogerson/twin.macro/issues/192 !specifier.local.name.startsWith('_') ) { state.styledIdentifier = specifier.local state.existingStyledIdentifier = true return true } if ( specifier.type === 'ImportSpecifier' && specifier.imported.type === 'Identifier' && specifier.imported.name === coreContext.importConfig.styled.import ) { state.styledIdentifier = specifier.local state.existingStyledIdentifier = true return true } state.existingStyledIdentifier = false return false }) } function setCssIdentifier({ state, path, coreContext, }: ImportDeclarationHandler): void { const importFromStitches = coreContext.packageUsed.isStitches && coreContext.importConfig.css.from.includes(path.node.source.value) const isLibraryImport = path.node.source.value === coreContext.importConfig.css.from if (!isLibraryImport && !importFromStitches) return // Look for an existing import that matches the config, // if found then reuse it for the rest of the function calls path.node.specifiers.some(specifier => { if ( specifier.type === 'ImportDefaultSpecifier' && coreContext.importConfig.css.import === 'default' ) { state.cssIdentifier = specifier.local state.existingCssIdentifier = true return true } if ( specifier.type === 'ImportSpecifier' && specifier.imported.type === 'Identifier' && specifier.imported.name === coreContext.importConfig.css.import ) { state.cssIdentifier = specifier.local state.existingCssIdentifier = true return true } state.existingCssIdentifier = false return false }) } function getStringFromTTE(path: NodePath): string { let getRawValue = false let rawValue = '' // Convert basic interpolated variables defined in the same file const evaluatedValue = (path.get('quasi').evaluate().value as string) ?? '' if (evaluatedValue === '') getRawValue = true // Evaluating strips escaping, so if there's a square bracket we know it's an // arbitrary value/property/variant and should grab the raw value if (evaluatedValue.includes('[')) getRawValue = true if (getRawValue) rawValue = (path.get('quasi.quasis') as Array>) .map(q => q.node.value.raw) .join('') // Trigger error due to non-evaluated value, eg:`w-[${sizes.width}]` if (evaluatedValue.length === 0 && rawValue.length > 0) return 'null' // Return raw classes with escaping, eg: [content\!]:block if (rawValue.length > evaluatedValue.length) return rawValue return evaluatedValue } // Parse tagged template arrays (``) function parseTte( path: NodePath, { t, state }: { t: typeof T; state: State } ): { string: string; path: NodePath } | undefined { const cloneNode = t.cloneNode || t.cloneDeep const tagType = path.node.tag.type if ( tagType !== 'Identifier' && tagType !== 'MemberExpression' && tagType !== 'CallExpression' ) return const string = getStringFromTTE(path) // Grab the path location before changing it const stringLoc = path.get('quasi').node.loc if (tagType === 'CallExpression') { replaceWithLocation( path.get('tag').get('callee') as NodePath, // @ts-expect-error Source type doesn’t include `Identifier` as possible type cloneNode(state.styledIdentifier) ) state.isImportingStyled = true } else if (tagType === 'MemberExpression') { replaceWithLocation( path.get('tag').get('object') as NodePath, // @ts-expect-error Source type doesn’t include `Identifier` as possible type cloneNode(state.styledIdentifier) ) state.isImportingStyled = true } if (tagType === 'CallExpression' || tagType === 'MemberExpression') { replaceWithLocation( path, t.callExpression(cloneNode(path.node.tag), [ t.identifier('__twPlaceholder'), ]) as unknown as NodePath ) path = ( path.get('arguments') as Array> )[0] } path.node.loc = stringLoc // Restore the original path location return { string, path } } function replaceWithLocation( path: NodePath, replacement: NodePath | T.Expression | T.ExpressionStatement ): [NodePath] | EmptyArray[] { const { loc } = path.node const newPaths = replacement ? path.replaceWith(replacement) : [] if (Array.isArray(newPaths) && newPaths.length > 0) { newPaths.forEach(p => { p.node.loc = loc }) } return newPaths } function generateUid(name: string, program: NodePath): T.Identifier { return program.scope.generateUidIdentifier(name) } function getParentJSX(path: NodePath): NodePath { return path.findParent(p => p.isJSXOpeningElement() ) as NodePath } function getAttributeNames(jsxPath: NodePath): string[] { const attributes = jsxPath.get('attributes') as Array< NodePath > const attributeNames = attributes.map(p => p.node.name?.name) as string[] return attributeNames } function getCssAttributeData( attributes: NodeType[] ): { index: number hasCssAttribute: boolean attribute: NodeType | undefined } { if (!String(attributes)) return { index: 0, hasCssAttribute: false, attribute: undefined } const index = attributes.findIndex( attribute => attribute?.isJSXAttribute() && ((attribute.get('name.name') as NodePath).node as unknown as string) === 'css' ) return { index, hasCssAttribute: index >= 0, attribute: attributes[index] } } function getFunctionValue( path: NodePath // eslint-disable-next-line @typescript-eslint/no-explicit-any ): { parent: NodePath; input: any } | undefined { if (path.parent.type !== 'CallExpression') return const parent = path.findParent(x => x.isCallExpression()) if (!parent) return const argument = (parent.get('arguments') as NodePath[])[0] || '' return { parent, input: argument.evaluate && (argument.evaluate().value as string), } } function getTaggedTemplateValue( path: Path ): { parent: NodePath; input: string } | undefined { if (path.parent.type !== 'TaggedTemplateExpression') return const parent = path.findParent(x => x.isTaggedTemplateExpression() ) as NodePath if (!parent) return if (parent.node.tag.type !== 'Identifier') return return { parent, input: parent.get('quasi').evaluate().value as string } } function getMemberExpression( path: NodePath ): { parent: NodePath; input: string } | undefined { if (path.parent.type !== 'MemberExpression') return const parent = path.findParent(x => x.isMemberExpression() ) as NodePath if (!parent) return return { parent, // @ts-expect-error name doesn't exist on node input: parent.get('property').node.name as string, } } function generateTaggedTemplateExpression({ t, identifier, styles, }: { t: typeof T identifier: T.Identifier styles: string | undefined }): T.TaggedTemplateExpression { const backtickStyles = t.templateElement({ raw: `${styles ?? ''}`, cooked: `${styles ?? ''}`, }) const ttExpression = t.taggedTemplateExpression( identifier, t.templateLiteral([backtickStyles], []) ) return ttExpression } function isComponent(name: string): boolean { return name.slice(0, 1).toUpperCase() === name.slice(0, 1) } const jsxSingleDotError = `The css prop + tw props can only be added to jsx elements with a single dot in their name (or no dot at all).` function getFirstStyledArgument( jsxPath: NodePath, t: typeof T, assert: CoreContext['assert'] ): T.MemberExpression | T.Identifier | T.StringLiteral { const path = get(jsxPath, 'node.name.name') as string if (path) return isComponent(path) ? t.identifier(path) : t.stringLiteral(path) const dotComponent = get(jsxPath, 'node.name') as string assert(Boolean(dotComponent), () => jsxSingleDotError) // Element name has dots in it const objectName = get(dotComponent, 'object.name') as string assert(Boolean(objectName), () => jsxSingleDotError) const propertyName = get(dotComponent, 'property.name') as string assert(Boolean(propertyName), () => jsxSingleDotError) return t.memberExpression( t.identifier(objectName), t.identifier(propertyName) ) } type MakeStyledComponent = { t: typeof T secondArg: T.Expression | T.StringLiteral | T.Identifier jsxPath: NodePath program: NodePath state: State coreContext: CoreContext fromProp: 'tw' | 'css' } type CreateStyledProps = Pick< MakeStyledComponent, 'jsxPath' | 't' | 'secondArg' > & { stateStyled: T.Identifier constName: T.Identifier firstArg: T.MemberExpression | T.Identifier | T.StringLiteral } function createStyledPropsForTw({ t, stateStyled, firstArg, secondArg, constName, }: CreateStyledProps): T.VariableDeclaration { const callee = t.callExpression(stateStyled, [firstArg]) const declarations = [ t.variableDeclarator(constName, t.callExpression(callee, [secondArg])), ] return t.variableDeclaration('const', declarations) } function createStyledPropsForCss( args: CreateStyledProps ): T.VariableDeclaration | undefined { const cssPropAttribute = args.jsxPath .get('attributes') .find( p => p.isJSXAttribute() && p.get('name').isJSXIdentifier() && p.get('name')?.node.name === 'css' ) const cssPropValue = cssPropAttribute?.get( 'value' ) as NodePath const expression = cssPropValue?.node?.expression if (!expression || expression.type === 'JSXEmptyExpression') return cssPropAttribute?.remove() return createStyledPropsForTw({ ...args, secondArg: expression }) } function makeStyledComponent({ t, secondArg, jsxPath, program, state, coreContext, fromProp, }: MakeStyledComponent): void { const constName = program.scope.generateUidIdentifier('TwComponent') if (!state.styledIdentifier) { state.styledIdentifier = generateUid('styled', program) state.isImportingStyled = true } const firstArg = getFirstStyledArgument(jsxPath, t, coreContext.assert) let styledDefinition = null const stateStyled: T.Identifier = state.styledIdentifier if (coreContext.packageUsed.isSolid) { const params = { jsxPath, t, stateStyled, firstArg, secondArg, constName } styledDefinition = fromProp === 'tw' ? createStyledPropsForTw(params) : createStyledPropsForCss(params) } else { const args = [firstArg, secondArg].filter(Boolean) const init = t.callExpression(stateStyled, args) const declarations = [t.variableDeclarator(constName, init)] styledDefinition = t.variableDeclaration('const', declarations) } if (!styledDefinition) return const rootParentPath = jsxPath.findParent(p => p.parentPath ? p.parentPath.isProgram() : false ) as NodePath if (rootParentPath) rootParentPath.insertBefore(styledDefinition) if (t.isMemberExpression(firstArg)) { // Replace components with a dot, eg: Dialog.blah const id = t.jsxIdentifier(constName.name) jsxPath.get('name').replaceWith(id) if (jsxPath.node.selfClosing) return ;(jsxPath.parentPath.get('closingElement.name') as NodePath).replaceWith(id) } else { ;(jsxPath.node.name as T.JSXIdentifier).name = constName.name if (jsxPath.node.selfClosing) return // @ts-expect-error Untyped name replacement jsxPath.parentPath.node.closingElement.name.name = constName.name } } function getJsxAttributes( path: NodePath ): Array> { const attributes = path.get('openingElement.attributes') as Array< NodePath > return attributes.filter(a => a.isJSXAttribute()) } export { addImport, astify, parseTte, replaceWithLocation, setStyledIdentifier, setCssIdentifier, generateUid, getParentJSX, getAttributeNames, getCssAttributeData, getFunctionValue, getTaggedTemplateValue, getMemberExpression, generateTaggedTemplateExpression, makeStyledComponent, getJsxAttributes, } ================================================ FILE: src/macro/lib/util/get.ts ================================================ import get from 'lodash.get' // eslint-disable-next-line unicorn/prefer-export-from export default get ================================================ FILE: src/macro/lib/util/isEmpty.ts ================================================ function isEmpty(value: unknown): boolean { return ( value === undefined || value === null || (typeof value === 'object' && Object.keys(value).length === 0) || (typeof value === 'string' && value.trim().length === 0) ) } export default isEmpty ================================================ FILE: src/macro/lib/validateImports.ts ================================================ import type { CoreContext, MacroParams } from 'macro/types' const validImports = new Set([ 'default', 'styled', 'css', 'theme', 'screen', 'TwStyle', 'TwComponent', 'ThemeStyle', 'GlobalStyles', 'globalStyles', ]) export default function validateImports( imports: MacroParams['references'], coreContext: CoreContext ): void { const importTwAsNamedNotDefault = Object.keys(imports).find( reference => reference === 'tw' ) coreContext.assert( !importTwAsNamedNotDefault, ({ color }) => `${color( `✕ import { tw } from 'twin.macro'` )}\n\nUse the default export for \`tw\`:\n\n${color( `import tw from 'twin.macro'`, 'success' )}` ) const unsupportedImport = Object.keys(imports).find( reference => !validImports.has(reference) ) coreContext.assert( !unsupportedImport, ({ color }) => `${color( `✕ Twin doesn't recognize { ${String(unsupportedImport)} }` )}\n\nTry one of these imports:\n\nimport ${color( 'tw', 'success' )}, { ${color('styled', 'success')}, ${color('css', 'success')}, ${color( 'theme', 'success' )}, ${color('screen', 'success')}, ${color( 'GlobalStyles', 'success' )}, ${color('globalStyles', 'success')} } from 'twin.macro'` ) } ================================================ FILE: src/macro/screen.ts ================================================ import { replaceWithLocation, astify, getFunctionValue, getTaggedTemplateValue, getMemberExpression, } from './lib/astHelpers' import type { AdditionalHandlerParameters, T, NodePath, CoreContext, } from './types' type GetDirectReplacement = Pick< HandleDefinition, 'mediaQuery' | 'parent' | 't' > function getDirectReplacement({ mediaQuery, parent, t, }: GetDirectReplacement): Expression { return { newPath: parent, replacement: astify(mediaQuery, t), } } type ScreenValues = | string | { raw?: string; min?: string; max?: string } | Array<{ raw?: string; min?: string; max?: string }> type GetMediaQuery = { input: string | string[] screens: Record assert: CoreContext['assert'] } type Expression = { newPath: NodePath replacement: T.TemplateLiteral | T.ObjectExpression | T.Expression } type HandleDefinition = { mediaQuery: string parent: NodePath type: string t: typeof T } function handleDefinition({ mediaQuery, parent, type, t, }: HandleDefinition): undefined | (() => Expression) { return { TaggedTemplateExpression(): { newPath: NodePath replacement: T.TemplateLiteral } { const newPath = parent.findParent(x => x.isTaggedTemplateExpression() ) as NodePath const query = [`${mediaQuery} { `, ` }`] const quasis = [ t.templateElement({ raw: query[0], cooked: query[0] }, false), t.templateElement({ raw: query[1], cooked: query[1] }, true), ] const expressions = [newPath.get('quasi').node] const replacement = t.templateLiteral(quasis, expressions) return { newPath, replacement } }, CallExpression(): { newPath: NodePath; replacement: T.ObjectExpression } { const newPath = parent.findParent(x => x.isCallExpression() ) as NodePath const value = newPath.get('arguments')[0].node as T.Expression const replacement = t.objectExpression([ t.objectProperty(t.stringLiteral(mediaQuery), value), ]) return { newPath, replacement } }, ObjectProperty(): Expression { // Remove brackets around keys so merges work with tailwind screens // styled.div({ [screen`2xl`]: tw`block`, ...tw`2xl:inline` }) // https://github.com/ben-rogerson/twin.macro/issues/379 // @ts-expect-error unsure of parent type parent.parent.computed = false return getDirectReplacement({ mediaQuery, parent, t }) }, ExpressionStatement: () => getDirectReplacement({ mediaQuery, parent, t }), ArrowFunctionExpression: () => getDirectReplacement({ mediaQuery, parent, t }), ArrayExpression: () => getDirectReplacement({ mediaQuery, parent, t }), BinaryExpression: () => getDirectReplacement({ mediaQuery, parent, t }), LogicalExpression: () => getDirectReplacement({ mediaQuery, parent, t }), ConditionalExpression: () => getDirectReplacement({ mediaQuery, parent, t }), VariableDeclarator: () => getDirectReplacement({ mediaQuery, parent, t }), TemplateLiteral: () => getDirectReplacement({ mediaQuery, parent, t }), TSAsExpression: () => getDirectReplacement({ mediaQuery, parent, t }), }[type] } function getMediaQuery({ input, screens, assert }: GetMediaQuery): string { const _input = typeof input === 'string' ? input.split(',').map(s => s.trim()) : input const _screens = _input.map(s => screens[s]) _input.forEach(i => { assert( Boolean(screens[i]), ({ color }) => `${color( `${ input ? `✕ ${color(i, 'errorLight')} wasn’t found in your` : 'Specify a screen value from your' } tailwind config` )}\n\nTry one of these values:\n\n${Object.entries(screens) .map( ([k, v]) => `${color('-', 'subdued')} screen(${color( `'${k}'`, 'success' )})({ ... }) (${String(v)})` ) .join('\n')}` ) }) const mediaQuery = _screens .map(screen => { if (typeof screen === 'string') return `(min-width: ${screen})` if (!Array.isArray(screen) && typeof screen.raw === 'string') return screen.raw return (Array.isArray(screen) ? screen : [screen]) .map(range => [ typeof range.min === 'string' ? `(min-width: ${range.min})` : null, typeof range.max === 'string' ? `(max-width: ${range.max})` : null, ] .filter(Boolean) .join(' and ') ) .join(', ') }) .join(', ') return mediaQuery ? `@media ${mediaQuery}` : '' } function handleScreenFunction({ references, t, coreContext, }: AdditionalHandlerParameters): void { if (!references.screen) return const screens = coreContext.theme('screens') as Record references.screen.forEach(path => { // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment const { input, parent } = getTaggedTemplateValue(path) ?? // screen.lg`` getFunctionValue(path) ?? // screen.lg({ }) getMemberExpression(path) ?? { // screen`lg` input: null, parent: null, } const definition = handleDefinition({ type: (parent as NodePath).parent.type, mediaQuery: getMediaQuery({ input: input as string, screens, assert: coreContext.assert, }), parent: parent as NodePath, t, }) coreContext.assert( Boolean(definition), ({ color }) => `${color( `✕ The screen import doesn’t support that syntax` )}\n\nTry using it like this: ${color( [Object.keys(screens)[0]].map(f => `screen("${f}")`).join(''), 'success' )}` ) const { newPath, replacement } = (definition as () => Expression)() replaceWithLocation(newPath, replacement) }) } export { handleScreenFunction } ================================================ FILE: src/macro/shortCss.ts ================================================ /* eslint-disable @typescript-eslint/no-unsafe-call */ // eslint-disable-next-line import/no-relative-parent-imports import { getStyles } from '../core' import isEmpty from './lib/util/isEmpty' import { addDataTwPropToPath, addDataPropToExistingPath } from './dataProp' import { astify, getParentJSX, getAttributeNames, getCssAttributeData, } from './lib/astHelpers' import type { NodePath, T, JSXAttributeHandler } from './types' function handleCsProperty({ path, t, state, coreContext, }: JSXAttributeHandler): void { if (coreContext.twinConfig.disableCsProp) return if (!path.node || path.node.name.name !== 'cs') return const nodeValue = path.node.value const nodeExpression = (nodeValue as T.JSXExpressionContainer).expression // Allow cs={"property[value]"} const expressionValue = nodeExpression && nodeExpression.type === 'StringLiteral' && nodeExpression.value if (nodeExpression) coreContext.assert( Boolean(expressionValue), ({ color }) => `${color( `✕ Only complete classes can be used with the "cs" prop` )}\n\nTry using it like this: ${color( '
', 'success' )}\n\nRead more at https://twinredirect.page.link/cs-classes` ) const rawClasses = expressionValue || (nodeValue as T.StringLiteral).value || '' const { styles } = getStyles(rawClasses, { isShortCssOnly: true, ...coreContext, }) const astStyles = astify(isEmpty(styles) ? {} : styles, t) const jsxPath = getParentJSX(path) const attributes = jsxPath.get('attributes') const { attribute: cssAttribute } = getCssAttributeData(attributes) if (!cssAttribute) { // Replace the tw prop with the css prop path.replaceWith( t.jsxAttribute( t.jsxIdentifier('css'), t.jsxExpressionContainer(astStyles) ) ) addDataTwPropToPath({ t, attributes, rawClasses, path, state, coreContext, propName: 'data-cs', }) return } // The expression is the value as a NodePath const attributeValuePath = cssAttribute.get('value') // If it's not {} or "", get out of here if ( !attributeValuePath || // @ts-expect-error The type checking functions don't exist on NodePath (!attributeValuePath.isJSXExpressionContainer() && // @ts-expect-error The type checking functions don't exist on NodePath !attributeValuePath.isStringLiteral()) ) return // @ts-expect-error The type checking functions don't exist on NodePath const existingCssAttribute = attributeValuePath.isStringLiteral() ? (attributeValuePath as unknown as NodePath) : // @ts-expect-error get doesn’t exist on the types (attributeValuePath.get( 'expression' ) as NodePath) const attributeNames = getAttributeNames(jsxPath) const isBeforeCssAttribute = attributeNames.indexOf('cs') - attributeNames.indexOf('css') < 0 if (existingCssAttribute.isArrayExpression()) { // The existing css prop is an array, eg: css={[...]} if (isBeforeCssAttribute) { // @ts-expect-error unshiftContainer doesn't exist on NodePath existingCssAttribute.unshiftContainer('elements', astStyles) } else { // @ts-expect-error pushContainer doesn't exist on NodePath existingCssAttribute.pushContainer('elements', astStyles) } } else { // css prop is either: // TemplateLiteral //
// or an ObjectExpression //
// or ArrowFunctionExpression/FunctionExpression //
(...)} cs="..." /> const existingCssAttributeNode = existingCssAttribute.node // The existing css prop is an array, eg: css={[...]} const styleArray = isBeforeCssAttribute ? [astStyles, existingCssAttributeNode] : [existingCssAttributeNode, astStyles] const arrayExpression = t.arrayExpression(styleArray as T.Expression[]) const { parent } = existingCssAttribute const replacement = parent.type === 'JSXAttribute' ? t.jsxExpressionContainer(arrayExpression) : arrayExpression existingCssAttribute.replaceWith(replacement) } path.remove() // remove the cs prop addDataPropToExistingPath({ t, attributes, rawClasses, path: jsxPath, state, coreContext, propName: 'data-cs', }) } export { handleCsProperty } ================================================ FILE: src/macro/styled.ts ================================================ import { addImport, replaceWithLocation } from './lib/astHelpers' import isEmpty from './lib/util/isEmpty' import get from './lib/util/get' import type { T, NodePath, AdditionalHandlerParameters } from './types' function updateStyledReferences({ references, state, }: AdditionalHandlerParameters): void { if (state.existingStyledIdentifier) return const styledReferences = references.styled if (isEmpty(styledReferences)) return styledReferences.forEach(path => { // @ts-expect-error Setting values is untyped path.node.name = state.styledIdentifier.name }) } function addStyledImport({ references, program, t, state, coreContext, }: AdditionalHandlerParameters): void { if (!state.isImportingStyled) { const shouldImport = !isEmpty(references.styled) && !state.existingStyledIdentifier if (!shouldImport) return } if (state.existingStyledIdentifier) return addImport({ types: t, program, name: coreContext.importConfig.styled.import, mod: coreContext.importConfig.styled.from, identifier: state.styledIdentifier, }) } function moveDotElement({ path, t, moveToParam = true, }: { path: NodePath t: typeof T moveToParam: boolean }): void { if (path.parent.type !== 'MemberExpression') return const parentCallExpression = path.findParent(x => x.isCallExpression() ) as NodePath if (!parentCallExpression) return const styledName = get(path, 'parentPath.node.property.name') as string const styledArgs = get(parentCallExpression, 'node.arguments.0') as | T.Expression | T.SpreadElement | T.JSXNamespacedName | T.ArgumentPlaceholder | T.ArrowFunctionExpression let replacement if (moveToParam) { // `styled('div', {})` const args = [t.stringLiteral(styledName), styledArgs].filter(Boolean) replacement = t.callExpression((path as NodePath).node, args) } else { // `styled('div')({})` const callee = t.callExpression((path as NodePath).node, [ t.stringLiteral(styledName), ]) replacement = t.expressionStatement(t.callExpression(callee, [styledArgs])) } replaceWithLocation(parentCallExpression, replacement) } function handleStyledFunction({ references, t, coreContext, }: AdditionalHandlerParameters): void { if ( !coreContext.twinConfig.convertStyledDotToParam && !coreContext.twinConfig.convertStyledDotToFunction ) return if (isEmpty(references)) return const defaultRefs = references.default || [] const styledRefs = references.styled || [] const refs = [...defaultRefs, ...styledRefs].filter(Boolean) refs.forEach((path: NodePath): void => { // convert tw.div`` & styled.div`` to styled('div', {}) / styled('div')({}) moveDotElement({ path, t, moveToParam: coreContext.twinConfig.convertStyledDotToParam ?? true, }) }) } export { updateStyledReferences, addStyledImport, handleStyledFunction } ================================================ FILE: src/macro/theme.ts ================================================ import { replaceWithLocation, astify, getFunctionValue, getTaggedTemplateValue, } from './lib/astHelpers' import type { AssertContext } from 'core/types' import type { AdditionalHandlerParameters, NodePath } from 'macro/types' function handleThemeFunction({ references, t, coreContext, }: AdditionalHandlerParameters): void { if (!references.theme) return references.theme.forEach((path): never[] | [Node | NodePath] => { const ttValue = getTaggedTemplateValue(path) ?? getFunctionValue(path) ?? { input: null, parent: null } const { input, parent } = ttValue as { parent: NodePath input?: string } if (input !== '') coreContext.assert( Boolean(input), ({ color }: AssertContext) => `${color(`✕ The theme value doesn’t look right`)}\n\nTry ${color( 'theme`colors.black`', 'success' )} or ${color(`theme('colors.black')`, 'success')}` ) coreContext.assert( Boolean(parent), ({ color }: AssertContext) => `${color( `✕ The theme value ${color( input as string, 'errorLight' )} doesn’t look right` )}\n\nTry ${color('theme`colors.black`', 'success')} or ${color( `theme('colors.black')`, 'success' )}` ) const themeValue = coreContext.theme(input as string) coreContext.assert(Boolean(themeValue), ({ color }: AssertContext) => color( `✕ ${color( input as string, 'errorLight' )} doesn’t match a theme value from the config` ) ) return replaceWithLocation(parent, astify(themeValue, t)) }) } export { handleThemeFunction } ================================================ FILE: src/macro/tw.ts ================================================ // eslint-disable-next-line import/no-relative-parent-imports import { getStyles } from '../core' // eslint-disable-next-line import/no-relative-parent-imports import getSuggestions from '../suggestions' import { astify, getParentJSX, parseTte, replaceWithLocation, getAttributeNames, getCssAttributeData, makeStyledComponent, } from './lib/astHelpers' import isEmpty from './lib/util/isEmpty' import { addDataTwPropToPath, addDataPropToExistingPath } from './dataProp' import type { AdditionalHandlerParameters, CoreContext, JSXAttributeHandler, NodePath, State, T, } from './types' type MoveTwPropToStyled = { t: typeof T state: State program: NodePath astStyles: T.Expression jsxPath: NodePath coreContext: CoreContext } function moveTwPropToStyled(params: MoveTwPropToStyled): void { const { jsxPath, astStyles } = params makeStyledComponent({ ...params, secondArg: astStyles, fromProp: 'tw' }) // Remove the tw attribute const tagAttributes = jsxPath.node.attributes const twAttributeIndex = tagAttributes.findIndex( n => n.type === 'JSXAttribute' && n.name && n.name.name === 'tw' ) if (twAttributeIndex < 0) return jsxPath.node.attributes.splice(twAttributeIndex, 1) } type MergeIntoCssAttribute = { t: typeof T path: NodePath astStyles: T.Expression cssAttribute: NodePath | undefined } function mergeIntoCssAttribute({ t, path, astStyles, cssAttribute, }: MergeIntoCssAttribute): void { if (!cssAttribute) return // The expression is the value as a NodePath const attributeValuePath = cssAttribute.get('value') // If it's not {} or "", get out of here if ( !attributeValuePath || (!attributeValuePath.isJSXExpressionContainer() && !attributeValuePath.isStringLiteral()) ) return const existingCssAttribute = attributeValuePath.isStringLiteral() ? (attributeValuePath as unknown as NodePath) : // @ts-expect-error get doesn’t exist on the types (attributeValuePath.get( 'expression' ) as NodePath) const attributeNames = getAttributeNames(path) const isBeforeCssAttribute = attributeNames.indexOf('tw') - attributeNames.indexOf('css') < 0 if (existingCssAttribute.isArrayExpression()) { // The existing css prop is an array, eg: css={[...]} if (isBeforeCssAttribute) { const attribute = existingCssAttribute as NodePath< T.StringLiteral | T.JSXExpressionContainer > // @ts-expect-error never in arg0? attribute.unshiftContainer('elements', astStyles) } else { const attribute = existingCssAttribute as NodePath< T.StringLiteral | T.JSXExpressionContainer > // @ts-expect-error never in arg0? attribute.pushContainer('elements', astStyles) } } else { // css prop is either: // TemplateLiteral //
// or an ObjectExpression //
// or ArrowFunctionExpression/FunctionExpression //
(...)} tw="..." /> const existingCssAttributeNode = existingCssAttribute.node // The existing css prop is an array, eg: css={[...]} const styleArray = isBeforeCssAttribute ? [astStyles, existingCssAttributeNode] : [existingCssAttributeNode, astStyles] const arrayExpression = t.arrayExpression(styleArray as T.Expression[]) const { parent } = existingCssAttribute const replacement = parent.type === 'JSXAttribute' ? t.jsxExpressionContainer(arrayExpression) : arrayExpression existingCssAttribute.replaceWith(replacement) } } function handleTwProperty({ path, t, program, state, coreContext, }: JSXAttributeHandler): void { if (!path.node || path.node.name.name !== 'tw') return state.hasTwAttribute = true const nodeValue = path.node.value if (!nodeValue) return const nodeExpression = (nodeValue as T.JSXExpressionContainer).expression // Handle `tw={"block"}` const expressionValue = nodeExpression && nodeExpression.type === 'StringLiteral' && nodeExpression.value if (expressionValue === '') return // Allow `tw={""}` // Feedback for unsupported usage if (nodeExpression) coreContext.assert( Boolean(expressionValue), ({ color }) => `${color( `✕ Only plain strings can be used with the "tw" prop` )}\n\nTry using it like this: ${color( `
`, 'success' )} or ${color( `
`, 'success' )}\n\nRead more at https://twinredirect.page.link/template-literals` ) const rawClasses = expressionValue || (nodeValue as T.StringLiteral).value || '' const { styles, unmatched } = getStyles(rawClasses, coreContext) if (unmatched.length > 0) { getSuggestions(unmatched, { CustomError: coreContext.CustomError, tailwindContext: coreContext.tailwindContext, tailwindConfig: coreContext.tailwindConfig, hasLogColors: coreContext.twinConfig.hasLogColors, }) return } const astStyles = astify(isEmpty(styles) ? {} : styles, t) const jsxPath = getParentJSX(path) const attributes = jsxPath.get('attributes') const { attribute: cssAttribute } = getCssAttributeData(attributes) if (coreContext.twinConfig.moveTwPropToStyled) { moveTwPropToStyled({ astStyles, jsxPath, t, program, state, coreContext }) addDataTwPropToPath({ t, attributes, rawClasses, path, state, coreContext }) return } if (!cssAttribute) { // Replace the tw prop with the css prop path.replaceWith( t.jsxAttribute( t.jsxIdentifier('css'), t.jsxExpressionContainer(astStyles) ) ) addDataTwPropToPath({ t, attributes, rawClasses, path, state, coreContext }) return } // Merge tw styles into an existing css prop mergeIntoCssAttribute({ cssAttribute: cssAttribute as NodePath, path: jsxPath, astStyles, t, }) path.remove() // remove the tw prop addDataPropToExistingPath({ t, attributes, rawClasses, path: jsxPath, coreContext, state, }) } function handleTwFunction({ references, t, state, coreContext, }: AdditionalHandlerParameters): void { const defaultImportReferences = references.default || references.tw || [] defaultImportReferences.forEach(path => { /** * Gotcha: After twin changes a className/tw/cs prop path then the reference * becomes stale and needs to be refreshed with crawl() */ const { parentPath } = path if (!(parentPath as NodePath).isTaggedTemplateExpression()) path.scope.crawl() const parent = path.findParent(x => x.isTaggedTemplateExpression() ) as NodePath if (!parent) return // Check if the style attribute is being used if (!coreContext.twinConfig.allowStyleProp) { const jsxAttribute = parent.findParent(x => x.isJSXAttribute() ) as NodePath const attributeName = // @ts-expect-error No `get` on resulting path jsxAttribute && (jsxAttribute.get('name').get('name').node as string) coreContext.assert( attributeName !== 'style', ({ color }) => `${color( `✕ Tailwind styles shouldn’t be added within a \`style={...}\` prop` )}\n\nUse the tw or css prop instead: ${color( '
', 'success' )} or ${color( '
', 'success' )}\n\nDisable this error by adding this in your twin config: \`{ "allowStyleProp": true }\`\nRead more at https://twinredirect.page.link/style-prop` ) } const parsed = parseTte(parent, { t, state }) if (!parsed) return const rawClasses = parsed.string // Add tw-prop for css attributes const jsxPath = path.findParent(p => p.isJSXOpeningElement() ) as NodePath if (jsxPath) { const attributes = jsxPath.get('attributes') const pathData = { t, attributes, rawClasses, path: jsxPath, coreContext, state, } addDataPropToExistingPath(pathData) } const { styles, unmatched } = getStyles(rawClasses, coreContext) if (unmatched.length > 0) { getSuggestions(unmatched, { CustomError: coreContext.CustomError, tailwindContext: coreContext.tailwindContext, tailwindConfig: coreContext.tailwindConfig, hasLogColors: coreContext.twinConfig.hasLogColors, }) return } const astStyles = astify(isEmpty(styles) ? {} : styles, t) replaceWithLocation(parsed.path, astStyles) }) } export { handleTwProperty, handleTwFunction } ================================================ FILE: src/macro/twin.ts ================================================ // eslint-disable-next-line import/no-relative-parent-imports import { createCoreContext } from '../core' import { MacroError } from 'babel-plugin-macros' import { setStyledIdentifier, setCssIdentifier, generateUid, getCssAttributeData, getJsxAttributes, } from './lib/astHelpers' import validateImports from './lib/validateImports' import { updateCssReferences, addCssImport, convertHtmlElementToStyled, } from './css' import { updateStyledReferences, addStyledImport, handleStyledFunction, } from './styled' import { handleThemeFunction } from './theme' import { handleScreenFunction } from './screen' import { handleGlobalStylesFunction } from './globalStyles' import { handleTwProperty, handleTwFunction } from './tw' import { handleCsProperty } from './shortCss' import { handleClassNameProperty } from './className' import type { MacroParams } from 'babel-plugin-macros' import type { State } from './types' const macroTasks = [ handleTwFunction, handleGlobalStylesFunction, // GlobalStyles import updateStyledReferences, // Styled import handleStyledFunction, // Convert tw.div`` & styled.div`` to styled('div', {}) (stitches) updateCssReferences, // Update any usage of existing css imports handleThemeFunction, // Theme import handleScreenFunction, // Screen import addStyledImport, addCssImport, // Gotcha: Must be after addStyledImport or issues with theme`` style transpile ] function twinMacro(params: MacroParams): void { const t = params.babel.types const program = params.state.file.path const isDev = process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'dev' || false const coreContext = createCoreContext({ isDev, config: params.config, filename: params.state.filename ?? '', sourceRoot: params.state.file.opts.sourceRoot ?? '', CustomError: MacroError as typeof Error, }) validateImports(params.references, coreContext) const state: State = { isDev, babel: params.babel, config: params.config, tailwindConfigIdentifier: generateUid('tailwindConfig', program), tailwindUtilsIdentifier: generateUid('tailwindUtils', program), styledIdentifier: undefined, cssIdentifier: undefined, hasCssAttribute: false, } const handlerParameters = { t, program, state, coreContext } program.traverse({ ImportDeclaration(path) { setStyledIdentifier({ ...handlerParameters, path }) setCssIdentifier({ ...handlerParameters, path }) }, JSXElement(path) { const jsxAttributes = getJsxAttributes(path) const { index, hasCssAttribute } = getCssAttributeData(jsxAttributes) state.hasCssAttribute = state.hasCssAttribute || hasCssAttribute const attributePaths = index > 1 ? jsxAttributes.reverse() : jsxAttributes for (const path of attributePaths) { handleClassNameProperty({ ...handlerParameters, path }) handleTwProperty({ ...handlerParameters, path }) handleCsProperty({ ...handlerParameters, path }) } if (hasCssAttribute) convertHtmlElementToStyled({ ...handlerParameters, path }) }, }) if (state.styledIdentifier === undefined) state.styledIdentifier = generateUid('styled', program) if (state.cssIdentifier === undefined) state.cssIdentifier = generateUid('css', program) for (const task of macroTasks) { // @ts-expect-error TOFIX: Adjust types for altered state task({ ...handlerParameters, references: params.references }) } program.scope.crawl() } export default twinMacro ================================================ FILE: src/macro/types/index.ts ================================================ import type { NodePath, types as T } from '@babel/core' import type { MacroParams } from 'babel-plugin-macros' import type { CoreContext, CssObject } from '../../core/types' import type { Config as TailwindConfig } from 'tailwindcss' type Identifiers = { styledIdentifier?: T.Identifier cssIdentifier?: T.Identifier } type StateBase = { babel: MacroParams['babel'] config: MacroParams['config'] existingCssIdentifier?: boolean existingStyledIdentifier?: boolean hasCssAttribute: boolean hasTwAttribute?: boolean isDev: boolean isImportingStyled?: boolean isImportingCss?: boolean tailwindConfigIdentifier: T.Identifier tailwindUtilsIdentifier: T.Identifier } export type State = StateBase & Identifiers export type HandlerParameters = { t: typeof T state: State program: NodePath coreContext: CoreContext } export type AddDataPropToExistingPath = { path: NodePath attributes: Array> rawClasses: string propName?: string } & Pick export type JSXAttributeHandler = HandlerParameters & { path: NodePath } export type ImportDeclarationHandler = HandlerParameters & { path: NodePath } export type AdditionalHandlerParameters = { t: typeof T references: MacroParams['references'] state: StateBase & { styledIdentifier: T.Identifier cssIdentifier: T.Identifier } program: NodePath coreContext: CoreContext } export type { NodePath, CoreContext, T, MacroParams, CssObject, TailwindConfig } ================================================ FILE: src/macro.ts ================================================ import { createMacro } from 'babel-plugin-macros' import twinMacro from './macro/twin' export default createMacro(twinMacro, { configName: 'twin' }) ================================================ FILE: src/suggestions/index.ts ================================================ import { MacroError } from 'babel-plugin-macros' import { validators } from './lib/validators' import { getClassSuggestions } from './lib/getClassSuggestions' import { makeColor } from './lib/makeColor' import { extractClassCandidates, extractVariantCandidates, } from './lib/extractors' import { getPackageVersions } from './lib/getPackageVersions' import type { ClassErrorContext, MakeColor, Options, TailwindContext, TailwindConfig, } from './types' // eslint-disable-next-line import/no-relative-parent-imports import { createCoreContext, getStyles, splitAtTopLevelOnly } from '../core' const ALL_SPACE_IDS = /{{SPACE}}/g const OPTION_DEFAULTS = { CustomError: Error, tailwindContext: undefined, tailwindConfig: undefined, hasLogColors: true, suggestionNumber: 5, } function getVariantSuggestions( variants: string[], className: string, context: ClassErrorContext ): string | undefined { const coreContext = createCoreContext({ tailwindConfig: context?.tailwindConfig, CustomError: MacroError as typeof Error, }) const { unmatched } = getStyles(className, coreContext) if (unmatched.length > 0) return const unmatchedVariants = variants.filter(v => { if (v.startsWith('[')) return v return !context.variants.has(v) }) if (unmatchedVariants.length === 0) return const problemVariant = unmatchedVariants[0] return [ `${context.color( `✕ Variant ${context.color(problemVariant, 'errorLight')} ${ problemVariant.startsWith('[') ? 'can’t be used' : 'was not found' }` )}`, ].join('\n\n') } function getClassError(rawClass: string, context: ClassErrorContext): string { const input = rawClass.replace(ALL_SPACE_IDS, ' ') const classPieces = [ ...splitAtTopLevelOnly(input, context.tailwindConfig.separator ?? ':'), ] for (const validator of validators) { const error = validator(classPieces, context) if (error) return error } const className = classPieces.slice(-1).join('') const variants = classPieces.slice(0, -1) // Check if variants or classes with match issues if (variants.length > 0) { const variantSuggestions = getVariantSuggestions( variants, className, context ) if (variantSuggestions) return variantSuggestions } return getClassSuggestions(className, context) } export type ErrorContext = { CustomError: typeof Error tailwindContext: TailwindContext tailwindConfig: TailwindConfig hasLogColors: boolean suggestionNumber: number } function createErrorContext( color: MakeColor, context: ErrorContext ): ClassErrorContext { return { color, candidates: extractClassCandidates(context.tailwindContext), variants: extractVariantCandidates(context.tailwindContext), suggestionNumber: context.suggestionNumber, CustomError: context.CustomError, tailwindConfig: context.tailwindConfig, tailwindContext: context.tailwindContext, } } function getSuggestions(classList: string[], options: Options): void { const context = { ...OPTION_DEFAULTS, ...options } const color = makeColor(context.hasLogColors) const classErrorContext = createErrorContext(color, context) const errorText = classList .map(c => getClassError(c, classErrorContext)) .join('\n\n') const { twinVersion } = getPackageVersions() const helpText = [ `${twinVersion ? `twin.macro@${twinVersion}` : 'twinVersion'}`, `https://twinredirect.page.link/docs`, `https://tailwindcss.com/docs`, ].join('\n') throw new context.CustomError( `\n\n${errorText}\n\n${color(helpText, 'subdued')}\n` ) } export default getSuggestions ================================================ FILE: src/suggestions/lib/colors.ts ================================================ import chalk from 'chalk' const colors = { error: chalk.hex('#ff8383'), errorLight: chalk.hex('#ffd3d3'), warn: chalk.yellowBright, success: chalk.greenBright, highlight: chalk.yellowBright, subdued: chalk.hex('#999'), } export default colors ================================================ FILE: src/suggestions/lib/extractors.ts ================================================ import type { TailwindContext, TailwindMatch } from 'suggestions/types' export function extractClassCandidates( tailwindContext: TailwindContext ): Set<[string, TailwindMatch[]]> { const candidates = new Set<[string, TailwindMatch[]]>() for (const candidate of tailwindContext.candidateRuleMap) { if (String(candidate[0]) !== '*') candidates.add(candidate) } return candidates } export function extractVariantCandidates( tailwindContext: TailwindContext ): Set { const candidates = new Set() for (const candidate of tailwindContext.variantMap) { if (candidate[0]) candidates.add(candidate[0]) } return candidates } ================================================ FILE: src/suggestions/lib/getClassSuggestions.ts ================================================ import stringSimilarity from 'string-similarity' import type { ClassErrorContext } from 'suggestions/types' const RATING_MINIMUM = 0.2 type RateCandidate = [number, string, string] function rateCandidate( classData: [string, string], className: string, matchee: string ): RateCandidate | undefined { const [classEnd, value] = classData const candidate = `${[className, classEnd === 'DEFAULT' ? '' : classEnd] .filter(Boolean) .join('-')}` const rating = Number(stringSimilarity.compareTwoStrings(matchee, candidate)) if (rating < RATING_MINIMUM) return const classValue = `${String( (typeof value === 'string' && (value.length === 0 ? `''` : value)) ?? (Array.isArray(value) && value.join(', ')) ?? value )}${classEnd === 'DEFAULT' ? ' (DEFAULT)' : ''}` return [rating, candidate, classValue] } function extractCandidates( candidates: ClassErrorContext['candidates'], matchee: string ): RateCandidate[] { const results = [] as RateCandidate[] for (const [className, classOptionSet] of candidates) { for (const classOption of classOptionSet) { const { options } = classOption[0] if (options?.values) { // Dynamic classes like mt-xxx, bg-xxx for (const value of Object.entries(options?.values)) { const rated = rateCandidate(value, className, matchee) // eslint-disable-next-line max-depth if (rated) results.push(rated) } } else { // Non-dynamic classes like fixed, block const rated = rateCandidate(['', className], className, matchee) if (rated) results.push(rated) } } } return results } export function getClassSuggestions( matchee: string, context: ClassErrorContext ): string { const { color } = context const candidates = extractCandidates(context.candidates, matchee) const errorText = `${context.color( `✕ ${context.color(matchee, 'errorLight')} was not found`, 'error' )}` if (candidates.length === 0) return errorText candidates.sort( ([a]: [number, string, string], [b]: [number, string, string]) => b - a ) const [firstSuggestion, secondSuggestion = []] = candidates const [firstRating, firstCandidate, firstClassValue] = firstSuggestion const [secondRating] = secondSuggestion as RateCandidate const hasWinningSuggestion = ((secondSuggestion as RateCandidate).length > 0 && firstRating - secondRating > 0.12) ?? false if (candidates.length === 1 || hasWinningSuggestion) { const valueText = firstClassValue === firstCandidate ? '' : ` (${firstClassValue})` return [ errorText, `Did you mean ${color(firstCandidate, 'success')} ?${valueText}`, ].join('\n\n') } const suggestions = candidates .slice(0, context.suggestionNumber) .map( ([, suggestion, value]: [number, string, string]): string => `${color('-', 'subdued')} ${color(suggestion, 'highlight')} ${ value === 'false' ? '' : `${color('>', 'subdued')} ${value}` }` ) return [errorText, 'Try one of these classes:', suggestions.join('\n')].join( '\n\n' ) } ================================================ FILE: src/suggestions/lib/getPackageVersions.ts ================================================ export type JSONPrimitive = string | number | boolean | undefined export type JSONValue = JSONPrimitive | JSONObject // eslint-disable-next-line @typescript-eslint/consistent-type-definitions export interface JSONObject extends Record {} export function getPackageVersions(): Record { // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires, unicorn/prefer-module const packageJson = require('./package.json') as JSONObject const versions = { twinVersion: packageJson.version as string } return versions } ================================================ FILE: src/suggestions/lib/makeColor.ts ================================================ import colors from './colors' import type { MakeColor } from 'suggestions/types' export function makeColor(hasColor: boolean): MakeColor { return (message: string, type: keyof typeof colors = 'error') => { if (!hasColor) return message return colors[type](message) } } ================================================ FILE: src/suggestions/lib/validateVariants.ts ================================================ import stringSimilarity from 'string-similarity' import type { ClassErrorContext } from 'suggestions/types' export function validateVariants( variantMatch: string, context: ClassErrorContext ): string | undefined { if (!variantMatch) return if (variantMatch.startsWith('[')) return const variantCandidates = [...context.variants] // Exact variant match if (variantCandidates.includes(variantMatch)) return const results = variantCandidates .map((variant: string): [string, number] | undefined => { const rating = variantMatch ? Number(stringSimilarity.compareTwoStrings(variant, variantMatch)) : 0 if (rating < 0.2) return return [variant, rating] }) .filter(Boolean) as Array<[string, number]> const errorText = `${context.color( `✕ Variant ${context.color(`${variantMatch}`, 'errorLight')} was not found`, 'error' )}` if (results.length === 0) return errorText const suggestions = results .sort(([, a]: [string, number], [, b]: [string, number]) => b - a) .slice(0, 4) .map( ([i]: [string, number]): string => `${i}${context.tailwindConfig.separator ?? ':'}` ) const showMore = results.length > 2 && results[0][1] - results[1][1] < 0.1 const suggestionText = suggestions.length > 0 ? [ `Did you mean ${context.color( suggestions.slice(0, 1).join(''), 'success' )} ?`, showMore && `More variants\n${suggestions .slice(1) .map(v => `${context.color('-', 'subdued')} ${v}`) .join('\n')}`, ] .filter(Boolean) .join('\n\n') : '' return [errorText, suggestionText].join('\n\n') } ================================================ FILE: src/suggestions/lib/validators.ts ================================================ import { validateVariants } from './validateVariants' import type { ClassErrorContext } from 'suggestions/types' const validators = [ // Validate the group class (pieces: string[], context: ClassErrorContext): undefined | string => { const className = pieces.slice(-1).join('') if (/^!?group\/\S/.test(className)) { return `${context.color( `✕ ${context.color( className, 'errorLight' )} must be added as a className:`, 'error' )}\n\n
\n
\n
` } if (!pieces.includes('group')) return return `${context.color( `✕ ${context.color('group', 'errorLight')} must be added as a className:`, 'error' )}\n\n
\n
\n
\n\nRead more at https://twinredirect.page.link/group` }, // Validate the peer class (pieces: string[], context: ClassErrorContext): undefined | string => { const className = pieces.slice(-1).join('') if (/^!?peer\/\S/.test(className)) { return `${context.color( `✕ ${context.color( className, 'errorLight' )} must be added as a className:`, 'error' )}\n\n
\n
\n
` } if (!pieces.includes('peer')) return return `${context.color( `✕ ${context.color('peer', 'errorLight')} must be added as a className:`, 'error' )}\n\n
\n
\n\nRead more at https://twinredirect.page.link/peer` }, // Validate the opacity (pieces: string[], context: ClassErrorContext): undefined | string => { const className = pieces.slice(-1).join('') const opacityMatch = /\/(\w+)$/.exec(className) if (!opacityMatch) return const opacityConfig = context.tailwindConfig.theme?.opacity ?? {} if (opacityConfig[opacityMatch[1] as keyof typeof opacityConfig]) return const choices = Object.entries(opacityConfig) .map( ([k, v]: [string, string]): string => `${context.color('-', 'subdued')} ${context.color( k, 'success' )} ${context.color('>', 'subdued')} ${v}` ) .join('\n') return `${context.color( `✕ ${context.color( className, 'errorLight' )} doesn’t have an opacity from your config`, 'error' )}\n\nTry one of these opacity values:\n\n${choices}` }, // Validate the lead class (from the official typography plugin) (pieces: string[], context: ClassErrorContext): undefined | string => { if (!pieces.includes('lead')) return return `${context.color( `✕ ${context.color('lead', 'errorLight')} must be added as a className:`, 'error' )}\n\n
...
` }, // Validate the not-prose class (from the official typography plugin) (pieces: string[], context: ClassErrorContext): undefined | string => { if (!pieces.includes('not-prose')) return return `${context.color( `✕ ${context.color( 'not-prose', 'errorLight' )} must be added as a className:`, 'error' )}\n\n
\n
...
\n
` }, // Validate the dark class (pieces: string[], context: ClassErrorContext): undefined | string => { const className = pieces.slice(-1).join('') if (className !== 'dark') return return `${context.color( `✕ ${context.color('dark', 'errorLight')} must be added as a className:`, 'error' )}\n\nAdd dark in a ${context.color( 'className', 'success' )}:\n...\n\nOr as a ${context.color( 'variant', 'success' )}:\n
\n\nRead more at https://twinredirect.page.link/darkLightMode` }, // Validate the light class (pieces: string[], context: ClassErrorContext): undefined | string => { const className = pieces.slice(-1).join('') if (className !== 'light') return return `${context.color( `✕ ${context.color('light', 'errorLight')} must be added as a className:`, 'error' )}\n\nAdd light in a ${context.color( 'className', 'success' )}:\n...\n\nOr as a ${context.color( 'variant', 'success' )}:\n
\n\nRead more at https://twinredirect.page.link/darkLightMode` }, // Validate any variants (pieces: string[], context: ClassErrorContext): undefined | string => { const variants = pieces.slice(0, -1) const variantError = variants .map(variant => validateVariants(variant, context)) .filter(Boolean) if (variantError.length === 0) return return variantError[0] as string }, // If prefix is set, validate the class for the prefix (pieces: string[], context: ClassErrorContext): undefined | string => { const { prefix } = context.tailwindConfig const className = pieces.slice(-1).join('') if (prefix && !className.startsWith(prefix)) return `${context.color( `✕ ${context.color( className, 'errorLight' )} doesn’t have the right prefix`, 'error' )}\n\nAdd the ${context.color(prefix, 'success')} prefix to the class` }, ] export { validators } ================================================ FILE: src/suggestions/types/index.ts ================================================ import type colors from '../lib/colors' import type { TailwindMatch, TailwindContext, TailwindConfig, } from '../../core/types' export type Options = { CustomError: typeof Error tailwindContext: TailwindContext tailwindConfig: TailwindConfig hasColor?: boolean hasLogColors?: boolean suggestionNumber?: number } export type ClassErrorContext = { color: MakeColor candidates: Set<[string, TailwindMatch[]]> variants: Set } & Pick< Options, 'suggestionNumber' | 'CustomError' | 'tailwindConfig' | 'tailwindContext' > export type MakeColor = (message: string, type?: keyof typeof colors) => string export type { TailwindMatch, TailwindContext, TailwindConfig } ================================================ FILE: tests/@applyInPlugins.test.ts ================================================ /* eslint-disable @typescript-eslint/ban-types */ import plugin from 'tailwindcss/plugin' import type { TailwindConfig } from 'core/types' import { run } from './util/run' function tw(...classes: string[]): Record { const result: Record = {} result[`@apply ${classes.join(' ')}`] = {} return result } // Test @apply in plugins, eg: `{ 'body': { '@apply mt-4 bg-black': {} }}` test('it renders the apply method', async () => { const input = ['globalStyles', 'tw`component`', 'tw`utility`'].join('; ') const config: TailwindConfig = { content: [''], theme: { colors: { primary: '#F07E22' } }, plugins: [ plugin(({ addBase, addComponents, addUtilities }): void => { addBase({ 'html, body': tw('selection:text-primary') }) addComponents({ '.component': tw( 'content-[arbitrary value] [.arbitrary-variant]:content [content:arbitrary-property]' ), }) addUtilities({ '.utility': tw('first:(block mt-4)'), }) }), ], } return run(input, config).then(result => { expect(result).toMatchFormattedJavaScript(` ({ "*, ::before, ::after": { boxSizing: "border-box", borderWidth: "0", borderStyle: "solid", borderColor: "currentColor", "--tw-border-spacing-x": "0", "--tw-border-spacing-y": "0", "--tw-translate-x": "0", "--tw-translate-y": "0", "--tw-rotate": "0", "--tw-skew-x": "0", "--tw-skew-y": "0", "--tw-scale-x": "1", "--tw-scale-y": "1", "--tw-pan-x": "var(--tw-empty,/*!*/ /*!*/)", "--tw-pan-y": "var(--tw-empty,/*!*/ /*!*/)", "--tw-pinch-zoom": "var(--tw-empty,/*!*/ /*!*/)", "--tw-scroll-snap-strictness": "proximity", "--tw-ordinal": "var(--tw-empty,/*!*/ /*!*/)", "--tw-slashed-zero": "var(--tw-empty,/*!*/ /*!*/)", "--tw-numeric-figure": "var(--tw-empty,/*!*/ /*!*/)", "--tw-numeric-spacing": "var(--tw-empty,/*!*/ /*!*/)", "--tw-numeric-fraction": "var(--tw-empty,/*!*/ /*!*/)", "--tw-ring-offset-shadow": "0 0 #0000", "--tw-ring-shadow": "0 0 #0000", "--tw-shadow": "0 0 #0000", "--tw-shadow-colored": "0 0 #0000", "--tw-ring-inset": "var(--tw-empty,/*!*/ /*!*/)", "--tw-ring-offset-width": "0px", "--tw-ring-offset-color": "#fff", "--tw-ring-color": "rgb(59 130 246 / 0.5)", "--tw-blur": "var(--tw-empty,/*!*/ /*!*/)", "--tw-brightness": "var(--tw-empty,/*!*/ /*!*/)", "--tw-contrast": "var(--tw-empty,/*!*/ /*!*/)", "--tw-grayscale": "var(--tw-empty,/*!*/ /*!*/)", "--tw-hue-rotate": "var(--tw-empty,/*!*/ /*!*/)", "--tw-invert": "var(--tw-empty,/*!*/ /*!*/)", "--tw-saturate": "var(--tw-empty,/*!*/ /*!*/)", "--tw-sepia": "var(--tw-empty,/*!*/ /*!*/)", "--tw-drop-shadow": "var(--tw-empty,/*!*/ /*!*/)", "--tw-backdrop-blur": "var(--tw-empty,/*!*/ /*!*/)", "--tw-backdrop-brightness": "var(--tw-empty,/*!*/ /*!*/)", "--tw-backdrop-contrast": "var(--tw-empty,/*!*/ /*!*/)", "--tw-backdrop-grayscale": "var(--tw-empty,/*!*/ /*!*/)", "--tw-backdrop-hue-rotate": "var(--tw-empty,/*!*/ /*!*/)", "--tw-backdrop-invert": "var(--tw-empty,/*!*/ /*!*/)", "--tw-backdrop-opacity": "var(--tw-empty,/*!*/ /*!*/)", "--tw-backdrop-saturate": "var(--tw-empty,/*!*/ /*!*/)", "--tw-backdrop-sepia": "var(--tw-empty,/*!*/ /*!*/)", }, "::before, ::after": { "--tw-content": "''" }, html: { lineHeight: "1.5", WebkitTextSizeAdjust: "100%", MozTabSize: "4", tabSize: "4", fontFamily: 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"', fontFeatureSettings: " normal", fontVariationSettings: " normal", }, body: { margin: "0", lineHeight: "inherit" }, hr: { height: "0", color: "inherit", borderTopWidth: "1px" }, "abbr:where([title])": { textDecoration: "underline dotted" }, "h1, h2, h3, h4, h5, h6": { fontSize: "inherit", fontWeight: "inherit" }, a: { color: "inherit", textDecoration: "inherit" }, "b, strong": { fontWeight: "bolder" }, "code, kbd, samp, pre": { fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace', fontSize: "1em", }, small: { fontSize: "80%" }, "sub, sup": { fontSize: "75%", lineHeight: "0", position: "relative", verticalAlign: "baseline" }, sub: { bottom: "-0.25em" }, sup: { top: "-0.5em" }, table: { textIndent: "0", borderColor: "inherit", borderCollapse: "collapse" }, "button, input, optgroup, select, textarea": { fontFamily: "inherit", fontSize: "100%", fontWeight: "inherit", lineHeight: "inherit", color: "inherit", margin: "0", padding: "0", }, "button, select": { textTransform: "none" }, "button, [type='button'], [type='reset'], [type='submit']": { WebkitAppearance: "button", backgroundColor: "transparent", backgroundImage: "none", }, ":-moz-focusring": { outline: "auto" }, ":-moz-ui-invalid": { boxShadow: "none" }, progress: { verticalAlign: "baseline" }, "::-webkit-inner-spin-button, ::-webkit-outer-spin-button": { height: "auto" }, "[type='search']": { WebkitAppearance: "textfield", outlineOffset: "-2px" }, "::-webkit-search-decoration": { WebkitAppearance: "none" }, "::-webkit-file-upload-button": { WebkitAppearance: "button", font: "inherit" }, summary: { display: "list-item" }, "blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre": { margin: "0" }, fieldset: { margin: "0", padding: "0" }, legend: { padding: "0" }, "ol, ul, menu": { listStyle: "none", margin: "0", padding: "0" }, textarea: { resize: "vertical" }, "input::placeholder, textarea::placeholder": { opacity: "1", color: " #9ca3af" }, 'button, [role="button"]': { cursor: "pointer" }, ":disabled": { cursor: "default" }, "img, svg, video, canvas, audio, iframe, embed, object": { display: "block", verticalAlign: "middle", }, "img, video": { maxWidth: "100%", height: "auto" }, "[hidden]": { display: "none" }, "::backdrop": { "--tw-border-spacing-x": "0", "--tw-border-spacing-y": "0", "--tw-translate-x": "0", "--tw-translate-y": "0", "--tw-rotate": "0", "--tw-skew-x": "0", "--tw-skew-y": "0", "--tw-scale-x": "1", "--tw-scale-y": "1", "--tw-pan-x": "var(--tw-empty,/*!*/ /*!*/)", "--tw-pan-y": "var(--tw-empty,/*!*/ /*!*/)", "--tw-pinch-zoom": "var(--tw-empty,/*!*/ /*!*/)", "--tw-scroll-snap-strictness": "proximity", "--tw-ordinal": "var(--tw-empty,/*!*/ /*!*/)", "--tw-slashed-zero": "var(--tw-empty,/*!*/ /*!*/)", "--tw-numeric-figure": "var(--tw-empty,/*!*/ /*!*/)", "--tw-numeric-spacing": "var(--tw-empty,/*!*/ /*!*/)", "--tw-numeric-fraction": "var(--tw-empty,/*!*/ /*!*/)", "--tw-ring-offset-shadow": "0 0 #0000", "--tw-ring-shadow": "0 0 #0000", "--tw-shadow": "0 0 #0000", "--tw-shadow-colored": "0 0 #0000", "--tw-ring-inset": "var(--tw-empty,/*!*/ /*!*/)", "--tw-ring-offset-width": "0px", "--tw-ring-offset-color": "#fff", "--tw-ring-color": "rgb(59 130 246 / 0.5)", "--tw-blur": "var(--tw-empty,/*!*/ /*!*/)", "--tw-brightness": "var(--tw-empty,/*!*/ /*!*/)", "--tw-contrast": "var(--tw-empty,/*!*/ /*!*/)", "--tw-grayscale": "var(--tw-empty,/*!*/ /*!*/)", "--tw-hue-rotate": "var(--tw-empty,/*!*/ /*!*/)", "--tw-invert": "var(--tw-empty,/*!*/ /*!*/)", "--tw-saturate": "var(--tw-empty,/*!*/ /*!*/)", "--tw-sepia": "var(--tw-empty,/*!*/ /*!*/)", "--tw-drop-shadow": "var(--tw-empty,/*!*/ /*!*/)", "--tw-backdrop-blur": "var(--tw-empty,/*!*/ /*!*/)", "--tw-backdrop-brightness": "var(--tw-empty,/*!*/ /*!*/)", "--tw-backdrop-contrast": "var(--tw-empty,/*!*/ /*!*/)", "--tw-backdrop-grayscale": "var(--tw-empty,/*!*/ /*!*/)", "--tw-backdrop-hue-rotate": "var(--tw-empty,/*!*/ /*!*/)", "--tw-backdrop-invert": "var(--tw-empty,/*!*/ /*!*/)", "--tw-backdrop-opacity": "var(--tw-empty,/*!*/ /*!*/)", "--tw-backdrop-saturate": "var(--tw-empty,/*!*/ /*!*/)", "--tw-backdrop-sepia": "var(--tw-empty,/*!*/ /*!*/)", }, "html, body": { "& *::selection": { "--tw-text-opacity": "1", color: "rgb(240 126 34 / var(--tw-text-opacity))", }, "::selection": { "--tw-text-opacity": "1", color: "rgb(240 126 34 / var(--tw-text-opacity))" }, }, }); ({ "--tw-content": "arbitrary value", content: "arbitrary-property", "& .arbitrary-variant": { "--tw-content": "", content: "var(--tw-content)" } }); ({ ":first-child": { marginTop: "1rem", display: "block" } });`) }) }) ================================================ FILE: tests/__fixtures__/!general.tsx ================================================ // @ts-nocheck import tw from '../macro' /** * Misc usage tests */ const styles = tw`uppercase` const Box = tw.div`text-red-500` const BoxExtended = tw(Box)`bg-blue-500` // Media queries const MediaProperty = tw`lg:uppercase` const MediaColorProperty = tw.div`lg:text-red-500` const ElementMediaColorProperty = tw(Box)`lg:bg-blue-500` const MediaPropertyDuplicates = tw`lg:bg-blue-500 lg:bg-black` // Only basic evaluations supported // No functions or "beyond basic" conditionals. const plainConditional = true && 'red' const plainVariable = `bg-${plainConditional}-500` tw`${plainVariable}` ================================================ FILE: tests/__fixtures__/!important.tsx ================================================ // @ts-nocheck import tw from '../macro' const Box = tw.div`text-red-500` const Important = tw`lg:uppercase!` const MediaImportant = tw.div`lg:text-red-500!` const ElementMediaImportant = tw(Box)`lg:bg-blue-500!` const PlaceholderImportant = tw.input`placeholder-red-500!` const StateImportant = tw.input`hover:text-red-500!` const StatePlaceholderImportant = tw.input`hover:placeholder-red-500!` const StateStatePlaceholderImportant = tw.input`active:hover:placeholder-red-500!` const StateMultiplePropertiesImportant = tw.input`hover:truncate!` const MediaStateMultiplePropertiesImportant = tw.input`lg:hover:truncate!` const ElementMediaStateMultiplePropertiesImportant = tw(Box)`lg:hover:truncate!` const JsxPlaceholderImportant = () => const ImportantPrefixPrefix = tw`lg:!uppercase` const MediaImportantPrefix = tw.div`lg:!text-red-500` const ElementMediaImportantPrefix = tw(Box)`lg:!bg-blue-500` const PlaceholderImportantPrefix = tw.input`!placeholder-red-500` const StateImportantPrefix = tw.input`hover:!text-red-500` const StatePlaceholderImportantPrefix = tw.input`hover:!placeholder-red-500` const StateStatePlaceholderImportantPrefix = tw.input`active:hover:!placeholder-red-500` const StateMultiplePropertiesImportantPrefix = tw.input`hover:!truncate` const MediaStateMultiplePropertiesImportantPrefix = tw.input`lg:hover:!truncate` const ElementMediaStateMultiplePropertiesImportantPrefix = tw( Box )`lg:hover:!truncate` const VariantImportantPrefixMergeCheck = tw.div`md:!from-black to-[#dc4fc2] bg-gradient-to-r` const MultiVariantImportantPrefixMergeCheck = tw.div`first:md:!from-black to-[#dc4fc2] bg-gradient-to-r` const JsxPlaceholderImportantPrefix = () => ( ) ================================================ FILE: tests/__fixtures__/!imports.tsx ================================================ // @ts-nocheck import tw, { theme, styled, css, GlobalStyles } from '../macro' const twPropertyTest =
const twFunctionTest = tw.div`text-purple-500` const cssFunctionTest = (
) const styledFunctionTest = styled.div` ${css` ${tw`text-purple-500`} background-color: purple; `} ` const themeObjectPurple = ( ) const themeStringFont = ( ) const themeFontNoLineheight = ( ) const colorsRed = Object.values(theme`colors.red`) const themeFunctionObjectPurple = ( ) const themeFunctionStringHeight = ( ) const themeSquareBrackets = ( ) const GlobalStylesTest = () => // Dot syntax const Component = { Sub: () => [] } ; ; ================================================ FILE: tests/__fixtures__/!namelessImport.tsx ================================================ // @ts-nocheck import '../macro' const twPropertyString =
const twPropertyExpression =
================================================ FILE: tests/__fixtures__/!ordering.tsx ================================================ // @ts-nocheck import tw from '../macro' // Test the screen ordering - they are ordered by screens in tailwind.config.js tw.div`xl:bg-red-500 lg:bg-blue-500 bg-green-500 fill-current md:bg-pink-500 sm:bg-green-500 sm:text-yellow-500 hidden` // Bg opacity should trump the default bg opacity tw`bg-opacity-50 bg-red-500` ================================================ FILE: tests/__fixtures__/!properties.tsx ================================================ // @ts-nocheck import tw from '../macro' const Component1 = () =>
const Component2 = () =>
const Component3 = () =>
const Component4 = () =>
const Component5 = () =>
const Component6 = () => (
) const Component7 = () => (
) ================================================ FILE: tests/__fixtures__/!variantGrouping.tsx ================================================ // @ts-nocheck import tw from '../macro' const basic = tw`group-hover:(flex m-10)` const subMediaQuery = tw`focus-within:(md:flex mt-5)` const multipleClasses = tw`hover:(bg-black text-white underline)` const pseudoElement = tw`before:(w-10 h-10 block bg-black)` const pseudoElementNoContent = tw`before:(w-10 h-10 block bg-black)` const pseudoElementsNoContent = tw`before:(w-10 h-10) after:(w-10 h-10)` const mediaHover = tw`sm:hover:(bg-black text-white)` const sloppySpacing = tw` last:( flex mt-5)` const multipleGroups = tw`focus:(w-10 h-10 block bg-black) focus-within:(md:flex mt-5)` const nestedGroups = tw`md:(w-10 hocus:(h-10 block bg-black))` tw`(block w-10)` tw`((block w-10))` tw`hover:(block w-10)` tw`md:(hover:(block w-10))` tw`md:(hover:(block (block) w-10))` tw`md:(hover:(block (h-10) w-10))` // Important tw`(block w-10)!` tw`hover:(block w-10)!` tw`md:(hover:(block (block)! w-10))` tw`md:(hover:(block (h-10)! w-10))` tw`md:(hover:(block w-10)!)` // Ignored tw`` tw`()` tw`md:()` tw`md:(hover:())` // Slash opacity tw`first:(bg-[black]/20 block)` tw`first:(bg-[black]/[.20] block)` tw`first:(bg-[black]/[.20] inline last:(bg-[black]/[.20] block))` tw`first:(block bg-[black]/[.20])` tw`md:(ml-4 [one]:( mt-5 [two]:(inline [three]:(inline))))!` ================================================ FILE: tests/__fixtures__/!variants.tsx ================================================ // @ts-nocheck import tw from '../macro' // Pseudo element variants tw`first-letter:block` tw`first-line:block` tw`marker:block` tw`selection:block` tw`file:block` tw`placeholder:block` tw`backdrop:block` tw`before:block` tw`after:block` tw`before:(content block)` tw`after:(content block)` // Positional tw`first:block` tw`last:block` tw`only:block` tw`odd:block` tw`even:block` tw`first-of-type:block` tw`last-of-type:block` tw`only-of-type:block` // State tw`visited:block` tw`target:block` tw`open:block` // Forms tw`default:block` tw`checked:block` tw`indeterminate:block` tw`placeholder-shown:block` tw`autofill:block` tw`optional:block` tw`required:block` tw`valid:block` tw`invalid:block` tw`in-range:block` tw`out-of-range:block` tw`read-only:block` // Content tw`empty:block` // Interactive tw`focus-within:block` tw`hover:block` tw`focus:block` tw`focus-visible:block` tw`active:block` tw`enabled:block` tw`disabled:block` // Twin custom tw`all:block` tw`all-child:block` tw`sibling:block` tw`hocus:block` tw`link:block` tw`read-write:block` tw`svg:block` tw`even-of-type:block` tw`odd-of-type:block` // Not versions of the above // Positional tw`not-first:block` tw`not-last:block` tw`not-only:block` tw`not-odd:block` tw`not-even:block` tw`not-first-of-type:block` tw`not-last-of-type:block` tw`not-only-of-type:block` // State tw`not-target:block` tw`not-open:block` // Forms tw`not-default:block` tw`not-checked:block` tw`not-indeterminate:block` tw`not-placeholder-shown:block` tw`not-autofill:block` tw`not-optional:block` tw`not-required:block` tw`not-valid:block` tw`not-invalid:block` tw`not-in-range:block` tw`not-out-of-range:block` tw`not-read-only:block` // Content tw`not-empty:block` // Interactive tw`not-focus-within:block` tw`not-hover:block` tw`not-focus:block` tw`not-focus-visible:block` tw`not-active:block` tw`not-enabled:block` tw`not-disabled:block` // Twin custom tw`not-all:block` tw`not-all-child:block` tw`not-sibling:block` tw`not-hocus:block` tw`not-link:block` tw`not-read-write:block` tw`not-svg:block` tw`not-even-of-type:block` tw`not-odd-of-type:block` // tw`ltr:block` tw`rtl:block` tw`motion-safe:block` tw`motion-reduce:block` tw`dark:block` tw`light:block` tw`dark:sm:block` tw`light:sm:block` tw`dark:group-hover:sm:block` tw`light:group-hocus:sm:block` tw`print:block` tw`screen:block` tw`portrait:block` tw`landscape:block` tw`contrast-more:block` tw`contrast-less:block` tw`any-pointer-none:block` tw`any-pointer-fine:block` tw`any-pointer-coarse:block` tw`pointer-none:block` tw`pointer-fine:block` tw`pointer-coarse:block` tw`any-hover-none:block` tw`any-hover:block` tw`can-hover:block` tw`cant-hover:block` // Arbitrary values tw`first:inset-[50px]` tw`md:text-[red]` // Random tw`xl:placeholder-red-500! first:md:block sm:disabled:flex` ================================================ FILE: tests/__fixtures__/.eslintrc.js ================================================ module.exports = { rules: { '@typescript-eslint/no-unused-vars': 'off', 'react/react-in-jsx-scope': 'off', 'import/no-unassigned-import': 'off', 'react/jsx-curly-brace-presence': 'off', }, } ================================================ FILE: tests/__fixtures__/addBase/addBase.tsx ================================================ // @ts-nocheck import tw, { GlobalStyles, globalStyles } from '../macro' tw`base-selector` ; globalStyles ================================================ FILE: tests/__fixtures__/addBase/tailwind.config.js ================================================ function addBasePlugin({ addBase }) { const baseStyles = { ':root': { '--color-pink-900': '#831843', }, '@font-face': { fontFamily: 'NotoSans', fontWeight: 400, fontStyle: 'normal', src: `url('./fonts/myfont.ttf')`, }, body: { marginTop: '20rem', backgroundColor: 'black', }, '.base-selector': { display: 'block', }, 'section .base-selector': { display: 'block', '@screen sm': { '&:hover': { marginTop: '50px', }, }, }, '[type="button"] .base-selector': { display: 'block', '@screen sm': { '&:hover': { marginTop: '5rem', }, }, }, } addBase(baseStyles) } module.exports = { plugins: [addBasePlugin], } ================================================ FILE: tests/__fixtures__/arbitraryProperties/arbitraryProperties.tsx ================================================ // @ts-nocheck import tw from '../macro' tw`[mask-image:linear-gradient(180deg,white, rgba(255,255,255,0))]` tw`[-webkit-property:bg-black]` tw`[--my-var:blue]` tw`[color:var(--my-var)]` tw`bg-black md:[color:var(--my-var)]` tw`[margin:2px_4px_5px_1px]` tw`[content:'—']` ================================================ FILE: tests/__fixtures__/arbitraryVariants/arbitraryVariants.tsx ================================================ // @ts-nocheck import tw from '../macro' tw`[section]:hover:block` tw`[section&]:hover:block` tw`[p]:hover:block` tw`hover:[p]:block` tw`[* + *]:block` // Spaces tw`[.class1 .class2]:block` // Classes tw`[.class1]:[.class2]:block` // Multiple dynamic variants tw`[.class1 .class2]:[.class3]:block` // Multiple dynamic variants tw`[p]:placeholder-red-500/[var(--myvar)]` tw`[p]:mt-[var(--myvar)]` tw`[p]:marginTop[var(--myvar)]` tw`[p]:[margin-top:var(--myvar)]` tw`[p]:(mt-4 mb-4)` tw`[@media (min-width: 800px)]:block` tw`[content\!]:block` // Combinations tw`[&:nth-child(1)]:block` tw`[:nth-child(1)]:block` tw`[@media ...]:block` tw`[.selector]:block` tw`[section]:block` tw`[section &]:block` tw`md:[section]:block` tw`[section]:[bla]:block` tw`[section &]:[pre &]:block` tw`[section &]:[& pre]:block` tw`[section &]:first:[pre &]:block` tw`[section &]:first:[& pre]:block` tw`first:[section &]:[pre &]:block` tw`first:[section &]:[& pre]:block` tw`first:[section &]:[& pre]:mt-[2px]` tw`first:[section &]:[& pre]:[display:inline]` tw`[pre]:[display:inline]` tw`[& pre]:[display:inline]` tw`[:hover]:[display:inline]` tw`[.dropdown.dropdown-open &, .dropdown:focus &]:block` tw`[path]:first:[stroke: #000] md:[path]:[stroke: #000]` tw`first:block md:[path]:[stroke: #000]` tw`[.sec section a[target="_blank"]]:block` // < issue with _blank present in tailwindcss tw`[&.pre,& section,]:block` ================================================ FILE: tests/__fixtures__/arbitraryVariants/config.json ================================================ { "disableCsProp": false, "disableShortCss": false } ================================================ FILE: tests/__fixtures__/autoCssProp/autoCssProp.tsx ================================================ // @ts-nocheck import '../macro' // twinImport // Css prop isn't handled by twin ;
;
================================================ FILE: tests/__fixtures__/colorFunctions/colorFunctions.tsx ================================================ // @ts-nocheck import tw, { GlobalStyles } from '../macro' // twinImport tw`text-foreground text-opacity-40` tw`text-gray-300` ; ================================================ FILE: tests/__fixtures__/colorFunctions/tailwind.config.js ================================================ const color = name => ({ opacityVariable, opacityValue }) => { if (opacityValue !== undefined) { return `rgba(var(--twc-${name}), ${opacityValue})` } if (opacityVariable !== undefined) { return `rgba(var(--twc-${name}), var(${opacityVariable}, 1))` } return `rgb(var(--twc-${name}))` } const colorScale = name => [50, 100, 200, 300, 400, 500, 600, 700, 800, 900].reduce( (acc, step) => ({ ...acc, [step]: color(`${name}-${step}`), }), {} ) module.exports = { theme: { colors: { foreground: color('foreground'), gray: colorScale('gray'), }, }, } ================================================ FILE: tests/__fixtures__/comments/comments.tsx ================================================ // @ts-nocheck import tw from '../macro' /** * Test comments */ // singleline ;
// multiline ;
// mixture ;
// multiline comment ;
// singleline comment with class ;
// multiline comment out a singleline comment with class ;
// mixture with single and multiline on same line ;
// comment in variant group and consecutive strings ;
// break right bracket ;
// comments within multiline comment ;
================================================ FILE: tests/__fixtures__/comments/config.json ================================================ { "dataTwProp": "all" } ================================================ FILE: tests/__fixtures__/config/config.tsx ================================================ // @ts-nocheck import tw from '../macro' /** * Test the config matching is working correctly */ tw`animate-zoom-.5` tw`text-number` tw`text-purple` tw`text-purple-hyphen` tw`text-mycolors` tw`text-mycolors-a-purple` tw`text-mycolors-a-number` // tw`text-mycolors-array` // Arrays aren't supported tw`text-my-blue-100` tw`text-color-opacity` tw`text-color-deep-config-500` tw`bg-number` tw`bg-purple` tw`bg-purple-hyphen` tw`bg-mycolors` tw`bg-mycolors-a-purple` tw`bg-mycolors-a-number` // tw`bg-mycolors-array` // Arrays aren't supported tw`bg-my-blue-100` tw`bg-color-opacity` tw`bg-color-deep-config-500` tw`bg-blue` tw`bg-blue-gray` tw`bg-blue-gray-200` tw`bg-blue-gray-green` tw`bg-blue-gray-green-200` tw`bg-blue-gray-green-deep-dish` tw`bg-blue-gray-green-deep-dish-200` tw`bg-blue-gray-green-pink` tw`font-customFontWeightAsString` tw`font-customFontWeightAsNumber` ================================================ FILE: tests/__fixtures__/config/tailwind.config.js ================================================ module.exports = { theme: { animation: { 'zoom-.5': 'zoom-.5 2s', }, colors: { number: 0, purple: 'purple', 'purple-hyphen': 'purple-hyphen', mycolors: { DEFAULT: 'blue', 'a-purple': 'purple', 'a-number': 0, // array: ['blue', 'purple', 'orange'], // Arrays aren't supported }, 'my-blue': { 100: 'blue', }, 'color-opacity': ({ opacityVariable }) => `rgba(var(--color-primary), var(${opacityVariable}, 1))`, color: { deep: { config: { 500: '#0747A6', }, }, }, blue: { DEFAULT: 'blue-default', gray: { 200: "this-gets-trumped by 'blue-gray: {200}'" }, }, 'blue-gray': { DEFAULT: 'blue-gray-default', 200: 'blue-gray-200', }, 'blue-gray-green': { DEFAULT: 'blue-gray-green-default', 200: 'blue-gray-green-200', 'deep-dish': { DEFAULT: 'blue-gray-green-deep-dish-default', 200: 'blue-gray-green-deep-dish-200', }, }, 'blue-gray-green-pink': 'blue-gray-green-pink', }, fontWeight: { customFontWeightAsString: '700', // Tailwind accepts numbers in configuration as well // https://tailwindcss.com/docs/font-weight#font-weights customFontWeightAsNumber: 800, }, }, } ================================================ FILE: tests/__fixtures__/configTS/configTS.tsx ================================================ // @ts-nocheck import tw from '../macro' /** * Test the config matching is working correctly */ tw`text-purple` ================================================ FILE: tests/__fixtures__/configTS/tailwind.config.ts ================================================ import type { Config } from 'tailwindcss' export default { content: [], theme: { colors: { purple: 'custom', }, }, } satisfies Config ================================================ FILE: tests/__fixtures__/content/content.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/content theme`content` tw`content` tw`content-test` tw`content-['hello']` tw`content-[attr(content-before)]` tw`content-['>']` tw`content-['—']` tw`before:content-['—']` tw`before:(content-['—'] block)` tw`content-none` tw`before:block` tw`peer-focus:before:block` ================================================ FILE: tests/__fixtures__/content/tailwind.config.js ================================================ module.exports = { theme: { extend: { content: { test: '"hi"', DEFAULT: '"default"', }, }, }, } ================================================ FILE: tests/__fixtures__/cssPropEmotion/autoCssProp.tsx ================================================ // @ts-nocheck import '../macro' // twinImport ;
;
================================================ FILE: tests/__fixtures__/cssPropEmotion/autoCssPropWithStyled.tsx ================================================ // @ts-nocheck import tw from '../macro' // twinImport // Css prop isn't handled by twin tw.div`block` ;
const Test = tw.div`` ; ================================================ FILE: tests/__fixtures__/cssPropStyledComponents/autoCssProp.tsx ================================================ // @ts-nocheck import '../macro' // twinImport ;
;
================================================ FILE: tests/__fixtures__/cssPropStyledComponents/autoCssPropWithStyled.tsx ================================================ // @ts-nocheck import tw from '../macro' // twinImport tw.div`block` ;
const Test = tw.div`` ; ================================================ FILE: tests/__fixtures__/cssPropStyledComponents/config.json ================================================ { "preset": "styled-components", "autoCssProp": false } ================================================ FILE: tests/__fixtures__/darkLightModeArray/darkLightModeArray.tsx ================================================ // @ts-nocheck import tw from '../macro' // twinImport tw`dark:block` tw`light:block` ================================================ FILE: tests/__fixtures__/darkLightModeArray/tailwind.config.js ================================================ module.exports = { darkMode: ['class', '.test-dark'], lightMode: ['class', '.test-light'], } ================================================ FILE: tests/__fixtures__/directionalBorders/directionalBorders.tsx ================================================ // @ts-nocheck import tw from '../macro' // twinImport tw`border-t` tw`border-r` tw`border-b` tw`border-l` tw`border-t-transparent` tw`border-t-current` tw`border-t-gray-50` tw`border-r-transparent` tw`border-r-current` tw`border-r-gray-50` tw`border-b-transparent` tw`border-b-current` tw`border-b-gray-50` tw`border-l-transparent` tw`border-l-current` tw`border-l-gray-50` tw`border-l-gray-50/20` tw`border-t-4` tw`border-r-4` tw`border-b-4` tw`border-l-4` ================================================ FILE: tests/__fixtures__/fluidContainer/fluidContainer.tsx ================================================ // @ts-nocheck import tw from '../macro' tw`fluid-container ml-10` ================================================ FILE: tests/__fixtures__/fluidContainer/tailwind.config.js ================================================ function fluidContainer({ addComponents, theme }) { const styles = [ { '.fluid-container': { marginLeft: 'auto', marginRight: 'auto', width: theme('fluidContainer.default', '100%'), }, }, { '.fluid-container:focus': { marginLeft: '10rem', marginRight: '11rem', width: theme('fluidContainer.default', '100%'), }, }, { '.not-container': { content: 'not-container', }, }, { '@media (min-width: 1440px)': { '.fluid-container': { display: 'block', }, }, }, { '@media (min-width: 768px)': { '.fluid-container:hover': { width: theme('fluidContainer.small', '100%'), }, '.not-fluid-container': { content: 'not-fluid-container:focus', }, '.fluid-container:focus': { marginLeft: 'auto', marginRight: 'auto', width: theme('fluidContainer.default', '100%'), }, }, }, { '.fluid-container': { '@media (min-width: 1440px)': { width: theme('fluidContainer.large', '100%'), backgroundColor: 'black', }, '@media only screen and (max-width: 540px)': { width: '33%', backgroundColor: 'red', }, }, }, ] addComponents(styles) } module.exports = { theme: { fluidContainer: { DEFAULT: '10%', small: '25%', large: '75%', }, }, plugins: [fluidContainer], } ================================================ FILE: tests/__fixtures__/globalStyles/config.json ================================================ { "preset": "emotion" } ================================================ FILE: tests/__fixtures__/globalStyles/globalStyles.tsx ================================================ // @ts-nocheck import { GlobalStyles } from '../macro' import { css, Global } from '@emotion/react' const MyGlobals = () => (
) ================================================ FILE: tests/__fixtures__/globalStyles/tailwind.config.js ================================================ module.exports = { theme: { fontFamily: { // Tests the dynamic default html font sans: ['testSans', 'testSans2'], // Tests the dynamic default pre,code,kbd,samp value mono: ['testMono', 'testMono2'], }, colors: { // Tests the dynamic default input/textarea placeholders gray: { 400: 'grayish', }, }, ringOffsetWidth: { DEFAULT: '10px', }, ringOffsetColor: { DEFAULT: 'rainbow', }, borderColor: { // Tests the dynamic default border default color DEFAULT: 'blueish', }, }, } ================================================ FILE: tests/__fixtures__/group/group.tsx ================================================ // @ts-nocheck import tw from '../macro' // Positional tw`group-first:block` tw`group-last:block` tw`group-only:block` tw`group-odd:block` tw`group-even:block` tw`group-first-of-type:block` tw`group-last-of-type:block` tw`group-only-of-type:block` // State tw`group-visited:block` tw`group-target:block` tw`group-open:block` // Forms tw`group-default:block` tw`group-checked:block` tw`group-indeterminate:block` tw`group-placeholder-shown:block` tw`group-autofill:block` tw`group-optional:block` tw`group-required:block` tw`group-valid:block` tw`group-invalid:block` tw`group-in-range:block` tw`group-out-of-range:block` tw`group-read-only:block` // Content tw`group-empty:block` // Interactive tw`group-focus-within:block` tw`group-hover:block` tw`group-focus:block` tw`group-focus-visible:block` tw`group-active:block` tw`group-enabled:block` tw`group-disabled:block` // Twin custom tw`group-all:block` tw`group-all-child:block` tw`group-sibling:block` tw`group-hocus:block` tw`group-link:block` tw`group-read-write:block` tw`group-svg:block` tw`group-even-of-type:block` tw`group-odd-of-type:block` // Not versions of the above // Positional tw`group-not-first:block` tw`group-not-last:block` tw`group-not-only:block` tw`group-not-odd:block` tw`group-not-even:block` tw`group-not-first-of-type:block` tw`group-not-last-of-type:block` tw`group-not-only-of-type:block` // State tw`group-not-target:block` tw`group-not-open:block` // Forms tw`group-not-default:block` tw`group-not-checked:block` tw`group-not-indeterminate:block` tw`group-not-placeholder-shown:block` tw`group-not-autofill:block` tw`group-not-optional:block` tw`group-not-required:block` tw`group-not-valid:block` tw`group-not-invalid:block` tw`group-not-in-range:block` tw`group-not-out-of-range:block` tw`group-not-read-only:block` // Content tw`group-not-empty:block` // Interactive tw`group-not-focus-within:block` tw`group-not-hover:block` tw`group-not-focus:block` tw`group-not-focus-visible:block` tw`group-not-active:block` tw`group-not-enabled:block` tw`group-not-disabled:block` // Twin custom tw`group-not-all:block` tw`group-not-all-child:block` tw`group-not-sibling:block` tw`group-not-hocus:block` tw`group-not-link:block` tw`group-not-read-write:block` tw`group-not-svg:block` tw`group-not-even-of-type:block` tw`group-not-odd-of-type:block` ================================================ FILE: tests/__fixtures__/includeClassNames/config.json ================================================ { "includeClassNames": true, "disableCsProp": false } ================================================ FILE: tests/__fixtures__/includeClassNames/includeClassNames.tsx ================================================ // @ts-nocheck import tw from '../macro' const SkipEmptyClassName =
const OnlyUppercaseConverted =
const AllConverted =
const SkippedCurlies =
const SkippedConditionals =
const SkippedGroup =
// css + className const CssPropFirst = (
) const CssPropLast = (
) // tw + className const TwPropFirst =
const TwPropLast =
// tw + css + className const TwThenCssThenClassName = (
) const TwThenClassNameThenCss = (
) const ClassNameThenTwThenCss = (
) const ClassNameThenCssThenTw = (
) const CssThenClassNameThenTw = (
) const CssThenTwThenClassName = (
) // styled + everything const Button = tw.div`` const StyledTwThenCssThenClassName = (
Error! Task failed successfully.
12 unread messages. Tap to see.
info
success
warning
error
Total Likes
25.6K
21% more than last month
Page Views
2.6M
21% more than last month
86%
Tasks done
31 tasks remaining
Movie

New movie is released!

Click the button to watch on Jetflix app.

Hello there

Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.

99+
  • Register
  • Choose plan
  • Purchase
  • Receive Product
  • Fly to moon
  • Shrink the moon
  • Grab the moon
  • Sit on toilet 
            npm i daisyui
          
            installing...
          
            Done!
Shoes

Shoes!

If a dog chews shoes whose shoes does he choose?

top+start top+center top+end middle+start middle+center middle+end bott0m+strt bottom+center bottom+end
content

Login now!

Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.

Congratulations random Interner user!

You've been selected for a chance to get one year of subscription to use Wikipedia for free!

) ================================================ FILE: tests/__fixtures__/pluginDaisyUi/tailwind.config.js ================================================ module.exports = { plugins: [require('daisyui')], daisyui: { themes: false, logs: false, rtl: false }, } ================================================ FILE: tests/__fixtures__/pluginExamples/pluginExamples.tsx ================================================ // @ts-nocheck import tw, { globalStyles } from '../macro' tw`content-auto` tw`content-hidden` tw`content-visible` tw`tab-1` tw`tab-2` tw`tab-4` tw`tab-8` tw`btn` tw`btn-blue` tw`btn-red` tw`btn btn-blue btn-red` globalStyles tw`test-1:block` tw`test-2:block` tw`test-3:block` tw`test-4:block` tw`potato-[yellow]:bg-yellow-200` tw`potato-[baked]:w-3` tw`tooltip-bottom:mt-5` tw`tooltip-top:mb-5` tw`alphabet-c:underline ` tw`alphabet-a:underline ` tw`alphabet-d:underline ` tw`alphabet-b:underline` tw`test-[a,b,c]:underline` tw`testmin-[500px]:underline` tw`testmin-[700px]:italic` ================================================ FILE: tests/__fixtures__/pluginExamples/tailwind.config.js ================================================ // https://tailwindcss.com/docs/plugins const plugin = require('tailwindcss/plugin') const addUtilities = function ({ addUtilities }) { addUtilities({ '.content-auto': { 'content-visibility': 'auto', }, '.content-hidden': { 'content-visibility': 'hidden', }, '.content-visible': { 'content-visibility': 'visible', }, }) } const defaultValues = plugin( function ({ matchUtilities, theme }) { matchUtilities( { tab: value => ({ tabSizeTest: value, }), }, { values: theme('tabSizeTest') } ) }, { theme: { tabSizeTest: { 1: '1', 2: '2', 4: '4', 8: '8', }, }, } ) const addComponents = function ({ addComponents }) { addComponents({ '.btn': { padding: '.5rem 1rem', borderRadius: '.25rem', fontWeight: '600', }, '.btn-blue': { backgroundColor: '#3490dc', color: '#fff', '&:hover': { backgroundColor: '#2779bd', }, }, '.btn-red': { backgroundColor: '#e3342f', color: '#fff', '&:hover': { backgroundColor: '#cc1f1a', }, }, }) } const addBase = function ({ addBase, theme }) { addBase({ h1: { fontSize: theme('fontSize.2xl') }, h2: { fontSize: theme('fontSize.xl') }, h3: { fontSize: theme('fontSize.lg') }, }) } const addVariant = function ({ addVariant }) { addVariant('test-1', '&:test1') addVariant('test-2', ['&:hover', '&:focus']) addVariant('test-3', '@supports (display: grid)') addVariant('test-4', 'html.dark &.something') } // https://github.com/tailwindlabs/tailwindcss/blob/master/tests/match-variants.test.js const matchVariant = ({ matchVariant }) => { matchVariant('potato', flavor => `.potato-${flavor} &`) matchVariant('carrot', flavor => `@media (carrot: ${flavor})`) matchVariant( 'beetroot', flavor => `@media (beetroot: ${flavor}) { &:beetroot }` ) matchVariant('tooltip', side => `&${side}`, { values: { bottom: '[data-location="bottom"]', top: '[data-location="top"]', }, }) matchVariant('alphabet', side => `&${side}`, { values: { a: '[data-value="a"]', b: '[data-value="b"]', c: '[data-value="c"]', d: '[data-value="d"]', }, }) matchVariant('test', selector => selector.split(',').map(selector => `&.${selector} > *`) ) matchVariant('testmin', value => `@media (min-width: ${value})`, { sort(a, z) { return parseInt(a.value) - parseInt(z.value) }, }) } module.exports = { corePlugins: { preflight: false }, experimental: { matchVariant: true }, plugins: [ addUtilities, defaultValues, addComponents, addBase, addVariant, matchVariant, ], } ================================================ FILE: tests/__fixtures__/pluginForms/pluginForms.tsx ================================================ // @ts-nocheck import { GlobalStyles } from '../macro' ; ================================================ FILE: tests/__fixtures__/pluginForms/tailwind.config.js ================================================ module.exports = { plugins: [require('@tailwindcss/forms')], } ================================================ FILE: tests/__fixtures__/pluginFormsClassStrategy/pluginTypography.tsx ================================================ // @ts-nocheck import tw from '../macro' tw`form-radio` tw`form-select` tw`form-checkbox` tw`form-input` tw`form-textarea` tw`form-multiselect` ================================================ FILE: tests/__fixtures__/pluginFormsClassStrategy/tailwind.config.js ================================================ module.exports = { plugins: [require('@tailwindcss/forms')({ strategy: 'class' })], } ================================================ FILE: tests/__fixtures__/pluginGapFallback/pluginGapFallback.tsx ================================================ // @ts-nocheck import tw from '../macro' tw`flex-gap-0` tw`flex-gap-3` tw`flex-gap-x-3` tw`flex-gap-y-3` tw`flex-gap-px` tw`flex-gap-x-1.5` tw`gap-0` tw`gap-3` tw`gap-x-3` tw`gap-y-3` tw`gap-px` tw`gap-x-1.5` tw`test-1` tw`test-2` ================================================ FILE: tests/__fixtures__/pluginGapFallback/tailwind.config.js ================================================ const plugin = require('tailwindcss/plugin') const half = value => value.replace(/\d+(.\d+)?/, number => number / 2) // Basic plugin that creates new gap classes const gapReplacementPlugin = plugin(({ addUtilities, e, theme }) => { Object.entries(theme('gap')).forEach(([key, value]) => addUtilities({ [`.flex-gap-${e(key)}`]: { margin: `-${half(value)}`, '& > *': { margin: half(value), }, }, [`.flex-gap-x-${e(key)}`]: { marginRight: `-${half(value)}`, marginLeft: `-${half(value)}`, '& > *': { marginRight: half(value), marginLeft: half(value), }, }, [`.flex-gap-y-${e(key)}`]: { marginTop: `-${half(value)}`, marginBottom: `-${half(value)}`, '& > *': { marginTop: half(value), marginBottom: half(value), }, }, }) ) }) // Alternative gap plugin that uses a parent class that's dynamically added const gapSupportPlugin = plugin(({ addUtilities, e, theme }) => { Object.entries(theme('gap')).forEach(([key, value]) => addUtilities({ [`.gap-${e(key)}`]: { '.no-flex-gap &': { margin: `-${half(value)}`, }, '.no-flex-gap & > *': { margin: half(value), }, }, [`.gap-x-${e(key)}`]: { '.no-flex-gap &': { marginRight: `-${half(value)}`, marginLeft: `-${half(value)}`, }, '.no-flex-gap & > *': { marginRight: half(value), marginLeft: half(value), }, }, [`.gap-y-${e(key)}`]: { '.no-flex-gap &': { marginTop: `-${half(value)}`, marginBottom: `-${half(value)}`, }, '.no-flex-gap & > *': { marginTop: half(value), marginBottom: half(value), }, }, }) ) }) // Test a couple extra things const testPlugin = plugin(({ addUtilities, e, theme }) => { addUtilities({ [`.test-1`]: { background: '5px', '.a-class & .some-class': { margin: '10px', }, '.a-class & > *': { margin: '20px', }, }, [`.test-2`]: { '.a-class & .some-class': { margin: '10px', }, '.a-class & > *': { margin: '20px', }, }, }) }) module.exports = { plugins: [gapReplacementPlugin, gapSupportPlugin, testPlugin], } ================================================ FILE: tests/__fixtures__/pluginTypography/pluginTypography.tsx ================================================ // @ts-nocheck import tw from '../macro' // From @tailwindcss/typography tw`prose sm:prose-sm lg:prose-lg xl:prose-xl` // From tailwindcss-typography tw`rich-text` ================================================ FILE: tests/__fixtures__/pluginTypography/tailwind.config.js ================================================ const textStyles = theme => ({ heading: { output: false, fontWeight: theme('fontWeight.bold'), lineHeight: theme('lineHeight.tight'), }, h1: { extends: 'heading', fontSize: theme('fontSize.5xl'), '@screen sm': { fontSize: theme('fontSize.6xl'), }, }, h2: { extends: 'heading', fontSize: theme('fontSize.4xl'), '@screen sm': { fontSize: theme('fontSize.5xl'), lineHeight: '50px', }, }, '@screen sm': { h3: { extends: 'heading', fontSize: theme('fontSize.4xl'), }, ':hover': { color: theme('colors.blue.300'), }, }, link: { fontWeight: theme('fontWeight.bold'), color: theme('colors.blue.400'), '&:hover, &:focus': { color: theme('colors.blue.600'), textDecoration: 'underline', }, '&:active': { color: theme('colors.orange.600'), }, }, richText: { fontWeight: theme('fontWeight.normal'), fontSize: theme('fontSize.base'), lineHeight: theme('lineHeight.relaxed'), '> * + *': { marginTop: '1em', }, h1: { extends: 'h1', }, a: { extends: 'link', }, 'b, strong': { fontWeight: theme('fontWeight.bold'), }, 'i, em': { fontStyle: 'italic', }, }, }) module.exports = { theme: { textStyles, }, plugins: [ require('@tailwindcss/typography'), require('tailwindcss-typography')({ ellipsis: false, hyphens: false, kerning: false, textUnset: false, componentPrefix: '', }), ], } ================================================ FILE: tests/__fixtures__/pluginUserParentSelector/pluginUserParentSelector.tsx ================================================ // @ts-nocheck import tw from '../macro' tw`my-class1` tw`my-class2` tw`my-class3` tw`my-class4` tw`my-class5` tw`my-class6` ================================================ FILE: tests/__fixtures__/pluginUserParentSelector/tailwind.config.js ================================================ const plugin = require('tailwindcss/plugin') module.exports = { plugins: [ plugin(({ addComponents }) => addComponents({ '.my-class1': { backgroundColor: 'black', h2: { backgroundColor: 'red', }, }, '.my-class2': { backgroundColor: 'green', 'h2 &': { backgroundColor: 'yellow', }, }, '.my-class3': { backgroundColor: 'green', '.dark &:hover': { backgroundColor: 'yellow', }, }, '.my-class4': { '.test & :hover': { backgroundColor: 'orange', }, }, '.my-class5': { backgroundColor: 'brown', '&:hover': { backgroundColor: 'pink', }, }, '.my-class6': { backgroundColor: 'blue', ':hover': { backgroundColor: 'orange', }, }, }) ), ], } ================================================ FILE: tests/__fixtures__/plugins/config.json ================================================ { "includeClassNames": true, "dataTwProp": "all" } ================================================ FILE: tests/__fixtures__/plugins/plugins.tsx ================================================ // @ts-nocheck import tw from '../macro' // Tailwind plugin tests tw`type-sm` const addUtilitiesTest = tw`type-sm text-red-500 lg:type-sm md:type-sm!` const addUtilitiesTest2 = tw`skew-15deg` const addUtilitiesTest2Important = tw`skew-15deg! type-sm!` const addUtilitiesTest2Media = tw`sm:skew-15deg lg:type-sm` const addUtilitiesTest2Variants = tw`hover:active:skew-15deg even:visited:skew-15deg` const addComponentsTest = tw`btn btn-blue btn-red` const addComponentsTestMedia = tw`xl:btn sm:btn-blue lg:btn-red` const addComponentsTestVariants = tw`hover:active:btn hocus:before:btn-blue even:visited:btn-red` const addComponentsTestElementPrefixes = tw`prefixes` const addComponentsTestElementScreenReplacements = tw`screenies` ================================================ FILE: tests/__fixtures__/plugins/tailwind.config.js ================================================ module.exports = { theme: { aspectRatio: { 2: '2', 4: '4', 6: '6', }, }, plugins: [ addUtilitiesTest, addUtilitiesTest2, addComponentsTest, addComponentsTestElementPrefixes, addComponentsTestElementScreenReplacements, pluginBaseSelectors, ], } function addUtilitiesTest({ addUtilities, theme }) { const newUtilities = { '.type-sm': { fontSize: theme('fontSize.sm'), fontWeight: theme('fontWeight.medium'), lineHeight: theme('lineHeight.tight'), }, } addUtilities(newUtilities) } function addUtilitiesTest2({ addUtilities }) { const newUtilities = { '.skew-10deg': { transform: 'skewY(-10deg)', }, '.skew-15deg': { transform: 'skewY(-15deg)', }, } addUtilities(newUtilities) } function addComponentsTest({ addComponents }) { const buttons = { '.btn': { padding: '.5rem 1rem', borderRadius: '.25rem', fontWeight: '600', }, '.btn-blue': { backgroundColor: '#3490dc', color: '#fff', '&:hover': { backgroundColor: '#2779bd', }, }, '.btn-red': { backgroundColor: '#e3342f', color: '#fff', '&:hover': { backgroundColor: '#cc1f1a', }, }, } addComponents(buttons) } function addComponentsTestElementPrefixes({ addComponents }) { const styles = [ { '.prefixes': { h1: { margin: 'auto', marginRight: '10px', }, 'h2:hover': { color: 'red', }, 'h3:hover, h3:active': { color: 'green', }, ':focus': { display: 'none', }, }, }, ] addComponents(styles) } function addComponentsTestElementScreenReplacements({ addComponents }) { const styles = [ { '.screenies': { '@screen sm': { display: 'block', }, '@screen lg': { display: 'inline-block', }, '@screen md': { display: 'flex', }, '@screen xl': { h1: { marginTop: '50px', '&:hover, &:focus': { color: 'blue', }, }, }, }, }, ] addComponents(styles) } // tests introducing a config item and using the items as base selectors function pluginBaseSelectors({ addComponents, theme, e }) { const values = theme('aspectRatio') const baseSelectors = Object.entries(values) .map(([key]) => `.${e(`aspect-test-${key}`)}`) .join(',\n') addComponents([{ [baseSelectors]: { content: 'test' } }]) } ================================================ FILE: tests/__fixtures__/prefix/config.json ================================================ { "includeClassNames": true, "dataTwProp": "all", "disableShortCss": false } ================================================ FILE: tests/__fixtures__/prefix/prefix.tsx ================================================ // @ts-nocheck import tw from '../macro' // tw prop prefix ;
// tw import prefix ;
// tw prop + import prefix ;
// tw import + short css ;
// tw import + arbitrary property ;
// className should be ignored without the prefix ;
// className should be converted with a prefix ;
// group ;
;
;
;
;
;
// custom plugin classes ;
;
;
================================================ FILE: tests/__fixtures__/prefix/tailwind.config.js ================================================ const plugin = require('tailwindcss/plugin') function pluginClass({ addComponents }) { addComponents([ { '.plugin-class': { content: 'working', }, }, ]) } // Test a couple extra things const parentTestPlugin = plugin(({ addUtilities }) => { addUtilities({ '.test-1': { background: '5px', '.a-class & .some-class': { margin: '10px', }, '.a-class & > *': { margin: '20px', }, }, '.test-2': { '.a-class & .some-class': { margin: '10px', }, '.a-class & > *': { margin: '20px', }, }, }) }) module.exports = { prefix: 'tw-', plugins: [pluginClass, parentTestPlugin], } ================================================ FILE: tests/__fixtures__/preflight/preflight.tsx ================================================ // @ts-nocheck import { globalStyles } from '../macro' globalStyles ================================================ FILE: tests/__fixtures__/preflight/tailwind.config.js ================================================ module.exports = { corePlugins: { preflight: false, }, } ================================================ FILE: tests/__fixtures__/presets/presets.tsx ================================================ // @ts-nocheck import tw from '../macro' tw`text-badass` tw`text-banana` tw`text-hamburger` tw`active:text-white` tw`hocus:text-black` ================================================ FILE: tests/__fixtures__/presets/tailwind.config.js ================================================ const myConfigDefault = { theme: { extend: { colors: { hamburger: 'brown', }, }, }, } const myConfig = { presets: [myConfigDefault], theme: { extend: { colors: { badass: '#bada55', }, }, }, } module.exports = { presets: [myConfig], theme: { extend: { colors: { banana: 'yellow', }, }, }, } ================================================ FILE: tests/__fixtures__/sassyPseudo/config.json ================================================ { "sassyPseudo": true, "disableShortCss": false } ================================================ FILE: tests/__fixtures__/sassyPseudo/sassyPseudo.tsx ================================================ // @ts-nocheck import tw from '../macro' tw`hover:block first:mt-2 last-of-type:max-width[20px]` tw`hover:block first:mt-2 last-of-type:[max-width:20px]` tw`my-class1` tw`my-class2` tw`my-class3` ================================================ FILE: tests/__fixtures__/sassyPseudo/tailwind.config.js ================================================ const plugin = require('tailwindcss/plugin') module.exports = { plugins: [ plugin(({ addComponents }) => addComponents({ '.my-class1': { '&:hover': { backgroundColor: 'pink', }, }, '.my-class2': { ':hover': { backgroundColor: 'orange', }, }, '.my-class3': { '.test & :hover': { backgroundColor: 'orange', }, }, }) ), ], } ================================================ FILE: tests/__fixtures__/screenImport/screenImport.tsx ================================================ // @ts-nocheck import tw, { styled, screen } from '../macro' // Media query only screen`sm` screen.md // Can't work with screen values that begin with a number, eg: screen.2xl screen('lg') screen(`xl`) // Constructed media queries ;` ${screen`sm`} { display: block; ${tw`inline`} } ` ;({ [screen`sm`]: `display: block; ${tw`inline`}` }) ;({ [screen`sm`]: { display: 'block', ...tw`inline` } }) // Media queries with styles screen.sm({ color: `red` }) screen`md`({ color: `red` }) screen('lg')({ color: `red` }) screen(`xl`)({ color: `red` }) screen.sm`color: red;` screen`md``color: red;` screen('lg')`color: red;` screen(`xl`)`color: red;` screen.xl(tw`inline`) screen.xl({ ...tw`inline` }) screen.xl({ ...tw`inline`, display: 'block' }) screen.xl` ${tw`inline`} display: block; ` screen.xl`color: ${true && 'blue'};` // Within template literals ;`${screen.lg}` ;`${screen`xl`}` ;`${screen(`xl`)}` ;`${screen('xl')}` // Screen keys ;
;
;
;
styled.div` ${{ [screen.xl]: { color: 'red' } }} ` styled.div([{ [screen.xl]: { color: 'red' } }]) // Logical expressions ;
styled.div([{ [true && screen.xl]: { color: 'red' } }]) // Conditional expressions ;
styled.div` ${{ // eslint-disable-next-line no-constant-condition [true ? screen.xl : screen.sm]: { color: 'red' }, }} ` // Screen with values ;
;
;
;
;
;
================================================ FILE: tests/__fixtures__/screenImport/tailwind.config.js ================================================ module.exports = { theme: { screens: { sm: '100px', md: '200px', lg: '300px', xl: '400px', }, }, } ================================================ FILE: tests/__fixtures__/screens/screens.tsx ================================================ // @ts-nocheck import tw from '../macro' tw`sm:block` tw`md:block` tw`lg:block` tw`xl:block` tw`2xl:block` tw`:font-bold` ================================================ FILE: tests/__fixtures__/screens/tailwind.config.js ================================================ module.exports = { theme: { extend: { screens: { '': { min: '500px' }, }, }, }, } ================================================ FILE: tests/__fixtures__/separator/separator.tsx ================================================ // @ts-nocheck import tw from '../macro' tw`[&[data-foo][data-bar]:not([data-baz])]__underline` ================================================ FILE: tests/__fixtures__/separator/tailwind.config.js ================================================ module.exports = { separator: '__', } ================================================ FILE: tests/__fixtures__/shortCss/config.json ================================================ { "disableShortCss": false, "disableCsProp": false } ================================================ FILE: tests/__fixtures__/shortCss/shortCss.tsx ================================================ // @ts-nocheck import tw from '../macro' // within cs prop ;
;
;
;
;
;
;
// within tw prop ;
;
;
;
;
;
;
// within css prop ;
// within tw import tw`maxWidth[100vw - 2rem]` tw`maxWidth[100vw - 2rem] block` tw`md:maxWidth[100vw - 2rem]` tw`hover:(maxWidth[100vw - 2rem] width[2rem])` tw`hover:(maxWidth[100vw - 2rem] before:content['test'])` tw`hover:(maxWidth[100vw - 2rem] before:content['test'])!` tw`hover:(maxWidth[100vw - 2rem]! before:content['test'])` // prop ordering ;
// Setting css variables tw`--css-prop[true] md:--css-prop[false]` // Using css variables tw`max-width[var(--css-react)] md:max-width[var(--css-react-md)]` // Browser vendor prefixes tw`-webkit-gradient[gradient here] md:-webkit-gradient[gradient here md]` // Grid template tw`grid-template-columns[[main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end]] md:grid-template-columns[[main-start-md] 1fr [content-start-md] 1fr [content-end-md] 1fr [main-end-md]]` // Short css trumps core plugins tw`transition-property[margin]` // Crazy calcs tw`padding[calc((2em * -1) + var(--myVar))]` // Multiline tw`padding[ calc((2em * -1) + var(--myVar)) ]` tw`padding[ calc((2em * -1) + var(--myVar)) ]` // Theme value tw`--color[theme(colors.red.500)]` tw`--color[this theme(colors.red.500) that]` // Automatic '' value tw`touch-action[]` ================================================ FILE: tests/__fixtures__/stitches/config.json ================================================ { "preset": "stitches", "stitchesConfig": "tests/__fixtures__/stitches/stitches.config.js" } ================================================ FILE: tests/__fixtures__/stitches/stitches.config.js ================================================ // just for show ================================================ FILE: tests/__fixtures__/stitches/stitchesDotSyntax.tsx ================================================ // @ts-nocheck import tw, { styled } from '../macro' tw.div`block` styled.div(tw`block`) styled.div({ display: 'block' }) // Classic syntax styled('div', tw`block`) ================================================ FILE: tests/__fixtures__/stitches/stitchesGlobals.tsx ================================================ // @ts-nocheck import { globalStyles } from '../macro' import { global } from './stitches.config' const globals = global(globalStyles) export function App() { globals() // ... } ================================================ FILE: tests/__fixtures__/stitches/stitchesImports.tsx ================================================ // @ts-nocheck import tw, { css, styled } from '../macro' css(tw`block`) tw.div`block` styled.div(tw`block`) ================================================ FILE: tests/__fixtures__/stitches/stitchesProps.tsx ================================================ // @ts-nocheck import tw from '../macro' // tw prop ;
// tw + css prop ;
;
;
;
// Extracted styles const styles = { container: ({ isInline }) => ({ ...tw`block`, ...(isInline && tw`inline`) }), } ;
// Dot syntax const Component = { Sub: () => [] } ; ; ================================================ FILE: tests/__fixtures__/themeValuesToString/tailwind.config.js ================================================ module.exports = { theme: { colors: {}, keyframes: { 'fade-up': { from: { transform: 'translateY(0.5rem)', opacity: 0, }, to: { transform: 'translateY(0)', opacity: 1, }, }, }, anotherkey: { property: '1rem', }, }, } ================================================ FILE: tests/__fixtures__/themeValuesToString/themeValuesToString.tsx ================================================ // @ts-nocheck import { globalStyles, theme } from '../macro' globalStyles theme`keyframes` theme`` ================================================ FILE: tests/__fixtures__/userPluginOrdering/tailwind.config.js ================================================ function fluidContainer({ addComponents, theme }) { const styles = [ { '@media (min-width: 1px)': { '.selector': { content: '@media .selector', }, }, }, { '.selector': { content: '.selector', '.selector2': { content: '.selector .selector2', }, '@media (min-width: 1px)': { '.selector3': { content: '@media .selector .selector3', }, }, }, }, { '.selector:hover': { content: '.selector:hover', '@media (min-width: 1px)': { '.selector2': { content: '@media .selector:hover .selector2', }, '&.selector2': { content: '@media .selector:hover.selector2', }, }, '.selector3': { content: '.selector:hover .selector3', }, }, }, { '.not-selector': { content: 'not-container', }, }, { '.selector': { margin: '1px', padding: 'padding', display: 'block', '@media (min-width: 2px)': { content: '@media .selector', }, }, }, ] addComponents(styles) } module.exports = { plugins: [fluidContainer], } ================================================ FILE: tests/__fixtures__/userPluginOrdering/userPluginOrdering.tsx ================================================ // @ts-nocheck import tw from '../macro' tw`selector` ================================================ FILE: tests/__fixtures__/utilitiesAccessibility/screenReaders.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/screen-readers tw`sr-only` tw`not-sr-only` ================================================ FILE: tests/__fixtures__/utilitiesBackgrounds/backgroundAttachment.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/background-attachment tw`bg-fixed` tw`bg-local` tw`bg-scroll` ================================================ FILE: tests/__fixtures__/utilitiesBackgrounds/backgroundClip.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/background-clip tw`bg-clip-border` tw`bg-clip-padding` tw`bg-clip-content` tw`bg-clip-text` ================================================ FILE: tests/__fixtures__/utilitiesBackgrounds/backgroundColor.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/background-color theme`backgroundColor` tw`bg-inherit` tw`bg-current` tw`bg-transparent` tw`bg-black` tw`bg-white` tw`bg-slate-50` tw`bg-slate-100` tw`bg-slate-200` tw`bg-slate-300` tw`bg-slate-400` tw`bg-slate-500` tw`bg-slate-600` tw`bg-slate-700` tw`bg-slate-800` tw`bg-slate-900` tw`bg-gray-50` tw`bg-gray-100` tw`bg-gray-200` tw`bg-gray-300` tw`bg-gray-400` tw`bg-gray-500` tw`bg-gray-600` tw`bg-gray-700` tw`bg-gray-800` tw`bg-gray-900` tw`bg-zinc-50` tw`bg-zinc-100` tw`bg-zinc-200` tw`bg-zinc-300` tw`bg-zinc-400` tw`bg-zinc-500` tw`bg-zinc-600` tw`bg-zinc-700` tw`bg-zinc-800` tw`bg-zinc-900` tw`bg-neutral-50` tw`bg-neutral-100` tw`bg-neutral-200` tw`bg-neutral-300` tw`bg-neutral-400` tw`bg-neutral-500` tw`bg-neutral-600` tw`bg-neutral-700` tw`bg-neutral-800` tw`bg-neutral-900` tw`bg-stone-50` tw`bg-stone-100` tw`bg-stone-200` tw`bg-stone-300` tw`bg-stone-400` tw`bg-stone-500` tw`bg-stone-600` tw`bg-stone-700` tw`bg-stone-800` tw`bg-stone-900` tw`bg-red-50` tw`bg-red-100` tw`bg-red-200` tw`bg-red-300` tw`bg-red-400` tw`bg-red-500` tw`bg-red-600` tw`bg-red-700` tw`bg-red-800` tw`bg-red-900` tw`bg-orange-50` tw`bg-orange-100` tw`bg-orange-200` tw`bg-orange-300` tw`bg-orange-400` tw`bg-orange-500` tw`bg-orange-600` tw`bg-orange-700` tw`bg-orange-800` tw`bg-orange-900` tw`bg-amber-50` tw`bg-amber-100` tw`bg-amber-200` tw`bg-amber-300` tw`bg-amber-400` tw`bg-amber-500` tw`bg-amber-600` tw`bg-amber-700` tw`bg-amber-800` tw`bg-amber-900` tw`bg-yellow-50` tw`bg-yellow-100` tw`bg-yellow-200` tw`bg-yellow-300` tw`bg-yellow-400` tw`bg-yellow-500` tw`bg-yellow-600` tw`bg-yellow-700` tw`bg-yellow-800` tw`bg-yellow-900` tw`bg-lime-50` tw`bg-lime-100` tw`bg-lime-200` tw`bg-lime-300` tw`bg-lime-400` tw`bg-lime-500` tw`bg-lime-600` tw`bg-lime-700` tw`bg-lime-800` tw`bg-lime-900` tw`bg-green-50` tw`bg-green-100` tw`bg-green-200` tw`bg-green-300` tw`bg-green-400` tw`bg-green-500` tw`bg-green-600` tw`bg-green-700` tw`bg-green-800` tw`bg-green-900` tw`bg-emerald-50` tw`bg-emerald-100` tw`bg-emerald-200` tw`bg-emerald-300` tw`bg-emerald-400` tw`bg-emerald-500` tw`bg-emerald-600` tw`bg-emerald-700` tw`bg-emerald-800` tw`bg-emerald-900` tw`bg-teal-50` tw`bg-teal-100` tw`bg-teal-200` tw`bg-teal-300` tw`bg-teal-400` tw`bg-teal-500` tw`bg-teal-600` tw`bg-teal-700` tw`bg-teal-800` tw`bg-teal-900` tw`bg-cyan-50` tw`bg-cyan-100` tw`bg-cyan-200` tw`bg-cyan-300` tw`bg-cyan-400` tw`bg-cyan-500` tw`bg-cyan-600` tw`bg-cyan-700` tw`bg-cyan-800` tw`bg-cyan-900` tw`bg-sky-50` tw`bg-sky-100` tw`bg-sky-200` tw`bg-sky-300` tw`bg-sky-400` tw`bg-sky-500` tw`bg-sky-600` tw`bg-sky-700` tw`bg-sky-800` tw`bg-sky-900` tw`bg-blue-50` tw`bg-blue-100` tw`bg-blue-200` tw`bg-blue-300` tw`bg-blue-400` tw`bg-blue-500` tw`bg-blue-600` tw`bg-blue-700` tw`bg-blue-800` tw`bg-blue-900` tw`bg-indigo-50` tw`bg-indigo-100` tw`bg-indigo-200` tw`bg-indigo-300` tw`bg-indigo-400` tw`bg-indigo-500` tw`bg-indigo-600` tw`bg-indigo-700` tw`bg-indigo-800` tw`bg-indigo-900` tw`bg-violet-50` tw`bg-violet-100` tw`bg-violet-200` tw`bg-violet-300` tw`bg-violet-400` tw`bg-violet-500` tw`bg-violet-600` tw`bg-violet-700` tw`bg-violet-800` tw`bg-violet-900` tw`bg-purple-50` tw`bg-purple-100` tw`bg-purple-200` tw`bg-purple-300` tw`bg-purple-400` tw`bg-purple-500` tw`bg-purple-600` tw`bg-purple-700` tw`bg-purple-800` tw`bg-purple-900` tw`bg-fuchsia-50` tw`bg-fuchsia-100` tw`bg-fuchsia-200` tw`bg-fuchsia-300` tw`bg-fuchsia-400` tw`bg-fuchsia-500` tw`bg-fuchsia-600` tw`bg-fuchsia-700` tw`bg-fuchsia-800` tw`bg-fuchsia-900` tw`bg-pink-50` tw`bg-pink-100` tw`bg-pink-200` tw`bg-pink-300` tw`bg-pink-400` tw`bg-pink-500` tw`bg-pink-600` tw`bg-pink-700` tw`bg-pink-800` tw`bg-pink-900` tw`bg-rose-50` tw`bg-rose-100` tw`bg-rose-200` tw`bg-rose-300` tw`bg-rose-400` tw`bg-rose-500` tw`bg-rose-600` tw`bg-rose-700` tw`bg-rose-800` tw`bg-rose-900` tw`bg-[#0f0] bg-[#ff0000] bg-[#0000ffcc]` tw`bg-[#0000ffcc]` tw`bg-[rgb(123,123,123)] bg-[rgba(123,123,123,0.5)]` tw`bg-[hsl(0,100%,50%)] bg-[hsla(0,100%,50%,0.3)]` tw`bg-[url('/img/hero-pattern.svg')]` tw`bg-red-500/25` tw`bg-red-500/fromConfig` tw`bg-red-500/fromConfig/25` tw`bg-red-500/fromConfig/[.555]` tw`bg-red-500/fromConfig/[var(--myvar)]` tw`bg-red-500/[.555]` tw`bg-red-500/[var(--myvar)]` tw`bg-[theme('colors.red.500')]` tw`bg-[theme('colors.red.500')]/20` tw`bg-electric` tw`bg-electric/25` tw`bg-electric/[.555]` tw`bg-electric/[var(--myvar)]` tw`bg-[theme('colors.electric')]` tw`bg-[theme('colors.electric')]/20` tw`bg-[color:custom]` ================================================ FILE: tests/__fixtures__/utilitiesBackgrounds/backgroundImage.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/background-image theme`backgroundImage` tw`bg-none` tw`bg-gradient-to-t` tw`bg-gradient-to-tr` tw`bg-gradient-to-r` tw`bg-gradient-to-br` tw`bg-gradient-to-b` tw`bg-gradient-to-bl` tw`bg-gradient-to-l` tw`bg-gradient-to-tl` tw`bg-[image:custom]` ================================================ FILE: tests/__fixtures__/utilitiesBackgrounds/backgroundOpacity.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/background-opacity tw`bg-sky-500/100` tw`bg-sky-500/75` tw`bg-sky-500/50` tw`bg-sky-500/[.06]` tw`bg-opacity-0` tw`bg-opacity-5` tw`bg-opacity-10` tw`bg-opacity-20` tw`bg-opacity-25` tw`bg-opacity-30` tw`bg-opacity-40` tw`bg-opacity-50` tw`bg-opacity-60` tw`bg-opacity-70` tw`bg-opacity-75` tw`bg-opacity-80` tw`bg-opacity-90` tw`bg-opacity-95` tw`bg-opacity-100` tw`bg-opacity-[0.11]` tw`bg-opacity-[var(--value)]` ================================================ FILE: tests/__fixtures__/utilitiesBackgrounds/backgroundOrigin.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/background-origin tw`bg-origin-border` tw`bg-origin-padding` tw`bg-origin-content` ================================================ FILE: tests/__fixtures__/utilitiesBackgrounds/backgroundPosition.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/background-position tw`bg-bottom` tw`bg-center` tw`bg-left` tw`bg-left-bottom` tw`bg-left-top` tw`bg-right` tw`bg-right-bottom` tw`bg-right-top` tw`bg-top` tw`bg-[position:200px 100px]` tw`bg-[position:var(--value)]` tw`bg-[center top 1rem]` ================================================ FILE: tests/__fixtures__/utilitiesBackgrounds/backgroundRepeat.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/background-repeat theme`backgroundPosition` tw`bg-repeat` tw`bg-no-repeat` tw`bg-repeat-x` tw`bg-repeat-y` tw`bg-repeat-round` tw`bg-repeat-space` ================================================ FILE: tests/__fixtures__/utilitiesBackgrounds/backgroundSize.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/background-size theme`backgroundSize` tw`bg-auto` tw`bg-cover` tw`bg-contain` tw`bg-[length:var(--value)]` ================================================ FILE: tests/__fixtures__/utilitiesBackgrounds/gradientColorStops.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/gradient-color-stops theme`gradientColorStops` tw`from-inherit` tw`from-current` tw`from-transparent` tw`from-black` tw`from-white` tw`from-slate-50` tw`from-slate-100` tw`from-slate-200` tw`from-slate-300` tw`from-slate-400` tw`from-slate-500` tw`from-slate-600` tw`from-slate-700` tw`from-slate-800` tw`from-slate-900` tw`from-gray-50` tw`from-gray-100` tw`from-gray-200` tw`from-gray-300` tw`from-gray-400` tw`from-gray-500` tw`from-gray-600` tw`from-gray-700` tw`from-gray-800` tw`from-gray-900` tw`from-zinc-50` tw`from-zinc-100` tw`from-zinc-200` tw`from-zinc-300` tw`from-zinc-400` tw`from-zinc-500` tw`from-zinc-600` tw`from-zinc-700` tw`from-zinc-800` tw`from-zinc-900` tw`from-neutral-50` tw`from-neutral-100` tw`from-neutral-200` tw`from-neutral-300` tw`from-neutral-400` tw`from-neutral-500` tw`from-neutral-600` tw`from-neutral-700` tw`from-neutral-800` tw`from-neutral-900` tw`from-stone-50` tw`from-stone-100` tw`from-stone-200` tw`from-stone-300` tw`from-stone-400` tw`from-stone-500` tw`from-stone-600` tw`from-stone-700` tw`from-stone-800` tw`from-stone-900` tw`from-red-50` tw`from-red-100` tw`from-red-200` tw`from-red-300` tw`from-red-400` tw`from-red-500` tw`from-red-600` tw`from-red-700` tw`from-red-800` tw`from-red-900` tw`from-orange-50` tw`from-orange-100` tw`from-orange-200` tw`from-orange-300` tw`from-orange-400` tw`from-orange-500` tw`from-orange-600` tw`from-orange-700` tw`from-orange-800` tw`from-orange-900` tw`from-amber-50` tw`from-amber-100` tw`from-amber-200` tw`from-amber-300` tw`from-amber-400` tw`from-amber-500` tw`from-amber-600` tw`from-amber-700` tw`from-amber-800` tw`from-amber-900` tw`from-yellow-50` tw`from-yellow-100` tw`from-yellow-200` tw`from-yellow-300` tw`from-yellow-400` tw`from-yellow-500` tw`from-yellow-600` tw`from-yellow-700` tw`from-yellow-800` tw`from-yellow-900` tw`from-lime-50` tw`from-lime-100` tw`from-lime-200` tw`from-lime-300` tw`from-lime-400` tw`from-lime-500` tw`from-lime-600` tw`from-lime-700` tw`from-lime-800` tw`from-lime-900` tw`from-green-50` tw`from-green-100` tw`from-green-200` tw`from-green-300` tw`from-green-400` tw`from-green-500` tw`from-green-600` tw`from-green-700` tw`from-green-800` tw`from-green-900` tw`from-emerald-50` tw`from-emerald-100` tw`from-emerald-200` tw`from-emerald-300` tw`from-emerald-400` tw`from-emerald-500` tw`from-emerald-600` tw`from-emerald-700` tw`from-emerald-800` tw`from-emerald-900` tw`from-teal-50` tw`from-teal-100` tw`from-teal-200` tw`from-teal-300` tw`from-teal-400` tw`from-teal-500` tw`from-teal-600` tw`from-teal-700` tw`from-teal-800` tw`from-teal-900` tw`from-cyan-50` tw`from-cyan-100` tw`from-cyan-200` tw`from-cyan-300` tw`from-cyan-400` tw`from-cyan-500` tw`from-cyan-600` tw`from-cyan-700` tw`from-cyan-800` tw`from-cyan-900` tw`from-sky-50` tw`from-sky-100` tw`from-sky-200` tw`from-sky-300` tw`from-sky-400` tw`from-sky-500` tw`from-sky-600` tw`from-sky-700` tw`from-sky-800` tw`from-sky-900` tw`from-blue-50` tw`from-blue-100` tw`from-blue-200` tw`from-blue-300` tw`from-blue-400` tw`from-blue-500` tw`from-blue-600` tw`from-blue-700` tw`from-blue-800` tw`from-blue-900` tw`from-indigo-50` tw`from-indigo-100` tw`from-indigo-200` tw`from-indigo-300` tw`from-indigo-400` tw`from-indigo-500` tw`from-indigo-600` tw`from-indigo-700` tw`from-indigo-800` tw`from-indigo-900` tw`from-violet-50` tw`from-violet-100` tw`from-violet-200` tw`from-violet-300` tw`from-violet-400` tw`from-violet-500` tw`from-violet-600` tw`from-violet-700` tw`from-violet-800` tw`from-violet-900` tw`from-purple-50` tw`from-purple-100` tw`from-purple-200` tw`from-purple-300` tw`from-purple-400` tw`from-purple-500` tw`from-purple-600` tw`from-purple-700` tw`from-purple-800` tw`from-purple-900` tw`from-fuchsia-50` tw`from-fuchsia-100` tw`from-fuchsia-200` tw`from-fuchsia-300` tw`from-fuchsia-400` tw`from-fuchsia-500` tw`from-fuchsia-600` tw`from-fuchsia-700` tw`from-fuchsia-800` tw`from-fuchsia-900` tw`from-pink-50` tw`from-pink-100` tw`from-pink-200` tw`from-pink-300` tw`from-pink-400` tw`from-pink-500` tw`from-pink-600` tw`from-pink-700` tw`from-pink-800` tw`from-pink-900` tw`from-rose-50` tw`from-rose-100` tw`from-rose-200` tw`from-rose-300` tw`from-rose-400` tw`from-rose-500` tw`from-rose-600` tw`from-rose-700` tw`from-rose-800` tw`from-rose-900` tw`via-inherit` tw`via-current` tw`via-transparent` tw`via-black` tw`via-white` tw`via-slate-50` tw`via-slate-100` tw`via-slate-200` tw`via-slate-300` tw`via-slate-400` tw`via-slate-500` tw`via-slate-600` tw`via-slate-700` tw`via-slate-800` tw`via-slate-900` tw`via-gray-50` tw`via-gray-100` tw`via-gray-200` tw`via-gray-300` tw`via-gray-400` tw`via-gray-500` tw`via-gray-600` tw`via-gray-700` tw`via-gray-800` tw`via-gray-900` tw`via-zinc-50` tw`via-zinc-100` tw`via-zinc-200` tw`via-zinc-300` tw`via-zinc-400` tw`via-zinc-500` tw`via-zinc-600` tw`via-zinc-700` tw`via-zinc-800` tw`via-zinc-900` tw`via-neutral-50` tw`via-neutral-100` tw`via-neutral-200` tw`via-neutral-300` tw`via-neutral-400` tw`via-neutral-500` tw`via-neutral-600` tw`via-neutral-700` tw`via-neutral-800` tw`via-neutral-900` tw`via-stone-50` tw`via-stone-100` tw`via-stone-200` tw`via-stone-300` tw`via-stone-400` tw`via-stone-500` tw`via-stone-600` tw`via-stone-700` tw`via-stone-800` tw`via-stone-900` tw`via-red-50` tw`via-red-100` tw`via-red-200` tw`via-red-300` tw`via-red-400` tw`via-red-500` tw`via-red-600` tw`via-red-700` tw`via-red-800` tw`via-red-900` tw`via-orange-50` tw`via-orange-100` tw`via-orange-200` tw`via-orange-300` tw`via-orange-400` tw`via-orange-500` tw`via-orange-600` tw`via-orange-700` tw`via-orange-800` tw`via-orange-900` tw`via-amber-50` tw`via-amber-100` tw`via-amber-200` tw`via-amber-300` tw`via-amber-400` tw`via-amber-500` tw`via-amber-600` tw`via-amber-700` tw`via-amber-800` tw`via-amber-900` tw`via-yellow-50` tw`via-yellow-100` tw`via-yellow-200` tw`via-yellow-300` tw`via-yellow-400` tw`via-yellow-500` tw`via-yellow-600` tw`via-yellow-700` tw`via-yellow-800` tw`via-yellow-900` tw`via-lime-50` tw`via-lime-100` tw`via-lime-200` tw`via-lime-300` tw`via-lime-400` tw`via-lime-500` tw`via-lime-600` tw`via-lime-700` tw`via-lime-800` tw`via-lime-900` tw`via-green-50` tw`via-green-100` tw`via-green-200` tw`via-green-300` tw`via-green-400` tw`via-green-500` tw`via-green-600` tw`via-green-700` tw`via-green-800` tw`via-green-900` tw`via-emerald-50` tw`via-emerald-100` tw`via-emerald-200` tw`via-emerald-300` tw`via-emerald-400` tw`via-emerald-500` tw`via-emerald-600` tw`via-emerald-700` tw`via-emerald-800` tw`via-emerald-900` tw`via-teal-50` tw`via-teal-100` tw`via-teal-200` tw`via-teal-300` tw`via-teal-400` tw`via-teal-500` tw`via-teal-600` tw`via-teal-700` tw`via-teal-800` tw`via-teal-900` tw`via-cyan-50` tw`via-cyan-100` tw`via-cyan-200` tw`via-cyan-300` tw`via-cyan-400` tw`via-cyan-500` tw`via-cyan-600` tw`via-cyan-700` tw`via-cyan-800` tw`via-cyan-900` tw`via-sky-50` tw`via-sky-100` tw`via-sky-200` tw`via-sky-300` tw`via-sky-400` tw`via-sky-500` tw`via-sky-600` tw`via-sky-700` tw`via-sky-800` tw`via-sky-900` tw`via-blue-50` tw`via-blue-100` tw`via-blue-200` tw`via-blue-300` tw`via-blue-400` tw`via-blue-500` tw`via-blue-600` tw`via-blue-700` tw`via-blue-800` tw`via-blue-900` tw`via-indigo-50` tw`via-indigo-100` tw`via-indigo-200` tw`via-indigo-300` tw`via-indigo-400` tw`via-indigo-500` tw`via-indigo-600` tw`via-indigo-700` tw`via-indigo-800` tw`via-indigo-900` tw`via-violet-50` tw`via-violet-100` tw`via-violet-200` tw`via-violet-300` tw`via-violet-400` tw`via-violet-500` tw`via-violet-600` tw`via-violet-700` tw`via-violet-800` tw`via-violet-900` tw`via-purple-50` tw`via-purple-100` tw`via-purple-200` tw`via-purple-300` tw`via-purple-400` tw`via-purple-500` tw`via-purple-600` tw`via-purple-700` tw`via-purple-800` tw`via-purple-900` tw`via-fuchsia-50` tw`via-fuchsia-100` tw`via-fuchsia-200` tw`via-fuchsia-300` tw`via-fuchsia-400` tw`via-fuchsia-500` tw`via-fuchsia-600` tw`via-fuchsia-700` tw`via-fuchsia-800` tw`via-fuchsia-900` tw`via-pink-50` tw`via-pink-100` tw`via-pink-200` tw`via-pink-300` tw`via-pink-400` tw`via-pink-500` tw`via-pink-600` tw`via-pink-700` tw`via-pink-800` tw`via-pink-900` tw`via-rose-50` tw`via-rose-100` tw`via-rose-200` tw`via-rose-300` tw`via-rose-400` tw`via-rose-500` tw`via-rose-600` tw`via-rose-700` tw`via-rose-800` tw`via-rose-900` tw`to-inherit` tw`to-current` tw`to-transparent` tw`to-black` tw`to-white` tw`to-slate-50` tw`to-slate-100` tw`to-slate-200` tw`to-slate-300` tw`to-slate-400` tw`to-slate-500` tw`to-slate-600` tw`to-slate-700` tw`to-slate-800` tw`to-slate-900` tw`to-gray-50` tw`to-gray-100` tw`to-gray-200` tw`to-gray-300` tw`to-gray-400` tw`to-gray-500` tw`to-gray-600` tw`to-gray-700` tw`to-gray-800` tw`to-gray-900` tw`to-zinc-50` tw`to-zinc-100` tw`to-zinc-200` tw`to-zinc-300` tw`to-zinc-400` tw`to-zinc-500` tw`to-zinc-600` tw`to-zinc-700` tw`to-zinc-800` tw`to-zinc-900` tw`to-neutral-50` tw`to-neutral-100` tw`to-neutral-200` tw`to-neutral-300` tw`to-neutral-400` tw`to-neutral-500` tw`to-neutral-600` tw`to-neutral-700` tw`to-neutral-800` tw`to-neutral-900` tw`to-stone-50` tw`to-stone-100` tw`to-stone-200` tw`to-stone-300` tw`to-stone-400` tw`to-stone-500` tw`to-stone-600` tw`to-stone-700` tw`to-stone-800` tw`to-stone-900` tw`to-red-50` tw`to-red-100` tw`to-red-200` tw`to-red-300` tw`to-red-400` tw`to-red-500` tw`to-red-600` tw`to-red-700` tw`to-red-800` tw`to-red-900` tw`to-orange-50` tw`to-orange-100` tw`to-orange-200` tw`to-orange-300` tw`to-orange-400` tw`to-orange-500` tw`to-orange-600` tw`to-orange-700` tw`to-orange-800` tw`to-orange-900` tw`to-amber-50` tw`to-amber-100` tw`to-amber-200` tw`to-amber-300` tw`to-amber-400` tw`to-amber-500` tw`to-amber-600` tw`to-amber-700` tw`to-amber-800` tw`to-amber-900` tw`to-yellow-50` tw`to-yellow-100` tw`to-yellow-200` tw`to-yellow-300` tw`to-yellow-400` tw`to-yellow-500` tw`to-yellow-600` tw`to-yellow-700` tw`to-yellow-800` tw`to-yellow-900` tw`to-lime-50` tw`to-lime-100` tw`to-lime-200` tw`to-lime-300` tw`to-lime-400` tw`to-lime-500` tw`to-lime-600` tw`to-lime-700` tw`to-lime-800` tw`to-lime-900` tw`to-green-50` tw`to-green-100` tw`to-green-200` tw`to-green-300` tw`to-green-400` tw`to-green-500` tw`to-green-600` tw`to-green-700` tw`to-green-800` tw`to-green-900` tw`to-emerald-50` tw`to-emerald-100` tw`to-emerald-200` tw`to-emerald-300` tw`to-emerald-400` tw`to-emerald-500` tw`to-emerald-600` tw`to-emerald-700` tw`to-emerald-800` tw`to-emerald-900` tw`to-teal-50` tw`to-teal-100` tw`to-teal-200` tw`to-teal-300` tw`to-teal-400` tw`to-teal-500` tw`to-teal-600` tw`to-teal-700` tw`to-teal-800` tw`to-teal-900` tw`to-cyan-50` tw`to-cyan-100` tw`to-cyan-200` tw`to-cyan-300` tw`to-cyan-400` tw`to-cyan-500` tw`to-cyan-600` tw`to-cyan-700` tw`to-cyan-800` tw`to-cyan-900` tw`to-sky-50` tw`to-sky-100` tw`to-sky-200` tw`to-sky-300` tw`to-sky-400` tw`to-sky-500` tw`to-sky-600` tw`to-sky-700` tw`to-sky-800` tw`to-sky-900` tw`to-blue-50` tw`to-blue-100` tw`to-blue-200` tw`to-blue-300` tw`to-blue-400` tw`to-blue-500` tw`to-blue-600` tw`to-blue-700` tw`to-blue-800` tw`to-blue-900` tw`to-indigo-50` tw`to-indigo-100` tw`to-indigo-200` tw`to-indigo-300` tw`to-indigo-400` tw`to-indigo-500` tw`to-indigo-600` tw`to-indigo-700` tw`to-indigo-800` tw`to-indigo-900` tw`to-violet-50` tw`to-violet-100` tw`to-violet-200` tw`to-violet-300` tw`to-violet-400` tw`to-violet-500` tw`to-violet-600` tw`to-violet-700` tw`to-violet-800` tw`to-violet-900` tw`to-purple-50` tw`to-purple-100` tw`to-purple-200` tw`to-purple-300` tw`to-purple-400` tw`to-purple-500` tw`to-purple-600` tw`to-purple-700` tw`to-purple-800` tw`to-purple-900` tw`to-fuchsia-50` tw`to-fuchsia-100` tw`to-fuchsia-200` tw`to-fuchsia-300` tw`to-fuchsia-400` tw`to-fuchsia-500` tw`to-fuchsia-600` tw`to-fuchsia-700` tw`to-fuchsia-800` tw`to-fuchsia-900` tw`to-pink-50` tw`to-pink-100` tw`to-pink-200` tw`to-pink-300` tw`to-pink-400` tw`to-pink-500` tw`to-pink-600` tw`to-pink-700` tw`to-pink-800` tw`to-pink-900` tw`to-rose-50` tw`to-rose-100` tw`to-rose-200` tw`to-rose-300` tw`to-rose-400` tw`to-rose-500` tw`to-rose-600` tw`to-rose-700` tw`to-rose-800` tw`to-rose-900` tw`bg-gradient-to-t from-electric to-electric text-purple-500 text-opacity-50` tw`bg-gradient-to-r from-indigo-500` tw`bg-gradient-to-r from-cyan-500 to-blue-500` tw`bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500` tw`bg-gradient-to-r from-green-400 to-blue-500 hover:from-pink-500 hover:to-yellow-500` tw`bg-gradient-to-r from-purple-400 md:from-yellow-500` tw`from-[#da5b66] via-[#da5b66] to-[#da5b66]` tw`from-[var(--color)] via-[var(--color)] to-[var(--color)]` tw`from-red-500` tw`from-red-500/25` tw`from-red-500/fromConfig` tw`from-red-500/fromConfig/25` tw`from-red-500/fromConfig/[.555]` tw`from-red-500/fromConfig/[var(--myvar)]` tw`from-red-500/[.555]` tw`from-red-500/[var(--myvar)]` tw`from-[theme('colors.red.500')]` tw`from-electric` tw`from-electric/25` tw`from-electric/[.555]` tw`from-electric/[var(--myvar)]` tw`from-[theme('colors.electric')]` tw`via-red-500` tw`via-red-500/25` tw`via-red-500/fromConfig` tw`via-red-500/[.555]` tw`via-red-500/[var(--myvar)]` tw`via-[theme('colors.red.500')]` tw`via-electric` tw`via-electric/25` tw`via-electric/[.555]` tw`via-electric/[var(--myvar)]` tw`via-[theme('colors.electric')]` tw`to-red-500/25` tw`to-red-500/fromConfig` tw`to-red-500/[.555]` tw`to-red-500/[var(--myvar)]` tw`to-[theme('colors.red.500')]` tw`to-electric` tw`to-electric/25` tw`to-electric/[.555]` tw`to-electric/[var(--myvar)]` tw`to-[theme('colors.electric')]` ================================================ FILE: tests/__fixtures__/utilitiesBackgrounds/tailwind.config.js ================================================ module.exports = { theme: { extend: { colors: { 'red-500/fromConfig': '#000', electric: ({ opacityVariable, opacityValue }) => { if (opacityValue !== undefined) { return `rgba(219, 0, 255, ${opacityValue})` } if (opacityVariable !== undefined) { return `rgba(219, 0, 255, var(${opacityVariable}, 1))` } return `rgb(219, 0, 255)` }, }, }, }, } ================================================ FILE: tests/__fixtures__/utilitiesBorders/borderColor.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/border-color theme`borderColor.` tw`border-inherit` tw`border-current` tw`border-transparent` tw`border-black` tw`border-white` tw`border-slate-50` tw`border-slate-100` tw`border-slate-200` tw`border-slate-300` tw`border-slate-400` tw`border-slate-500` tw`border-slate-600` tw`border-slate-700` tw`border-slate-800` tw`border-slate-900` tw`border-gray-50` tw`border-gray-100` tw`border-gray-200` tw`border-gray-300` tw`border-gray-400` tw`border-gray-500` tw`border-gray-600` tw`border-gray-700` tw`border-gray-800` tw`border-gray-900` tw`border-zinc-50` tw`border-zinc-100` tw`border-zinc-200` tw`border-zinc-300` tw`border-zinc-400` tw`border-zinc-500` tw`border-zinc-600` tw`border-zinc-700` tw`border-zinc-800` tw`border-zinc-900` tw`border-neutral-50` tw`border-neutral-100` tw`border-neutral-200` tw`border-neutral-300` tw`border-neutral-400` tw`border-neutral-500` tw`border-neutral-600` tw`border-neutral-700` tw`border-neutral-800` tw`border-neutral-900` tw`border-stone-50` tw`border-stone-100` tw`border-stone-200` tw`border-stone-300` tw`border-stone-400` tw`border-stone-500` tw`border-stone-600` tw`border-stone-700` tw`border-stone-800` tw`border-stone-900` tw`border-red-50` tw`border-red-100` tw`border-red-200` tw`border-red-300` tw`border-red-400` tw`border-red-500` tw`border-red-600` tw`border-red-700` tw`border-red-800` tw`border-red-900` tw`border-orange-50` tw`border-orange-100` tw`border-orange-200` tw`border-orange-300` tw`border-orange-400` tw`border-orange-500` tw`border-orange-600` tw`border-orange-700` tw`border-orange-800` tw`border-orange-900` tw`border-amber-50` tw`border-amber-100` tw`border-amber-200` tw`border-amber-300` tw`border-amber-400` tw`border-amber-500` tw`border-amber-600` tw`border-amber-700` tw`border-amber-800` tw`border-amber-900` tw`border-yellow-50` tw`border-yellow-100` tw`border-yellow-200` tw`border-yellow-300` tw`border-yellow-400` tw`border-yellow-500` tw`border-yellow-600` tw`border-yellow-700` tw`border-yellow-800` tw`border-yellow-900` tw`border-lime-50` tw`border-lime-100` tw`border-lime-200` tw`border-lime-300` tw`border-lime-400` tw`border-lime-500` tw`border-lime-600` tw`border-lime-700` tw`border-lime-800` tw`border-lime-900` tw`border-green-50` tw`border-green-100` tw`border-green-200` tw`border-green-300` tw`border-green-400` tw`border-green-500` tw`border-green-600` tw`border-green-700` tw`border-green-800` tw`border-green-900` tw`border-emerald-50` tw`border-emerald-100` tw`border-emerald-200` tw`border-emerald-300` tw`border-emerald-400` tw`border-emerald-500` tw`border-emerald-600` tw`border-emerald-700` tw`border-emerald-800` tw`border-emerald-900` tw`border-teal-50` tw`border-teal-100` tw`border-teal-200` tw`border-teal-300` tw`border-teal-400` tw`border-teal-500` tw`border-teal-600` tw`border-teal-700` tw`border-teal-800` tw`border-teal-900` tw`border-cyan-50` tw`border-cyan-100` tw`border-cyan-200` tw`border-cyan-300` tw`border-cyan-400` tw`border-cyan-500` tw`border-cyan-600` tw`border-cyan-700` tw`border-cyan-800` tw`border-cyan-900` tw`border-sky-50` tw`border-sky-100` tw`border-sky-200` tw`border-sky-300` tw`border-sky-400` tw`border-sky-500` tw`border-sky-600` tw`border-sky-700` tw`border-sky-800` tw`border-sky-900` tw`border-blue-50` tw`border-blue-100` tw`border-blue-200` tw`border-blue-300` tw`border-blue-400` tw`border-blue-500` tw`border-blue-600` tw`border-blue-700` tw`border-blue-800` tw`border-blue-900` tw`border-indigo-50` tw`border-indigo-100` tw`border-indigo-200` tw`border-indigo-300` tw`border-indigo-400` tw`border-indigo-500` tw`border-indigo-600` tw`border-indigo-700` tw`border-indigo-800` tw`border-indigo-900` tw`border-violet-50` tw`border-violet-100` tw`border-violet-200` tw`border-violet-300` tw`border-violet-400` tw`border-violet-500` tw`border-violet-600` tw`border-violet-700` tw`border-violet-800` tw`border-violet-900` tw`border-purple-50` tw`border-purple-100` tw`border-purple-200` tw`border-purple-300` tw`border-purple-400` tw`border-purple-500` tw`border-purple-600` tw`border-purple-700` tw`border-purple-800` tw`border-purple-900` tw`border-fuchsia-50` tw`border-fuchsia-100` tw`border-fuchsia-200` tw`border-fuchsia-300` tw`border-fuchsia-400` tw`border-fuchsia-500` tw`border-fuchsia-600` tw`border-fuchsia-700` tw`border-fuchsia-800` tw`border-fuchsia-900` tw`border-pink-50` tw`border-pink-100` tw`border-pink-200` tw`border-pink-300` tw`border-pink-400` tw`border-pink-500` tw`border-pink-600` tw`border-pink-700` tw`border-pink-800` tw`border-pink-900` tw`border-rose-50` tw`border-rose-100` tw`border-rose-200` tw`border-rose-300` tw`border-rose-400` tw`border-rose-500` tw`border-rose-600` tw`border-rose-700` tw`border-rose-800` tw`border-rose-900` tw`border-x-inherit` tw`border-x-current` tw`border-x-transparent` tw`border-x-black` tw`border-x-white` tw`border-x-slate-50` tw`border-x-slate-100` tw`border-x-slate-200` tw`border-x-slate-300` tw`border-x-slate-400` tw`border-x-slate-500` tw`border-x-slate-600` tw`border-x-slate-700` tw`border-x-slate-800` tw`border-x-slate-900` tw`border-x-gray-50` tw`border-x-gray-100` tw`border-x-gray-200` tw`border-x-gray-300` tw`border-x-gray-400` tw`border-x-gray-500` tw`border-x-gray-600` tw`border-x-gray-700` tw`border-x-gray-800` tw`border-x-gray-900` tw`border-x-zinc-50` tw`border-x-zinc-100` tw`border-x-zinc-200` tw`border-x-zinc-300` tw`border-x-zinc-400` tw`border-x-zinc-500` tw`border-x-zinc-600` tw`border-x-zinc-700` tw`border-x-zinc-800` tw`border-x-zinc-900` tw`border-x-neutral-50` tw`border-x-neutral-100` tw`border-x-neutral-200` tw`border-x-neutral-300` tw`border-x-neutral-400` tw`border-x-neutral-500` tw`border-x-neutral-600` tw`border-x-neutral-700` tw`border-x-neutral-800` tw`border-x-neutral-900` tw`border-x-stone-50` tw`border-x-stone-100` tw`border-x-stone-200` tw`border-x-stone-300` tw`border-x-stone-400` tw`border-x-stone-500` tw`border-x-stone-600` tw`border-x-stone-700` tw`border-x-stone-800` tw`border-x-stone-900` tw`border-x-red-50` tw`border-x-red-100` tw`border-x-red-200` tw`border-x-red-300` tw`border-x-red-400` tw`border-x-red-500` tw`border-x-red-600` tw`border-x-red-700` tw`border-x-red-800` tw`border-x-red-900` tw`border-x-orange-50` tw`border-x-orange-100` tw`border-x-orange-200` tw`border-x-orange-300` tw`border-x-orange-400` tw`border-x-orange-500` tw`border-x-orange-600` tw`border-x-orange-700` tw`border-x-orange-800` tw`border-x-orange-900` tw`border-x-amber-50` tw`border-x-amber-100` tw`border-x-amber-200` tw`border-x-amber-300` tw`border-x-amber-400` tw`border-x-amber-500` tw`border-x-amber-600` tw`border-x-amber-700` tw`border-x-amber-800` tw`border-x-amber-900` tw`border-x-yellow-50` tw`border-x-yellow-100` tw`border-x-yellow-200` tw`border-x-yellow-300` tw`border-x-yellow-400` tw`border-x-yellow-500` tw`border-x-yellow-600` tw`border-x-yellow-700` tw`border-x-yellow-800` tw`border-x-yellow-900` tw`border-x-lime-50` tw`border-x-lime-100` tw`border-x-lime-200` tw`border-x-lime-300` tw`border-x-lime-400` tw`border-x-lime-500` tw`border-x-lime-600` tw`border-x-lime-700` tw`border-x-lime-800` tw`border-x-lime-900` tw`border-x-green-50` tw`border-x-green-100` tw`border-x-green-200` tw`border-x-green-300` tw`border-x-green-400` tw`border-x-green-500` tw`border-x-green-600` tw`border-x-green-700` tw`border-x-green-800` tw`border-x-green-900` tw`border-x-emerald-50` tw`border-x-emerald-100` tw`border-x-emerald-200` tw`border-x-emerald-300` tw`border-x-emerald-400` tw`border-x-emerald-500` tw`border-x-emerald-600` tw`border-x-emerald-700` tw`border-x-emerald-800` tw`border-x-emerald-900` tw`border-x-teal-50` tw`border-x-teal-100` tw`border-x-teal-200` tw`border-x-teal-300` tw`border-x-teal-400` tw`border-x-teal-500` tw`border-x-teal-600` tw`border-x-teal-700` tw`border-x-teal-800` tw`border-x-teal-900` tw`border-x-cyan-50` tw`border-x-cyan-100` tw`border-x-cyan-200` tw`border-x-cyan-300` tw`border-x-cyan-400` tw`border-x-cyan-500` tw`border-x-cyan-600` tw`border-x-cyan-700` tw`border-x-cyan-800` tw`border-x-cyan-900` tw`border-x-sky-50` tw`border-x-sky-100` tw`border-x-sky-200` tw`border-x-sky-300` tw`border-x-sky-400` tw`border-x-sky-500` tw`border-x-sky-600` tw`border-x-sky-700` tw`border-x-sky-800` tw`border-x-sky-900` tw`border-x-blue-50` tw`border-x-blue-100` tw`border-x-blue-200` tw`border-x-blue-300` tw`border-x-blue-400` tw`border-x-blue-500` tw`border-x-blue-600` tw`border-x-blue-700` tw`border-x-blue-800` tw`border-x-blue-900` tw`border-x-indigo-50` tw`border-x-indigo-100` tw`border-x-indigo-200` tw`border-x-indigo-300` tw`border-x-indigo-400` tw`border-x-indigo-500` tw`border-x-indigo-600` tw`border-x-indigo-700` tw`border-x-indigo-800` tw`border-x-indigo-900` tw`border-x-violet-50` tw`border-x-violet-100` tw`border-x-violet-200` tw`border-x-violet-300` tw`border-x-violet-400` tw`border-x-violet-500` tw`border-x-violet-600` tw`border-x-violet-700` tw`border-x-violet-800` tw`border-x-violet-900` tw`border-x-purple-50` tw`border-x-purple-100` tw`border-x-purple-200` tw`border-x-purple-300` tw`border-x-purple-400` tw`border-x-purple-500` tw`border-x-purple-600` tw`border-x-purple-700` tw`border-x-purple-800` tw`border-x-purple-900` tw`border-x-fuchsia-50` tw`border-x-fuchsia-100` tw`border-x-fuchsia-200` tw`border-x-fuchsia-300` tw`border-x-fuchsia-400` tw`border-x-fuchsia-500` tw`border-x-fuchsia-600` tw`border-x-fuchsia-700` tw`border-x-fuchsia-800` tw`border-x-fuchsia-900` tw`border-x-pink-50` tw`border-x-pink-100` tw`border-x-pink-200` tw`border-x-pink-300` tw`border-x-pink-400` tw`border-x-pink-500` tw`border-x-pink-600` tw`border-x-pink-700` tw`border-x-pink-800` tw`border-x-pink-900` tw`border-x-rose-50` tw`border-x-rose-100` tw`border-x-rose-200` tw`border-x-rose-300` tw`border-x-rose-400` tw`border-x-rose-500` tw`border-x-rose-600` tw`border-x-rose-700` tw`border-x-rose-800` tw`border-x-rose-900` tw`border-y-inherit` tw`border-y-current` tw`border-y-transparent` tw`border-y-black` tw`border-y-white` tw`border-y-slate-50` tw`border-y-slate-100` tw`border-y-slate-200` tw`border-y-slate-300` tw`border-y-slate-400` tw`border-y-slate-500` tw`border-y-slate-600` tw`border-y-slate-700` tw`border-y-slate-800` tw`border-y-slate-900` tw`border-y-gray-50` tw`border-y-gray-100` tw`border-y-gray-200` tw`border-y-gray-300` tw`border-y-gray-400` tw`border-y-gray-500` tw`border-y-gray-600` tw`border-y-gray-700` tw`border-y-gray-800` tw`border-y-gray-900` tw`border-y-zinc-50` tw`border-y-zinc-100` tw`border-y-zinc-200` tw`border-y-zinc-300` tw`border-y-zinc-400` tw`border-y-zinc-500` tw`border-y-zinc-600` tw`border-y-zinc-700` tw`border-y-zinc-800` tw`border-y-zinc-900` tw`border-y-neutral-50` tw`border-y-neutral-100` tw`border-y-neutral-200` tw`border-y-neutral-300` tw`border-y-neutral-400` tw`border-y-neutral-500` tw`border-y-neutral-600` tw`border-y-neutral-700` tw`border-y-neutral-800` tw`border-y-neutral-900` tw`border-y-stone-50` tw`border-y-stone-100` tw`border-y-stone-200` tw`border-y-stone-300` tw`border-y-stone-400` tw`border-y-stone-500` tw`border-y-stone-600` tw`border-y-stone-700` tw`border-y-stone-800` tw`border-y-stone-900` tw`border-y-red-50` tw`border-y-red-100` tw`border-y-red-200` tw`border-y-red-300` tw`border-y-red-400` tw`border-y-red-500` tw`border-y-red-600` tw`border-y-red-700` tw`border-y-red-800` tw`border-y-red-900` tw`border-y-orange-50` tw`border-y-orange-100` tw`border-y-orange-200` tw`border-y-orange-300` tw`border-y-orange-400` tw`border-y-orange-500` tw`border-y-orange-600` tw`border-y-orange-700` tw`border-y-orange-800` tw`border-y-orange-900` tw`border-y-amber-50` tw`border-y-amber-100` tw`border-y-amber-200` tw`border-y-amber-300` tw`border-y-amber-400` tw`border-y-amber-500` tw`border-y-amber-600` tw`border-y-amber-700` tw`border-y-amber-800` tw`border-y-amber-900` tw`border-y-yellow-50` tw`border-y-yellow-100` tw`border-y-yellow-200` tw`border-y-yellow-300` tw`border-y-yellow-400` tw`border-y-yellow-500` tw`border-y-yellow-600` tw`border-y-yellow-700` tw`border-y-yellow-800` tw`border-y-yellow-900` tw`border-y-lime-50` tw`border-y-lime-100` tw`border-y-lime-200` tw`border-y-lime-300` tw`border-y-lime-400` tw`border-y-lime-500` tw`border-y-lime-600` tw`border-y-lime-700` tw`border-y-lime-800` tw`border-y-lime-900` tw`border-y-green-50` tw`border-y-green-100` tw`border-y-green-200` tw`border-y-green-300` tw`border-y-green-400` tw`border-y-green-500` tw`border-y-green-600` tw`border-y-green-700` tw`border-y-green-800` tw`border-y-green-900` tw`border-y-emerald-50` tw`border-y-emerald-100` tw`border-y-emerald-200` tw`border-y-emerald-300` tw`border-y-emerald-400` tw`border-y-emerald-500` tw`border-y-emerald-600` tw`border-y-emerald-700` tw`border-y-emerald-800` tw`border-y-emerald-900` tw`border-y-teal-50` tw`border-y-teal-100` tw`border-y-teal-200` tw`border-y-teal-300` tw`border-y-teal-400` tw`border-y-teal-500` tw`border-y-teal-600` tw`border-y-teal-700` tw`border-y-teal-800` tw`border-y-teal-900` tw`border-y-cyan-50` tw`border-y-cyan-100` tw`border-y-cyan-200` tw`border-y-cyan-300` tw`border-y-cyan-400` tw`border-y-cyan-500` tw`border-y-cyan-600` tw`border-y-cyan-700` tw`border-y-cyan-800` tw`border-y-cyan-900` tw`border-y-sky-50` tw`border-y-sky-100` tw`border-y-sky-200` tw`border-y-sky-300` tw`border-y-sky-400` tw`border-y-sky-500` tw`border-y-sky-600` tw`border-y-sky-700` tw`border-y-sky-800` tw`border-y-sky-900` tw`border-y-blue-50` tw`border-y-blue-100` tw`border-y-blue-200` tw`border-y-blue-300` tw`border-y-blue-400` tw`border-y-blue-500` tw`border-y-blue-600` tw`border-y-blue-700` tw`border-y-blue-800` tw`border-y-blue-900` tw`border-y-indigo-50` tw`border-y-indigo-100` tw`border-y-indigo-200` tw`border-y-indigo-300` tw`border-y-indigo-400` tw`border-y-indigo-500` tw`border-y-indigo-600` tw`border-y-indigo-700` tw`border-y-indigo-800` tw`border-y-indigo-900` tw`border-y-violet-50` tw`border-y-violet-100` tw`border-y-violet-200` tw`border-y-violet-300` tw`border-y-violet-400` tw`border-y-violet-500` tw`border-y-violet-600` tw`border-y-violet-700` tw`border-y-violet-800` tw`border-y-violet-900` tw`border-y-purple-50` tw`border-y-purple-100` tw`border-y-purple-200` tw`border-y-purple-300` tw`border-y-purple-400` tw`border-y-purple-500` tw`border-y-purple-600` tw`border-y-purple-700` tw`border-y-purple-800` tw`border-y-purple-900` tw`border-y-fuchsia-50` tw`border-y-fuchsia-100` tw`border-y-fuchsia-200` tw`border-y-fuchsia-300` tw`border-y-fuchsia-400` tw`border-y-fuchsia-500` tw`border-y-fuchsia-600` tw`border-y-fuchsia-700` tw`border-y-fuchsia-800` tw`border-y-fuchsia-900` tw`border-y-pink-50` tw`border-y-pink-100` tw`border-y-pink-200` tw`border-y-pink-300` tw`border-y-pink-400` tw`border-y-pink-500` tw`border-y-pink-600` tw`border-y-pink-700` tw`border-y-pink-800` tw`border-y-pink-900` tw`border-y-rose-50` tw`border-y-rose-100` tw`border-y-rose-200` tw`border-y-rose-300` tw`border-y-rose-400` tw`border-y-rose-500` tw`border-y-rose-600` tw`border-y-rose-700` tw`border-y-rose-800` tw`border-y-rose-900` tw`border-t-inherit` tw`border-t-current` tw`border-t-transparent` tw`border-t-black` tw`border-t-white` tw`border-t-slate-50` tw`border-t-slate-100` tw`border-t-slate-200` tw`border-t-slate-300` tw`border-t-slate-400` tw`border-t-slate-500` tw`border-t-slate-600` tw`border-t-slate-700` tw`border-t-slate-800` tw`border-t-slate-900` tw`border-t-gray-50` tw`border-t-gray-100` tw`border-t-gray-200` tw`border-t-gray-300` tw`border-t-gray-400` tw`border-t-gray-500` tw`border-t-gray-600` tw`border-t-gray-700` tw`border-t-gray-800` tw`border-t-gray-900` tw`border-t-zinc-50` tw`border-t-zinc-100` tw`border-t-zinc-200` tw`border-t-zinc-300` tw`border-t-zinc-400` tw`border-t-zinc-500` tw`border-t-zinc-600` tw`border-t-zinc-700` tw`border-t-zinc-800` tw`border-t-zinc-900` tw`border-t-neutral-50` tw`border-t-neutral-100` tw`border-t-neutral-200` tw`border-t-neutral-300` tw`border-t-neutral-400` tw`border-t-neutral-500` tw`border-t-neutral-600` tw`border-t-neutral-700` tw`border-t-neutral-800` tw`border-t-neutral-900` tw`border-t-stone-50` tw`border-t-stone-100` tw`border-t-stone-200` tw`border-t-stone-300` tw`border-t-stone-400` tw`border-t-stone-500` tw`border-t-stone-600` tw`border-t-stone-700` tw`border-t-stone-800` tw`border-t-stone-900` tw`border-t-red-50` tw`border-t-red-100` tw`border-t-red-200` tw`border-t-red-300` tw`border-t-red-400` tw`border-t-red-500` tw`border-t-red-600` tw`border-t-red-700` tw`border-t-red-800` tw`border-t-red-900` tw`border-t-orange-50` tw`border-t-orange-100` tw`border-t-orange-200` tw`border-t-orange-300` tw`border-t-orange-400` tw`border-t-orange-500` tw`border-t-orange-600` tw`border-t-orange-700` tw`border-t-orange-800` tw`border-t-orange-900` tw`border-t-amber-50` tw`border-t-amber-100` tw`border-t-amber-200` tw`border-t-amber-300` tw`border-t-amber-400` tw`border-t-amber-500` tw`border-t-amber-600` tw`border-t-amber-700` tw`border-t-amber-800` tw`border-t-amber-900` tw`border-t-yellow-50` tw`border-t-yellow-100` tw`border-t-yellow-200` tw`border-t-yellow-300` tw`border-t-yellow-400` tw`border-t-yellow-500` tw`border-t-yellow-600` tw`border-t-yellow-700` tw`border-t-yellow-800` tw`border-t-yellow-900` tw`border-t-lime-50` tw`border-t-lime-100` tw`border-t-lime-200` tw`border-t-lime-300` tw`border-t-lime-400` tw`border-t-lime-500` tw`border-t-lime-600` tw`border-t-lime-700` tw`border-t-lime-800` tw`border-t-lime-900` tw`border-t-green-50` tw`border-t-green-100` tw`border-t-green-200` tw`border-t-green-300` tw`border-t-green-400` tw`border-t-green-500` tw`border-t-green-600` tw`border-t-green-700` tw`border-t-green-800` tw`border-t-green-900` tw`border-t-emerald-50` tw`border-t-emerald-100` tw`border-t-emerald-200` tw`border-t-emerald-300` tw`border-t-emerald-400` tw`border-t-emerald-500` tw`border-t-emerald-600` tw`border-t-emerald-700` tw`border-t-emerald-800` tw`border-t-emerald-900` tw`border-t-teal-50` tw`border-t-teal-100` tw`border-t-teal-200` tw`border-t-teal-300` tw`border-t-teal-400` tw`border-t-teal-500` tw`border-t-teal-600` tw`border-t-teal-700` tw`border-t-teal-800` tw`border-t-teal-900` tw`border-t-cyan-50` tw`border-t-cyan-100` tw`border-t-cyan-200` tw`border-t-cyan-300` tw`border-t-cyan-400` tw`border-t-cyan-500` tw`border-t-cyan-600` tw`border-t-cyan-700` tw`border-t-cyan-800` tw`border-t-cyan-900` tw`border-t-sky-50` tw`border-t-sky-100` tw`border-t-sky-200` tw`border-t-sky-300` tw`border-t-sky-400` tw`border-t-sky-500` tw`border-t-sky-600` tw`border-t-sky-700` tw`border-t-sky-800` tw`border-t-sky-900` tw`border-t-blue-50` tw`border-t-blue-100` tw`border-t-blue-200` tw`border-t-blue-300` tw`border-t-blue-400` tw`border-t-blue-500` tw`border-t-blue-600` tw`border-t-blue-700` tw`border-t-blue-800` tw`border-t-blue-900` tw`border-t-indigo-50` tw`border-t-indigo-100` tw`border-t-indigo-200` tw`border-t-indigo-300` tw`border-t-indigo-400` tw`border-t-indigo-500` tw`border-t-indigo-600` tw`border-t-indigo-700` tw`border-t-indigo-800` tw`border-t-indigo-900` tw`border-t-violet-50` tw`border-t-violet-100` tw`border-t-violet-200` tw`border-t-violet-300` tw`border-t-violet-400` tw`border-t-violet-500` tw`border-t-violet-600` tw`border-t-violet-700` tw`border-t-violet-800` tw`border-t-violet-900` tw`border-t-purple-50` tw`border-t-purple-100` tw`border-t-purple-200` tw`border-t-purple-300` tw`border-t-purple-400` tw`border-t-purple-500` tw`border-t-purple-600` tw`border-t-purple-700` tw`border-t-purple-800` tw`border-t-purple-900` tw`border-t-fuchsia-50` tw`border-t-fuchsia-100` tw`border-t-fuchsia-200` tw`border-t-fuchsia-300` tw`border-t-fuchsia-400` tw`border-t-fuchsia-500` tw`border-t-fuchsia-600` tw`border-t-fuchsia-700` tw`border-t-fuchsia-800` tw`border-t-fuchsia-900` tw`border-t-pink-50` tw`border-t-pink-100` tw`border-t-pink-200` tw`border-t-pink-300` tw`border-t-pink-400` tw`border-t-pink-500` tw`border-t-pink-600` tw`border-t-pink-700` tw`border-t-pink-800` tw`border-t-pink-900` tw`border-t-rose-50` tw`border-t-rose-100` tw`border-t-rose-200` tw`border-t-rose-300` tw`border-t-rose-400` tw`border-t-rose-500` tw`border-t-rose-600` tw`border-t-rose-700` tw`border-t-rose-800` tw`border-t-rose-900` tw`border-r-inherit border-r-current border-r-transparent border-r-black border-r-white border-r-slate-50` tw`border-r-slate-100` tw`border-r-slate-200` tw`border-r-slate-300` tw`border-r-slate-400` tw`border-r-slate-500` tw`border-r-slate-600` tw`border-r-slate-700` tw`border-r-slate-800` tw`border-r-slate-900` tw`border-r-gray-50` tw`border-r-gray-100` tw`border-r-gray-200` tw`border-r-gray-300` tw`border-r-gray-400` tw`border-r-gray-500` tw`border-r-gray-600` tw`border-r-gray-700` tw`border-r-gray-800` tw`border-r-gray-900` tw`border-r-zinc-50` tw`border-r-zinc-100` tw`border-r-zinc-200` tw`border-r-zinc-300` tw`border-r-zinc-400` tw`border-r-zinc-500` tw`border-r-zinc-600` tw`border-r-zinc-700` tw`border-r-zinc-800` tw`border-r-zinc-900` tw`border-r-neutral-50` tw`border-r-neutral-100` tw`border-r-neutral-200` tw`border-r-neutral-300` tw`border-r-neutral-400` tw`border-r-neutral-500` tw`border-r-neutral-600` tw`border-r-neutral-700` tw`border-r-neutral-800` tw`border-r-neutral-900` tw`border-r-stone-50` tw`border-r-stone-100` tw`border-r-stone-200` tw`border-r-stone-300` tw`border-r-stone-400` tw`border-r-stone-500` tw`border-r-stone-600` tw`border-r-stone-700` tw`border-r-stone-800` tw`border-r-stone-900` tw`border-r-red-50` tw`border-r-red-100` tw`border-r-red-200` tw`border-r-red-300` tw`border-r-red-400` tw`border-r-red-500` tw`border-r-red-600` tw`border-r-red-700` tw`border-r-red-800` tw`border-r-red-900` tw`border-r-orange-50` tw`border-r-orange-100` tw`border-r-orange-200` tw`border-r-orange-300` tw`border-r-orange-400` tw`border-r-orange-500` tw`border-r-orange-600` tw`border-r-orange-700` tw`border-r-orange-800` tw`border-r-orange-900` tw`border-r-amber-50` tw`border-r-amber-100` tw`border-r-amber-200` tw`border-r-amber-300` tw`border-r-amber-400` tw`border-r-amber-500` tw`border-r-amber-600` tw`border-r-amber-700` tw`border-r-amber-800` tw`border-r-amber-900` tw`border-r-yellow-50` tw`border-r-yellow-100` tw`border-r-yellow-200` tw`border-r-yellow-300` tw`border-r-yellow-400` tw`border-r-yellow-500` tw`border-r-yellow-600` tw`border-r-yellow-700` tw`border-r-yellow-800` tw`border-r-yellow-900` tw`border-r-lime-50` tw`border-r-lime-100` tw`border-r-lime-200` tw`border-r-lime-300` tw`border-r-lime-400` tw`border-r-lime-500` tw`border-r-lime-600` tw`border-r-lime-700` tw`border-r-lime-800` tw`border-r-lime-900` tw`border-r-green-50` tw`border-r-green-100` tw`border-r-green-200` tw`border-r-green-300` tw`border-r-green-400` tw`border-r-green-500` tw`border-r-green-600` tw`border-r-green-700` tw`border-r-green-800` tw`border-r-green-900` tw`border-r-emerald-50` tw`border-r-emerald-100` tw`border-r-emerald-200` tw`border-r-emerald-300` tw`border-r-emerald-400` tw`border-r-emerald-500` tw`border-r-emerald-600` tw`border-r-emerald-700` tw`border-r-emerald-800` tw`border-r-emerald-900` tw`border-r-teal-50` tw`border-r-teal-100` tw`border-r-teal-200` tw`border-r-teal-300` tw`border-r-teal-400` tw`border-r-teal-500` tw`border-r-teal-600` tw`border-r-teal-700` tw`border-r-teal-800` tw`border-r-teal-900` tw`border-r-cyan-50` tw`border-r-cyan-100` tw`border-r-cyan-200` tw`border-r-cyan-300` tw`border-r-cyan-400` tw`border-r-cyan-500` tw`border-r-cyan-600` tw`border-r-cyan-700` tw`border-r-cyan-800` tw`border-r-cyan-900` tw`border-r-sky-50` tw`border-r-sky-100` tw`border-r-sky-200` tw`border-r-sky-300` tw`border-r-sky-400` tw`border-r-sky-500` tw`border-r-sky-600` tw`border-r-sky-700` tw`border-r-sky-800` tw`border-r-sky-900` tw`border-r-blue-50` tw`border-r-blue-100` tw`border-r-blue-200` tw`border-r-blue-300` tw`border-r-blue-400` tw`border-r-blue-500` tw`border-r-blue-600` tw`border-r-blue-700` tw`border-r-blue-800` tw`border-r-blue-900` tw`border-r-indigo-50` tw`border-r-indigo-100` tw`border-r-indigo-200` tw`border-r-indigo-300` tw`border-r-indigo-400` tw`border-r-indigo-500` tw`border-r-indigo-600` tw`border-r-indigo-700` tw`border-r-indigo-800` tw`border-r-indigo-900` tw`border-r-violet-50` tw`border-r-violet-100` tw`border-r-violet-200` tw`border-r-violet-300` tw`border-r-violet-400` tw`border-r-violet-500` tw`border-r-violet-600` tw`border-r-violet-700` tw`border-r-violet-800` tw`border-r-violet-900` tw`border-r-purple-50` tw`border-r-purple-100` tw`border-r-purple-200` tw`border-r-purple-300` tw`border-r-purple-400` tw`border-r-purple-500` tw`border-r-purple-600` tw`border-r-purple-700` tw`border-r-purple-800` tw`border-r-purple-900` tw`border-r-fuchsia-50` tw`border-r-fuchsia-100` tw`border-r-fuchsia-200` tw`border-r-fuchsia-300` tw`border-r-fuchsia-400` tw`border-r-fuchsia-500` tw`border-r-fuchsia-600` tw`border-r-fuchsia-700` tw`border-r-fuchsia-800` tw`border-r-fuchsia-900` tw`border-r-pink-50` tw`border-r-pink-100` tw`border-r-pink-200` tw`border-r-pink-300` tw`border-r-pink-400` tw`border-r-pink-500` tw`border-r-pink-600` tw`border-r-pink-700` tw`border-r-pink-800` tw`border-r-pink-900` tw`border-r-rose-50` tw`border-r-rose-100` tw`border-r-rose-200` tw`border-r-rose-300` tw`border-r-rose-400` tw`border-r-rose-500` tw`border-r-rose-600` tw`border-r-rose-700` tw`border-r-rose-800` tw`border-r-rose-900` tw`border-b-inherit` tw`border-b-current` tw`border-b-transparent` tw`border-b-black` tw`border-b-white` tw`border-b-slate-50` tw`border-b-slate-100` tw`border-b-slate-200` tw`border-b-slate-300` tw`border-b-slate-400` tw`border-b-slate-500` tw`border-b-slate-600` tw`border-b-slate-700` tw`border-b-slate-800` tw`border-b-slate-900` tw`border-b-gray-50` tw`border-b-gray-100` tw`border-b-gray-200` tw`border-b-gray-300` tw`border-b-gray-400` tw`border-b-gray-500` tw`border-b-gray-600` tw`border-b-gray-700` tw`border-b-gray-800` tw`border-b-gray-900` tw`border-b-zinc-50` tw`border-b-zinc-100` tw`border-b-zinc-200` tw`border-b-zinc-300` tw`border-b-zinc-400` tw`border-b-zinc-500` tw`border-b-zinc-600` tw`border-b-zinc-700` tw`border-b-zinc-800` tw`border-b-zinc-900` tw`border-b-neutral-50` tw`border-b-neutral-100` tw`border-b-neutral-200` tw`border-b-neutral-300` tw`border-b-neutral-400` tw`border-b-neutral-500` tw`border-b-neutral-600` tw`border-b-neutral-700` tw`border-b-neutral-800` tw`border-b-neutral-900` tw`border-b-stone-50` tw`border-b-stone-100` tw`border-b-stone-200` tw`border-b-stone-300` tw`border-b-stone-400` tw`border-b-stone-500` tw`border-b-stone-600` tw`border-b-stone-700` tw`border-b-stone-800` tw`border-b-stone-900` tw`border-b-red-50` tw`border-b-red-100` tw`border-b-red-200` tw`border-b-red-300` tw`border-b-red-400` tw`border-b-red-500` tw`border-b-red-600` tw`border-b-red-700` tw`border-b-red-800` tw`border-b-red-900` tw`border-b-orange-50` tw`border-b-orange-100` tw`border-b-orange-200` tw`border-b-orange-300` tw`border-b-orange-400` tw`border-b-orange-500` tw`border-b-orange-600` tw`border-b-orange-700` tw`border-b-orange-800` tw`border-b-orange-900` tw`border-b-amber-50` tw`border-b-amber-100` tw`border-b-amber-200` tw`border-b-amber-300` tw`border-b-amber-400` tw`border-b-amber-500` tw`border-b-amber-600` tw`border-b-amber-700` tw`border-b-amber-800` tw`border-b-amber-900` tw`border-b-yellow-50` tw`border-b-yellow-100` tw`border-b-yellow-200` tw`border-b-yellow-300` tw`border-b-yellow-400` tw`border-b-yellow-500` tw`border-b-yellow-600` tw`border-b-yellow-700` tw`border-b-yellow-800` tw`border-b-yellow-900` tw`border-b-lime-50` tw`border-b-lime-100` tw`border-b-lime-200` tw`border-b-lime-300` tw`border-b-lime-400` tw`border-b-lime-500` tw`border-b-lime-600` tw`border-b-lime-700` tw`border-b-lime-800` tw`border-b-lime-900` tw`border-b-green-50` tw`border-b-green-100` tw`border-b-green-200` tw`border-b-green-300` tw`border-b-green-400` tw`border-b-green-500` tw`border-b-green-600` tw`border-b-green-700` tw`border-b-green-800` tw`border-b-green-900` tw`border-b-emerald-50` tw`border-b-emerald-100` tw`border-b-emerald-200` tw`border-b-emerald-300` tw`border-b-emerald-400` tw`border-b-emerald-500` tw`border-b-emerald-600` tw`border-b-emerald-700` tw`border-b-emerald-800` tw`border-b-emerald-900` tw`border-b-teal-50` tw`border-b-teal-100` tw`border-b-teal-200` tw`border-b-teal-300` tw`border-b-teal-400` tw`border-b-teal-500` tw`border-b-teal-600` tw`border-b-teal-700` tw`border-b-teal-800` tw`border-b-teal-900` tw`border-b-cyan-50` tw`border-b-cyan-100` tw`border-b-cyan-200` tw`border-b-cyan-300` tw`border-b-cyan-400` tw`border-b-cyan-500` tw`border-b-cyan-600` tw`border-b-cyan-700` tw`border-b-cyan-800` tw`border-b-cyan-900` tw`border-b-sky-50` tw`border-b-sky-100` tw`border-b-sky-200` tw`border-b-sky-300` tw`border-b-sky-400` tw`border-b-sky-500` tw`border-b-sky-600` tw`border-b-sky-700` tw`border-b-sky-800` tw`border-b-sky-900` tw`border-b-blue-50` tw`border-b-blue-100` tw`border-b-blue-200` tw`border-b-blue-300` tw`border-b-blue-400` tw`border-b-blue-500` tw`border-b-blue-600` tw`border-b-blue-700` tw`border-b-blue-800` tw`border-b-blue-900` tw`border-b-indigo-50` tw`border-b-indigo-100` tw`border-b-indigo-200` tw`border-b-indigo-300` tw`border-b-indigo-400` tw`border-b-indigo-500` tw`border-b-indigo-600` tw`border-b-indigo-700` tw`border-b-indigo-800` tw`border-b-indigo-900` tw`border-b-violet-50` tw`border-b-violet-100` tw`border-b-violet-200` tw`border-b-violet-300` tw`border-b-violet-400` tw`border-b-violet-500` tw`border-b-violet-600` tw`border-b-violet-700` tw`border-b-violet-800` tw`border-b-violet-900` tw`border-b-purple-50` tw`border-b-purple-100` tw`border-b-purple-200` tw`border-b-purple-300` tw`border-b-purple-400` tw`border-b-purple-500` tw`border-b-purple-600` tw`border-b-purple-700` tw`border-b-purple-800` tw`border-b-purple-900` tw`border-b-fuchsia-50` tw`border-b-fuchsia-100` tw`border-b-fuchsia-200` tw`border-b-fuchsia-300` tw`border-b-fuchsia-400` tw`border-b-fuchsia-500` tw`border-b-fuchsia-600` tw`border-b-fuchsia-700` tw`border-b-fuchsia-800` tw`border-b-fuchsia-900` tw`border-b-pink-50` tw`border-b-pink-100` tw`border-b-pink-200` tw`border-b-pink-300` tw`border-b-pink-400` tw`border-b-pink-500` tw`border-b-pink-600` tw`border-b-pink-700` tw`border-b-pink-800` tw`border-b-pink-900` tw`border-b-rose-50` tw`border-b-rose-100` tw`border-b-rose-200` tw`border-b-rose-300` tw`border-b-rose-400` tw`border-b-rose-500` tw`border-b-rose-600` tw`border-b-rose-700` tw`border-b-rose-800` tw`border-b-rose-900` tw`border-l-inherit` tw`border-l-current` tw`border-l-transparent` tw`border-l-black` tw`border-l-white` tw`border-l-slate-50` tw`border-l-slate-100` tw`border-l-slate-200` tw`border-l-slate-300` tw`border-l-slate-400` tw`border-l-slate-500` tw`border-l-slate-600` tw`border-l-slate-700` tw`border-l-slate-800` tw`border-l-slate-900` tw`border-l-gray-50` tw`border-l-gray-100` tw`border-l-gray-200` tw`border-l-gray-300` tw`border-l-gray-400` tw`border-l-gray-500` tw`border-l-gray-600` tw`border-l-gray-700` tw`border-l-gray-800` tw`border-l-gray-900` tw`border-l-zinc-50` tw`border-l-zinc-100` tw`border-l-zinc-200` tw`border-l-zinc-300` tw`border-l-zinc-400` tw`border-l-zinc-500` tw`border-l-zinc-600` tw`border-l-zinc-700` tw`border-l-zinc-800` tw`border-l-zinc-900` tw`border-l-neutral-50` tw`border-l-neutral-100` tw`border-l-neutral-200` tw`border-l-neutral-300` tw`border-l-neutral-400` tw`border-l-neutral-500` tw`border-l-neutral-600` tw`border-l-neutral-700` tw`border-l-neutral-800` tw`border-l-neutral-900` tw`border-l-stone-50` tw`border-l-stone-100` tw`border-l-stone-200` tw`border-l-stone-300` tw`border-l-stone-400` tw`border-l-stone-500` tw`border-l-stone-600` tw`border-l-stone-700` tw`border-l-stone-800` tw`border-l-stone-900` tw`border-l-red-50` tw`border-l-red-100` tw`border-l-red-200` tw`border-l-red-300` tw`border-l-red-400` tw`border-l-red-500` tw`border-l-red-600` tw`border-l-red-700` tw`border-l-red-800` tw`border-l-red-900` tw`border-l-orange-50` tw`border-l-orange-100` tw`border-l-orange-200` tw`border-l-orange-300` tw`border-l-orange-400` tw`border-l-orange-500` tw`border-l-orange-600` tw`border-l-orange-700` tw`border-l-orange-800` tw`border-l-orange-900` tw`border-l-amber-50` tw`border-l-amber-100` tw`border-l-amber-200` tw`border-l-amber-300` tw`border-l-amber-400` tw`border-l-amber-500` tw`border-l-amber-600` tw`border-l-amber-700` tw`border-l-amber-800` tw`border-l-amber-900` tw`border-l-yellow-50` tw`border-l-yellow-100` tw`border-l-yellow-200` tw`border-l-yellow-300` tw`border-l-yellow-400` tw`border-l-yellow-500` tw`border-l-yellow-600` tw`border-l-yellow-700` tw`border-l-yellow-800` tw`border-l-yellow-900` tw`border-l-lime-50` tw`border-l-lime-100` tw`border-l-lime-200` tw`border-l-lime-300` tw`border-l-lime-400` tw`border-l-lime-500` tw`border-l-lime-600` tw`border-l-lime-700` tw`border-l-lime-800` tw`border-l-lime-900` tw`border-l-green-50` tw`border-l-green-100` tw`border-l-green-200` tw`border-l-green-300` tw`border-l-green-400` tw`border-l-green-500` tw`border-l-green-600` tw`border-l-green-700` tw`border-l-green-800` tw`border-l-green-900` tw`border-l-emerald-50` tw`border-l-emerald-100` tw`border-l-emerald-200` tw`border-l-emerald-300` tw`border-l-emerald-400` tw`border-l-emerald-500` tw`border-l-emerald-600` tw`border-l-emerald-700` tw`border-l-emerald-800` tw`border-l-emerald-900` tw`border-l-teal-50` tw`border-l-teal-100` tw`border-l-teal-200` tw`border-l-teal-300` tw`border-l-teal-400` tw`border-l-teal-500` tw`border-l-teal-600` tw`border-l-teal-700` tw`border-l-teal-800` tw`border-l-teal-900` tw`border-l-cyan-50` tw`border-l-cyan-100` tw`border-l-cyan-200` tw`border-l-cyan-300` tw`border-l-cyan-400` tw`border-l-cyan-500` tw`border-l-cyan-600` tw`border-l-cyan-700` tw`border-l-cyan-800` tw`border-l-cyan-900` tw`border-l-sky-50` tw`border-l-sky-100` tw`border-l-sky-200` tw`border-l-sky-300` tw`border-l-sky-400` tw`border-l-sky-500` tw`border-l-sky-600` tw`border-l-sky-700` tw`border-l-sky-800` tw`border-l-sky-900` tw`border-l-blue-50` tw`border-l-blue-100` tw`border-l-blue-200` tw`border-l-blue-300` tw`border-l-blue-400` tw`border-l-blue-500` tw`border-l-blue-600` tw`border-l-blue-700` tw`border-l-blue-800` tw`border-l-blue-900` tw`border-l-indigo-50` tw`border-l-indigo-100` tw`border-l-indigo-200` tw`border-l-indigo-300` tw`border-l-indigo-400` tw`border-l-indigo-500` tw`border-l-indigo-600` tw`border-l-indigo-700` tw`border-l-indigo-800` tw`border-l-indigo-900` tw`border-l-violet-50` tw`border-l-violet-100` tw`border-l-violet-200` tw`border-l-violet-300` tw`border-l-violet-400` tw`border-l-violet-500` tw`border-l-violet-600` tw`border-l-violet-700` tw`border-l-violet-800` tw`border-l-violet-900` tw`border-l-purple-50` tw`border-l-purple-100` tw`border-l-purple-200` tw`border-l-purple-300` tw`border-l-purple-400` tw`border-l-purple-500` tw`border-l-purple-600` tw`border-l-purple-700` tw`border-l-purple-800` tw`border-l-purple-900` tw`border-l-fuchsia-50` tw`border-l-fuchsia-100` tw`border-l-fuchsia-200` tw`border-l-fuchsia-300` tw`border-l-fuchsia-400` tw`border-l-fuchsia-500` tw`border-l-fuchsia-600` tw`border-l-fuchsia-700` tw`border-l-fuchsia-800` tw`border-l-fuchsia-900` tw`border-l-pink-50` tw`border-l-pink-100` tw`border-l-pink-200` tw`border-l-pink-300` tw`border-l-pink-400` tw`border-l-pink-500` tw`border-l-pink-600` tw`border-l-pink-700` tw`border-l-pink-800` tw`border-l-pink-900` tw`border-l-rose-50` tw`border-l-rose-100` tw`border-l-rose-200` tw`border-l-rose-300` tw`border-l-rose-400` tw`border-l-rose-500` tw`border-l-rose-600` tw`border-l-rose-700` tw`border-l-rose-800` tw`border-l-rose-900` tw`border-4 border-indigo-500/100` tw`border-4 border-indigo-500/75` tw`border-4 border-indigo-500/50` tw`border-4 border-indigo-600/[.55]` tw`border-[#243c5a]` tw`border-[#f00]` tw`border-t-[#f00]` tw`border-red-500/25` tw`border-red-500/fromConfig` tw`border-red-500/fromConfig/25` tw`border-red-500/fromConfig/[.555]` tw`border-red-500/fromConfig/[var(--myvar)]` tw`border-red-500/[.555]` tw`border-red-500/[var(--myvar)]` tw`border-[theme('colors.red.500')]` tw`border-[theme('colors.red.500')]/20` tw`border-electric/25` tw`border-electric/[.555]` tw`border-electric/[var(--myvar)]` tw`border-[theme('colors.electric')]` tw`border-[theme('colors.electric')]/20` tw`border-[hsla(235, 100%, 50%, .5)]` tw`border-[rgba(255, 255, 255, 0)]` tw`border-[red_black_white rgb(255, 255,255,0)]` tw`border-[red black_blue]` tw`border-[red black]` tw`border-[hsl(50 50% 50%)]` tw`border-t-[color:green]` tw`border-t-[color:rgba(255, 255, 255, .45)]` tw`border-r-[color:green]` tw`border-r-[color:rgba(255, 255, 255, .45)]` tw`border-b-[color:green]` tw`border-b-[color:rgba(255, 255, 255, .45)]` tw`border-l-[color:green]` tw`border-l-[color:rgba(255, 255, 255, .45)]` tw`border-[color:green]` tw`border-[color:rgba(255, 255, 255, .45)]` tw`border-x-[color:green]` tw`border-y-[color:rgba(255, 255, 255, .45)]` tw`border-black border-s-green-500 border-e-red-400` ================================================ FILE: tests/__fixtures__/utilitiesBorders/borderOpacity.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/border-opacity // Deprecated tw`border-opacity-0` tw`border-opacity-5` tw`border-opacity-10` tw`border-opacity-20` tw`border-opacity-25` tw`border-opacity-30` tw`border-opacity-40` tw`border-opacity-50` tw`border-opacity-60` tw`border-opacity-70` tw`border-opacity-75` tw`border-opacity-80` tw`border-opacity-90` tw`border-opacity-95` tw`border-opacity-100` ================================================ FILE: tests/__fixtures__/utilitiesBorders/borderRadius.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/border-radius theme`borderRadius.` tw`rounded-none` tw`rounded-sm` tw`rounded` tw`rounded-md` tw`rounded-lg` tw`rounded-xl` tw`rounded-2xl` tw`rounded-3xl` tw`rounded-full` tw`rounded-t-none` tw`rounded-r-none` tw`rounded-b-none` tw`rounded-l-none` tw`rounded-t-sm` tw`rounded-r-sm` tw`rounded-b-sm` tw`rounded-l-sm` tw`rounded-t` tw`rounded-r` tw`rounded-b` tw`rounded-l` tw`rounded-t-lg` tw`rounded-r-lg` tw`rounded-b-lg` tw`rounded-l-lg` tw`rounded-t-xl` tw`rounded-r-xl` tw`rounded-b-xl` tw`rounded-l-xl` tw`rounded-t-2xl` tw`rounded-r-2xl` tw`rounded-b-2xl` tw`rounded-l-2xl` tw`rounded-t-3xl` tw`rounded-r-3xl` tw`rounded-b-3xl` tw`rounded-l-3xl` tw`rounded-t-full` tw`rounded-r-full` tw`rounded-b-full` tw`rounded-l-full` tw`rounded-tl-none` tw`rounded-tr-none` tw`rounded-br-none` tw`rounded-bl-none` tw`rounded-tl-sm` tw`rounded-tr-sm` tw`rounded-br-sm` tw`rounded-bl-sm` tw`rounded-tl` tw`rounded-tr` tw`rounded-br` tw`rounded-bl` tw`rounded-tl-lg` tw`rounded-tr-lg` tw`rounded-br-lg` tw`rounded-bl-lg` tw`rounded-tl-xl` tw`rounded-tr-xl` tw`rounded-br-xl` tw`rounded-bl-xl` tw`rounded-tl-2xl` tw`rounded-tr-2xl` tw`rounded-br-2xl` tw`rounded-bl-2xl` tw`rounded-tl-3xl` tw`rounded-tr-3xl` tw`rounded-br-3xl` tw`rounded-bl-3xl` tw`rounded-tl-full` tw`rounded-tr-full` tw`rounded-br-full` tw`rounded-bl-full` tw`rounded-[12px]` tw`rounded-t-[var(--radius)] rounded-r-[var(--radius)] rounded-b-[var(--radius)] rounded-l-[var(--radius)]` tw`rounded-tr-[var(--radius)] rounded-br-[var(--radius)] rounded-bl-[var(--radius)] rounded-tl-[var(--radius)]` tw`rounded-s rounded-e rounded-ss rounded-es` ================================================ FILE: tests/__fixtures__/utilitiesBorders/borderStyle.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/border-style tw`border-solid` tw`border-dashed` tw`border-dotted` tw`border-double` tw`border-hidden` tw`border-none` ================================================ FILE: tests/__fixtures__/utilitiesBorders/borderWidth.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/border-width theme`borderWidth.` tw`border-0` tw`border-2` tw`border-4` tw`border-8` tw`border` tw`border-x-0` tw`border-x-2` tw`border-x-4` tw`border-x-8` tw`border-x` tw`border-y-0` tw`border-y-2` tw`border-y-4` tw`border-y-8` tw`border-y` tw`border-t-0` tw`border-t-2` tw`border-t-4` tw`border-t-8` tw`border-t` tw`border-r-0` tw`border-r-2` tw`border-r-4` tw`border-r-8` tw`border-r` tw`border-b-0` tw`border-b-2` tw`border-b-4` tw`border-b-8` tw`border-b` tw`border-l-0` tw`border-l-2` tw`border-l-4` tw`border-l-8` tw`border-l` tw`border-[2.5px]` tw`border-t-[2.5px]` tw`border-t-[length:10px]` tw`border-r-[length:10px]` tw`border-b-[length:10px]` tw`border-l-[length:10px]` tw`border-l-[length:10px]` tw`border-x-[length:10px]` tw`border-y-[length:10px]` tw`border-[length:10px]` tw`border-2 border-s-0 border-e-4` ================================================ FILE: tests/__fixtures__/utilitiesBorders/divideColor.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/divide-color theme`divideColor.` tw`divide-inherit` tw`divide-current` tw`divide-transparent` tw`divide-black` tw`divide-white` tw`divide-slate-50` tw`divide-slate-100` tw`divide-slate-200` tw`divide-slate-300` tw`divide-slate-400` tw`divide-slate-500` tw`divide-slate-600` tw`divide-slate-700` tw`divide-slate-800` tw`divide-slate-900` tw`divide-gray-50` tw`divide-gray-100` tw`divide-gray-200` tw`divide-gray-300` tw`divide-gray-400` tw`divide-gray-500` tw`divide-gray-600` tw`divide-gray-700` tw`divide-gray-800` tw`divide-gray-900` tw`divide-zinc-50` tw`divide-zinc-100` tw`divide-zinc-200` tw`divide-zinc-300` tw`divide-zinc-400` tw`divide-zinc-500` tw`divide-zinc-600` tw`divide-zinc-700` tw`divide-zinc-800` tw`divide-zinc-900` tw`divide-neutral-50` tw`divide-neutral-100` tw`divide-neutral-200` tw`divide-neutral-300` tw`divide-neutral-400` tw`divide-neutral-500` tw`divide-neutral-600` tw`divide-neutral-700` tw`divide-neutral-800` tw`divide-neutral-900` tw`divide-stone-50` tw`divide-stone-100` tw`divide-stone-200` tw`divide-stone-300` tw`divide-stone-400` tw`divide-stone-500` tw`divide-stone-600` tw`divide-stone-700` tw`divide-stone-800` tw`divide-stone-900` tw`divide-red-50` tw`divide-red-100` tw`divide-red-200` tw`divide-red-300` tw`divide-red-400` tw`divide-red-500` tw`divide-red-600` tw`divide-red-700` tw`divide-red-800` tw`divide-red-900` tw`divide-orange-50` tw`divide-orange-100` tw`divide-orange-200` tw`divide-orange-300` tw`divide-orange-400` tw`divide-orange-500` tw`divide-orange-600` tw`divide-orange-700` tw`divide-orange-800` tw`divide-orange-900` tw`divide-amber-50` tw`divide-amber-100` tw`divide-amber-200` tw`divide-amber-300` tw`divide-amber-400` tw`divide-amber-500` tw`divide-amber-600` tw`divide-amber-700` tw`divide-amber-800` tw`divide-amber-900` tw`divide-yellow-50` tw`divide-yellow-100` tw`divide-yellow-200` tw`divide-yellow-300` tw`divide-yellow-400` tw`divide-yellow-500` tw`divide-yellow-600` tw`divide-yellow-700` tw`divide-yellow-800` tw`divide-yellow-900` tw`divide-lime-50` tw`divide-lime-100` tw`divide-lime-200` tw`divide-lime-300` tw`divide-lime-400` tw`divide-lime-500` tw`divide-lime-600` tw`divide-lime-700` tw`divide-lime-800` tw`divide-lime-900` tw`divide-green-50` tw`divide-green-100` tw`divide-green-200` tw`divide-green-300` tw`divide-green-400` tw`divide-green-500` tw`divide-green-600` tw`divide-green-700` tw`divide-green-800` tw`divide-green-900` tw`divide-emerald-50` tw`divide-emerald-100` tw`divide-emerald-200` tw`divide-emerald-300` tw`divide-emerald-400` tw`divide-emerald-500` tw`divide-emerald-600` tw`divide-emerald-700` tw`divide-emerald-800` tw`divide-emerald-900` tw`divide-teal-50` tw`divide-teal-100` tw`divide-teal-200` tw`divide-teal-300` tw`divide-teal-400` tw`divide-teal-500` tw`divide-teal-600` tw`divide-teal-700` tw`divide-teal-800` tw`divide-teal-900` tw`divide-cyan-50` tw`divide-cyan-100` tw`divide-cyan-200` tw`divide-cyan-300` tw`divide-cyan-400` tw`divide-cyan-500` tw`divide-cyan-600` tw`divide-cyan-700` tw`divide-cyan-800` tw`divide-cyan-900` tw`divide-sky-50` tw`divide-sky-100` tw`divide-sky-200` tw`divide-sky-300` tw`divide-sky-400` tw`divide-sky-500` tw`divide-sky-600` tw`divide-sky-700` tw`divide-sky-800` tw`divide-sky-900` tw`divide-blue-50` tw`divide-blue-100` tw`divide-blue-200` tw`divide-blue-300` tw`divide-blue-400` tw`divide-blue-500` tw`divide-blue-600` tw`divide-blue-700` tw`divide-blue-800` tw`divide-blue-900` tw`divide-indigo-50` tw`divide-indigo-100` tw`divide-indigo-200` tw`divide-indigo-300` tw`divide-indigo-400` tw`divide-indigo-500` tw`divide-indigo-600` tw`divide-indigo-700` tw`divide-indigo-800` tw`divide-indigo-900` tw`divide-violet-50` tw`divide-violet-100` tw`divide-violet-200` tw`divide-violet-300` tw`divide-violet-400` tw`divide-violet-500` tw`divide-violet-600` tw`divide-violet-700` tw`divide-violet-800` tw`divide-violet-900` tw`divide-purple-50` tw`divide-purple-100` tw`divide-purple-200` tw`divide-purple-300` tw`divide-purple-400` tw`divide-purple-500` tw`divide-purple-600` tw`divide-purple-700` tw`divide-purple-800` tw`divide-purple-900` tw`divide-fuchsia-50` tw`divide-fuchsia-100` tw`divide-fuchsia-200` tw`divide-fuchsia-300` tw`divide-fuchsia-400` tw`divide-fuchsia-500` tw`divide-fuchsia-600` tw`divide-fuchsia-700` tw`divide-fuchsia-800` tw`divide-fuchsia-900` tw`divide-pink-50` tw`divide-pink-100` tw`divide-pink-200` tw`divide-pink-300` tw`divide-pink-400` tw`divide-pink-500` tw`divide-pink-600` tw`divide-pink-700` tw`divide-pink-800` tw`divide-pink-900` tw`divide-rose-50` tw`divide-rose-100` tw`divide-rose-200` tw`divide-rose-300` tw`divide-rose-400` tw`divide-rose-500` tw`divide-rose-600` tw`divide-rose-700` tw`divide-rose-800` tw`divide-rose-900` tw`divide-y-4 divide-slate-400/25` tw`divide-y-4 divide-slate-400/[.24]` tw`divide-[#243c5a]` tw`divide-[color:blue]` ================================================ FILE: tests/__fixtures__/utilitiesBorders/divideOpacity.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/divide-opacity // Deprecated in favor of slash opacity syntax tw`divide-opacity-0` tw`divide-opacity-5` tw`divide-opacity-10` tw`divide-opacity-20` tw`divide-opacity-25` tw`divide-opacity-30` tw`divide-opacity-40` tw`divide-opacity-50` tw`divide-opacity-60` tw`divide-opacity-70` tw`divide-opacity-75` tw`divide-opacity-80` tw`divide-opacity-90` tw`divide-opacity-95` tw`divide-opacity-100` ================================================ FILE: tests/__fixtures__/utilitiesBorders/divideStyle.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/divide-style tw`divide-solid` tw`divide-dashed` tw`divide-dotted` tw`divide-double` tw`divide-none` ================================================ FILE: tests/__fixtures__/utilitiesBorders/divideWidth.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/divide-width theme`divideWidth.` tw`divide-x-0` tw`divide-x-2` tw`divide-x-4` tw`divide-x-8` tw`divide-x` tw`divide-y-0` tw`divide-y-2` tw`divide-y-4` tw`divide-y-8` tw`divide-y` tw`divide-x-reverse` tw`divide-y-reverse` tw`divide-x-[3px]` tw`divide-y-[3px]` tw`divide-x-[line-width:3px]` tw`divide-x-[length:3px]` tw`divide-y-[line-width:3px]` tw`divide-y-[length:3px]` ================================================ FILE: tests/__fixtures__/utilitiesBorders/outlineColor.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/outline-color theme`outlineColor` tw`outline-inherit` tw`outline-current` tw`outline-transparent` tw`outline-black` tw`outline-white` tw`outline-slate-50` tw`outline-slate-100` tw`outline-slate-200` tw`outline-slate-300` tw`outline-slate-400` tw`outline-slate-500` tw`outline-slate-600` tw`outline-slate-700` tw`outline-slate-800` tw`outline-slate-900` tw`outline-gray-50` tw`outline-gray-100` tw`outline-gray-200` tw`outline-gray-300` tw`outline-gray-400` tw`outline-gray-500` tw`outline-gray-600` tw`outline-gray-700` tw`outline-gray-800` tw`outline-gray-900` tw`outline-zinc-50` tw`outline-zinc-100` tw`outline-zinc-200` tw`outline-zinc-300` tw`outline-zinc-400` tw`outline-zinc-500` tw`outline-zinc-600` tw`outline-zinc-700` tw`outline-zinc-800` tw`outline-zinc-900` tw`outline-neutral-50` tw`outline-neutral-100` tw`outline-neutral-200` tw`outline-neutral-300` tw`outline-neutral-400` tw`outline-neutral-500` tw`outline-neutral-600` tw`outline-neutral-700` tw`outline-neutral-800` tw`outline-neutral-900` tw`outline-stone-50` tw`outline-stone-100` tw`outline-stone-200` tw`outline-stone-300` tw`outline-stone-400` tw`outline-stone-500` tw`outline-stone-600` tw`outline-stone-700` tw`outline-stone-800` tw`outline-stone-900` tw`outline-red-50` tw`outline-red-100` tw`outline-red-200` tw`outline-red-300` tw`outline-red-400` tw`outline-red-500` tw`outline-red-600` tw`outline-red-700` tw`outline-red-800` tw`outline-red-900` tw`outline-orange-50` tw`outline-orange-100` tw`outline-orange-200` tw`outline-orange-300` tw`outline-orange-400` tw`outline-orange-500` tw`outline-orange-600` tw`outline-orange-700` tw`outline-orange-800` tw`outline-orange-900` tw`outline-amber-50` tw`outline-amber-100` tw`outline-amber-200` tw`outline-amber-300` tw`outline-amber-400` tw`outline-amber-500` tw`outline-amber-600` tw`outline-amber-700` tw`outline-amber-800` tw`outline-amber-900` tw`outline-yellow-50` tw`outline-yellow-100` tw`outline-yellow-200` tw`outline-yellow-300` tw`outline-yellow-400` tw`outline-yellow-500` tw`outline-yellow-600` tw`outline-yellow-700` tw`outline-yellow-800` tw`outline-yellow-900` tw`outline-lime-50` tw`outline-lime-100` tw`outline-lime-200` tw`outline-lime-300` tw`outline-lime-400` tw`outline-lime-500` tw`outline-lime-600` tw`outline-lime-700` tw`outline-lime-800` tw`outline-lime-900` tw`outline-green-50` tw`outline-green-100` tw`outline-green-200` tw`outline-green-300` tw`outline-green-400` tw`outline-green-500` tw`outline-green-600` tw`outline-green-700` tw`outline-green-800` tw`outline-green-900` tw`outline-emerald-50` tw`outline-emerald-100` tw`outline-emerald-200` tw`outline-emerald-300` tw`outline-emerald-400` tw`outline-emerald-500` tw`outline-emerald-600` tw`outline-emerald-700` tw`outline-emerald-800` tw`outline-emerald-900` tw`outline-teal-50` tw`outline-teal-100` tw`outline-teal-200` tw`outline-teal-300` tw`outline-teal-400` tw`outline-teal-500` tw`outline-teal-600` tw`outline-teal-700` tw`outline-teal-800` tw`outline-teal-900` tw`outline-cyan-50` tw`outline-cyan-100` tw`outline-cyan-200` tw`outline-cyan-300` tw`outline-cyan-400` tw`outline-cyan-500` tw`outline-cyan-600` tw`outline-cyan-700` tw`outline-cyan-800` tw`outline-cyan-900` tw`outline-sky-50` tw`outline-sky-100` tw`outline-sky-200` tw`outline-sky-300` tw`outline-sky-400` tw`outline-sky-500` tw`outline-sky-600` tw`outline-sky-700` tw`outline-sky-800` tw`outline-sky-900` tw`outline-blue-50` tw`outline-blue-100` tw`outline-blue-200` tw`outline-blue-300` tw`outline-blue-400` tw`outline-blue-500` tw`outline-blue-600` tw`outline-blue-700` tw`outline-blue-800` tw`outline-blue-900` tw`outline-indigo-50` tw`outline-indigo-100` tw`outline-indigo-200` tw`outline-indigo-300` tw`outline-indigo-400` tw`outline-indigo-500` tw`outline-indigo-600` tw`outline-indigo-700` tw`outline-indigo-800` tw`outline-indigo-900` tw`outline-violet-50` tw`outline-violet-100` tw`outline-violet-200` tw`outline-violet-300` tw`outline-violet-400` tw`outline-violet-500` tw`outline-violet-600` tw`outline-violet-700` tw`outline-violet-800` tw`outline-violet-900` tw`outline-purple-50` tw`outline-purple-100` tw`outline-purple-200` tw`outline-purple-300` tw`outline-purple-400` tw`outline-purple-500` tw`outline-purple-600` tw`outline-purple-700` tw`outline-purple-800` tw`outline-purple-900` tw`outline-fuchsia-50` tw`outline-fuchsia-100` tw`outline-fuchsia-200` tw`outline-fuchsia-300` tw`outline-fuchsia-400` tw`outline-fuchsia-500` tw`outline-fuchsia-600` tw`outline-fuchsia-700` tw`outline-fuchsia-800` tw`outline-fuchsia-900` tw`outline-pink-50` tw`outline-pink-100` tw`outline-pink-200` tw`outline-pink-300` tw`outline-pink-400` tw`outline-pink-500` tw`outline-pink-600` tw`outline-pink-700` tw`outline-pink-800` tw`outline-pink-900` tw`outline-rose-50` tw`outline-rose-100` tw`outline-rose-200` tw`outline-rose-300` tw`outline-rose-400` tw`outline-rose-500` tw`outline-rose-600` tw`outline-rose-700` tw`outline-rose-800` tw`outline-rose-900` tw`outline-rose-900/50` tw`outline-rose-900/[.50]` tw`outline-[#243c5a]` tw`outline-[length:500px]` tw`outline-[color:red]` tw`outline-[percentage:10%]` // tw`outline-[var(--outline)]` // Unsupported by tailwindcss tw`outline-[color:var(--outline)]` tw`outline-[length:var(--outline)]` tw`outline outline-dashed outline-none outline-black outline-4 outline-offset-2` ================================================ FILE: tests/__fixtures__/utilitiesBorders/outlineOffset.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/outline-offset theme`outlineOffset` tw`outline-offset-0` tw`outline-offset-1` tw`outline-offset-2` tw`outline-offset-4` tw`outline-offset-8` tw`-outline-offset-1` tw`outline-offset-[3px]` ================================================ FILE: tests/__fixtures__/utilitiesBorders/outlineStyle.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/outline-style tw`outline` tw`outline-none` tw`outline-dashed` tw`outline-dotted` tw`outline-double` ================================================ FILE: tests/__fixtures__/utilitiesBorders/outlineWidth.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/outline-width theme`outlineWidth` tw`outline-0` tw`outline-1` tw`outline-2` tw`outline-4` tw`outline-8` tw`outline outline-offset-2 outline-1` tw`outline-[5px]` ================================================ FILE: tests/__fixtures__/utilitiesBorders/ringColor.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/ring-color theme`ringColor.` tw`ring-inherit` tw`ring-current` tw`ring-transparent` tw`ring-black` tw`ring-white` tw`ring-slate-50` tw`ring-slate-100` tw`ring-slate-200` tw`ring-slate-300` tw`ring-slate-400` tw`ring-slate-500` tw`ring-slate-600` tw`ring-slate-700` tw`ring-slate-800` tw`ring-slate-900` tw`ring-gray-50` tw`ring-gray-100` tw`ring-gray-200` tw`ring-gray-300` tw`ring-gray-400` tw`ring-gray-500` tw`ring-gray-600` tw`ring-gray-700` tw`ring-gray-800` tw`ring-gray-900` tw`ring-zinc-50` tw`ring-zinc-100` tw`ring-zinc-200` tw`ring-zinc-300` tw`ring-zinc-400` tw`ring-zinc-500` tw`ring-zinc-600` tw`ring-zinc-700` tw`ring-zinc-800` tw`ring-zinc-900` tw`ring-neutral-50` tw`ring-neutral-100` tw`ring-neutral-200` tw`ring-neutral-300` tw`ring-neutral-400` tw`ring-neutral-500` tw`ring-neutral-600` tw`ring-neutral-700` tw`ring-neutral-800` tw`ring-neutral-900` tw`ring-stone-50` tw`ring-stone-100` tw`ring-stone-200` tw`ring-stone-300` tw`ring-stone-400` tw`ring-stone-500` tw`ring-stone-600` tw`ring-stone-700` tw`ring-stone-800` tw`ring-stone-900` tw`ring-red-50` tw`ring-red-100` tw`ring-red-200` tw`ring-red-300` tw`ring-red-400` tw`ring-red-500` tw`ring-red-600` tw`ring-red-700` tw`ring-red-800` tw`ring-red-900` tw`ring-orange-50` tw`ring-orange-100` tw`ring-orange-200` tw`ring-orange-300` tw`ring-orange-400` tw`ring-orange-500` tw`ring-orange-600` tw`ring-orange-700` tw`ring-orange-800` tw`ring-orange-900` tw`ring-amber-50` tw`ring-amber-100` tw`ring-amber-200` tw`ring-amber-300` tw`ring-amber-400` tw`ring-amber-500` tw`ring-amber-600` tw`ring-amber-700` tw`ring-amber-800` tw`ring-amber-900` tw`ring-yellow-50` tw`ring-yellow-100` tw`ring-yellow-200` tw`ring-yellow-300` tw`ring-yellow-400` tw`ring-yellow-500` tw`ring-yellow-600` tw`ring-yellow-700` tw`ring-yellow-800` tw`ring-yellow-900` tw`ring-lime-50` tw`ring-lime-100` tw`ring-lime-200` tw`ring-lime-300` tw`ring-lime-400` tw`ring-lime-500` tw`ring-lime-600` tw`ring-lime-700` tw`ring-lime-800` tw`ring-lime-900` tw`ring-green-50` tw`ring-green-100` tw`ring-green-200` tw`ring-green-300` tw`ring-green-400` tw`ring-green-500` tw`ring-green-600` tw`ring-green-700` tw`ring-green-800` tw`ring-green-900` tw`ring-emerald-50` tw`ring-emerald-100` tw`ring-emerald-200` tw`ring-emerald-300` tw`ring-emerald-400` tw`ring-emerald-500` tw`ring-emerald-600` tw`ring-emerald-700` tw`ring-emerald-800` tw`ring-emerald-900` tw`ring-teal-50` tw`ring-teal-100` tw`ring-teal-200` tw`ring-teal-300` tw`ring-teal-400` tw`ring-teal-500` tw`ring-teal-600` tw`ring-teal-700` tw`ring-teal-800` tw`ring-teal-900` tw`ring-cyan-50` tw`ring-cyan-100` tw`ring-cyan-200` tw`ring-cyan-300` tw`ring-cyan-400` tw`ring-cyan-500` tw`ring-cyan-600` tw`ring-cyan-700` tw`ring-cyan-800` tw`ring-cyan-900` tw`ring-sky-50` tw`ring-sky-100` tw`ring-sky-200` tw`ring-sky-300` tw`ring-sky-400` tw`ring-sky-500` tw`ring-sky-600` tw`ring-sky-700` tw`ring-sky-800` tw`ring-sky-900` tw`ring-blue-50` tw`ring-blue-100` tw`ring-blue-200` tw`ring-blue-300` tw`ring-blue-400` tw`ring-blue-500` tw`ring-blue-600` tw`ring-blue-700` tw`ring-blue-800` tw`ring-blue-900` tw`ring-indigo-50` tw`ring-indigo-100` tw`ring-indigo-200` tw`ring-indigo-300` tw`ring-indigo-400` tw`ring-indigo-500` tw`ring-indigo-600` tw`ring-indigo-700` tw`ring-indigo-800` tw`ring-indigo-900` tw`ring-violet-50` tw`ring-violet-100` tw`ring-violet-200` tw`ring-violet-300` tw`ring-violet-400` tw`ring-violet-500` tw`ring-violet-600` tw`ring-violet-700` tw`ring-violet-800` tw`ring-violet-900` tw`ring-purple-50` tw`ring-purple-100` tw`ring-purple-200` tw`ring-purple-300` tw`ring-purple-400` tw`ring-purple-500` tw`ring-purple-600` tw`ring-purple-700` tw`ring-purple-800` tw`ring-purple-900` tw`ring-fuchsia-50` tw`ring-fuchsia-100` tw`ring-fuchsia-200` tw`ring-fuchsia-300` tw`ring-fuchsia-400` tw`ring-fuchsia-500` tw`ring-fuchsia-600` tw`ring-fuchsia-700` tw`ring-fuchsia-800` tw`ring-fuchsia-900` tw`ring-pink-50` tw`ring-pink-100` tw`ring-pink-200` tw`ring-pink-300` tw`ring-pink-400` tw`ring-pink-500` tw`ring-pink-600` tw`ring-pink-700` tw`ring-pink-800` tw`ring-pink-900` tw`ring-rose-50` tw`ring-rose-100` tw`ring-rose-200` tw`ring-rose-300` tw`ring-rose-400` tw`ring-rose-500` tw`ring-rose-600` tw`ring-rose-700` tw`ring-rose-800` tw`ring-rose-900` tw`ring-blue-500/50` tw`ring-blue-500/[.55]` tw`ring-[#50d71e]` tw`ring-red-500` tw`ring-red-500/25` tw`ring-red-500/fromConfig` tw`ring-red-500/fromConfig/25` tw`ring-red-500/fromConfig/[.555]` tw`ring-red-500/fromConfig/[var(--myvar)]` tw`ring-red-500/[.555]` tw`ring-red-500/[var(--myvar)]` tw`ring-[theme('colors.red.500')]` tw`ring-[theme('colors.red.500')]/20` tw`ring-electric` tw`ring-electric/25` tw`ring-electric/[.555]` tw`ring-electric/[var(--myvar)]` tw`ring-[theme('colors.electric')]` tw`ring-[theme('colors.electric')]/20` tw`ring-[color:green]` tw`ring-[color:rgba(255, 255, 255, .45)]` tw`ring-[length:10px]` ================================================ FILE: tests/__fixtures__/utilitiesBorders/ringMisc.tsx ================================================ // @ts-nocheck import tw from '../macro' // Combined ring classes tw`ring ring-inset ring-purple-500 ring-offset-black ring-offset-4 ring-opacity-50` tw`ring ring-inset ring-purple-500 ring-offset-black ring-offset-4` tw`ring ring-purple-500 ring-offset-black ring-offset-4` tw`ring ring-offset-black ring-offset-4` tw`ring ring-offset-4` // Test the ring-opacity ordering - 'ring-opacity-x' should be moved to the end // https://github.com/ben-rogerson/twin.macro/issues/374 tw`ring-4 ring-opacity-20 ring-green-500` tw`mt-5 md:(ring-opacity-20 ring-4 ring-green-500) mb-5` tw`ring-[10px]` ================================================ FILE: tests/__fixtures__/utilitiesBorders/ringOffsetColor.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/ring-offset-color theme`ringOffsetColor` tw`ring-offset-inherit` tw`ring-offset-current` tw`ring-offset-transparent` tw`ring-offset-black` tw`ring-offset-white` tw`ring-offset-slate-50` tw`ring-offset-slate-100` tw`ring-offset-slate-200` tw`ring-offset-slate-300` tw`ring-offset-slate-400` tw`ring-offset-slate-500` tw`ring-offset-slate-600` tw`ring-offset-slate-700` tw`ring-offset-slate-800` tw`ring-offset-slate-900` tw`ring-offset-gray-50` tw`ring-offset-gray-100` tw`ring-offset-gray-200` tw`ring-offset-gray-300` tw`ring-offset-gray-400` tw`ring-offset-gray-500` tw`ring-offset-gray-600` tw`ring-offset-gray-700` tw`ring-offset-gray-800` tw`ring-offset-gray-900` tw`ring-offset-zinc-50` tw`ring-offset-zinc-100` tw`ring-offset-zinc-200` tw`ring-offset-zinc-300` tw`ring-offset-zinc-400` tw`ring-offset-zinc-500` tw`ring-offset-zinc-600` tw`ring-offset-zinc-700` tw`ring-offset-zinc-800` tw`ring-offset-zinc-900` tw`ring-offset-neutral-50` tw`ring-offset-neutral-100` tw`ring-offset-neutral-200` tw`ring-offset-neutral-300` tw`ring-offset-neutral-400` tw`ring-offset-neutral-500` tw`ring-offset-neutral-600` tw`ring-offset-neutral-700` tw`ring-offset-neutral-800` tw`ring-offset-neutral-900` tw`ring-offset-stone-50` tw`ring-offset-stone-100` tw`ring-offset-stone-200` tw`ring-offset-stone-300` tw`ring-offset-stone-400` tw`ring-offset-stone-500` tw`ring-offset-stone-600` tw`ring-offset-stone-700` tw`ring-offset-stone-800` tw`ring-offset-stone-900` tw`ring-offset-red-50` tw`ring-offset-red-100` tw`ring-offset-red-200` tw`ring-offset-red-300` tw`ring-offset-red-400` tw`ring-offset-red-500` tw`ring-offset-red-600` tw`ring-offset-red-700` tw`ring-offset-red-800` tw`ring-offset-red-900` tw`ring-offset-orange-50` tw`ring-offset-orange-100` tw`ring-offset-orange-200` tw`ring-offset-orange-300` tw`ring-offset-orange-400` tw`ring-offset-orange-500` tw`ring-offset-orange-600` tw`ring-offset-orange-700` tw`ring-offset-orange-800` tw`ring-offset-orange-900` tw`ring-offset-amber-50` tw`ring-offset-amber-100` tw`ring-offset-amber-200` tw`ring-offset-amber-300` tw`ring-offset-amber-400` tw`ring-offset-amber-500` tw`ring-offset-amber-600` tw`ring-offset-amber-700` tw`ring-offset-amber-800` tw`ring-offset-amber-900` tw`ring-offset-yellow-50` tw`ring-offset-yellow-100` tw`ring-offset-yellow-200` tw`ring-offset-yellow-300` tw`ring-offset-yellow-400` tw`ring-offset-yellow-500` tw`ring-offset-yellow-600` tw`ring-offset-yellow-700` tw`ring-offset-yellow-800` tw`ring-offset-yellow-900` tw`ring-offset-lime-50` tw`ring-offset-lime-100` tw`ring-offset-lime-200` tw`ring-offset-lime-300` tw`ring-offset-lime-400` tw`ring-offset-lime-500` tw`ring-offset-lime-600` tw`ring-offset-lime-700` tw`ring-offset-lime-800` tw`ring-offset-lime-900` tw`ring-offset-green-50` tw`ring-offset-green-100` tw`ring-offset-green-200` tw`ring-offset-green-300` tw`ring-offset-green-400` tw`ring-offset-green-500` tw`ring-offset-green-600` tw`ring-offset-green-700` tw`ring-offset-green-800` tw`ring-offset-green-900` tw`ring-offset-emerald-50` tw`ring-offset-emerald-100` tw`ring-offset-emerald-200` tw`ring-offset-emerald-300` tw`ring-offset-emerald-400` tw`ring-offset-emerald-500` tw`ring-offset-emerald-600` tw`ring-offset-emerald-700` tw`ring-offset-emerald-800` tw`ring-offset-emerald-900` tw`ring-offset-teal-50` tw`ring-offset-teal-100` tw`ring-offset-teal-200` tw`ring-offset-teal-300` tw`ring-offset-teal-400` tw`ring-offset-teal-500` tw`ring-offset-teal-600` tw`ring-offset-teal-700` tw`ring-offset-teal-800` tw`ring-offset-teal-900` tw`ring-offset-cyan-50` tw`ring-offset-cyan-100` tw`ring-offset-cyan-200` tw`ring-offset-cyan-300` tw`ring-offset-cyan-400` tw`ring-offset-cyan-500` tw`ring-offset-cyan-600` tw`ring-offset-cyan-700` tw`ring-offset-cyan-800` tw`ring-offset-cyan-900` tw`ring-offset-sky-50` tw`ring-offset-sky-100` tw`ring-offset-sky-200` tw`ring-offset-sky-300` tw`ring-offset-sky-400` tw`ring-offset-sky-500` tw`ring-offset-sky-600` tw`ring-offset-sky-700` tw`ring-offset-sky-800` tw`ring-offset-sky-900` tw`ring-offset-blue-50` tw`ring-offset-blue-100` tw`ring-offset-blue-200` tw`ring-offset-blue-300` tw`ring-offset-blue-400` tw`ring-offset-blue-500` tw`ring-offset-blue-600` tw`ring-offset-blue-700` tw`ring-offset-blue-800` tw`ring-offset-blue-900` tw`ring-offset-indigo-50` tw`ring-offset-indigo-100` tw`ring-offset-indigo-200` tw`ring-offset-indigo-300` tw`ring-offset-indigo-400` tw`ring-offset-indigo-500` tw`ring-offset-indigo-600` tw`ring-offset-indigo-700` tw`ring-offset-indigo-800` tw`ring-offset-indigo-900` tw`ring-offset-violet-50` tw`ring-offset-violet-100` tw`ring-offset-violet-200` tw`ring-offset-violet-300` tw`ring-offset-violet-400` tw`ring-offset-violet-500` tw`ring-offset-violet-600` tw`ring-offset-violet-700` tw`ring-offset-violet-800` tw`ring-offset-violet-900` tw`ring-offset-purple-50` tw`ring-offset-purple-100` tw`ring-offset-purple-200` tw`ring-offset-purple-300` tw`ring-offset-purple-400` tw`ring-offset-purple-500` tw`ring-offset-purple-600` tw`ring-offset-purple-700` tw`ring-offset-purple-800` tw`ring-offset-purple-900` tw`ring-offset-fuchsia-50` tw`ring-offset-fuchsia-100` tw`ring-offset-fuchsia-200` tw`ring-offset-fuchsia-300` tw`ring-offset-fuchsia-400` tw`ring-offset-fuchsia-500` tw`ring-offset-fuchsia-600` tw`ring-offset-fuchsia-700` tw`ring-offset-fuchsia-800` tw`ring-offset-fuchsia-900` tw`ring-offset-pink-50` tw`ring-offset-pink-100` tw`ring-offset-pink-200` tw`ring-offset-pink-300` tw`ring-offset-pink-400` tw`ring-offset-pink-500` tw`ring-offset-pink-600` tw`ring-offset-pink-700` tw`ring-offset-pink-800` tw`ring-offset-pink-900` tw`ring-offset-rose-50` tw`ring-offset-rose-100` tw`ring-offset-rose-200` tw`ring-offset-rose-300` tw`ring-offset-rose-400` tw`ring-offset-rose-500` tw`ring-offset-rose-600` tw`ring-offset-rose-700` tw`ring-offset-rose-800` tw`ring-offset-rose-900` tw`ring-offset-rose-900/50` tw`ring-offset-rose-900/[.50]` tw`ring-offset-[#50d71e]` tw`ring-offset-red-500` tw`ring-offset-red-500/25` tw`ring-offset-red-500/fromConfig` tw`ring-offset-red-500/fromConfig/25` tw`ring-offset-red-500/fromConfig/[.555]` tw`ring-offset-red-500/fromConfig/[var(--myvar)]` tw`ring-offset-red-500/[.555]` tw`ring-offset-red-500/[var(--myvar)]` tw`ring-offset-[theme('colors.red.500')]` tw`ring-offset-[theme('colors.red.500')]/20` tw`ring-offset-electric` tw`ring-offset-electric/25` tw`ring-offset-electric/[.555]` tw`ring-offset-electric/[var(--myvar)]` tw`ring-offset-[theme('colors.electric')]` tw`ring-offset-[theme('colors.electric')]/20` tw`ring-offset-[color:green]` tw`ring-offset-[color:rgba(255, 255, 255, .45)]` tw`ring-offset-[length:10px]` ================================================ FILE: tests/__fixtures__/utilitiesBorders/ringOffsetWidth.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/ring-offset-width theme`ringOffsetWidth` tw`ring-offset-0` tw`ring-offset-1` tw`ring-offset-2` tw`ring-offset-4` tw`ring-offset-8` tw`ring-offset-[3px]` tw`ring-offset-[19rem]` tw`ring-offset-[#76ad65]` ================================================ FILE: tests/__fixtures__/utilitiesBorders/ringOpacity.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/ring-opacity // Deprecated in favor of slash opacity syntax tw`ring-opacity-0` tw`ring-opacity-5` tw`ring-opacity-10` tw`ring-opacity-20` tw`ring-opacity-25` tw`ring-opacity-30` tw`ring-opacity-40` tw`ring-opacity-50` tw`ring-opacity-60` tw`ring-opacity-70` tw`ring-opacity-75` tw`ring-opacity-80` tw`ring-opacity-90` tw`ring-opacity-95` tw`ring-opacity-100` tw`ring-opacity-[var(--ring-opacity)]` ================================================ FILE: tests/__fixtures__/utilitiesBorders/ringWidth.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/ring-width theme`ringWidth.` tw`ring-0` tw`ring-1` tw`ring-2` tw`ring` tw`ring-4` tw`ring-8` tw`ring-inset` tw`ring-[10px]` ================================================ FILE: tests/__fixtures__/utilitiesBorders/tailwind.config.js ================================================ module.exports = { theme: { extend: { colors: { 'red-500/fromConfig': '#000', electric: ({ opacityVariable, opacityValue }) => { if (opacityValue !== undefined) { return `rgba(219, 0, 255, ${opacityValue})` } if (opacityVariable !== undefined) { return `rgba(219, 0, 255, var(${opacityVariable}, 1))` } return `rgb(219, 0, 255)` }, }, }, }, } ================================================ FILE: tests/__fixtures__/utilitiesEffects/backgroundBlendMode.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/background-blend-mode tw`bg-blend-normal` tw`bg-blend-multiply` tw`bg-blend-screen` tw`bg-blend-overlay` tw`bg-blend-darken` tw`bg-blend-lighten` tw`bg-blend-color-dodge` tw`bg-blend-color-burn` tw`bg-blend-hard-light` tw`bg-blend-soft-light` tw`bg-blend-difference` tw`bg-blend-exclusion` tw`bg-blend-hue` tw`bg-blend-saturation` tw`bg-blend-color` tw`bg-blend-luminosity` ================================================ FILE: tests/__fixtures__/utilitiesEffects/boxShadow.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/box-shadow theme`boxShadow.` tw`shadow-sm` tw`shadow` tw`shadow-md` tw`shadow-lg` tw`shadow-xl` tw`shadow-2xl` tw`shadow-inner` tw`shadow-none` tw`shadow-[0 35px 60px -15px rgba(0,0,0,0.3)]` ================================================ FILE: tests/__fixtures__/utilitiesEffects/boxShadowColor.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/box-shadow-color theme`boxShadowColor` tw`shadow-inherit` tw`shadow-current` tw`shadow-transparent` tw`shadow-black` tw`shadow-white` tw`shadow-slate-50` tw`shadow-slate-100` tw`shadow-slate-200` tw`shadow-slate-300` tw`shadow-slate-400` tw`shadow-slate-500` tw`shadow-slate-600` tw`shadow-slate-700` tw`shadow-slate-800` tw`shadow-slate-900` tw`shadow-gray-50` tw`shadow-gray-100` tw`shadow-gray-200` tw`shadow-gray-300` tw`shadow-gray-400` tw`shadow-gray-500` tw`shadow-gray-600` tw`shadow-gray-700` tw`shadow-gray-800` tw`shadow-gray-900` tw`shadow-zinc-50` tw`shadow-zinc-100` tw`shadow-zinc-200` tw`shadow-zinc-300` tw`shadow-zinc-400` tw`shadow-zinc-500` tw`shadow-zinc-600` tw`shadow-zinc-700` tw`shadow-zinc-800` tw`shadow-zinc-900` tw`shadow-neutral-50` tw`shadow-neutral-100` tw`shadow-neutral-200` tw`shadow-neutral-300` tw`shadow-neutral-400` tw`shadow-neutral-500` tw`shadow-neutral-600` tw`shadow-neutral-700` tw`shadow-neutral-800` tw`shadow-neutral-900` tw`shadow-stone-50` tw`shadow-stone-100` tw`shadow-stone-200` tw`shadow-stone-300` tw`shadow-stone-400` tw`shadow-stone-500` tw`shadow-stone-600` tw`shadow-stone-700` tw`shadow-stone-800` tw`shadow-stone-900` tw`shadow-red-50` tw`shadow-red-100` tw`shadow-red-200` tw`shadow-red-300` tw`shadow-red-400` tw`shadow-red-500` tw`shadow-red-600` tw`shadow-red-700` tw`shadow-red-800` tw`shadow-red-900` tw`shadow-orange-50` tw`shadow-orange-100` tw`shadow-orange-200` tw`shadow-orange-300` tw`shadow-orange-400` tw`shadow-orange-500` tw`shadow-orange-600` tw`shadow-orange-700` tw`shadow-orange-800` tw`shadow-orange-900` tw`shadow-amber-50` tw`shadow-amber-100` tw`shadow-amber-200` tw`shadow-amber-300` tw`shadow-amber-400` tw`shadow-amber-500` tw`shadow-amber-600` tw`shadow-amber-700` tw`shadow-amber-800` tw`shadow-amber-900` tw`shadow-yellow-50` tw`shadow-yellow-100` tw`shadow-yellow-200` tw`shadow-yellow-300` tw`shadow-yellow-400` tw`shadow-yellow-500` tw`shadow-yellow-600` tw`shadow-yellow-700` tw`shadow-yellow-800` tw`shadow-yellow-900` tw`shadow-lime-50` tw`shadow-lime-100` tw`shadow-lime-200` tw`shadow-lime-300` tw`shadow-lime-400` tw`shadow-lime-500` tw`shadow-lime-600` tw`shadow-lime-700` tw`shadow-lime-800` tw`shadow-lime-900` tw`shadow-green-50` tw`shadow-green-100` tw`shadow-green-200` tw`shadow-green-300` tw`shadow-green-400` tw`shadow-green-500` tw`shadow-green-600` tw`shadow-green-700` tw`shadow-green-800` tw`shadow-green-900` tw`shadow-emerald-50` tw`shadow-emerald-100` tw`shadow-emerald-200` tw`shadow-emerald-300` tw`shadow-emerald-400` tw`shadow-emerald-500` tw`shadow-emerald-600` tw`shadow-emerald-700` tw`shadow-emerald-800` tw`shadow-emerald-900` tw`shadow-teal-50` tw`shadow-teal-100` tw`shadow-teal-200` tw`shadow-teal-300` tw`shadow-teal-400` tw`shadow-teal-500` tw`shadow-teal-600` tw`shadow-teal-700` tw`shadow-teal-800` tw`shadow-teal-900` tw`shadow-cyan-50` tw`shadow-cyan-100` tw`shadow-cyan-200` tw`shadow-cyan-300` tw`shadow-cyan-400` tw`shadow-cyan-500` tw`shadow-cyan-600` tw`shadow-cyan-700` tw`shadow-cyan-800` tw`shadow-cyan-900` tw`shadow-sky-50` tw`shadow-sky-100` tw`shadow-sky-200` tw`shadow-sky-300` tw`shadow-sky-400` tw`shadow-sky-500` tw`shadow-sky-600` tw`shadow-sky-700` tw`shadow-sky-800` tw`shadow-sky-900` tw`shadow-blue-50` tw`shadow-blue-100` tw`shadow-blue-200` tw`shadow-blue-300` tw`shadow-blue-400` tw`shadow-blue-500` tw`shadow-blue-600` tw`shadow-blue-700` tw`shadow-blue-800` tw`shadow-blue-900` tw`shadow-indigo-50` tw`shadow-indigo-100` tw`shadow-indigo-200` tw`shadow-indigo-300` tw`shadow-indigo-400` tw`shadow-indigo-500` tw`shadow-indigo-600` tw`shadow-indigo-700` tw`shadow-indigo-800` tw`shadow-indigo-900` tw`shadow-violet-50` tw`shadow-violet-100` tw`shadow-violet-200` tw`shadow-violet-300` tw`shadow-violet-400` tw`shadow-violet-500` tw`shadow-violet-600` tw`shadow-violet-700` tw`shadow-violet-800` tw`shadow-violet-900` tw`shadow-purple-50` tw`shadow-purple-100` tw`shadow-purple-200` tw`shadow-purple-300` tw`shadow-purple-400` tw`shadow-purple-500` tw`shadow-purple-600` tw`shadow-purple-700` tw`shadow-purple-800` tw`shadow-purple-900` tw`shadow-fuchsia-50` tw`shadow-fuchsia-100` tw`shadow-fuchsia-200` tw`shadow-fuchsia-300` tw`shadow-fuchsia-400` tw`shadow-fuchsia-500` tw`shadow-fuchsia-600` tw`shadow-fuchsia-700` tw`shadow-fuchsia-800` tw`shadow-fuchsia-900` tw`shadow-pink-50` tw`shadow-pink-100` tw`shadow-pink-200` tw`shadow-pink-300` tw`shadow-pink-400` tw`shadow-pink-500` tw`shadow-pink-600` tw`shadow-pink-700` tw`shadow-pink-800` tw`shadow-pink-900` tw`shadow-rose-50` tw`shadow-rose-100` tw`shadow-rose-200` tw`shadow-rose-300` tw`shadow-rose-400` tw`shadow-rose-500` tw`shadow-rose-600` tw`shadow-rose-700` tw`shadow-rose-800` tw`shadow-rose-900` tw`shadow-cyan-500/50` tw`shadow-cyan-500/[.50]` tw`shadow-[#50d71e]` tw`shadow-[color:#50d71e]` tw`shadow-[shadow:#50d71e]` ================================================ FILE: tests/__fixtures__/utilitiesEffects/mixBlendMode.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/mix-blend-mode tw`mix-blend-normal` tw`mix-blend-multiply` tw`mix-blend-screen` tw`mix-blend-overlay` tw`mix-blend-darken` tw`mix-blend-lighten` tw`mix-blend-color-dodge` tw`mix-blend-color-burn` tw`mix-blend-hard-light` tw`mix-blend-soft-light` tw`mix-blend-difference` tw`mix-blend-exclusion` tw`mix-blend-hue` tw`mix-blend-saturation` tw`mix-blend-color` tw`mix-blend-luminosity` tw`mix-blend-plus-lighter` ================================================ FILE: tests/__fixtures__/utilitiesEffects/opacity.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/opacity theme`opacity` tw`opacity-0` tw`opacity-5` tw`opacity-10` tw`opacity-20` tw`opacity-25` tw`opacity-30` tw`opacity-40` tw`opacity-50` tw`opacity-60` tw`opacity-70` tw`opacity-75` tw`opacity-80` tw`opacity-90` tw`opacity-95` tw`opacity-100` tw`opacity-[.1]` tw`opacity-[var(--opacity)]` ================================================ FILE: tests/__fixtures__/utilitiesFilters/backdropBlur.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/backdrop-blur theme`backdropBlur.` tw`backdrop-blur-none` tw`backdrop-blur-sm` tw`backdrop-blur` tw`backdrop-blur-md` tw`backdrop-blur-lg` tw`backdrop-blur-xl` tw`backdrop-blur-2xl` tw`backdrop-blur-3xl` tw`backdrop-blur-[2px]` ================================================ FILE: tests/__fixtures__/utilitiesFilters/backdropBrightness.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/backdrop-brightness theme`brightness` tw`brightness-0` tw`brightness-50` tw`brightness-75` tw`brightness-90` tw`brightness-95` tw`brightness-100` tw`brightness-105` tw`brightness-110` tw`brightness-125` tw`brightness-150` tw`brightness-200` tw`brightness-[1.75]` ================================================ FILE: tests/__fixtures__/utilitiesFilters/backdropContrast.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/backdrop-contrast theme`backdropContrast` tw`backdrop-contrast-0` tw`backdrop-contrast-50` tw`backdrop-contrast-75` tw`backdrop-contrast-100` tw`backdrop-contrast-125` tw`backdrop-contrast-150` tw`backdrop-contrast-200` tw`backdrop-contrast-[.25]` ================================================ FILE: tests/__fixtures__/utilitiesFilters/backdropGrayscale.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/backdrop-grayscale theme`backdropGrayscale.` tw`backdrop-grayscale-0` tw`backdrop-grayscale` tw`backdrop-grayscale-[.5]` ================================================ FILE: tests/__fixtures__/utilitiesFilters/backdropHueRotate.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/backdrop-hue-rotate theme`backdropHueRotate` tw`backdrop-hue-rotate-0` tw`backdrop-hue-rotate-15` tw`backdrop-hue-rotate-30` tw`backdrop-hue-rotate-60` tw`backdrop-hue-rotate-90` tw`backdrop-hue-rotate-180` tw`-backdrop-hue-rotate-0` tw`-backdrop-hue-rotate-15` tw`-backdrop-hue-rotate-30` tw`-backdrop-hue-rotate-60` tw`-backdrop-hue-rotate-90` tw`-backdrop-hue-rotate-180` tw`backdrop-hue-rotate-[270deg]` tw`-backdrop-hue-rotate-[270deg]` ================================================ FILE: tests/__fixtures__/utilitiesFilters/backdropInvert.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/backdrop-invert theme`backdropInvert.` tw`backdrop-invert-0` tw`backdrop-invert` tw`backdrop-invert-[.25]` ================================================ FILE: tests/__fixtures__/utilitiesFilters/backdropOpacity.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/backdrop-opacity theme`backdropOpacity` tw`backdrop-opacity-0` tw`backdrop-opacity-5` tw`backdrop-opacity-10` tw`backdrop-opacity-20` tw`backdrop-opacity-25` tw`backdrop-opacity-30` tw`backdrop-opacity-40` tw`backdrop-opacity-50` tw`backdrop-opacity-60` tw`backdrop-opacity-70` tw`backdrop-opacity-75` tw`backdrop-opacity-80` tw`backdrop-opacity-90` tw`backdrop-opacity-95` tw`backdrop-opacity-100` tw`backdrop-opacity-[.15]` ================================================ FILE: tests/__fixtures__/utilitiesFilters/backdropSaturate.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/backdrop-saturate theme`backdropSaturate` tw`backdrop-saturate-0` tw`backdrop-saturate-50` tw`backdrop-saturate-100` tw`backdrop-saturate-150` tw`backdrop-saturate-200` tw`backdrop-saturate-[.25]` ================================================ FILE: tests/__fixtures__/utilitiesFilters/backdropSepia.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/backdrop-sepia theme`backdropSepia.` tw`backdrop-sepia-0` tw`backdrop-sepia` tw`backdrop-sepia-[.25]` ================================================ FILE: tests/__fixtures__/utilitiesFilters/blur.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/blur theme`blur.` tw`blur-none` tw`blur-sm` tw`blur` tw`blur-md` tw`blur-lg` tw`blur-xl` tw`blur-2xl` tw`blur-3xl` tw`blur-[2px]` ================================================ FILE: tests/__fixtures__/utilitiesFilters/brightness.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/brightness theme`brightness` tw`brightness-0` tw`brightness-50` tw`brightness-75` tw`brightness-90` tw`brightness-95` tw`brightness-100` tw`brightness-105` tw`brightness-110` tw`brightness-125` tw`brightness-150` tw`brightness-200` tw`brightness-[-1.75]` tw`brightness-[1.75]` ================================================ FILE: tests/__fixtures__/utilitiesFilters/contrast.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/contrast theme`contrast` tw`contrast-0` tw`contrast-50` tw`contrast-75` tw`contrast-100` tw`contrast-125` tw`contrast-150` tw`contrast-200` tw`contrast-[.25]` tw`contrast-[-.25]` ================================================ FILE: tests/__fixtures__/utilitiesFilters/dropShadow.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/drop-shadow theme`dropShadow` tw`drop-shadow-sm` tw`drop-shadow` tw`drop-shadow-md` tw`drop-shadow-lg` tw`drop-shadow-xl` tw`drop-shadow-2xl` tw`drop-shadow-none` tw`drop-shadow-[0 35px 35px rgba(0, 0, 0, 0.25)]` ================================================ FILE: tests/__fixtures__/utilitiesFilters/grayscale.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/grayscale theme`grayscale.` tw`grayscale-0` tw`grayscale` tw`grayscale-[50%]` ================================================ FILE: tests/__fixtures__/utilitiesFilters/hueRotate.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/hue-rotate theme`hueRotate` tw`hue-rotate-0` tw`hue-rotate-15` tw`hue-rotate-30` tw`hue-rotate-60` tw`hue-rotate-90` tw`hue-rotate-180` tw`-hue-rotate-0` tw`-hue-rotate-15` tw`-hue-rotate-30` tw`-hue-rotate-60` tw`-hue-rotate-90` tw`-hue-rotate-180` tw`hue-rotate-[270deg]` ================================================ FILE: tests/__fixtures__/utilitiesFilters/invert.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/invert theme`invert.` tw`invert-0` tw`invert` tw`invert-[.25]` ================================================ FILE: tests/__fixtures__/utilitiesFilters/misc.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/filter tw`filter-none` tw`filter` // Deprecated // https://tailwindcss.com/docs/backdrop-filter tw`backdrop-filter` // Deprecated tw`backdrop-filter-none` // All tw`filter blur-2xl brightness-50 contrast-50 grayscale hue-rotate-180 invert saturate-50 sepia drop-shadow-2xl` // All tw`backdrop-filter backdrop-blur-2xl backdrop-brightness-50 backdrop-contrast-50 backdrop-grayscale backdrop-hue-rotate-180 backdrop-invert backdrop-opacity-50 backdrop-saturate-50 backdrop-sepia` ================================================ FILE: tests/__fixtures__/utilitiesFilters/saturate.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/saturate theme`saturate` tw`saturate-0` tw`saturate-50` tw`saturate-100` tw`saturate-150` tw`saturate-200` tw`saturate-[.25]` ================================================ FILE: tests/__fixtures__/utilitiesFilters/sepia.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/sepia theme`sepia.` tw`sepia-0` tw`sepia` tw`sepia-[.25]` ================================================ FILE: tests/__fixtures__/utilitiesLayout/aspectRatio.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/aspect-ratio theme`aspectRatio` tw`aspect-auto` tw`aspect-square` tw`aspect-video` tw`aspect-[4/3]` ================================================ FILE: tests/__fixtures__/utilitiesLayout/boxDecorationBreak.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/box-decoration-break tw`decoration-clone` tw`decoration-slice` tw`box-decoration-clone` tw`box-decoration-slice` ================================================ FILE: tests/__fixtures__/utilitiesLayout/boxSizing.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/box-sizing tw`box-border` tw`box-content` ================================================ FILE: tests/__fixtures__/utilitiesLayout/breakAfter.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/break-after tw`break-after-auto` tw`break-after-avoid` tw`break-after-all` tw`break-after-avoid-page` tw`break-after-page` tw`break-after-left` tw`break-after-right` tw`break-after-column` ================================================ FILE: tests/__fixtures__/utilitiesLayout/breakBefore.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/break-before tw`break-before-auto` tw`break-before-avoid` tw`break-before-all` tw`break-before-avoid-page` tw`break-before-page` tw`break-before-left` tw`break-before-right` tw`break-before-column` ================================================ FILE: tests/__fixtures__/utilitiesLayout/breakInside.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/break-inside tw`break-inside-auto` tw`break-inside-avoid` tw`break-inside-avoid-page` tw`break-inside-avoid-column` ================================================ FILE: tests/__fixtures__/utilitiesLayout/clear.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/clear tw`clear-left` tw`clear-right` tw`clear-both` tw`clear-none` ================================================ FILE: tests/__fixtures__/utilitiesLayout/columns.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/columns theme`columns` tw`columns-1` tw`columns-2` tw`columns-3` tw`columns-4` tw`columns-5` tw`columns-6` tw`columns-7` tw`columns-8` tw`columns-9` tw`columns-10` tw`columns-11` tw`columns-12` tw`columns-auto` tw`columns-3xs` tw`columns-2xs` tw`columns-xs` tw`columns-sm` tw`columns-md` tw`columns-lg` tw`columns-xl` tw`columns-2xl` tw`columns-3xl` tw`columns-4xl` tw`columns-5xl` tw`columns-6xl` tw`columns-7xl` tw`columns-[10rem]` ================================================ FILE: tests/__fixtures__/utilitiesLayout/container.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/container theme`container` tw`container` tw`md:container md:mx-auto` ================================================ FILE: tests/__fixtures__/utilitiesLayout/display.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/display tw`block` tw`inline-block` tw`inline` tw`flex` tw`inline-flex` tw`table` tw`table-caption` tw`table-cell` tw`table-column` tw`table-column-group` tw`table-footer-group` tw`table-header-group` tw`table-row-group` tw`table-row` tw`flow-root` tw`grid` tw`inline-grid` tw`contents` tw`list-item` tw`hidden` ================================================ FILE: tests/__fixtures__/utilitiesLayout/float.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/float tw`float-right` tw`float-left` tw`float-none` ================================================ FILE: tests/__fixtures__/utilitiesLayout/isolation.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/isolation tw`isolate` tw`isolation-auto` ================================================ FILE: tests/__fixtures__/utilitiesLayout/objectFit.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/object-fit tw`object-contain` tw`object-cover` tw`object-fill` tw`object-none` tw`object-scale-down` ================================================ FILE: tests/__fixtures__/utilitiesLayout/objectPosition.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/object-position theme`objectPosition` tw`object-bottom` tw`object-center` tw`object-left` tw`object-left-bottom` tw`object-left-top` tw`object-right` tw`object-right-bottom` tw`object-right-top` tw`object-top` tw`object-[center bottom]` tw`object-[var(--position)]` ================================================ FILE: tests/__fixtures__/utilitiesLayout/overflow.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/overflow tw`overflow-auto` tw`overflow-hidden` tw`overflow-clip` tw`overflow-x-clip` tw`overflow-y-clip` tw`overflow-visible` tw`overflow-scroll` tw`overflow-x-auto` tw`overflow-y-auto` tw`overflow-x-hidden` tw`overflow-y-hidden` tw`overflow-x-visible` tw`overflow-y-visible` tw`overflow-x-scroll` tw`overflow-y-scroll` ================================================ FILE: tests/__fixtures__/utilitiesLayout/overscrollBehavior.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/overscroll-behavior tw`overscroll-auto` tw`overscroll-contain` tw`overscroll-none` tw`overscroll-y-auto` tw`overscroll-y-contain` tw`overscroll-y-none` tw`overscroll-x-auto` tw`overscroll-x-contain` tw`overscroll-x-none` ================================================ FILE: tests/__fixtures__/utilitiesLayout/position.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/position tw`static` tw`fixed` tw`absolute` tw`relative` tw`sticky` ================================================ FILE: tests/__fixtures__/utilitiesLayout/tailwind.config.js ================================================ module.exports = { theme: { container: { padding: { DEFAULT: ['1rem', '2rem'], sm: ['2rem'], lg: '4rem', xl: '6rem', object: '8rem', 'object-width': '10rem', 'object-min-max': '12rem', }, margin: { DEFAULT: ['2rem', '3rem'], sm: ['auto'], lg: '5rem', xl: '7rem', }, }, extend: { screens: { object: { min: '968px' }, 'object-width': { 'min-width': '992px' }, 'object-min-max': { min: '1200px', max: '1600px' }, }, }, }, } ================================================ FILE: tests/__fixtures__/utilitiesLayout/topRightBottomLeft.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/top-right-bottom-left theme`inset` tw`inset-0` tw`-inset-0` tw`inset-y-0` tw`inset-x-0` tw`-inset-y-0` tw`-inset-x-0` tw`top-0` tw`right-0` tw`bottom-0` tw`left-0` tw`-top-0` tw`-right-0` tw`-bottom-0` tw`-left-0` tw`inset-0.5` tw`-inset-0.5` tw`inset-y-0.5` tw`inset-x-0.5` tw`-inset-y-0.5` tw`-inset-x-0.5` tw`top-0.5` tw`right-0.5` tw`bottom-0.5` tw`left-0.5` tw`-top-0.5` tw`-right-0.5` tw`-bottom-0.5` tw`-left-0.5` tw`inset-1` tw`-inset-1` tw`inset-y-1` tw`inset-x-1` tw`-inset-y-1` tw`-inset-x-1` tw`top-1` tw`right-1` tw`bottom-1` tw`left-1` tw`-top-1` tw`-right-1` tw`-bottom-1` tw`-left-1` tw`inset-1.5` tw`-inset-1.5` tw`inset-y-1.5` tw`inset-x-1.5` tw`-inset-y-1.5` tw`-inset-x-1.5` tw`top-1.5` tw`right-1.5` tw`bottom-1.5` tw`left-1.5` tw`-top-1.5` tw`-right-1.5` tw`-bottom-1.5` tw`-left-1.5` tw`inset-2` tw`-inset-2` tw`inset-y-2` tw`inset-x-2` tw`-inset-y-2` tw`-inset-x-2` tw`top-2` tw`right-2` tw`bottom-2` tw`left-2` tw`-top-2` tw`-right-2` tw`-bottom-2` tw`-left-2` tw`inset-2.5` tw`-inset-2.5` tw`inset-y-2.5` tw`inset-x-2.5` tw`-inset-y-2.5` tw`top-2.5` tw`right-2.5` tw`bottom-2.5` tw`left-2.5` tw`-top-2.5` tw`-bottom-2.5` tw`-left-2.5` tw`inset-3` tw`-inset-3` tw`inset-y-3` tw`inset-x-3` tw`-inset-y-3` tw`-inset-x-3` tw`top-3` tw`right-3` tw`bottom-3` tw`left-3` tw`-top-3` tw`-right-3` tw`-bottom-3` tw`-left-3` tw`inset-3.5` tw`-inset-3.5` tw`inset-y-3.5` tw`inset-x-3.5` tw`-inset-y-3.5` tw`-inset-x-3.5` tw`top-3.5` tw`right-3.5` tw`bottom-3.5` tw`left-3.5` tw`-top-3.5` tw`-right-3.5` tw`-bottom-3.5` tw`-left-3.5` tw`inset-4` tw`-inset-4` tw`inset-y-4` tw`inset-x-4` tw`-inset-y-4` tw`-inset-x-4` tw`top-4` tw`right-4` tw`bottom-4` tw`left-4` tw`-top-4` tw`-right-4` tw`-bottom-4` tw`-left-4` tw`inset-5` tw`-inset-5` tw`inset-y-5` tw`inset-x-5` tw`-inset-y-5` tw`-inset-x-5` tw`top-5` tw`right-5` tw`bottom-5` tw`left-5` tw`-top-5` tw`-right-5` tw`-bottom-5` tw`-left-5` tw`inset-6` tw`-inset-6` tw`inset-y-6` tw`inset-x-6` tw`-inset-y-6` tw`-inset-x-6` tw`top-6` tw`right-6` tw`bottom-6` tw`left-6` tw`-top-6` tw`-right-6` tw`-bottom-6` tw`-left-6` tw`inset-7` tw`-inset-7` tw`inset-y-7` tw`inset-x-7` tw`-inset-y-7` tw`-inset-x-7` tw`top-7` tw`right-7` tw`bottom-7` tw`left-7` tw`-top-7` tw`-right-7` tw`-bottom-7` tw`-left-7` tw`inset-8` tw`-inset-8` tw`inset-y-8` tw`inset-x-8` tw`-inset-y-8` tw`-inset-x-8` tw`top-8` tw`right-8` tw`bottom-8` tw`left-8` tw`-top-8` tw`-right-8` tw`-bottom-8` tw`-left-8` tw`inset-9` tw`-inset-9` tw`inset-y-9` tw`inset-x-9` tw`-inset-y-9` tw`-inset-x-9` tw`top-9` tw`right-9` tw`bottom-9` tw`left-9` tw`-top-9` tw`-right-9` tw`-bottom-9` tw`-left-9` tw`inset-10` tw`-inset-10` tw`inset-y-10` tw`inset-x-10` tw`-inset-y-10` tw`-inset-x-10` tw`top-10` tw`right-10` tw`bottom-10` tw`left-10` tw`-top-10` tw`-right-10` tw`-bottom-10` tw`-left-10` tw`inset-11` tw`-inset-11` tw`inset-y-11` tw`inset-x-11` tw`-inset-y-11` tw`-inset-x-11` tw`top-11` tw`right-11` tw`bottom-11` tw`left-11` tw`-top-11` tw`-right-11` tw`-bottom-11` tw`-left-11` tw`inset-12` tw`-inset-12` tw`inset-y-12` tw`inset-x-12` tw`-inset-y-12` tw`-inset-x-12` tw`top-12` tw`right-12` tw`bottom-12` tw`left-12` tw`-top-12` tw`-right-12` tw`-bottom-12` tw`-left-12` tw`inset-14` tw`-inset-14` tw`inset-y-14` tw`inset-x-14` tw`-inset-y-14` tw`-inset-x-14` tw`top-14` tw`right-14` tw`bottom-14` tw`left-14` tw`-top-14` tw`-right-14` tw`-bottom-14` tw`-left-14` tw`inset-16` tw`-inset-16` tw`inset-y-16` tw`inset-x-16` tw`-inset-y-16` tw`-inset-x-16` tw`top-16` tw`right-16` tw`bottom-16` tw`left-16` tw`-top-16` tw`-right-16` tw`-bottom-16` tw`-left-16` tw`inset-20` tw`-inset-20` tw`inset-y-20` tw`inset-x-20` tw`-inset-y-20` tw`-inset-x-20` tw`top-20` tw`right-20` tw`bottom-20` tw`left-20` tw`-top-20` tw`-right-20` tw`-bottom-20` tw`-left-20` tw`inset-24` tw`-inset-24` tw`inset-y-24` tw`inset-x-24` tw`-inset-y-24` tw`-inset-x-24` tw`top-24` tw`right-24` tw`bottom-24` tw`left-24` tw`-right-24` tw`-bottom-24` tw`-left-24` tw`inset-28` tw`-inset-28` tw`inset-y-28` tw`inset-x-28` tw`-inset-y-28` tw`-inset-x-28` tw`top-28` tw`right-28` tw`bottom-28` tw`left-28` tw`-top-28` tw`-right-28` tw`-bottom-28` tw`-left-28` tw`inset-32` tw`-inset-32` tw`inset-y-32` tw`inset-x-32` tw`-inset-y-32` tw`-inset-x-32` tw`right-32` tw`bottom-32` tw`left-32` tw`-top-32` tw`-right-32` tw`-bottom-32` tw`-left-32` tw`inset-36` tw`-inset-36` tw`inset-y-36` tw`inset-x-36` tw`-inset-y-36` tw`-inset-x-36` tw`top-36` tw`right-36` tw`bottom-36` tw`left-36` tw`-top-36` tw`-right-36` tw`-bottom-36` tw`-left-36` tw`inset-40` tw`-inset-40` tw`inset-y-40` tw`inset-x-40` tw`-inset-y-40` tw`-inset-x-40` tw`top-40` tw`right-40` tw`bottom-40` tw`left-40` tw`-top-40` tw`-right-40` tw`-bottom-40` tw`-left-40` tw`inset-44` tw`-inset-44` tw`inset-y-44` tw`inset-x-44` tw`-inset-y-44` tw`-inset-x-44` tw`top-44` tw`right-44` tw`bottom-44` tw`left-44` tw`-top-44` tw`-right-44` tw`-bottom-44` tw`-left-44` tw`inset-48` tw`-inset-48` tw`inset-y-48` tw`inset-x-48` tw`-inset-y-48` tw`-inset-x-48` tw`top-48` tw`right-48` tw`bottom-48` tw`left-48` tw`-right-48` tw`-bottom-48` tw`-left-48` tw`inset-52` tw`-inset-52` tw`inset-y-52` tw`inset-x-52` tw`-inset-y-52` tw`-inset-x-52` tw`top-52` tw`right-52` tw`bottom-52` tw`left-52` tw`-top-52` tw`-right-52` tw`-bottom-52` tw`-left-52` tw`inset-56` tw`-inset-56` tw`inset-y-56` tw`inset-x-56` tw`-inset-y-56` tw`-inset-x-56` tw`top-56` tw`right-56` tw`bottom-56` tw`left-56` tw`-top-56` tw`-right-56` tw`-bottom-56` tw`-left-56` tw`inset-60` tw`-inset-60` tw`inset-y-60` tw`inset-x-60` tw`-inset-y-60` tw`-inset-x-60` tw`top-60` tw`right-60` tw`bottom-60` tw`left-60` tw`-top-60` tw`-right-60` tw`-bottom-60` tw`-left-60` tw`inset-64` tw`-inset-64` tw`inset-y-64` tw`inset-x-64` tw`-inset-y-64` tw`-inset-x-64` tw`top-64` tw`right-64` tw`bottom-64` tw`left-64` tw`-top-64` tw`-right-64` tw`-bottom-64` tw`-left-64` tw`inset-72` tw`-inset-72` tw`inset-y-72` tw`inset-x-72` tw`-inset-y-72` tw`-inset-x-72` tw`top-72` tw`right-72` tw`bottom-72` tw`left-72` tw`-top-72` tw`-right-72` tw`-bottom-72` tw`-left-72` tw`inset-80` tw`-inset-80` tw`inset-y-80` tw`inset-x-80` tw`-inset-y-80` tw`-inset-x-80` tw`top-80` tw`right-80` tw`bottom-80` tw`left-80` tw`-top-80` tw`-right-80` tw`-bottom-80` tw`-left-80` tw`inset-96` tw`-inset-96` tw`inset-y-96` tw`inset-x-96` tw`-inset-y-96` tw`-inset-x-96` tw`top-96` tw`right-96` tw`bottom-96` tw`left-96` tw`-top-96` tw`-right-96` tw`-bottom-96` tw`-left-96` tw`inset-auto` tw`inset-px` tw`-inset-px` tw`inset-1/2` tw`inset-1/3` tw`inset-2/3` tw`inset-1/4` tw`inset-2/4` tw`inset-3/4` tw`inset-full` tw`-inset-1/2` tw`-inset-1/3` tw`-inset-2/3` tw`-inset-1/4` tw`-inset-2/4` tw`-inset-3/4` tw`-inset-full` tw`inset-y-auto` tw`inset-x-auto` tw`inset-y-px` tw`inset-x-px` tw`-inset-y-px` tw`-inset-x-px` tw`inset-y-1/2` tw`inset-x-1/2` tw`inset-y-1/3` tw`inset-x-1/3` tw`inset-y-2/3` tw`inset-x-2/3` tw`inset-y-1/4` tw`inset-x-1/4` tw`inset-y-2/4` tw`inset-x-2/4` tw`inset-y-3/4` tw`inset-x-3/4` tw`inset-y-full` tw`inset-x-full` tw`-inset-y-1/2` tw`-inset-x-1/2` tw`-inset-y-1/3` tw`-inset-x-1/3` tw`-inset-y-2/3` tw`-inset-x-2/3` tw`-inset-y-1/4` tw`-inset-x-1/4` tw`-inset-y-2/4` tw`-inset-x-2/4` tw`-inset-y-3/4` tw`-inset-x-3/4` tw`-inset-y-full` tw`-inset-x-full` tw`top-auto` tw`right-auto` tw`bottom-auto` tw`left-auto` tw`top-px` tw`right-px` tw`bottom-px` tw`left-px` tw`-top-px` tw`-right-px` tw`-bottom-px` tw`-left-px` tw`top-1/2` tw`right-1/2` tw`bottom-1/2` tw`left-1/2` tw`top-1/3` tw`right-1/3` tw`bottom-1/3` tw`left-1/3` tw`top-2/3` tw`right-2/3` tw`bottom-2/3` tw`left-2/3` tw`top-1/4` tw`right-1/4` tw`bottom-1/4` tw`left-1/4` tw`top-2/4` tw`right-2/4` tw`bottom-2/4` tw`left-2/4` tw`top-3/4` tw`right-3/4` tw`bottom-3/4` tw`left-3/4` tw`top-full` tw`right-full` tw`bottom-full` tw`left-full` tw`-top-1/2` tw`-right-1/2` tw`-bottom-1/2` tw`-left-1/2` tw`-top-1/3` tw`-right-1/3` tw`-bottom-1/3` tw`-left-1/3` tw`-top-2/3` tw`-right-2/3` tw`-bottom-2/3` tw`-left-2/3` tw`-top-1/4` tw`-right-1/4` tw`-bottom-1/4` tw`-left-1/4` tw`-top-2/4` tw`-right-2/4` tw`-bottom-2/4` tw`-left-2/4` tw`-top-3/4` tw`-right-3/4` tw`-bottom-3/4` tw`-left-3/4` tw`-top-full` tw`-right-full` tw`-bottom-full` tw`-left-full` tw`top-[3px]` tw`inset-[50px]!` tw`inset-6 inset-x-1 start-4 end-8` ================================================ FILE: tests/__fixtures__/utilitiesLayout/visibility.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/visibility tw`visible` tw`invisible` tw`collapse` ================================================ FILE: tests/__fixtures__/utilitiesLayout/zIndex.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/z-index theme`zIndex` tw`z-0` tw`-z-0` tw`z-10` tw`-z-10` tw`z-20` tw`-z-20` tw`z-30` tw`-z-30` tw`z-40` tw`-z-40` tw`z-50` tw`-z-50` tw`z-auto` tw`z-[100]` tw`z-[-100]` tw`-z-[100]` tw`-z-[-100]` ================================================ FILE: tests/__fixtures__/utilitiesSpacing/margin.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/margin theme`margin` tw`m-0` tw`m-px` tw`m-0.5` tw`m-1` tw`m-1.5` tw`m-2` tw`m-2.5` tw`m-3` tw`m-3.5` tw`m-4` tw`m-5` tw`m-6` tw`m-7` tw`m-8` tw`m-9` tw`m-10` tw`m-11` tw`m-12` tw`m-14` tw`m-16` tw`m-20` tw`m-24` tw`m-28` tw`m-32` tw`m-36` tw`m-40` tw`m-44` tw`m-48` tw`m-52` tw`m-56` tw`m-60` tw`m-64` tw`m-72` tw`m-80` tw`m-96` tw`m-auto` tw`-m-0` tw`-m-px` tw`-m-0.5` tw`-m-1` tw`-m-1.5` tw`-m-2` tw`-m-2.5` tw`-m-3` tw`-m-3.5` tw`-m-4` tw`-m-5` tw`-m-6` tw`-m-7` tw`-m-8` tw`-m-9` tw`-m-10` tw`-m-11` tw`-m-12` tw`-m-14` tw`-m-16` tw`-m-20` tw`-m-24` tw`-m-28` tw`-m-32` tw`-m-36` tw`-m-40` tw`-m-44` tw`-m-48` tw`-m-52` tw`-m-56` tw`-m-60` tw`-m-64` tw`-m-72` tw`-m-80` tw`-m-96` tw`my-0` tw`my-px` tw`my-0.5` tw`my-1` tw`my-1.5` tw`my-2` tw`my-2.5` tw`my-3` tw`my-3.5` tw`my-4` tw`my-5` tw`my-6` tw`my-7` tw`my-8` tw`my-9` tw`my-10` tw`my-11` tw`my-12` tw`my-14` tw`my-16` tw`my-20` tw`my-24` tw`my-28` tw`my-32` tw`my-36` tw`my-40` tw`my-44` tw`my-48` tw`my-52` tw`my-56` tw`my-60` tw`my-64` tw`my-72` tw`my-80` tw`my-96` tw`my-auto` tw`-my-0` tw`-my-px` tw`-my-0.5` tw`-my-1` tw`-my-1.5` tw`-my-2` tw`-my-2.5` tw`-my-3` tw`-my-3.5` tw`-my-4` tw`-my-5` tw`-my-6` tw`-my-7` tw`-my-8` tw`-my-9` tw`-my-10` tw`-my-11` tw`-my-12` tw`-my-14` tw`-my-16` tw`-my-20` tw`-my-24` tw`-my-28` tw`-my-32` tw`-my-36` tw`-my-40` tw`-my-44` tw`-my-48` tw`-my-52` tw`-my-56` tw`-my-60` tw`-my-64` tw`-my-72` tw`-my-80` tw`-my-96` tw`mx-0` tw`mx-px` tw`mx-0.5` tw`mx-1` tw`mx-1.5` tw`mx-2` tw`mx-2.5` tw`mx-3` tw`mx-3.5` tw`mx-4` tw`mx-5` tw`mx-6` tw`mx-7` tw`mx-8` tw`mx-9` tw`mx-10` tw`mx-12` tw`mx-14` tw`mx-16` tw`mx-20` tw`mx-24` tw`mx-28` tw`mx-32` tw`mx-36` tw`mx-40` tw`mx-44` tw`mx-48` tw`mx-52` tw`mx-56` tw`mx-60` tw`mx-64` tw`mx-72` tw`mx-80` tw`mx-auto` tw`-mx-0` tw`-mx-px` tw`-mx-0.5` tw`-mx-1` tw`-mx-1.5` tw`-mx-2` tw`-mx-2.5` tw`-mx-3` tw`-mx-3.5` tw`-mx-4` tw`-mx-5` tw`-mx-6` tw`-mx-7` tw`-mx-8` tw`-mx-9` tw`-mx-10` tw`-mx-11` tw`-mx-12` tw`-mx-14` tw`-mx-16` tw`-mx-20` tw`-mx-24` tw`-mx-28` tw`-mx-32` tw`-mx-36` tw`-mx-40` tw`-mx-44` tw`-mx-48` tw`-mx-52` tw`-mx-56` tw`-mx-60` tw`-mx-64` tw`-mx-72` tw`-mx-80` tw`-mx-96` tw`mt-0` tw`mt-px` tw`mt-0.5` tw`mt-1` tw`mt-1.5` tw`mt-2` tw`mt-2.5` tw`mt-3` tw`mt-3.5` tw`mt-4` tw`mt-5` tw`mt-6` tw`mt-7` tw`mt-8` tw`mt-9` tw`mt-10` tw`mt-11` tw`mt-12` tw`mt-14` tw`mt-16` tw`mt-20` tw`mt-24` tw`mt-28` tw`mt-32` tw`mt-36` tw`mt-40` tw`mt-44` tw`mt-48` tw`mt-52` tw`mt-56` tw`mt-60` tw`mt-64` tw`mt-72` tw`mt-80` tw`mt-96` tw`mt-auto` tw`-mt-0` tw`-mt-px` tw`-mt-0.5` tw`-mt-1` tw`-mt-1.5` tw`-mt-2` tw`-mt-2.5` tw`-mt-3` tw`-mt-3.5` tw`-mt-4` tw`-mt-5` tw`-mt-6` tw`-mt-7` tw`-mt-8` tw`-mt-9` tw`-mt-10` tw`-mt-11` tw`-mt-12` tw`-mt-14` tw`-mt-16` tw`-mt-20` tw`-mt-24` tw`-mt-28` tw`-mt-32` tw`-mt-36` tw`-mt-40` tw`-mt-44` tw`-mt-48` tw`-mt-52` tw`-mt-56` tw`-mt-60` tw`-mt-64` tw`-mt-72` tw`-mt-80` tw`-mt-96` tw`mr-0` tw`mr-px` tw`mr-0.5` tw`mr-1` tw`mr-1.5` tw`mr-2` tw`mr-2.5` tw`mr-3` tw`mr-3.5` tw`mr-4` tw`mr-5` tw`mr-6` tw`mr-7` tw`mr-8` tw`mr-9` tw`mr-10` tw`mr-11` tw`mr-12` tw`mr-14` tw`mr-16` tw`mr-20` tw`mr-24` tw`mr-28` tw`mr-32` tw`mr-36` tw`mr-40` tw`mr-44` tw`mr-48` tw`mr-52` tw`mr-56` tw`mr-60` tw`mr-64` tw`mr-72` tw`mr-80` tw`mr-96` tw`mr-auto` tw`-mr-0` tw`-mr-px` tw`-mr-0.5` tw`-mr-1` tw`-mr-1.5` tw`-mr-2` tw`-mr-2.5` tw`-mr-3` tw`-mr-3.5` tw`-mr-4` tw`-mr-5` tw`-mr-6` tw`-mr-7` tw`-mr-8` tw`-mr-9` tw`-mr-10` tw`-mr-11` tw`-mr-12` tw`-mr-14` tw`-mr-16` tw`-mr-20` tw`-mr-24` tw`-mr-28` tw`-mr-32` tw`-mr-36` tw`-mr-40` tw`-mr-44` tw`-mr-48` tw`-mr-52` tw`-mr-56` tw`-mr-60` tw`-mr-64` tw`-mr-72` tw`-mr-80` tw`-mr-96` tw`mb-0` tw`mb-px` tw`mb-0.5` tw`mb-1` tw`mb-1.5` tw`mb-2` tw`mb-2.5` tw`mb-3` tw`mb-3.5` tw`mb-4` tw`mb-5` tw`mb-6` tw`mb-7` tw`mb-8` tw`mb-9` tw`mb-10` tw`mb-11` tw`mb-12` tw`mb-14` tw`mb-16` tw`mb-20` tw`mb-24` tw`mb-28` tw`mb-32` tw`mb-36` tw`mb-40` tw`mb-44` tw`mb-48` tw`mb-52` tw`mb-56` tw`mb-60` tw`mb-64` tw`mb-72` tw`mb-80` tw`mb-96` tw`mb-auto` tw`-mb-0` tw`-mb-px` tw`-mb-0.5` tw`-mb-1` tw`-mb-1.5` tw`-mb-2` tw`-mb-2.5` tw`-mb-3` tw`-mb-3.5` tw`-mb-4` tw`-mb-5` tw`-mb-6` tw`-mb-7` tw`-mb-8` tw`-mb-9` tw`-mb-10` tw`-mb-11` tw`-mb-12` tw`-mb-14` tw`-mb-16` tw`-mb-20` tw`-mb-24` tw`-mb-28` tw`-mb-32` tw`-mb-36` tw`-mb-40` tw`-mb-44` tw`-mb-48` tw`-mb-52` tw`-mb-56` tw`-mb-60` tw`-mb-64` tw`-mb-72` tw`-mb-80` tw`-mb-96` tw`ml-0` tw`ml-px` tw`ml-0.5` tw`ml-1` tw`ml-1.5` tw`ml-2` tw`ml-2.5` tw`ml-3` tw`ml-3.5` tw`ml-4` tw`ml-5` tw`ml-6` tw`ml-7` tw`ml-8` tw`ml-9` tw`ml-10` tw`ml-11` tw`ml-12` tw`ml-14` tw`ml-16` tw`ml-20` tw`ml-24` tw`ml-28` tw`ml-32` tw`ml-36` tw`ml-40` tw`ml-44` tw`ml-48` tw`ml-52` tw`ml-56` tw`ml-60` tw`ml-64` tw`ml-72` tw`ml-80` tw`ml-96` tw`ml-auto` tw`-ml-0` tw`-ml-px` tw`-ml-0.5` tw`-ml-1` tw`-ml-1.5` tw`-ml-2` tw`-ml-2.5` tw`-ml-3` tw`-ml-3.5` tw`-ml-4` tw`-ml-5` tw`-ml-6` tw`-ml-7` tw`-ml-8` tw`-ml-9` tw`-ml-10` tw`-ml-11` tw`-ml-12` tw`-ml-14` tw`-ml-16` tw`-ml-20` tw`-ml-24` tw`-ml-28` tw`-ml-32` tw`-ml-36` tw`-ml-40` tw`-ml-44` tw`-ml-48` tw`-ml-52` tw`-ml-56` tw`-ml-60` tw`-ml-64` tw`-ml-72` tw`-ml-80` tw`-ml-96` tw`m-[5px]` tw`mt-[5px]` tw`ml-[5px]` tw`mr-[5px]` tw`mb-[5px]` tw`-m-[5px]` tw`-mt-[5px]` tw`-ml-[5px]` tw`-mr-[5px]` tw`-mb-[5px]` tw`mt-[clamp(30px,100px)]` tw`!-mt-4` tw`mt-6 mx-1 ms-4 me-8` ================================================ FILE: tests/__fixtures__/utilitiesSpacing/padding.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/padding theme`padding` tw`p-0` tw`p-px` tw`p-0.5` tw`p-1` tw`p-1.5` tw`p-2` tw`p-2.5` tw`p-3` tw`p-3.5` tw`p-4` tw`p-5` tw`p-6` tw`p-7` tw`p-8` tw`p-9` tw`p-10` tw`p-11` tw`p-12` tw`p-14` tw`p-16` tw`p-20` tw`p-24` tw`p-28` tw`p-32` tw`p-36` tw`p-40` tw`p-44` tw`p-48` tw`p-52` tw`p-56` tw`p-60` tw`p-64` tw`p-72` tw`p-80` tw`p-96` tw`py-0` tw`py-px` tw`py-0.5` tw`py-1` tw`py-1.5` tw`py-2` tw`py-2.5` tw`py-3` tw`py-3.5` tw`py-4` tw`py-5` tw`py-6` tw`py-7` tw`py-8` tw`py-9` tw`py-10` tw`py-11` tw`py-12` tw`py-14` tw`py-16` tw`py-20` tw`py-24` tw`py-28` tw`py-32` tw`py-36` tw`py-40` tw`py-44` tw`py-48` tw`py-52` tw`py-56` tw`py-60` tw`py-64` tw`py-72` tw`py-80` tw`py-96` tw`px-0` tw`px-px` tw`px-0.5` tw`px-1` tw`px-1.5` tw`px-2` tw`px-2.5` tw`px-3` tw`px-3.5` tw`px-4` tw`px-5` tw`px-6` tw`px-7` tw`px-8` tw`px-9` tw`px-10` tw`px-11` tw`px-12` tw`px-14` tw`px-16` tw`px-20` tw`px-24` tw`px-28` tw`px-32` tw`px-36` tw`px-40` tw`px-44` tw`px-48` tw`px-52` tw`px-56` tw`px-60` tw`px-64` tw`px-72` tw`px-80` tw`px-96` tw`pt-0` tw`pt-px` tw`pt-0.5` tw`pt-1` tw`pt-1.5` tw`pt-2` tw`pt-2.5` tw`pt-3` tw`pt-3.5` tw`pt-4` tw`pt-5` tw`pt-6` tw`pt-7` tw`pt-8` tw`pt-9` tw`pt-10` tw`pt-11` tw`pt-12` tw`pt-14` tw`pt-16` tw`pt-20` tw`pt-24` tw`pt-28` tw`pt-32` tw`pt-36` tw`pt-40` tw`pt-44` tw`pt-48` tw`pt-52` tw`pt-56` tw`pt-60` tw`pt-64` tw`pt-72` tw`pt-80` tw`pt-96` tw`pr-0` tw`pr-0.5` tw`pr-1` tw`pr-1.5` tw`pr-2` tw`pr-2.5` tw`pr-3` tw`pr-3.5` tw`pr-4` tw`pr-5` tw`pr-6` tw`pr-7` tw`pr-8` tw`pr-9` tw`pr-10` tw`pr-11` tw`pr-12` tw`pr-14` tw`pr-16` tw`pr-20` tw`pr-24` tw`pr-28` tw`pr-32` tw`pr-36` tw`pr-40` tw`pr-44` tw`pr-48` tw`pr-52` tw`pr-56` tw`pr-60` tw`pr-64` tw`pr-72` tw`pr-80` tw`pr-96` tw`pr-px` tw`pb-0` tw`pb-px` tw`pb-0.5` tw`pb-1` tw`pb-1.5` tw`pb-2` tw`pb-2.5` tw`pb-3` tw`pb-3.5` tw`pb-4` tw`pb-5` tw`pb-6` tw`pb-7` tw`pb-8` tw`pb-9` tw`pb-10` tw`pb-11` tw`pb-12` tw`pb-14` tw`pb-16` tw`pb-20` tw`pb-24` tw`pb-28` tw`pb-32` tw`pb-36` tw`pb-40` tw`pb-44` tw`pb-48` tw`pb-52` tw`pb-56` tw`pb-60` tw`pb-64` tw`pb-72` tw`pl-0` tw`pl-px` tw`pl-0.5` tw`pl-1` tw`pl-1.5` tw`pl-2` tw`pl-2.5` tw`pl-3` tw`pl-3.5` tw`pl-4` tw`pl-5` tw`pl-6` tw`pl-7` tw`pl-8` tw`pl-9` tw`pl-10` tw`pl-11` tw`pl-12` tw`pl-14` tw`pl-16` tw`pl-20` tw`pl-24` tw`pl-28` tw`pl-32` tw`pl-36` tw`pl-40` tw`pl-44` tw`pl-48` tw`pl-52` tw`pl-56` tw`pl-60` tw`pl-64` tw`pl-72` tw`pl-80` tw`pl-96` tw`p-[5px]` tw`pt-[5px]` tw`pl-[5px]` tw`pr-[5px]` tw`pb-[5px]` tw`p-[var(--app-padding)]` tw`pt-6 px-1 ps-4 pe-8` ================================================ FILE: tests/__fixtures__/utilitiesSpacing/spaceBetween.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/space theme`space` tw`space-x-0` tw`space-x-0.5` tw`space-x-1` tw`space-x-1.5` tw`space-x-2` tw`space-x-2.5` tw`space-x-3` tw`space-x-3.5` tw`space-x-4` tw`space-x-5` tw`space-x-6` tw`space-x-7` tw`space-x-8` tw`space-x-9` tw`space-x-10` tw`space-x-11` tw`space-x-12` tw`space-x-14` tw`space-x-16` tw`space-x-20` tw`space-x-24` tw`space-x-28` tw`space-x-32` tw`space-x-36` tw`space-x-40` tw`space-x-44` tw`space-x-48` tw`space-x-52` tw`space-x-56` tw`space-x-60` tw`space-x-64` tw`space-x-72` tw`space-x-80` tw`space-x-96` tw`space-x-px` tw`space-y-0` tw`space-y-0.5` tw`space-y-1` tw`space-y-1.5` tw`space-y-2` tw`space-y-2.5` tw`space-y-3` tw`space-y-3.5` tw`space-y-4` tw`space-y-5` tw`space-y-6` tw`space-y-7` tw`space-y-8` tw`space-y-9` tw`space-y-10` tw`space-y-12` tw`space-y-14` tw`space-y-16` tw`space-y-20` tw`space-y-24` tw`space-y-28` tw`space-y-32` tw`space-y-36` tw`space-y-40` tw`space-y-44` tw`space-y-48` tw`space-y-52` tw`space-y-56` tw`space-y-60` tw`space-y-64` tw`space-y-72` tw`space-y-80` tw`space-y-px` tw`-space-x-0` tw`-space-x-0.5` tw`-space-x-1` tw`-space-x-1.5` tw`-space-x-2` tw`-space-x-2.5` tw`-space-x-3` tw`-space-x-3.5` tw`-space-x-4` tw`-space-x-5` tw`-space-x-6` tw`-space-x-7` tw`-space-x-8` tw`-space-x-9` tw`-space-x-10` tw`-space-x-12` tw`-space-x-14` tw`-space-x-16` tw`-space-x-20` tw`-space-x-24` tw`-space-x-28` tw`-space-x-32` tw`-space-x-36` tw`-space-x-40` tw`-space-x-44` tw`-space-x-48` tw`-space-x-52` tw`-space-x-56` tw`-space-x-60` tw`-space-x-64` tw`-space-x-72` tw`-space-x-80` tw`-space-x-96` tw`-space-x-px` tw`-space-y-0` tw`-space-y-0.5` tw`-space-y-1` tw`-space-y-1.5` tw`-space-y-2` tw`-space-y-2.5` tw`-space-y-3` tw`-space-y-3.5` tw`-space-y-4` tw`-space-y-5` tw`-space-y-6` tw`-space-y-7` tw`-space-y-8` tw`-space-y-9` tw`-space-y-10` tw`-space-y-12` tw`-space-y-14` tw`-space-y-16` tw`-space-y-20` tw`-space-y-24` tw`-space-y-28` tw`-space-y-32` tw`-space-y-36` tw`-space-y-40` tw`-space-y-44` tw`-space-y-48` tw`-space-y-52` tw`-space-y-56` tw`-space-y-60` tw`-space-y-64` tw`-space-y-72` tw`-space-y-80` tw`-space-y-96` tw`-space-y-px` tw`space-x-reverse` tw`space-y-reverse` tw`space-x-[5px]` tw`space-y-[5px]` tw`-space-x-[5px]` tw`-space-y-[5px]` tw`space-x-reverse space-x-0` tw`space-x-0 space-x-reverse` tw`space-y-reverse space-y-0` tw`space-y-0 space-y-reverse` tw`space-x-reverse space-x-32` tw`space-x-32 space-x-reverse` tw`space-y-reverse space-y-32` tw`space-y-32 space-y-reverse` tw`space-x-reverse space-x-px` tw`space-x-px space-x-reverse` tw`space-y-reverse space-y-px` tw`space-y-px space-y-reverse` tw`space-x-reverse space-x-12` tw`space-x-12 space-x-reverse` tw`space-y-reverse space-y-12` tw`space-y-12 space-y-reverse` tw`space-x-[20cm]` tw`space-x-[calc(20%-1cm)]` ================================================ FILE: tests/__fixtures__/utilitiesSvg/fill.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/fill theme`fill` tw`fill-none` tw`fill-inherit` tw`fill-current` tw`fill-transparent` tw`fill-black` tw`fill-white` tw`fill-slate-50` tw`fill-slate-100` tw`fill-slate-200` tw`fill-slate-300` tw`fill-slate-400` tw`fill-slate-500` tw`fill-slate-600` tw`fill-slate-700` tw`fill-slate-800` tw`fill-slate-900` tw`fill-gray-50` tw`fill-gray-100` tw`fill-gray-200` tw`fill-gray-300` tw`fill-gray-400` tw`fill-gray-500` tw`fill-gray-600` tw`fill-gray-700` tw`fill-gray-800` tw`fill-gray-900` tw`fill-zinc-50` tw`fill-zinc-100` tw`fill-zinc-200` tw`fill-zinc-300` tw`fill-zinc-400` tw`fill-zinc-500` tw`fill-zinc-600` tw`fill-zinc-700` tw`fill-zinc-800` tw`fill-zinc-900` tw`fill-neutral-50` tw`fill-neutral-100` tw`fill-neutral-200` tw`fill-neutral-300` tw`fill-neutral-400` tw`fill-neutral-500` tw`fill-neutral-600` tw`fill-neutral-700` tw`fill-neutral-800` tw`fill-neutral-900` tw`fill-stone-50` tw`fill-stone-100` tw`fill-stone-200` tw`fill-stone-300` tw`fill-stone-400` tw`fill-stone-500` tw`fill-stone-600` tw`fill-stone-700` tw`fill-stone-800` tw`fill-stone-900` tw`fill-red-50` tw`fill-red-100` tw`fill-red-200` tw`fill-red-300` tw`fill-red-400` tw`fill-red-500` tw`fill-red-600` tw`fill-red-700` tw`fill-red-800` tw`fill-red-900` tw`fill-orange-50` tw`fill-orange-100` tw`fill-orange-200` tw`fill-orange-300` tw`fill-orange-400` tw`fill-orange-500` tw`fill-orange-600` tw`fill-orange-700` tw`fill-orange-800` tw`fill-orange-900` tw`fill-amber-50` tw`fill-amber-100` tw`fill-amber-200` tw`fill-amber-300` tw`fill-amber-400` tw`fill-amber-500` tw`fill-amber-600` tw`fill-amber-700` tw`fill-amber-800` tw`fill-amber-900` tw`fill-yellow-50` tw`fill-yellow-100` tw`fill-yellow-200` tw`fill-yellow-300` tw`fill-yellow-400` tw`fill-yellow-500` tw`fill-yellow-600` tw`fill-yellow-700` tw`fill-yellow-800` tw`fill-yellow-900` tw`fill-lime-50` tw`fill-lime-100` tw`fill-lime-200` tw`fill-lime-300` tw`fill-lime-400` tw`fill-lime-500` tw`fill-lime-600` tw`fill-lime-700` tw`fill-lime-800` tw`fill-lime-900` tw`fill-green-50` tw`fill-green-100` tw`fill-green-200` tw`fill-green-300` tw`fill-green-400` tw`fill-green-500` tw`fill-green-600` tw`fill-green-700` tw`fill-green-800` tw`fill-green-900` tw`fill-emerald-50` tw`fill-emerald-100` tw`fill-emerald-200` tw`fill-emerald-300` tw`fill-emerald-400` tw`fill-emerald-500` tw`fill-emerald-600` tw`fill-emerald-700` tw`fill-emerald-800` tw`fill-emerald-900` tw`fill-teal-50` tw`fill-teal-100` tw`fill-teal-200` tw`fill-teal-300` tw`fill-teal-400` tw`fill-teal-500` tw`fill-teal-600` tw`fill-teal-700` tw`fill-teal-800` tw`fill-teal-900` tw`fill-cyan-50` tw`fill-cyan-100` tw`fill-cyan-200` tw`fill-cyan-300` tw`fill-cyan-400` tw`fill-cyan-500` tw`fill-cyan-600` tw`fill-cyan-700` tw`fill-cyan-800` tw`fill-cyan-900` tw`fill-sky-50` tw`fill-sky-100` tw`fill-sky-200` tw`fill-sky-300` tw`fill-sky-400` tw`fill-sky-500` tw`fill-sky-600` tw`fill-sky-700` tw`fill-sky-800` tw`fill-sky-900` tw`fill-blue-50` tw`fill-blue-100` tw`fill-blue-200` tw`fill-blue-300` tw`fill-blue-400` tw`fill-blue-500` tw`fill-blue-600` tw`fill-blue-700` tw`fill-blue-800` tw`fill-blue-900` tw`fill-indigo-50` tw`fill-indigo-100` tw`fill-indigo-200` tw`fill-indigo-300` tw`fill-indigo-400` tw`fill-indigo-500` tw`fill-indigo-600` tw`fill-indigo-700` tw`fill-indigo-800` tw`fill-indigo-900` tw`fill-violet-50` tw`fill-violet-100` tw`fill-violet-200` tw`fill-violet-300` tw`fill-violet-400` tw`fill-violet-500` tw`fill-violet-600` tw`fill-violet-700` tw`fill-violet-800` tw`fill-violet-900` tw`fill-purple-50` tw`fill-purple-100` tw`fill-purple-200` tw`fill-purple-300` tw`fill-purple-400` tw`fill-purple-500` tw`fill-purple-600` tw`fill-purple-700` tw`fill-purple-800` tw`fill-purple-900` tw`fill-fuchsia-50` tw`fill-fuchsia-100` tw`fill-fuchsia-200` tw`fill-fuchsia-300` tw`fill-fuchsia-400` tw`fill-fuchsia-500` tw`fill-fuchsia-600` tw`fill-fuchsia-700` tw`fill-fuchsia-800` tw`fill-fuchsia-900` tw`fill-pink-50` tw`fill-pink-100` tw`fill-pink-200` tw`fill-pink-300` tw`fill-pink-400` tw`fill-pink-500` tw`fill-pink-600` tw`fill-pink-700` tw`fill-pink-800` tw`fill-pink-900` tw`fill-rose-50` tw`fill-rose-100` tw`fill-rose-200` tw`fill-rose-300` tw`fill-rose-400` tw`fill-rose-500` tw`fill-rose-600` tw`fill-rose-700` tw`fill-rose-800` tw`fill-rose-900` tw`fill-[#243c5a]` tw`fill-[var(--color)]` tw`fill-red-500` tw`fill-red-500/25` tw`fill-red-500/fromConfig` tw`fill-red-500/fromConfig/25` tw`fill-red-500/fromConfig/[.555]` tw`fill-red-500/fromConfig/[var(--myvar)]` tw`fill-red-500/[.555]` tw`fill-red-500/[var(--myvar)]` tw`fill-[theme('colors.red.500')]` tw`fill-[theme('colors.red.500')]/20` tw`fill-electric` tw`fill-electric/25` tw`fill-electric/[.555]` tw`fill-electric/[var(--myvar)]` tw`fill-[theme('colors.electric')]` tw`fill-[theme('colors.electric')]/20` ================================================ FILE: tests/__fixtures__/utilitiesSvg/stroke.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/stroke theme`stroke` tw`stroke-none` tw`stroke-inherit` tw`stroke-current` tw`stroke-transparent` tw`stroke-black` tw`stroke-white` tw`stroke-slate-50` tw`stroke-slate-100` tw`stroke-slate-200` tw`stroke-slate-300` tw`stroke-slate-400` tw`stroke-slate-500` tw`stroke-slate-600` tw`stroke-slate-700` tw`stroke-slate-800` tw`stroke-slate-900` tw`stroke-gray-50` tw`stroke-gray-100` tw`stroke-gray-200` tw`stroke-gray-300` tw`stroke-gray-400` tw`stroke-gray-500` tw`stroke-gray-600` tw`stroke-gray-700` tw`stroke-gray-800` tw`stroke-gray-900` tw`stroke-zinc-50` tw`stroke-zinc-100` tw`stroke-zinc-200` tw`stroke-zinc-300` tw`stroke-zinc-400` tw`stroke-zinc-500` tw`stroke-zinc-600` tw`stroke-zinc-700` tw`stroke-zinc-800` tw`stroke-zinc-900` tw`stroke-neutral-50` tw`stroke-neutral-100` tw`stroke-neutral-200` tw`stroke-neutral-300` tw`stroke-neutral-400` tw`stroke-neutral-500` tw`stroke-neutral-600` tw`stroke-neutral-700` tw`stroke-neutral-800` tw`stroke-neutral-900` tw`stroke-stone-50` tw`stroke-stone-100` tw`stroke-stone-200` tw`stroke-stone-300` tw`stroke-stone-400` tw`stroke-stone-500` tw`stroke-stone-600` tw`stroke-stone-700` tw`stroke-stone-800` tw`stroke-stone-900` tw`stroke-red-50` tw`stroke-red-100` tw`stroke-red-200` tw`stroke-red-300` tw`stroke-red-400` tw`stroke-red-500` tw`stroke-red-600` tw`stroke-red-700` tw`stroke-red-800` tw`stroke-red-900` tw`stroke-orange-50` tw`stroke-orange-100` tw`stroke-orange-200` tw`stroke-orange-300` tw`stroke-orange-400` tw`stroke-orange-500` tw`stroke-orange-600` tw`stroke-orange-700` tw`stroke-orange-800` tw`stroke-orange-900` tw`stroke-amber-50` tw`stroke-amber-100` tw`stroke-amber-200` tw`stroke-amber-300` tw`stroke-amber-400` tw`stroke-amber-500` tw`stroke-amber-600` tw`stroke-amber-700` tw`stroke-amber-800` tw`stroke-amber-900` tw`stroke-yellow-50` tw`stroke-yellow-100` tw`stroke-yellow-200` tw`stroke-yellow-300` tw`stroke-yellow-400` tw`stroke-yellow-500` tw`stroke-yellow-600` tw`stroke-yellow-700` tw`stroke-yellow-800` tw`stroke-yellow-900` tw`stroke-lime-50` tw`stroke-lime-100` tw`stroke-lime-200` tw`stroke-lime-300` tw`stroke-lime-400` tw`stroke-lime-500` tw`stroke-lime-600` tw`stroke-lime-700` tw`stroke-lime-800` tw`stroke-lime-900` tw`stroke-green-50` tw`stroke-green-100` tw`stroke-green-200` tw`stroke-green-300` tw`stroke-green-400` tw`stroke-green-500` tw`stroke-green-600` tw`stroke-green-700` tw`stroke-green-800` tw`stroke-green-900` tw`stroke-emerald-50` tw`stroke-emerald-100` tw`stroke-emerald-200` tw`stroke-emerald-300` tw`stroke-emerald-400` tw`stroke-emerald-500` tw`stroke-emerald-600` tw`stroke-emerald-700` tw`stroke-emerald-800` tw`stroke-emerald-900` tw`stroke-teal-50` tw`stroke-teal-100` tw`stroke-teal-200` tw`stroke-teal-300` tw`stroke-teal-400` tw`stroke-teal-500` tw`stroke-teal-600` tw`stroke-teal-700` tw`stroke-teal-800` tw`stroke-teal-900` tw`stroke-cyan-50` tw`stroke-cyan-100` tw`stroke-cyan-200` tw`stroke-cyan-300` tw`stroke-cyan-400` tw`stroke-cyan-500` tw`stroke-cyan-600` tw`stroke-cyan-700` tw`stroke-cyan-800` tw`stroke-cyan-900` tw`stroke-sky-50` tw`stroke-sky-100` tw`stroke-sky-200` tw`stroke-sky-300` tw`stroke-sky-400` tw`stroke-sky-500` tw`stroke-sky-600` tw`stroke-sky-700` tw`stroke-sky-800` tw`stroke-sky-900` tw`stroke-blue-50` tw`stroke-blue-100` tw`stroke-blue-200` tw`stroke-blue-300` tw`stroke-blue-400` tw`stroke-blue-500` tw`stroke-blue-600` tw`stroke-blue-700` tw`stroke-blue-800` tw`stroke-blue-900` tw`stroke-indigo-50` tw`stroke-indigo-100` tw`stroke-indigo-200` tw`stroke-indigo-300` tw`stroke-indigo-400` tw`stroke-indigo-500` tw`stroke-indigo-600` tw`stroke-indigo-700` tw`stroke-indigo-800` tw`stroke-indigo-900` tw`stroke-violet-50` tw`stroke-violet-100` tw`stroke-violet-200` tw`stroke-violet-300` tw`stroke-violet-400` tw`stroke-violet-500` tw`stroke-violet-600` tw`stroke-violet-700` tw`stroke-violet-800` tw`stroke-violet-900` tw`stroke-purple-50` tw`stroke-purple-100` tw`stroke-purple-200` tw`stroke-purple-300` tw`stroke-purple-400` tw`stroke-purple-500` tw`stroke-purple-600` tw`stroke-purple-700` tw`stroke-purple-800` tw`stroke-purple-900` tw`stroke-fuchsia-50` tw`stroke-fuchsia-100` tw`stroke-fuchsia-200` tw`stroke-fuchsia-300` tw`stroke-fuchsia-400` tw`stroke-fuchsia-500` tw`stroke-fuchsia-600` tw`stroke-fuchsia-700` tw`stroke-fuchsia-800` tw`stroke-fuchsia-900` tw`stroke-pink-50` tw`stroke-pink-100` tw`stroke-pink-200` tw`stroke-pink-300` tw`stroke-pink-400` tw`stroke-pink-500` tw`stroke-pink-600` tw`stroke-pink-700` tw`stroke-pink-800` tw`stroke-pink-900` tw`stroke-rose-50` tw`stroke-rose-100` tw`stroke-rose-200` tw`stroke-rose-300` tw`stroke-rose-400` tw`stroke-rose-500` tw`stroke-rose-600` tw`stroke-rose-700` tw`stroke-rose-800` tw`stroke-rose-900` tw`stroke-[#243c5a]` tw`stroke-red-500` tw`stroke-red-500/25` tw`stroke-red-500/fromConfig` tw`stroke-red-500/fromConfig/25` tw`stroke-red-500/fromConfig/[.555]` tw`stroke-red-500/fromConfig/[var(--myvar)]` tw`stroke-red-500/[.555]` tw`stroke-red-500/[var(--myvar)]` tw`stroke-[theme('colors.red.500')]` tw`stroke-[theme('colors.red.500')]/20` tw`stroke-electric` tw`stroke-electric/25` tw`stroke-electric/[.555]` tw`stroke-electric/[var(--myvar)]` tw`stroke-[theme('colors.electric')]` tw`stroke-[theme('colors.electric')]/20` tw`stroke-[color:green]` tw`stroke-[color:rgba(255, 255, 255, .45)]` tw`stroke-[length:10px]` ================================================ FILE: tests/__fixtures__/utilitiesSvg/strokeWidth.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/stroke-width theme`strokeWidth` tw`stroke-0` tw`stroke-1` tw`stroke-2` tw`stroke-[2px]` tw`stroke-[color:red]` tw`stroke-[length:2px]` tw`stroke-[number:10]` tw`stroke-[percentage:10%]` tw`stroke-[url:url(hand.cur)_2_2, pointer]` ================================================ FILE: tests/__fixtures__/utilitiesSvg/tailwind.config.js ================================================ module.exports = { theme: { extend: { colors: { 'red-500/fromConfig': '#000', electric: ({ opacityVariable, opacityValue }) => { if (opacityValue !== undefined) { return `rgba(219, 0, 255, ${opacityValue})` } if (opacityVariable !== undefined) { return `rgba(219, 0, 255, var(${opacityVariable}, 1))` } return `rgb(219, 0, 255)` }, }, }, }, } ================================================ FILE: tests/__fixtures__/utilitiesTransforms/misc.tsx ================================================ // @ts-nocheck import tw from '../macro' // Test the transform ordering - 'transform' should be moved to the start // https://github.com/ben-rogerson/twin.macro/issues/363 tw`mt-5 translate-y-2 transform` tw`translate-y-2 mt-5 md:(skew-y-6 transform) mb-5` ================================================ FILE: tests/__fixtures__/utilitiesTransforms/rotate.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/rotate theme`rotate` tw`rotate-0` tw`rotate-1` tw`rotate-2` tw`rotate-3` tw`rotate-6` tw`rotate-12` tw`rotate-45` tw`rotate-90` tw`rotate-180` tw`-rotate-1` tw`-rotate-2` tw`-rotate-3` tw`-rotate-6` tw`-rotate-12` tw`-rotate-45` tw`-rotate-90` tw`-rotate-180` tw`rotate-[17deg]` tw`rotate-[23deg] rotate-[2.3rad] rotate-[401grad] rotate-[1.5turn]` ================================================ FILE: tests/__fixtures__/utilitiesTransforms/scale.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/scale theme`scale` tw`scale-0` tw`scale-x-0` tw`scale-y-0` tw`scale-50` tw`scale-x-50` tw`scale-y-50` tw`scale-75` tw`scale-x-75` tw`scale-y-75` tw`scale-90` tw`scale-x-90` tw`scale-y-90` tw`scale-95` tw`scale-x-95` tw`scale-y-95` tw`scale-100` tw`scale-x-100` tw`scale-y-100` tw`scale-105` tw`scale-x-105` tw`scale-y-105` tw`scale-110` tw`scale-x-110` tw`scale-y-110` tw`scale-125` tw`scale-x-125` tw`scale-y-125` tw`scale-150` tw`scale-x-150` tw`scale-y-150` tw`scale-[1.7]` ================================================ FILE: tests/__fixtures__/utilitiesTransforms/skew.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/skew theme`skew` tw`skew-x-0` tw`skew-y-0` tw`skew-x-1` tw`skew-y-1` tw`skew-x-2` tw`skew-y-2` tw`skew-x-3` tw`skew-y-3` tw`skew-x-6` tw`skew-y-6` tw`skew-x-12` tw`skew-y-12` tw`-skew-x-1` tw`-skew-y-1` tw`-skew-x-2` tw`-skew-y-2` tw`-skew-x-3` tw`-skew-y-3` tw`-skew-x-6` tw`-skew-y-6` tw`-skew-x-12` tw`-skew-y-12` tw`skew-x-[17deg]` tw`-skew-x-[17deg]` tw`skew-y-[17deg]` tw`-skew-y-[17deg]` ================================================ FILE: tests/__fixtures__/utilitiesTransforms/tailwind.config.js ================================================ module.exports = { theme: { extend: { translate: { '-10000': '-5000%', 10000: '5000%', }, }, }, } ================================================ FILE: tests/__fixtures__/utilitiesTransforms/transformOrigin.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/transform-origin theme`transformOrigin` tw`origin-center` tw`origin-top` tw`origin-top-right` tw`origin-right` tw`origin-bottom-right` tw`origin-bottom` tw`origin-bottom-left` tw`origin-left` tw`origin-top-left` tw`origin-[33% 75%]` ================================================ FILE: tests/__fixtures__/utilitiesTransforms/translate.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/translate tw`translate-x-0` tw`translate-y-0` tw`translate-x-px` tw`translate-y-px` tw`translate-x-0.5` tw`translate-y-0.5` tw`translate-x-1` tw`translate-y-1` tw`translate-x-1.5` tw`translate-y-1.5` tw`translate-x-2` tw`translate-y-2` tw`translate-x-2.5` tw`translate-y-2.5` tw`translate-x-3` tw`translate-y-3` tw`translate-x-3.5` tw`translate-y-3.5` tw`translate-x-4` tw`translate-y-4` tw`translate-x-5` tw`translate-y-5` tw`translate-x-6` tw`translate-y-6` tw`translate-x-7` tw`translate-y-7` tw`translate-x-8` tw`translate-y-8` tw`translate-x-9` tw`translate-y-9` tw`translate-x-10` tw`translate-y-10` tw`translate-x-11` tw`translate-y-11` tw`translate-x-12` tw`translate-y-12` tw`translate-x-14` tw`translate-y-14` tw`translate-x-16` tw`translate-y-16` tw`translate-x-20` tw`translate-y-20` tw`translate-x-24` tw`translate-y-24` tw`translate-x-28` tw`translate-y-28` tw`translate-x-32` tw`translate-y-32` tw`translate-x-36` tw`translate-y-36` tw`translate-x-40` tw`translate-y-40` tw`translate-x-44` tw`translate-y-44` tw`translate-x-48` tw`translate-y-48` tw`translate-x-52` tw`translate-y-52` tw`translate-x-56` tw`translate-y-56` tw`translate-x-60` tw`translate-y-60` tw`translate-x-64` tw`translate-y-64` tw`translate-x-72` tw`translate-y-72` tw`translate-x-80` tw`translate-y-80` tw`translate-x-96` tw`translate-y-96` tw`translate-x-1/2` tw`translate-x-1/3` tw`translate-x-2/3` tw`translate-x-1/4` tw`translate-x-2/4` tw`translate-x-3/4` tw`translate-x-full` tw`translate-y-1/2` tw`translate-y-1/3` tw`translate-y-2/3` tw`translate-y-1/4` tw`translate-y-2/4` tw`translate-y-3/4` tw`translate-y-full` tw`transform` tw`transform-gpu` tw`transform-cpu` tw`transform-none` tw`translate-x-10000` tw`-translate-x-10000` ================================================ FILE: tests/__fixtures__/utilitiesTransitionsAnimation/animation.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/animation theme`animation` tw`animate-none` tw`animate-spin` tw`animate-ping` tw`animate-pulse` tw`animate-bounce` tw`animate-[wiggle 1s ease-in-out infinite]` ================================================ FILE: tests/__fixtures__/utilitiesTransitionsAnimation/misc.tsx ================================================ // @ts-nocheck import tw from '../macro' // Test the transition ordering - 'transition' should be moved to the start // https://github.com/ben-rogerson/twin.macro/issues/363 tw`duration-75 ease-in transition` tw`mt-5 md:(ml-5 ease-in transition) mb-5` ================================================ FILE: tests/__fixtures__/utilitiesTransitionsAnimation/transitionDelay.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/transition-delay theme`transitionDelay` tw`delay-75` tw`delay-100` tw`delay-150` tw`delay-200` tw`delay-300` tw`delay-500` tw`delay-700` tw`delay-1000` tw`delay-[2000ms]` tw`delay-[var(--delay)]` ================================================ FILE: tests/__fixtures__/utilitiesTransitionsAnimation/transitionDuration.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/transition-duration theme`transitionDuration.` tw`duration-75` tw`duration-100` tw`duration-150` tw`duration-200` tw`duration-300` tw`duration-500` tw`duration-700` tw`duration-1000` tw`duration-[2000ms]` tw`duration-[2s]` tw`duration-[var(--app-duration)]` ================================================ FILE: tests/__fixtures__/utilitiesTransitionsAnimation/transitionProperty.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/transition-property theme`transitionProperty.` tw`transition-none` tw`transition-all` tw`transition` tw`transition-colors` tw`transition-opacity` tw`transition-shadow` tw`transition-transform` tw`transition-[height]` tw`transition-[lookup:green]` ================================================ FILE: tests/__fixtures__/utilitiesTransitionsAnimation/transitionTimingFunction.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/transition-timing-function theme`transitionTimingFunction.` tw`ease-linear` tw`ease-in` tw`ease-out` tw`ease-in-out` tw`ease-[cubic-bezier(0.95, 0.05, 0.795, 0.035)]` ================================================ FILE: tests/__fixtures__/utiltiesFlexboxGrid/alignContent.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/align-content tw`content-center` tw`content-start` tw`content-end` tw`content-between` tw`content-around` tw`content-evenly` tw`content-baseline` ================================================ FILE: tests/__fixtures__/utiltiesFlexboxGrid/alignItems.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/align-items tw`items-start` tw`items-end` tw`items-center` tw`items-baseline` tw`items-stretch` ================================================ FILE: tests/__fixtures__/utiltiesFlexboxGrid/alignSelf.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/align-self tw`self-auto` tw`self-start` tw`self-end` tw`self-center` tw`self-stretch` tw`self-baseline` ================================================ FILE: tests/__fixtures__/utiltiesFlexboxGrid/flex.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/flex theme`flex` tw`flex-1` tw`flex-auto` tw`flex-initial` tw`flex-none` tw`flex-[2 2 0%]` tw`flex-[var(--flex)]` ================================================ FILE: tests/__fixtures__/utiltiesFlexboxGrid/flexBasis.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/flex-basis theme`flexBasis` tw`basis-0` tw`basis-1` tw`basis-2` tw`basis-3` tw`basis-4` tw`basis-5` tw`basis-6` tw`basis-7` tw`basis-8` tw`basis-9` tw`basis-10` tw`basis-11` tw`basis-12` tw`basis-14` tw`basis-16` tw`basis-20` tw`basis-24` tw`basis-28` tw`basis-32` tw`basis-36` tw`basis-40` tw`basis-44` tw`basis-48` tw`basis-52` tw`basis-56` tw`basis-60` tw`basis-64` tw`basis-72` tw`basis-80` tw`basis-96` tw`basis-auto` tw`basis-px` tw`basis-0.5` tw`basis-1.5` tw`basis-2.5` tw`basis-3.5` tw`basis-1/2` tw`basis-1/3` tw`basis-2/3` tw`basis-1/4` tw`basis-2/4` tw`basis-3/4` tw`basis-1/5` tw`basis-2/5` tw`basis-3/5` tw`basis-4/5` tw`basis-1/6` tw`basis-2/6` tw`basis-3/6` tw`basis-4/6` tw`basis-5/6` tw`basis-1/12` tw`basis-2/12` tw`basis-3/12` tw`basis-4/12` tw`basis-5/12` tw`basis-6/12` tw`basis-7/12` tw`basis-8/12` tw`basis-9/12` tw`basis-10/12` tw`basis-11/12` tw`basis-full` tw`basis-[14.2857143%]` ================================================ FILE: tests/__fixtures__/utiltiesFlexboxGrid/flexDirection.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/flex-direction tw`flex-row` tw`flex-row-reverse` tw`flex-col` tw`flex-col-reverse` ================================================ FILE: tests/__fixtures__/utiltiesFlexboxGrid/flexGrow.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/flex-grow theme`flexGrow.` tw`grow-0` tw`grow` tw`flex-grow-0` // Deprecated tw`flex-grow` // Deprecated tw`grow-[2]` tw`flex-grow-[var(--grow)]` // Deprecated ================================================ FILE: tests/__fixtures__/utiltiesFlexboxGrid/flexShrink.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/flex-shrink theme`flexShrink.` tw`shrink-0` tw`shrink` tw`flex-shrink-0` // Deprecated tw`flex-shrink` // Deprecated tw`flex-shrink-[var(--shrink)]` // Deprecated tw`shrink-[var(--shrink)]` ================================================ FILE: tests/__fixtures__/utiltiesFlexboxGrid/flexWrap.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/flex-wrap tw`flex-wrap` tw`flex-wrap-reverse` tw`flex-nowrap` ================================================ FILE: tests/__fixtures__/utiltiesFlexboxGrid/gap.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/gap theme`gap` tw`gap-0` tw`gap-0.5` tw`gap-1` tw`gap-1.5` tw`gap-2` tw`gap-2.5` tw`gap-3` tw`gap-3.5` tw`gap-4` tw`gap-5` tw`gap-6` tw`gap-7` tw`gap-8` tw`gap-9` tw`gap-10` tw`gap-12` tw`gap-14` tw`gap-16` tw`gap-20` tw`gap-24` tw`gap-28` tw`gap-32` tw`gap-36` tw`gap-40` tw`gap-44` tw`gap-48` tw`gap-52` tw`gap-56` tw`gap-60` tw`gap-64` tw`gap-72` tw`gap-80` tw`gap-96` tw`gap-px` tw`gap-[2.75rem]` // https://tailwindcss.com/docs/gap tw`gap-x-0` tw`gap-x-0.5` tw`gap-x-1` tw`gap-x-1.5` tw`gap-x-2` tw`gap-x-2.5` tw`gap-x-3` tw`gap-x-3.5` tw`gap-x-4` tw`gap-x-5` tw`gap-x-6` tw`gap-x-8` tw`gap-x-10` tw`gap-x-12` tw`gap-x-16` tw`gap-x-20` tw`gap-x-24` tw`gap-x-32` tw`gap-x-40` tw`gap-x-48` tw`gap-x-56` tw`gap-x-64` tw`gap-x-px` tw`gap-x-[2.75rem]` // https://tailwindcss.com/docs/gap tw`gap-y-0` tw`gap-y-0.5` tw`gap-y-1` tw`gap-y-1.5` tw`gap-y-2` tw`gap-y-2.5` tw`gap-y-3` tw`gap-y-3.5` tw`gap-y-4` tw`gap-y-5` tw`gap-y-6` tw`gap-y-7` tw`gap-y-8` tw`gap-y-9` tw`gap-y-10` tw`gap-y-11` tw`gap-y-12` tw`gap-y-16` tw`gap-y-20` tw`gap-y-24` tw`gap-y-28` tw`gap-y-32` tw`gap-y-36` tw`gap-y-40` tw`gap-y-44` tw`gap-y-48` tw`gap-y-52` tw`gap-y-56` tw`gap-y-60` tw`gap-y-64` tw`gap-y-72` tw`gap-y-80` tw`gap-y-96` tw`gap-y-px` tw`gap-y-[2.75rem]` ================================================ FILE: tests/__fixtures__/utiltiesFlexboxGrid/gridAutoColumns.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/grid-auto-columns theme`gridAutoColumns` tw`auto-cols-auto` tw`auto-cols-min` tw`auto-cols-max` tw`auto-cols-fr` tw`auto-cols-[minmax(0, 2fr)]` tw`grid-cols-[200px,repeat(auto-fill,minmax(15%,100px)),300px]` tw`lg:grid-cols-[200px,repeat(auto-fill,minmax(15%,100px)),300px]` ================================================ FILE: tests/__fixtures__/utiltiesFlexboxGrid/gridAutoFlow.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/grid-auto-flow tw`grid-flow-row` tw`grid-flow-col` tw`grid-flow-row-dense` tw`grid-flow-col-dense` ================================================ FILE: tests/__fixtures__/utiltiesFlexboxGrid/gridAutoRows.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/grid-auto-rows theme`gridAutoRows` tw`auto-rows-auto` tw`auto-rows-min` tw`auto-rows-max` tw`auto-rows-fr` tw`grid-rows-[200px, repeat(auto-fill, minmax(15%, 100px)), 300px]` ================================================ FILE: tests/__fixtures__/utiltiesFlexboxGrid/gridColumn.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/grid-column theme`gridColumn` tw`col-auto` tw`col-span-1` tw`col-span-2` tw`col-span-3` tw`col-span-4` tw`col-span-5` tw`col-span-6` tw`col-span-7` tw`col-span-8` tw`col-span-9` tw`col-span-10` tw`col-span-11` tw`col-span-12` tw`col-span-full` tw`col-start-1` tw`col-start-2` tw`col-start-3` tw`col-start-4` tw`col-start-5` tw`col-start-6` tw`col-start-7` tw`col-start-8` tw`col-start-9` tw`col-start-10` tw`col-start-11` tw`col-start-12` tw`col-start-13` tw`col-start-auto` tw`col-end-1` tw`col-end-2` tw`col-end-3` tw`col-end-4` tw`col-end-5` tw`col-end-6` tw`col-end-7` tw`col-end-8` tw`col-end-9` tw`col-end-10` tw`col-end-11` tw`col-end-12` tw`col-end-13` tw`col-end-auto` tw`col-[7]` tw`col-end-[7]` tw`col-start-[7]` // tw`col-span-[span 16 / span 16]` ================================================ FILE: tests/__fixtures__/utiltiesFlexboxGrid/gridRow.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/grid-row theme`gridRow` tw`row-auto` tw`row-span-1` tw`row-span-2` tw`row-span-3` tw`row-span-4` tw`row-span-5` tw`row-span-6` tw`row-span-full` tw`row-start-1` tw`row-start-2` tw`row-start-3` tw`row-start-4` tw`row-start-5` tw`row-start-6` tw`row-start-7` tw`row-start-auto` tw`row-end-1` tw`row-end-2` tw`row-end-3` tw`row-end-4` tw`row-end-5` tw`row-end-6` tw`row-end-7` tw`row-end-auto` tw`row-[span 16 / span 16]` tw`row-[7]` tw`row-end-[7]` tw`row-start-[7]` ================================================ FILE: tests/__fixtures__/utiltiesFlexboxGrid/gridTemplateColumns.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/grid-template-columns theme`gridTemplateColumns` tw`grid-cols-1` tw`grid-cols-2` tw`grid-cols-3` tw`grid-cols-4` tw`grid-cols-5` tw`grid-cols-6` tw`grid-cols-7` tw`grid-cols-8` tw`grid-cols-9` tw`grid-cols-10` tw`grid-cols-11` tw`grid-cols-12` tw`grid-cols-none` tw`grid-cols-[200px minmax(900px, 1fr) 100px]` ================================================ FILE: tests/__fixtures__/utiltiesFlexboxGrid/gridTemplateRows.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/grid-template-rows theme`gridTemplateRows` tw`grid-rows-1` tw`grid-rows-2` tw`grid-rows-3` tw`grid-rows-4` tw`grid-rows-5` tw`grid-rows-6` tw`grid-rows-none` tw`grid-rows-[200px minmax(900px, 1fr) 100px]` ================================================ FILE: tests/__fixtures__/utiltiesFlexboxGrid/justifyContent.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/justify-content tw`justify-start` tw`justify-end` tw`justify-center` tw`justify-between` tw`justify-around` tw`justify-evenly` ================================================ FILE: tests/__fixtures__/utiltiesFlexboxGrid/justifyItems.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/justify-items tw`justify-items-start` tw`justify-items-end` tw`justify-items-center` tw`justify-items-stretch` ================================================ FILE: tests/__fixtures__/utiltiesFlexboxGrid/justifySelf.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/justify-self tw`justify-self-auto` tw`justify-self-start` tw`justify-self-end` tw`justify-self-center` tw`justify-self-stretch` ================================================ FILE: tests/__fixtures__/utiltiesFlexboxGrid/misc.tsx ================================================ // @ts-nocheck import tw from '../macro' // col-span-x should always be moved to the start // https://github.com/ben-rogerson/twin.macro/issues/363 tw`col-start-3 col-span-3` tw`col-span-3 col-start-3` tw`col-end-3 col-span-3` tw`col-span-3 col-end-3` tw`col-start-3 col-end-3 col-span-3` tw`col-span-3 col-start-3 col-end-3` tw`grid col-span-3` tw`grid col-start-3 col-end-3` tw`col-start-3 col-span-3 col-end-3 grid` tw`col-start-3 mt-4 md:(mt-3 col-span-3) mb-4 col-end-3 col-span-3` ================================================ FILE: tests/__fixtures__/utiltiesFlexboxGrid/order.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/order theme`order` tw`order-1` tw`order-2` tw`order-3` tw`order-4` tw`order-5` tw`order-6` tw`order-7` tw`order-8` tw`order-9` tw`order-10` tw`order-11` tw`order-12` tw`order-first` tw`order-last` tw`order-none` tw`order-[13]` ================================================ FILE: tests/__fixtures__/utiltiesFlexboxGrid/placeContent.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/place-content tw`place-content-center` tw`place-content-start` tw`place-content-end` tw`place-content-between` tw`place-content-around` tw`place-content-evenly` tw`place-content-stretch` tw`place-content-baseline` ================================================ FILE: tests/__fixtures__/utiltiesFlexboxGrid/placeItems.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/place-items tw`place-items-start` tw`place-items-end` tw`place-items-center` tw`place-items-stretch` tw`place-items-baseline` ================================================ FILE: tests/__fixtures__/utiltiesFlexboxGrid/placeSelf.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/place-self tw`place-self-auto` tw`place-self-start` tw`place-self-end` tw`place-self-center` tw`place-self-stretch` ================================================ FILE: tests/__fixtures__/utiltiesInteractivity/accentColor.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/accent-color theme`accentColor` tw`accent-inherit` tw`accent-current` tw`accent-transparent` tw`accent-black` tw`accent-white` tw`accent-slate-50` tw`accent-slate-100` tw`accent-slate-200` tw`accent-slate-300` tw`accent-slate-400` tw`accent-slate-500` tw`accent-slate-600` tw`accent-slate-700` tw`accent-slate-800` tw`accent-slate-900` tw`accent-gray-50` tw`accent-gray-100` tw`accent-gray-200` tw`accent-gray-300` tw`accent-gray-400` tw`accent-gray-500` tw`accent-gray-600` tw`accent-gray-700` tw`accent-gray-800` tw`accent-gray-900` tw`accent-zinc-50` tw`accent-zinc-100` tw`accent-zinc-200` tw`accent-zinc-300` tw`accent-zinc-400` tw`accent-zinc-500` tw`accent-zinc-600` tw`accent-zinc-700` tw`accent-zinc-800` tw`accent-zinc-900` tw`accent-neutral-50` tw`accent-neutral-100` tw`accent-neutral-200` tw`accent-neutral-300` tw`accent-neutral-400` tw`accent-neutral-500` tw`accent-neutral-600` tw`accent-neutral-700` tw`accent-neutral-800` tw`accent-neutral-900` tw`accent-stone-50` tw`accent-stone-100` tw`accent-stone-200` tw`accent-stone-300` tw`accent-stone-400` tw`accent-stone-500` tw`accent-stone-600` tw`accent-stone-700` tw`accent-stone-800` tw`accent-stone-900` tw`accent-red-50` tw`accent-red-100` tw`accent-red-200` tw`accent-red-300` tw`accent-red-400` tw`accent-red-500` tw`accent-red-600` tw`accent-red-700` tw`accent-red-800` tw`accent-red-900` tw`accent-orange-50` tw`accent-orange-100` tw`accent-orange-200` tw`accent-orange-300` tw`accent-orange-400` tw`accent-orange-500` tw`accent-orange-600` tw`accent-orange-700` tw`accent-orange-800` tw`accent-orange-900` tw`accent-amber-50` tw`accent-amber-100` tw`accent-amber-200` tw`accent-amber-300` tw`accent-amber-400` tw`accent-amber-500` tw`accent-amber-600` tw`accent-amber-700` tw`accent-amber-800` tw`accent-amber-900` tw`accent-yellow-50` tw`accent-yellow-100` tw`accent-yellow-200` tw`accent-yellow-300` tw`accent-yellow-400` tw`accent-yellow-500` tw`accent-yellow-600` tw`accent-yellow-700` tw`accent-yellow-800` tw`accent-yellow-900` tw`accent-lime-50` tw`accent-lime-100` tw`accent-lime-200` tw`accent-lime-300` tw`accent-lime-400` tw`accent-lime-500` tw`accent-lime-600` tw`accent-lime-700` tw`accent-lime-800` tw`accent-lime-900` tw`accent-green-50` tw`accent-green-100` tw`accent-green-200` tw`accent-green-300` tw`accent-green-400` tw`accent-green-500` tw`accent-green-600` tw`accent-green-700` tw`accent-green-800` tw`accent-green-900` tw`accent-emerald-50` tw`accent-emerald-100` tw`accent-emerald-200` tw`accent-emerald-300` tw`accent-emerald-400` tw`accent-emerald-500` tw`accent-emerald-600` tw`accent-emerald-700` tw`accent-emerald-800` tw`accent-emerald-900` tw`accent-teal-50` tw`accent-teal-100` tw`accent-teal-200` tw`accent-teal-300` tw`accent-teal-400` tw`accent-teal-500` tw`accent-teal-600` tw`accent-teal-700` tw`accent-teal-800` tw`accent-teal-900` tw`accent-cyan-50` tw`accent-cyan-100` tw`accent-cyan-200` tw`accent-cyan-300` tw`accent-cyan-400` tw`accent-cyan-500` tw`accent-cyan-600` tw`accent-cyan-700` tw`accent-cyan-800` tw`accent-cyan-900` tw`accent-sky-50` tw`accent-sky-100` tw`accent-sky-200` tw`accent-sky-300` tw`accent-sky-400` tw`accent-sky-500` tw`accent-sky-600` tw`accent-sky-700` tw`accent-sky-800` tw`accent-sky-900` tw`accent-blue-50` tw`accent-blue-100` tw`accent-blue-200` tw`accent-blue-300` tw`accent-blue-400` tw`accent-blue-500` tw`accent-blue-600` tw`accent-blue-700` tw`accent-blue-800` tw`accent-blue-900` tw`accent-indigo-50` tw`accent-indigo-100` tw`accent-indigo-200` tw`accent-indigo-300` tw`accent-indigo-400` tw`accent-indigo-500` tw`accent-indigo-600` tw`accent-indigo-700` tw`accent-indigo-800` tw`accent-indigo-900` tw`accent-violet-50` tw`accent-violet-100` tw`accent-violet-200` tw`accent-violet-300` tw`accent-violet-400` tw`accent-violet-500` tw`accent-violet-600` tw`accent-violet-700` tw`accent-violet-800` tw`accent-violet-900` tw`accent-purple-50` tw`accent-purple-100` tw`accent-purple-200` tw`accent-purple-300` tw`accent-purple-400` tw`accent-purple-500` tw`accent-purple-600` tw`accent-purple-700` tw`accent-purple-800` tw`accent-purple-900` tw`accent-fuchsia-50` tw`accent-fuchsia-100` tw`accent-fuchsia-200` tw`accent-fuchsia-300` tw`accent-fuchsia-400` tw`accent-fuchsia-500` tw`accent-fuchsia-600` tw`accent-fuchsia-700` tw`accent-fuchsia-800` tw`accent-fuchsia-900` tw`accent-pink-50` tw`accent-pink-100` tw`accent-pink-200` tw`accent-pink-300` tw`accent-pink-400` tw`accent-pink-500` tw`accent-pink-600` tw`accent-pink-700` tw`accent-pink-800` tw`accent-pink-900` tw`accent-rose-50` tw`accent-rose-100` tw`accent-rose-200` tw`accent-rose-300` tw`accent-rose-400` tw`accent-rose-500` tw`accent-rose-600` tw`accent-rose-700` tw`accent-rose-800` tw`accent-rose-900` tw`accent-auto` tw`accent-[#50d71e]` tw`accent-[theme('colors.red.500')]` tw`accent-[theme('colors.red.500')]/20` tw`accent-[color:red]` tw`accent-[any:red]` ================================================ FILE: tests/__fixtures__/utiltiesInteractivity/appearance.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/appearance tw`appearance-none` ================================================ FILE: tests/__fixtures__/utiltiesInteractivity/caretColor.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/caret-color theme`caretColor` tw`caret-inherit` tw`caret-current` tw`caret-transparent` tw`caret-black` tw`caret-white` tw`caret-slate-50` tw`caret-slate-100` tw`caret-slate-200` tw`caret-slate-300` tw`caret-slate-400` tw`caret-slate-500` tw`caret-slate-600` tw`caret-slate-700` tw`caret-slate-800` tw`caret-slate-900` tw`caret-gray-50` tw`caret-gray-100` tw`caret-gray-200` tw`caret-gray-300` tw`caret-gray-400` tw`caret-gray-500` tw`caret-gray-600` tw`caret-gray-700` tw`caret-gray-800` tw`caret-gray-900` tw`caret-zinc-50` tw`caret-zinc-100` tw`caret-zinc-200` tw`caret-zinc-300` tw`caret-zinc-400` tw`caret-zinc-500` tw`caret-zinc-600` tw`caret-zinc-700` tw`caret-zinc-800` tw`caret-zinc-900` tw`caret-neutral-50` tw`caret-neutral-100` tw`caret-neutral-200` tw`caret-neutral-300` tw`caret-neutral-400` tw`caret-neutral-500` tw`caret-neutral-600` tw`caret-neutral-700` tw`caret-neutral-800` tw`caret-neutral-900` tw`caret-stone-50` tw`caret-stone-100` tw`caret-stone-200` tw`caret-stone-300` tw`caret-stone-400` tw`caret-stone-500` tw`caret-stone-600` tw`caret-stone-700` tw`caret-stone-800` tw`caret-stone-900` tw`caret-red-50` tw`caret-red-100` tw`caret-red-200` tw`caret-red-300` tw`caret-red-400` tw`caret-red-500` tw`caret-red-600` tw`caret-red-700` tw`caret-red-800` tw`caret-red-900` tw`caret-orange-50` tw`caret-orange-100` tw`caret-orange-200` tw`caret-orange-300` tw`caret-orange-400` tw`caret-orange-500` tw`caret-orange-600` tw`caret-orange-700` tw`caret-orange-800` tw`caret-orange-900` tw`caret-amber-50` tw`caret-amber-100` tw`caret-amber-200` tw`caret-amber-300` tw`caret-amber-400` tw`caret-amber-500` tw`caret-amber-600` tw`caret-amber-700` tw`caret-amber-800` tw`caret-amber-900` tw`caret-yellow-50` tw`caret-yellow-100` tw`caret-yellow-200` tw`caret-yellow-300` tw`caret-yellow-400` tw`caret-yellow-500` tw`caret-yellow-600` tw`caret-yellow-700` tw`caret-yellow-800` tw`caret-yellow-900` tw`caret-lime-50` tw`caret-lime-100` tw`caret-lime-200` tw`caret-lime-300` tw`caret-lime-400` tw`caret-lime-500` tw`caret-lime-600` tw`caret-lime-700` tw`caret-lime-800` tw`caret-lime-900` tw`caret-green-50` tw`caret-green-100` tw`caret-green-200` tw`caret-green-300` tw`caret-green-400` tw`caret-green-500` tw`caret-green-600` tw`caret-green-700` tw`caret-green-800` tw`caret-green-900` tw`caret-emerald-50` tw`caret-emerald-100` tw`caret-emerald-200` tw`caret-emerald-300` tw`caret-emerald-400` tw`caret-emerald-500` tw`caret-emerald-600` tw`caret-emerald-700` tw`caret-emerald-800` tw`caret-emerald-900` tw`caret-teal-50` tw`caret-teal-100` tw`caret-teal-200` tw`caret-teal-300` tw`caret-teal-400` tw`caret-teal-500` tw`caret-teal-600` tw`caret-teal-700` tw`caret-teal-800` tw`caret-teal-900` tw`caret-cyan-50` tw`caret-cyan-100` tw`caret-cyan-200` tw`caret-cyan-300` tw`caret-cyan-400` tw`caret-cyan-500` tw`caret-cyan-600` tw`caret-cyan-700` tw`caret-cyan-800` tw`caret-cyan-900` tw`caret-sky-50` tw`caret-sky-100` tw`caret-sky-200` tw`caret-sky-300` tw`caret-sky-400` tw`caret-sky-500` tw`caret-sky-600` tw`caret-sky-700` tw`caret-sky-800` tw`caret-sky-900` tw`caret-blue-50` tw`caret-blue-100` tw`caret-blue-200` tw`caret-blue-300` tw`caret-blue-400` tw`caret-blue-500` tw`caret-blue-600` tw`caret-blue-700` tw`caret-blue-800` tw`caret-blue-900` tw`caret-indigo-50` tw`caret-indigo-100` tw`caret-indigo-200` tw`caret-indigo-300` tw`caret-indigo-400` tw`caret-indigo-500` tw`caret-indigo-600` tw`caret-indigo-700` tw`caret-indigo-800` tw`caret-indigo-900` tw`caret-violet-50` tw`caret-violet-100` tw`caret-violet-200` tw`caret-violet-300` tw`caret-violet-400` tw`caret-violet-500` tw`caret-violet-600` tw`caret-violet-700` tw`caret-violet-800` tw`caret-violet-900` tw`caret-purple-50` tw`caret-purple-100` tw`caret-purple-200` tw`caret-purple-300` tw`caret-purple-400` tw`caret-purple-500` tw`caret-purple-600` tw`caret-purple-700` tw`caret-purple-800` tw`caret-purple-900` tw`caret-fuchsia-50` tw`caret-fuchsia-100` tw`caret-fuchsia-200` tw`caret-fuchsia-300` tw`caret-fuchsia-400` tw`caret-fuchsia-500` tw`caret-fuchsia-600` tw`caret-fuchsia-700` tw`caret-fuchsia-800` tw`caret-fuchsia-900` tw`caret-pink-50` tw`caret-pink-100` tw`caret-pink-200` tw`caret-pink-300` tw`caret-pink-400` tw`caret-pink-500` tw`caret-pink-600` tw`caret-pink-700` tw`caret-pink-800` tw`caret-pink-900` tw`caret-rose-50` tw`caret-rose-100` tw`caret-rose-200` tw`caret-rose-300` tw`caret-rose-400` tw`caret-rose-500` tw`caret-rose-600` tw`caret-rose-700` tw`caret-rose-800` tw`caret-rose-900` tw`caret-[#50d71e]` tw`caret-red-500/25` tw`caret-red-500/fromConfig` tw`caret-red-500/fromConfig/25` tw`caret-red-500/fromConfig/[.555]` tw`caret-red-500/fromConfig/[var(--myvar)]` tw`caret-red-500/[.555]` tw`caret-red-500/[var(--myvar)]` tw`caret-[theme('colors.red.500')]` tw`caret-[theme('colors.red.500')]/20` tw`caret-electric` tw`caret-electric/25` tw`caret-electric/[.555]` tw`caret-electric/[var(--myvar)]` tw`caret-[theme('colors.electric')]` tw`caret-[theme('colors.electric')]/20` tw`caret-[color:green]` tw`caret-[color:rgba(255, 255, 255, .45)]` tw`caret-[any:blah]` ================================================ FILE: tests/__fixtures__/utiltiesInteractivity/cursor.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/cursor theme`cursor` tw`cursor-auto` tw`cursor-default` tw`cursor-pointer` tw`cursor-wait` tw`cursor-text` tw`cursor-move` tw`cursor-help` tw`cursor-not-allowed` tw`cursor-none` tw`cursor-context-menu` tw`cursor-progress` tw`cursor-cell` tw`cursor-crosshair` tw`cursor-vertical-text` tw`cursor-alias` tw`cursor-copy` tw`cursor-no-drop` tw`cursor-grab` tw`cursor-grabbing` tw`cursor-all-scroll` tw`cursor-col-resize` tw`cursor-row-resize` tw`cursor-n-resize` tw`cursor-e-resize` tw`cursor-s-resize` tw`cursor-w-resize` tw`cursor-ne-resize` tw`cursor-nw-resize` tw`cursor-se-resize` tw`cursor-sw-resize` tw`cursor-ew-resize` tw`cursor-ns-resize` tw`cursor-nesw-resize` tw`cursor-nwse-resize` tw`cursor-zoom-in` tw`cursor-zoom-out` tw`cursor-[url(hand.cur), pointer]` ================================================ FILE: tests/__fixtures__/utiltiesInteractivity/pointerEvents.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/pointer-events tw`pointer-events-none` tw`pointer-events-auto` ================================================ FILE: tests/__fixtures__/utiltiesInteractivity/resize.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/resize tw`resize-none` tw`resize-y` tw`resize-x` tw`resize` ================================================ FILE: tests/__fixtures__/utiltiesInteractivity/scrollBehavior.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/scroll-behavior tw`scroll-auto` tw`scroll-smooth` ================================================ FILE: tests/__fixtures__/utiltiesInteractivity/scrollMargin.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/scroll-margin theme`scrollMargin` tw`scroll-m-0` tw`scroll-mx-0` tw`scroll-my-0` tw`scroll-mt-0` tw`scroll-mr-0` tw`scroll-mb-0` tw`scroll-ml-0` tw`scroll-m-px` tw`scroll-mx-px` tw`scroll-my-px` tw`scroll-mt-px` tw`scroll-mr-px` tw`scroll-mb-px` tw`scroll-ml-px` tw`scroll-m-0` tw`scroll-mx-0` tw`scroll-my-0` tw`scroll-mt-0` tw`scroll-mr-0` tw`scroll-mb-0` tw`scroll-ml-0` tw`scroll-m-1` tw`scroll-mx-1` tw`scroll-my-1` tw`scroll-mt-1` tw`scroll-mr-1` tw`scroll-mb-1` tw`scroll-ml-1` tw`scroll-m-1` tw`scroll-mx-1` tw`scroll-my-1` tw`scroll-mt-1` tw`scroll-mr-1` tw`scroll-mb-1` tw`scroll-ml-1` tw`scroll-m-2` tw`scroll-mx-2` tw`scroll-my-2` tw`scroll-mt-2` tw`scroll-mr-2` tw`scroll-mb-2` tw`scroll-ml-2` tw`scroll-m-2` tw`scroll-mx-2` tw`scroll-my-2` tw`scroll-mt-2` tw`scroll-mr-2` tw`scroll-mb-2` tw`scroll-ml-2` tw`scroll-m-3` tw`scroll-mx-3` tw`scroll-my-3` tw`scroll-mt-3` tw`scroll-mr-3` tw`scroll-mb-3` tw`scroll-ml-3` tw`scroll-m-3` tw`scroll-mx-3` tw`scroll-my-3` tw`scroll-mt-3` tw`scroll-mr-3` tw`scroll-mb-3` tw`scroll-ml-3` tw`scroll-m-4` tw`scroll-mx-4` tw`scroll-my-4` tw`scroll-mt-4` tw`scroll-mr-4` tw`scroll-mb-4` tw`scroll-ml-4` tw`scroll-m-5` tw`scroll-mx-5` tw`scroll-my-5` tw`scroll-mt-5` tw`scroll-mr-5` tw`scroll-mb-5` tw`scroll-ml-5` tw`scroll-m-6` tw`scroll-mx-6` tw`scroll-my-6` tw`scroll-mt-6` tw`scroll-mr-6` tw`scroll-mb-6` tw`scroll-ml-6` tw`scroll-m-7` tw`scroll-mx-7` tw`scroll-my-7` tw`scroll-mt-7` tw`scroll-mr-7` tw`scroll-mb-7` tw`scroll-ml-7` tw`scroll-m-8` tw`scroll-mx-8` tw`scroll-my-8` tw`scroll-mt-8` tw`scroll-mr-8` tw`scroll-mb-8` tw`scroll-ml-8` tw`scroll-m-9` tw`scroll-mx-9` tw`scroll-my-9` tw`scroll-mt-9` tw`scroll-mr-9` tw`scroll-mb-9` tw`scroll-ml-9` tw`scroll-m-10` tw`scroll-mx-10` tw`scroll-my-10` tw`scroll-mt-10` tw`scroll-mr-10` tw`scroll-mb-10` tw`scroll-ml-10` tw`scroll-m-11` tw`scroll-mx-11` tw`scroll-my-11` tw`scroll-mt-11` tw`scroll-mr-11` tw`scroll-mb-11` tw`scroll-ml-11` tw`scroll-m-12` tw`scroll-mx-12` tw`scroll-my-12` tw`scroll-mt-12` tw`scroll-mr-12` tw`scroll-mb-12` tw`scroll-ml-12` tw`scroll-m-14` tw`scroll-mx-14` tw`scroll-my-14` tw`scroll-mt-14` tw`scroll-mr-14` tw`scroll-mb-14` tw`scroll-ml-14` tw`scroll-m-16` tw`scroll-mx-16` tw`scroll-my-16` tw`scroll-mt-16` tw`scroll-mr-16` tw`scroll-mb-16` tw`scroll-ml-16` tw`scroll-m-20` tw`scroll-mx-20` tw`scroll-my-20` tw`scroll-mt-20` tw`scroll-mr-20` tw`scroll-mb-20` tw`scroll-ml-20` tw`scroll-m-24` tw`scroll-mx-24` tw`scroll-my-24` tw`scroll-mt-24` tw`scroll-mr-24` tw`scroll-mb-24` tw`scroll-ml-24` tw`scroll-m-28` tw`scroll-mx-28` tw`scroll-my-28` tw`scroll-mt-28` tw`scroll-mr-28` tw`scroll-mb-28` tw`scroll-ml-28` tw`scroll-m-32` tw`scroll-mx-32` tw`scroll-my-32` tw`scroll-mt-32` tw`scroll-mr-32` tw`scroll-mb-32` tw`scroll-ml-32` tw`scroll-m-36` tw`scroll-mx-36` tw`scroll-my-36` tw`scroll-mt-36` tw`scroll-mr-36` tw`scroll-mb-36` tw`scroll-ml-36` tw`scroll-m-40` tw`scroll-mx-40` tw`scroll-my-40` tw`scroll-mt-40` tw`scroll-mr-40` tw`scroll-mb-40` tw`scroll-ml-40` tw`scroll-m-44` tw`scroll-mx-44` tw`scroll-my-44` tw`scroll-mt-44` tw`scroll-mr-44` tw`scroll-mb-44` tw`scroll-ml-44` tw`scroll-m-48` tw`scroll-mx-48` tw`scroll-my-48` tw`scroll-mt-48` tw`scroll-mr-48` tw`scroll-mb-48` tw`scroll-ml-48` tw`scroll-m-52` tw`scroll-mx-52` tw`scroll-my-52` tw`scroll-mt-52` tw`scroll-mr-52` tw`scroll-mb-52` tw`scroll-ml-52` tw`scroll-m-56` tw`scroll-mx-56` tw`scroll-my-56` tw`scroll-mt-56` tw`scroll-mr-56` tw`scroll-mb-56` tw`scroll-ml-56` tw`scroll-m-60` tw`scroll-mx-60` tw`scroll-my-60` tw`scroll-mt-60` tw`scroll-mr-60` tw`scroll-mb-60` tw`scroll-ml-60` tw`scroll-m-64` tw`scroll-mx-64` tw`scroll-my-64` tw`scroll-mt-64` tw`scroll-mr-64` tw`scroll-mb-64` tw`scroll-ml-64` tw`scroll-m-72` tw`scroll-mx-72` tw`scroll-my-72` tw`scroll-mt-72` tw`scroll-mr-72` tw`scroll-mb-72` tw`scroll-ml-72` tw`scroll-m-80` tw`scroll-mx-80` tw`scroll-my-80` tw`scroll-mt-80` tw`scroll-mr-80` tw`scroll-mb-80` tw`scroll-ml-80` tw`scroll-m-96` tw`scroll-mx-96` tw`scroll-my-96` tw`scroll-mt-96` tw`scroll-mr-96` tw`scroll-mb-96` tw`scroll-ml-96` tw`-scroll-m-96` tw`-scroll-mx-96` tw`-scroll-my-96` tw`-scroll-mt-96` tw`-scroll-mr-96` tw`-scroll-mb-96` tw`-scroll-ml-96` tw`-scroll-m-[24rem]` tw`scroll-m-[24rem]` ================================================ FILE: tests/__fixtures__/utiltiesInteractivity/scrollPadding.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/scroll-padding theme`scrollPadding` tw`scroll-p-0` tw`scroll-px-0` tw`scroll-py-0` tw`scroll-pt-0` tw`scroll-pr-0` tw`scroll-pb-0` tw`scroll-pl-0` tw`scroll-p-px` tw`scroll-px-px` tw`scroll-py-px` tw`scroll-pt-px` tw`scroll-pr-px` tw`scroll-pb-px` tw`scroll-pl-px` tw`scroll-p-0` tw`scroll-px-0` tw`scroll-py-0` tw`scroll-pt-0` tw`scroll-pr-0` tw`scroll-pb-0` tw`scroll-pl-0` tw`scroll-p-1` tw`scroll-px-1` tw`scroll-py-1` tw`scroll-pt-1` tw`scroll-pr-1` tw`scroll-pb-1` tw`scroll-pl-1` tw`scroll-p-1` tw`scroll-px-1` tw`scroll-py-1` tw`scroll-pt-1` tw`scroll-pr-1` tw`scroll-pb-1` tw`scroll-pl-1` tw`scroll-p-2` tw`scroll-px-2` tw`scroll-py-2` tw`scroll-pt-2` tw`scroll-pr-2` tw`scroll-pb-2` tw`scroll-pl-2` tw`scroll-p-2` tw`scroll-px-2` tw`scroll-py-2` tw`scroll-pt-2` tw`scroll-pr-2` tw`scroll-pb-2` tw`scroll-pl-2` tw`scroll-p-3` tw`scroll-px-3` tw`scroll-py-3` tw`scroll-pt-3` tw`scroll-pr-3` tw`scroll-pb-3` tw`scroll-pl-3` tw`scroll-p-3` tw`scroll-px-3` tw`scroll-py-3` tw`scroll-pt-3` tw`scroll-pr-3` tw`scroll-pb-3` tw`scroll-pl-3` tw`scroll-p-4` tw`scroll-px-4` tw`scroll-py-4` tw`scroll-pt-4` tw`scroll-pr-4` tw`scroll-pb-4` tw`scroll-pl-4` tw`scroll-p-5` tw`scroll-px-5` tw`scroll-py-5` tw`scroll-pt-5` tw`scroll-pr-5` tw`scroll-pb-5` tw`scroll-pl-5` tw`scroll-p-6` tw`scroll-px-6` tw`scroll-py-6` tw`scroll-pt-6` tw`scroll-pr-6` tw`scroll-pb-6` tw`scroll-pl-6` tw`scroll-p-7` tw`scroll-px-7` tw`scroll-py-7` tw`scroll-pt-7` tw`scroll-pr-7` tw`scroll-pb-7` tw`scroll-pl-7` tw`scroll-p-8` tw`scroll-px-8` tw`scroll-py-8` tw`scroll-pt-8` tw`scroll-pr-8` tw`scroll-pb-8` tw`scroll-pl-8` tw`scroll-p-9` tw`scroll-px-9` tw`scroll-py-9` tw`scroll-pt-9` tw`scroll-pr-9` tw`scroll-pb-9` tw`scroll-pl-9` tw`scroll-p-10` tw`scroll-px-10` tw`scroll-py-10` tw`scroll-pt-10` tw`scroll-pr-10` tw`scroll-pb-10` tw`scroll-pl-10` tw`scroll-p-11` tw`scroll-px-11` tw`scroll-py-11` tw`scroll-pt-11` tw`scroll-pr-11` tw`scroll-pb-11` tw`scroll-pl-11` tw`scroll-p-12` tw`scroll-px-12` tw`scroll-py-12` tw`scroll-pt-12` tw`scroll-pr-12` tw`scroll-pb-12` tw`scroll-pl-12` tw`scroll-p-14` tw`scroll-px-14` tw`scroll-py-14` tw`scroll-pt-14` tw`scroll-pr-14` tw`scroll-pb-14` tw`scroll-pl-14` tw`scroll-p-16` tw`scroll-px-16` tw`scroll-py-16` tw`scroll-pt-16` tw`scroll-pr-16` tw`scroll-pb-16` tw`scroll-pl-16` tw`scroll-p-20` tw`scroll-px-20` tw`scroll-py-20` tw`scroll-pt-20` tw`scroll-pr-20` tw`scroll-pb-20` tw`scroll-pl-20` tw`scroll-p-24` tw`scroll-px-24` tw`scroll-py-24` tw`scroll-pt-24` tw`scroll-pr-24` tw`scroll-pb-24` tw`scroll-pl-24` tw`scroll-p-28` tw`scroll-px-28` tw`scroll-py-28` tw`scroll-pt-28` tw`scroll-pr-28` tw`scroll-pb-28` tw`scroll-pl-28` tw`scroll-p-32` tw`scroll-px-32` tw`scroll-py-32` tw`scroll-pt-32` tw`scroll-pr-32` tw`scroll-pb-32` tw`scroll-pl-32` tw`scroll-p-36` tw`scroll-px-36` tw`scroll-py-36` tw`scroll-pt-36` tw`scroll-pr-36` tw`scroll-pb-36` tw`scroll-pl-36` tw`scroll-p-40` tw`scroll-px-40` tw`scroll-py-40` tw`scroll-pt-40` tw`scroll-pr-40` tw`scroll-pb-40` tw`scroll-pl-40` tw`scroll-p-44` tw`scroll-px-44` tw`scroll-py-44` tw`scroll-pt-44` tw`scroll-pr-44` tw`scroll-pb-44` tw`scroll-pl-44` tw`scroll-p-48` tw`scroll-px-48` tw`scroll-py-48` tw`scroll-pt-48` tw`scroll-pr-48` tw`scroll-pb-48` tw`scroll-pl-48` tw`scroll-p-52` tw`scroll-px-52` tw`scroll-py-52` tw`scroll-pt-52` tw`scroll-pr-52` tw`scroll-pb-52` tw`scroll-pl-52` tw`scroll-p-56` tw`scroll-px-56` tw`scroll-py-56` tw`scroll-pt-56` tw`scroll-pr-56` tw`scroll-pb-56` tw`scroll-pl-56` tw`scroll-p-60` tw`scroll-px-60` tw`scroll-py-60` tw`scroll-pt-60` tw`scroll-pr-60` tw`scroll-pb-60` tw`scroll-pl-60` tw`scroll-p-64` tw`scroll-px-64` tw`scroll-py-64` tw`scroll-pt-64` tw`scroll-pr-64` tw`scroll-pb-64` tw`scroll-pl-64` tw`scroll-p-72` tw`scroll-px-72` tw`scroll-py-72` tw`scroll-pt-72` tw`scroll-pr-72` tw`scroll-pb-72` tw`scroll-pl-72` tw`scroll-p-80` tw`scroll-px-80` tw`scroll-py-80` tw`scroll-pt-80` tw`scroll-pr-80` tw`scroll-pb-80` tw`scroll-pl-80` tw`scroll-p-96` tw`scroll-px-96` tw`scroll-py-96` tw`scroll-pt-96` tw`scroll-pr-96` tw`scroll-pb-96` tw`scroll-pl-96` tw`scroll-p-[24rem]` ================================================ FILE: tests/__fixtures__/utiltiesInteractivity/scrollSnapAlign.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/scroll-snap-align tw`snap-start` tw`snap-end` tw`snap-center` tw`snap-align-none` ================================================ FILE: tests/__fixtures__/utiltiesInteractivity/scrollSnapStop.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/scroll-snap-stop tw`snap-normal` tw`snap-always` ================================================ FILE: tests/__fixtures__/utiltiesInteractivity/scrollSnapType.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/scroll-snap-type tw`snap-none` tw`snap-x` tw`snap-y` tw`snap-both` tw`snap-mandatory` tw`snap-proximity` ================================================ FILE: tests/__fixtures__/utiltiesInteractivity/tailwind.config.js ================================================ module.exports = { theme: { extend: { colors: { 'red-500/fromConfig': '#000', electric: ({ opacityVariable, opacityValue }) => { if (opacityValue !== undefined) { return `rgba(219, 0, 255, ${opacityValue})` } if (opacityVariable !== undefined) { return `rgba(219, 0, 255, var(${opacityVariable}, 1))` } return `rgb(219, 0, 255)` }, }, }, }, } ================================================ FILE: tests/__fixtures__/utiltiesInteractivity/touchAction.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/touch-action tw`touch-auto` tw`touch-none` tw`touch-pan-x` tw`touch-pan-left` tw`touch-pan-right` tw`touch-pan-y` tw`touch-pan-up` tw`touch-pan-down` tw`touch-pinch-zoom` tw`touch-manipulation` ================================================ FILE: tests/__fixtures__/utiltiesInteractivity/userSelect.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/user-select tw`select-none` tw`select-text` tw`select-all` tw`select-auto` ================================================ FILE: tests/__fixtures__/utiltiesInteractivity/willChange.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/will-change theme`willChange` tw`will-change-auto` tw`will-change-scroll` tw`will-change-contents` tw`will-change-transform` tw`will-change-[top, left]` ================================================ FILE: tests/__fixtures__/utiltiesSizing/height.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/height theme`height` tw`h-0` tw`h-px` tw`h-0.5` tw`h-1` tw`h-1.5` tw`h-2` tw`h-2.5` tw`h-3` tw`h-3.5` tw`h-4` tw`h-5` tw`h-6` tw`h-7` tw`h-8` tw`h-9` tw`h-10` tw`h-11` tw`h-12` tw`h-14` tw`h-16` tw`h-20` tw`h-24` tw`h-28` tw`h-32` tw`h-36` tw`h-40` tw`h-44` tw`h-48` tw`h-52` tw`h-56` tw`h-60` tw`h-64` tw`h-72` tw`h-80` tw`h-96` tw`h-auto` tw`h-1/2` tw`h-1/3` tw`h-2/3` tw`h-1/4` tw`h-2/4` tw`h-3/4` tw`h-1/5` tw`h-2/5` tw`h-3/5` tw`h-4/5` tw`h-1/6` tw`h-2/6` tw`h-3/6` tw`h-4/6` tw`h-5/6` tw`h-full` tw`h-screen` tw`h-min` tw`h-max` tw`h-fit` tw`h-[32rem]` tw`h-[3.23rem]` tw`h-[calc(100%+1rem)]` tw`h-[var(--height)]` tw`h-[calc(100%-theme('spacing.16'))]` tw`h-[calc(100%-theme("spacing.16"))]` ================================================ FILE: tests/__fixtures__/utiltiesSizing/maxHeight.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/max-height theme`maxHeight` tw`max-h-0` tw`max-h-0.5` tw`max-h-1` tw`max-h-1.5` tw`max-h-2` tw`max-h-2.5` tw`max-h-3` tw`max-h-3.5` tw`max-h-none` tw`max-h-4` tw`max-h-5` tw`max-h-6` tw`max-h-7` tw`max-h-8` tw`max-h-9` tw`max-h-10` tw`max-h-11` tw`max-h-12` tw`max-h-14` tw`max-h-16` tw`max-h-20` tw`max-h-24` tw`max-h-28` tw`max-h-32` tw`max-h-36` tw`max-h-40` tw`max-h-44` tw`max-h-48` tw`max-h-52` tw`max-h-56` tw`max-h-60` tw`max-h-64` tw`max-h-72` tw`max-h-80` tw`max-h-96` tw`max-h-px` tw`max-h-full` tw`max-h-screen` tw`max-h-min` tw`max-h-max` tw`max-h-fit` tw`max-h-[32rem]` ================================================ FILE: tests/__fixtures__/utiltiesSizing/maxWidth.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/max-width theme`maxWidth` tw`max-w-0` tw`max-w-none` tw`max-w-xs` tw`max-w-sm` tw`max-w-md` tw`max-w-lg` tw`max-w-xl` tw`max-w-2xl` tw`max-w-3xl` tw`max-w-4xl` tw`max-w-5xl` tw`max-w-6xl` tw`max-w-7xl` tw`max-w-full` tw`max-w-min` tw`max-w-max` tw`max-w-fit` tw`max-w-prose` tw`max-w-screen-sm` tw`max-w-screen-md` tw`max-w-screen-lg` tw`max-w-screen-xl` tw`max-w-screen-2xl` tw`max-w-[50%]` ================================================ FILE: tests/__fixtures__/utiltiesSizing/minHeight.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/min-height theme`minHeight` tw`min-h-0` tw`min-h-full` tw`min-h-screen` tw`min-h-min` tw`min-h-max` tw`min-h-fit` tw`min-h-[3.23rem]` tw`min-h-[calc(100%+1rem)]` tw`min-h-[var(--height)]` tw`max-h-[3.23rem]` tw`max-h-[calc(100%+1rem)]` tw`max-h-[var(--height)]` ================================================ FILE: tests/__fixtures__/utiltiesSizing/minWidth.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/min-width theme`minWidth` tw`min-w-0` tw`min-w-full` tw`min-w-min` tw`min-w-max` tw`min-w-fit` tw`min-w-[3.23rem]` tw`min-w-[calc(100%+1rem)]` tw`min-w-[var(--width)]` tw`max-w-[3.23rem]` tw`max-w-[calc(100%+1rem)]` tw`max-w-[var(--width)]` ================================================ FILE: tests/__fixtures__/utiltiesSizing/width.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/width theme`width` tw`w-0` tw`w-px` tw`w-0.5` tw`w-1` tw`w-1.5` tw`w-2` tw`w-2.5` tw`w-3` tw`w-3.5` tw`w-4` tw`w-5` tw`w-6` tw`w-7` tw`w-8` tw`w-9` tw`w-10` tw`w-11` tw`w-12` tw`w-14` tw`w-16` tw`w-20` tw`w-24` tw`w-28` tw`w-32` tw`w-36` tw`w-40` tw`w-44` tw`w-48` tw`w-52` tw`w-56` tw`w-60` tw`w-64` tw`w-72` tw`w-80` tw`w-96` tw`w-auto` tw`w-1/2` tw`w-1/3` tw`w-2/3` tw`w-1/4` tw`w-2/4` tw`w-3/4` tw`w-1/5` tw`w-2/5` tw`w-3/5` tw`w-4/5` tw`w-1/6` tw`w-2/6` tw`w-3/6` tw`w-4/6` tw`w-5/6` tw`w-1/12` tw`w-2/12` tw`w-3/12` tw`w-4/12` tw`w-5/12` tw`w-6/12` tw`w-7/12` tw`w-8/12` tw`w-9/12` tw`w-10/12` tw`w-11/12` tw`w-full` tw`w-screen` tw`w-min` tw`w-max` tw`w-fit` tw`w-[3.23rem]` tw`w-[calc(100%+1rem)]` tw`w-[calc(var(--10-10px,calc(-20px-(-30px--40px)))-50px)]` tw`w-[var(--width)]` tw`w-[var(--width,calc(100%+1rem))]` tw`w-[calc(100%/3-1rem*2)]` ================================================ FILE: tests/__fixtures__/utiltiesTables/borderCollapse.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/border-collapse tw`border-collapse` tw`border-separate` ================================================ FILE: tests/__fixtures__/utiltiesTables/borderSpacing.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/border-spacing theme`borderSpacing` tw`border-spacing-0` tw`border-spacing-x-0` tw`border-spacing-y-0` tw`border-spacing-px` tw`border-spacing-x-px` tw`border-spacing-y-px` tw`border-spacing-0.5` tw`border-spacing-x-0.5` tw`border-spacing-y-0.5` tw`border-spacing-1` tw`border-spacing-x-1` tw`border-spacing-y-1` tw`border-spacing-1.5` tw`border-spacing-x-1.5` tw`border-spacing-y-1.5` tw`border-spacing-2` tw`border-spacing-x-2` tw`border-spacing-y-2` tw`border-spacing-2.5` tw`border-spacing-x-2.5` tw`border-spacing-y-2.5` tw`border-spacing-3` tw`border-spacing-x-3` tw`border-spacing-y-3` tw`border-spacing-3.5` tw`border-spacing-x-3.5` tw`border-spacing-y-3.5` tw`border-spacing-4` tw`border-spacing-x-4` tw`border-spacing-y-4` tw`border-spacing-5` tw`border-spacing-x-5` tw`border-spacing-y-5` tw`border-spacing-6` tw`border-spacing-x-6` tw`border-spacing-y-6` tw`border-spacing-7` tw`border-spacing-x-7` tw`border-spacing-y-7` tw`border-spacing-8` tw`border-spacing-x-8` tw`border-spacing-y-8` tw`border-spacing-9` tw`border-spacing-x-9` tw`border-spacing-y-9` tw`border-spacing-10` tw`border-spacing-x-10` tw`border-spacing-y-10` tw`border-spacing-11` tw`border-spacing-x-11` tw`border-spacing-y-11` tw`border-spacing-12` tw`border-spacing-x-12` tw`border-spacing-y-12` tw`border-spacing-14` tw`border-spacing-x-14` tw`border-spacing-y-14` tw`border-spacing-16` tw`border-spacing-x-16` tw`border-spacing-y-16` tw`border-spacing-20` tw`border-spacing-x-20` tw`border-spacing-y-20` tw`border-spacing-24` tw`border-spacing-x-24` tw`border-spacing-y-24` tw`border-spacing-28` tw`border-spacing-x-28` tw`border-spacing-y-28` tw`border-spacing-32` tw`border-spacing-x-32` tw`border-spacing-y-32` tw`border-spacing-36` tw`border-spacing-x-36` tw`border-spacing-y-36` tw`border-spacing-40` tw`border-spacing-x-40` tw`border-spacing-y-40` tw`border-spacing-44` tw`border-spacing-x-44` tw`border-spacing-y-44` tw`border-spacing-48` tw`border-spacing-x-48` tw`border-spacing-y-48` tw`border-spacing-52` tw`border-spacing-x-52` tw`border-spacing-y-52` tw`border-spacing-56` tw`border-spacing-x-56` tw`border-spacing-y-56` tw`border-spacing-60` tw`border-spacing-x-60` tw`border-spacing-y-60` tw`border-spacing-64` tw`border-spacing-x-64` tw`border-spacing-y-64` tw`border-spacing-72` tw`border-spacing-x-72` tw`border-spacing-y-72` tw`border-spacing-80` tw`border-spacing-x-80` tw`border-spacing-y-80` tw`border-spacing-96` tw`border-spacing-x-96` tw`border-spacing-y-96` ================================================ FILE: tests/__fixtures__/utiltiesTables/captionSide.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/caption-side tw`caption-top` tw`caption-bottom` ================================================ FILE: tests/__fixtures__/utiltiesTables/tableLayout.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/table-layout tw`table-auto` tw`table-fixed` ================================================ FILE: tests/__fixtures__/utiltiesTypography/fontFamily.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/font-family tw`font-sans` tw`font-serif` tw`font-mono` tw`font-custom` tw`font-['Open Sans']` tw`font-[generic-name:fantasy]` tw`font-[family-name:'this and that', this]` ================================================ FILE: tests/__fixtures__/utiltiesTypography/fontSize.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/font-size theme`fontSize` tw`text-xs` tw`text-sm` tw`text-base` tw`text-lg` tw`text-xl` tw`text-2xl` tw`text-3xl` tw`text-4xl` tw`text-5xl` tw`text-6xl` tw`text-7xl` tw`text-8xl` tw`text-9xl` tw`text-[2.23rem]` tw`text-[length:var(--font-size)]` tw`text-2xl` tw`text-3xl` ================================================ FILE: tests/__fixtures__/utiltiesTypography/fontSmoothing.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/font-smoothing tw`antialiased` tw`subpixel-antialiased` ================================================ FILE: tests/__fixtures__/utiltiesTypography/fontStyle.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/font-style tw`italic` tw`not-italic` ================================================ FILE: tests/__fixtures__/utiltiesTypography/fontVariantNumeric.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/font-variant-numeric tw`normal-nums` tw`ordinal` tw`slashed-zero` tw`lining-nums` tw`oldstyle-nums` tw`proportional-nums` tw`tabular-nums` tw`diagonal-fractions` tw`stacked-fractions` ================================================ FILE: tests/__fixtures__/utiltiesTypography/fontWeight.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/font-weight tw`font-thin` tw`font-extralight` tw`font-light` tw`font-normal` tw`font-medium` tw`font-semibold` tw`font-bold` tw`font-extrabold` tw`font-black` tw`font-[300]` tw`font-[number:medium]` ================================================ FILE: tests/__fixtures__/utiltiesTypography/hyphens.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/hyphens tw`hyphens-none` tw`hyphens-manual` tw`hyphens-auto` ================================================ FILE: tests/__fixtures__/utiltiesTypography/letterSpacing.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/letter-spacing theme`letterSpacing` tw`tracking-tighter` tw`tracking-tight` tw`tracking-normal` tw`tracking-wide` tw`tracking-wider` tw`tracking-widest` tw`-tracking-tighter` tw`-tracking-tight` tw`-tracking-normal` tw`-tracking-wide` tw`-tracking-wider` tw`-tracking-widest` tw`-tracking-[var(--tracking)]` tw`tracking-[var(--tracking)]` tw`-tracking-[2em]` tw`tracking-[.25em]` ================================================ FILE: tests/__fixtures__/utiltiesTypography/lineHeight.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/line-height theme`lineHeight` tw`leading-3` tw`leading-4` tw`leading-5` tw`leading-6` tw`leading-7` tw`leading-8` tw`leading-9` tw`leading-10` tw`leading-none` tw`leading-tight` tw`leading-snug` tw`leading-normal` tw`leading-relaxed` tw`leading-loose` tw`leading-[3rem]` tw`leading-[var(--leading)]` ================================================ FILE: tests/__fixtures__/utiltiesTypography/listStyleImage.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/list-style-image tw`list-image-none` tw`list-image-[url(checkmark.png)]` ================================================ FILE: tests/__fixtures__/utiltiesTypography/listStylePosition.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/list-style-position tw`list-inside` tw`list-outside` ================================================ FILE: tests/__fixtures__/utiltiesTypography/listStyleType.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/list-style-type theme`listStyleType` tw`list-none` tw`list-disc` tw`list-decimal` tw`list-[upper-roman]` tw`list-['1F44D']` tw`list-[var(--value)]` ================================================ FILE: tests/__fixtures__/utiltiesTypography/placeholderColor.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/placeholder-color tw`placeholder-inherit` tw`placeholder-current` tw`placeholder-transparent` tw`placeholder-black` tw`placeholder-white` tw`placeholder-slate-50` tw`placeholder-slate-100` tw`placeholder-slate-200` tw`placeholder-slate-300` tw`placeholder-slate-400` tw`placeholder-slate-500` tw`placeholder-slate-600` tw`placeholder-slate-700` tw`placeholder-slate-800` tw`placeholder-slate-900` tw`placeholder-gray-50` tw`placeholder-gray-100` tw`placeholder-gray-200` tw`placeholder-gray-300` tw`placeholder-gray-400` tw`placeholder-gray-500` tw`placeholder-gray-600` tw`placeholder-gray-700` tw`placeholder-gray-800` tw`placeholder-gray-900` tw`placeholder-zinc-50` tw`placeholder-zinc-100` tw`placeholder-zinc-200` tw`placeholder-zinc-300` tw`placeholder-zinc-400` tw`placeholder-zinc-500` tw`placeholder-zinc-600` tw`placeholder-zinc-700` tw`placeholder-zinc-800` tw`placeholder-zinc-900` tw`placeholder-neutral-50` tw`placeholder-neutral-100` tw`placeholder-neutral-200` tw`placeholder-neutral-300` tw`placeholder-neutral-400` tw`placeholder-neutral-500` tw`placeholder-neutral-600` tw`placeholder-neutral-700` tw`placeholder-neutral-800` tw`placeholder-neutral-900` tw`placeholder-stone-50` tw`placeholder-stone-100` tw`placeholder-stone-200` tw`placeholder-stone-300` tw`placeholder-stone-400` tw`placeholder-stone-500` tw`placeholder-stone-600` tw`placeholder-stone-700` tw`placeholder-stone-800` tw`placeholder-stone-900` tw`placeholder-red-50` tw`placeholder-red-100` tw`placeholder-red-200` tw`placeholder-red-300` tw`placeholder-red-400` tw`placeholder-red-500` tw`placeholder-red-600` tw`placeholder-red-700` tw`placeholder-red-800` tw`placeholder-red-900` tw`placeholder-orange-50` tw`placeholder-orange-100` tw`placeholder-orange-200` tw`placeholder-orange-300` tw`placeholder-orange-400` tw`placeholder-orange-500` tw`placeholder-orange-600` tw`placeholder-orange-700` tw`placeholder-orange-800` tw`placeholder-orange-900` tw`placeholder-amber-50` tw`placeholder-amber-100` tw`placeholder-amber-200` tw`placeholder-amber-300` tw`placeholder-amber-400` tw`placeholder-amber-500` tw`placeholder-amber-600` tw`placeholder-amber-700` tw`placeholder-amber-800` tw`placeholder-amber-900` tw`placeholder-yellow-50` tw`placeholder-yellow-100` tw`placeholder-yellow-200` tw`placeholder-yellow-300` tw`placeholder-yellow-400` tw`placeholder-yellow-500` tw`placeholder-yellow-600` tw`placeholder-yellow-700` tw`placeholder-yellow-800` tw`placeholder-yellow-900` tw`placeholder-lime-50` tw`placeholder-lime-100` tw`placeholder-lime-200` tw`placeholder-lime-300` tw`placeholder-lime-400` tw`placeholder-lime-500` tw`placeholder-lime-600` tw`placeholder-lime-700` tw`placeholder-lime-800` tw`placeholder-lime-900` tw`placeholder-green-50` tw`placeholder-green-100` tw`placeholder-green-200` tw`placeholder-green-300` tw`placeholder-green-400` tw`placeholder-green-500` tw`placeholder-green-600` tw`placeholder-green-700` tw`placeholder-green-800` tw`placeholder-green-900` tw`placeholder-emerald-50` tw`placeholder-emerald-100` tw`placeholder-emerald-200` tw`placeholder-emerald-300` tw`placeholder-emerald-400` tw`placeholder-emerald-500` tw`placeholder-emerald-600` tw`placeholder-emerald-700` tw`placeholder-emerald-800` tw`placeholder-emerald-900` tw`placeholder-teal-50` tw`placeholder-teal-100` tw`placeholder-teal-200` tw`placeholder-teal-300` tw`placeholder-teal-400` tw`placeholder-teal-500` tw`placeholder-teal-600` tw`placeholder-teal-700` tw`placeholder-teal-800` tw`placeholder-teal-900` tw`placeholder-cyan-50` tw`placeholder-cyan-100` tw`placeholder-cyan-200` tw`placeholder-cyan-300` tw`placeholder-cyan-400` tw`placeholder-cyan-500` tw`placeholder-cyan-600` tw`placeholder-cyan-700` tw`placeholder-cyan-800` tw`placeholder-cyan-900` tw`placeholder-sky-50` tw`placeholder-sky-100` tw`placeholder-sky-200` tw`placeholder-sky-300` tw`placeholder-sky-400` tw`placeholder-sky-500` tw`placeholder-sky-600` tw`placeholder-sky-700` tw`placeholder-sky-800` tw`placeholder-sky-900` tw`placeholder-blue-50` tw`placeholder-blue-100` tw`placeholder-blue-200` tw`placeholder-blue-300` tw`placeholder-blue-400` tw`placeholder-blue-500` tw`placeholder-blue-600` tw`placeholder-blue-700` tw`placeholder-blue-800` tw`placeholder-blue-900` tw`placeholder-indigo-50` tw`placeholder-indigo-100` tw`placeholder-indigo-200` tw`placeholder-indigo-300` tw`placeholder-indigo-400` tw`placeholder-indigo-500` tw`placeholder-indigo-600` tw`placeholder-indigo-700` tw`placeholder-indigo-800` tw`placeholder-indigo-900` tw`placeholder-violet-50` tw`placeholder-violet-100` tw`placeholder-violet-200` tw`placeholder-violet-300` tw`placeholder-violet-400` tw`placeholder-violet-500` tw`placeholder-violet-600` tw`placeholder-violet-700` tw`placeholder-violet-800` tw`placeholder-violet-900` tw`placeholder-purple-50` tw`placeholder-purple-100` tw`placeholder-purple-200` tw`placeholder-purple-300` tw`placeholder-purple-400` tw`placeholder-purple-500` tw`placeholder-purple-600` tw`placeholder-purple-700` tw`placeholder-purple-800` tw`placeholder-purple-900` tw`placeholder-fuchsia-50` tw`placeholder-fuchsia-100` tw`placeholder-fuchsia-200` tw`placeholder-fuchsia-300` tw`placeholder-fuchsia-400` tw`placeholder-fuchsia-500` tw`placeholder-fuchsia-600` tw`placeholder-fuchsia-700` tw`placeholder-fuchsia-800` tw`placeholder-fuchsia-900` tw`placeholder-pink-50` tw`placeholder-pink-100` tw`placeholder-pink-200` tw`placeholder-pink-300` tw`placeholder-pink-400` tw`placeholder-pink-500` tw`placeholder-pink-600` tw`placeholder-pink-700` tw`placeholder-pink-800` tw`placeholder-pink-900` tw`placeholder-rose-50` tw`placeholder-rose-100` tw`placeholder-rose-200` tw`placeholder-rose-300` tw`placeholder-rose-400` tw`placeholder-rose-500` tw`placeholder-rose-600` tw`placeholder-rose-700` tw`placeholder-rose-800` tw`placeholder-rose-900` tw`placeholder-[red]` tw`placeholder-[var(--placeholder)]` tw`placeholder-red-500/25` tw`placeholder-red-500/fromConfig` tw`placeholder-red-500/fromConfig/25` tw`placeholder-red-500/fromConfig/[.555]` tw`placeholder-red-500/fromConfig/[var(--myvar)]` tw`placeholder-red-500/[.555]` tw`placeholder-red-500/[var(--myvar)]` tw`placeholder-[theme('colors.red.500')]` tw`placeholder-electric` tw`placeholder-electric/25` tw`placeholder-electric/[.555]` tw`placeholder-electric/[var(--myvar)]` tw`placeholder-[theme('colors.electric')]` tw`placeholder-[color:red]` tw`placeholder-[any:red]` ================================================ FILE: tests/__fixtures__/utiltiesTypography/placeholderOpacity.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/placeholder-opacity // Deprecated in favor of slash opacity syntax tw`placeholder-opacity-0` tw`placeholder-opacity-5` tw`placeholder-opacity-10` tw`placeholder-opacity-20` tw`placeholder-opacity-25` tw`placeholder-opacity-30` tw`placeholder-opacity-40` tw`placeholder-opacity-50` tw`placeholder-opacity-60` tw`placeholder-opacity-70` tw`placeholder-opacity-75` tw`placeholder-opacity-80` tw`placeholder-opacity-90` tw`placeholder-opacity-95` tw`placeholder-opacity-100` tw`placeholder-opacity-[var(--placeholder-opacity)]` ================================================ FILE: tests/__fixtures__/utiltiesTypography/tailwind.config.js ================================================ module.exports = { theme: { extend: { // https://tailwindcss.com/docs/font-size#providing-a-default-line-height fontSize: { '2xl': [ '24px', { letterSpacing: '-0.01em', }, ], // Or with a default line-height as well '3xl': [ '32px', { letterSpacing: '-0.02em', lineHeight: '40px', }, ], }, fontFamily: { custom: [ 'Inter var, sans-serif', { fontFeatureSettings: '"cv11", "ss01"', fontVariationSettings: '"opsz" 32', }, ], }, colors: { 'red-500/fromConfig': '#000', electric: ({ opacityVariable, opacityValue }) => { if (opacityValue !== undefined) { return `rgba(219, 0, 255, ${opacityValue})` } if (opacityVariable !== undefined) { return `rgba(219, 0, 255, var(${opacityVariable}, 1))` } return `rgb(219, 0, 255)` }, }, }, }, } ================================================ FILE: tests/__fixtures__/utiltiesTypography/textAlign.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/text-align tw`text-left` tw`text-center` tw`text-right` tw`text-justify` tw`text-start` tw`text-end` ================================================ FILE: tests/__fixtures__/utiltiesTypography/textColor.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/text-color theme`textColor` tw`text-inherit` tw`text-current` tw`text-transparent` tw`text-black` tw`text-white` tw`text-slate-50` tw`text-slate-100` tw`text-slate-200` tw`text-slate-300` tw`text-slate-400` tw`text-slate-500` tw`text-slate-600` tw`text-slate-700` tw`text-slate-800` tw`text-slate-900` tw`text-gray-50` tw`text-gray-100` tw`text-gray-200` tw`text-gray-300` tw`text-gray-400` tw`text-gray-500` tw`text-gray-600` tw`text-gray-700` tw`text-gray-800` tw`text-gray-900` tw`text-zinc-50` tw`text-zinc-100` tw`text-zinc-200` tw`text-zinc-300` tw`text-zinc-400` tw`text-zinc-500` tw`text-zinc-600` tw`text-zinc-700` tw`text-zinc-800` tw`text-zinc-900` tw`text-neutral-50` tw`text-neutral-100` tw`text-neutral-200` tw`text-neutral-300` tw`text-neutral-400` tw`text-neutral-500` tw`text-neutral-600` tw`text-neutral-700` tw`text-neutral-800` tw`text-neutral-900` tw`text-stone-50` tw`text-stone-100` tw`text-stone-200` tw`text-stone-300` tw`text-stone-400` tw`text-stone-500` tw`text-stone-600` tw`text-stone-700` tw`text-stone-800` tw`text-stone-900` tw`text-red-50` tw`text-red-100` tw`text-red-200` tw`text-red-300` tw`text-red-400` tw`text-red-500` tw`text-red-600` tw`text-red-700` tw`text-red-800` tw`text-red-900` tw`text-orange-50` tw`text-orange-100` tw`text-orange-200` tw`text-orange-300` tw`text-orange-400` tw`text-orange-500` tw`text-orange-600` tw`text-orange-700` tw`text-orange-800` tw`text-orange-900` tw`text-amber-50` tw`text-amber-100` tw`text-amber-200` tw`text-amber-300` tw`text-amber-400` tw`text-amber-500` tw`text-amber-600` tw`text-amber-700` tw`text-amber-800` tw`text-amber-900` tw`text-yellow-50` tw`text-yellow-100` tw`text-yellow-200` tw`text-yellow-300` tw`text-yellow-400` tw`text-yellow-500` tw`text-yellow-600` tw`text-yellow-700` tw`text-yellow-800` tw`text-yellow-900` tw`text-lime-50` tw`text-lime-100` tw`text-lime-200` tw`text-lime-300` tw`text-lime-400` tw`text-lime-500` tw`text-lime-600` tw`text-lime-700` tw`text-lime-800` tw`text-lime-900` tw`text-green-50` tw`text-green-100` tw`text-green-200` tw`text-green-300` tw`text-green-400` tw`text-green-500` tw`text-green-600` tw`text-green-700` tw`text-green-800` tw`text-green-900` tw`text-emerald-50` tw`text-emerald-100` tw`text-emerald-200` tw`text-emerald-300` tw`text-emerald-400` tw`text-emerald-500` tw`text-emerald-600` tw`text-emerald-700` tw`text-emerald-800` tw`text-emerald-900` tw`text-teal-50` tw`text-teal-100` tw`text-teal-200` tw`text-teal-300` tw`text-teal-400` tw`text-teal-500` tw`text-teal-600` tw`text-teal-700` tw`text-teal-800` tw`text-teal-900` tw`text-cyan-50` tw`text-cyan-100` tw`text-cyan-200` tw`text-cyan-300` tw`text-cyan-400` tw`text-cyan-500` tw`text-cyan-600` tw`text-cyan-700` tw`text-cyan-800` tw`text-cyan-900` tw`text-sky-50` tw`text-sky-100` tw`text-sky-200` tw`text-sky-300` tw`text-sky-400` tw`text-sky-500` tw`text-sky-600` tw`text-sky-700` tw`text-sky-800` tw`text-sky-900` tw`text-blue-50` tw`text-blue-100` tw`text-blue-200` tw`text-blue-300` tw`text-blue-400` tw`text-blue-500` tw`text-blue-600` tw`text-blue-700` tw`text-blue-800` tw`text-blue-900` tw`text-indigo-50` tw`text-indigo-100` tw`text-indigo-200` tw`text-indigo-300` tw`text-indigo-400` tw`text-indigo-500` tw`text-indigo-600` tw`text-indigo-700` tw`text-indigo-800` tw`text-indigo-900` tw`text-violet-50` tw`text-violet-100` tw`text-violet-200` tw`text-violet-300` tw`text-violet-400` tw`text-violet-500` tw`text-violet-600` tw`text-violet-700` tw`text-violet-800` tw`text-violet-900` tw`text-purple-50` tw`text-purple-100` tw`text-purple-200` tw`text-purple-300` tw`text-purple-400` tw`text-purple-500` tw`text-purple-600` tw`text-purple-700` tw`text-purple-800` tw`text-purple-900` tw`text-fuchsia-50` tw`text-fuchsia-100` tw`text-fuchsia-200` tw`text-fuchsia-300` tw`text-fuchsia-400` tw`text-fuchsia-500` tw`text-fuchsia-600` tw`text-fuchsia-700` tw`text-fuchsia-800` tw`text-fuchsia-900` tw`text-pink-50` tw`text-pink-100` tw`text-pink-200` tw`text-pink-300` tw`text-pink-400` tw`text-pink-500` tw`text-pink-600` tw`text-pink-700` tw`text-pink-800` tw`text-pink-900` tw`text-rose-50` tw`text-rose-100` tw`text-rose-200` tw`text-rose-300` tw`text-rose-400` tw`text-rose-500` tw`text-rose-600` tw`text-rose-700` tw`text-rose-800` tw`text-rose-900` tw`text-blue-600/50` tw`text-blue-600/[.5]` tw`text-[#50d71e]` tw`text-[color:var(--color)]` tw`text-red-500` tw`text-red-500/25` tw`text-red-500/fromConfig` tw`text-red-500/fromConfig/25` tw`text-red-500/fromConfig/[.555]` tw`text-red-500/fromConfig/[var(--myvar)]` tw`text-red-500/[.555]` tw`text-red-500/[var(--myvar)]` tw`text-[theme('colors.red.500')]` tw`text-[theme('colors.red.500')]/20` tw`text-electric` tw`text-electric/25` tw`text-electric/[.555]` tw`text-electric/[var(--myvar)]` tw`text-[theme('colors.electric')]` tw`text-[theme('colors.electric')]/20` tw`text-[color:green]` tw`text-[color:rgba(255, 255, 255, .45)]` tw`text-[absolute-size:medium]` tw`text-[relative-size:larger]` tw`text-[length:10px]` tw`text-[percentage:10%]` ================================================ FILE: tests/__fixtures__/utiltiesTypography/textDecoration.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/text-decoration tw`underline` tw`overline` tw`line-through` tw`no-underline` ================================================ FILE: tests/__fixtures__/utiltiesTypography/textDecorationColor.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/text-decoration-color theme`textDecorationColor` tw`decoration-inherit` tw`decoration-current` tw`decoration-transparent` tw`decoration-black` tw`decoration-white` tw`decoration-slate-50` tw`decoration-slate-100` tw`decoration-slate-200` tw`decoration-slate-300` tw`decoration-slate-400` tw`decoration-slate-500` tw`decoration-slate-600` tw`decoration-slate-700` tw`decoration-slate-800` tw`decoration-slate-900` tw`decoration-gray-50` tw`decoration-gray-100` tw`decoration-gray-200` tw`decoration-gray-300` tw`decoration-gray-400` tw`decoration-gray-500` tw`decoration-gray-600` tw`decoration-gray-700` tw`decoration-gray-800` tw`decoration-gray-900` tw`decoration-zinc-50` tw`decoration-zinc-100` tw`decoration-zinc-200` tw`decoration-zinc-300` tw`decoration-zinc-400` tw`decoration-zinc-500` tw`decoration-zinc-600` tw`decoration-zinc-700` tw`decoration-zinc-800` tw`decoration-zinc-900` tw`decoration-neutral-50` tw`decoration-neutral-100` tw`decoration-neutral-200` tw`decoration-neutral-300` tw`decoration-neutral-400` tw`decoration-neutral-500` tw`decoration-neutral-600` tw`decoration-neutral-700` tw`decoration-neutral-800` tw`decoration-neutral-900` tw`decoration-stone-50` tw`decoration-stone-100` tw`decoration-stone-200` tw`decoration-stone-300` tw`decoration-stone-400` tw`decoration-stone-500` tw`decoration-stone-600` tw`decoration-stone-700` tw`decoration-stone-800` tw`decoration-stone-900` tw`decoration-red-50` tw`decoration-red-100` tw`decoration-red-200` tw`decoration-red-300` tw`decoration-red-400` tw`decoration-red-500` tw`decoration-red-600` tw`decoration-red-700` tw`decoration-red-800` tw`decoration-red-900` tw`decoration-orange-50` tw`decoration-orange-100` tw`decoration-orange-200` tw`decoration-orange-300` tw`decoration-orange-400` tw`decoration-orange-500` tw`decoration-orange-600` tw`decoration-orange-700` tw`decoration-orange-800` tw`decoration-orange-900` tw`decoration-amber-50` tw`decoration-amber-100` tw`decoration-amber-200` tw`decoration-amber-300` tw`decoration-amber-400` tw`decoration-amber-500` tw`decoration-amber-600` tw`decoration-amber-700` tw`decoration-amber-800` tw`decoration-amber-900` tw`decoration-yellow-50` tw`decoration-yellow-100` tw`decoration-yellow-200` tw`decoration-yellow-300` tw`decoration-yellow-400` tw`decoration-yellow-500` tw`decoration-yellow-600` tw`decoration-yellow-700` tw`decoration-yellow-800` tw`decoration-yellow-900` tw`decoration-lime-50` tw`decoration-lime-100` tw`decoration-lime-200` tw`decoration-lime-300` tw`decoration-lime-400` tw`decoration-lime-500` tw`decoration-lime-600` tw`decoration-lime-700` tw`decoration-lime-800` tw`decoration-lime-900` tw`decoration-green-50` tw`decoration-green-100` tw`decoration-green-200` tw`decoration-green-300` tw`decoration-green-400` tw`decoration-green-500` tw`decoration-green-600` tw`decoration-green-700` tw`decoration-green-800` tw`decoration-green-900` tw`decoration-emerald-50` tw`decoration-emerald-100` tw`decoration-emerald-200` tw`decoration-emerald-300` tw`decoration-emerald-400` tw`decoration-emerald-500` tw`decoration-emerald-600` tw`decoration-emerald-700` tw`decoration-emerald-800` tw`decoration-emerald-900` tw`decoration-teal-50` tw`decoration-teal-100` tw`decoration-teal-200` tw`decoration-teal-300` tw`decoration-teal-400` tw`decoration-teal-500` tw`decoration-teal-600` tw`decoration-teal-700` tw`decoration-teal-800` tw`decoration-teal-900` tw`decoration-cyan-50` tw`decoration-cyan-100` tw`decoration-cyan-200` tw`decoration-cyan-300` tw`decoration-cyan-400` tw`decoration-cyan-500` tw`decoration-cyan-600` tw`decoration-cyan-700` tw`decoration-cyan-800` tw`decoration-cyan-900` tw`decoration-sky-50` tw`decoration-sky-100` tw`decoration-sky-200` tw`decoration-sky-300` tw`decoration-sky-400` tw`decoration-sky-500` tw`decoration-sky-600` tw`decoration-sky-700` tw`decoration-sky-800` tw`decoration-sky-900` tw`decoration-blue-50` tw`decoration-blue-100` tw`decoration-blue-200` tw`decoration-blue-300` tw`decoration-blue-400` tw`decoration-blue-500` tw`decoration-blue-600` tw`decoration-blue-700` tw`decoration-blue-800` tw`decoration-blue-900` tw`decoration-indigo-50` tw`decoration-indigo-100` tw`decoration-indigo-200` tw`decoration-indigo-300` tw`decoration-indigo-400` tw`decoration-indigo-500` tw`decoration-indigo-600` tw`decoration-indigo-700` tw`decoration-indigo-800` tw`decoration-indigo-900` tw`decoration-violet-50` tw`decoration-violet-100` tw`decoration-violet-200` tw`decoration-violet-300` tw`decoration-violet-400` tw`decoration-violet-500` tw`decoration-violet-600` tw`decoration-violet-700` tw`decoration-violet-800` tw`decoration-violet-900` tw`decoration-purple-50` tw`decoration-purple-100` tw`decoration-purple-200` tw`decoration-purple-300` tw`decoration-purple-400` tw`decoration-purple-500` tw`decoration-purple-600` tw`decoration-purple-700` tw`decoration-purple-800` tw`decoration-purple-900` tw`decoration-fuchsia-50` tw`decoration-fuchsia-100` tw`decoration-fuchsia-200` tw`decoration-fuchsia-300` tw`decoration-fuchsia-400` tw`decoration-fuchsia-500` tw`decoration-fuchsia-600` tw`decoration-fuchsia-700` tw`decoration-fuchsia-800` tw`decoration-fuchsia-900` tw`decoration-pink-50` tw`decoration-pink-100` tw`decoration-pink-200` tw`decoration-pink-300` tw`decoration-pink-400` tw`decoration-pink-500` tw`decoration-pink-600` tw`decoration-pink-700` tw`decoration-pink-800` tw`decoration-pink-900` tw`decoration-rose-50` tw`decoration-rose-100` tw`decoration-rose-200` tw`decoration-rose-300` tw`decoration-rose-400` tw`decoration-rose-500` tw`decoration-rose-600` tw`decoration-rose-700` tw`decoration-rose-800` tw`decoration-rose-900` tw`decoration-red-600` tw`decoration-[#50d71e]` tw`decoration-[black]` tw`decoration-[rgb(123,123,123)]` tw`decoration-[rgb(123,_123,_123)]` tw`decoration-[rgb(123_123_123)]` tw`decoration-[black]/20` // `decoration-[rgb(123_123_123)]/20` unsupported tw`decoration-[black]/[20]` // `decoration-[rgb(123_123_123)]/[20]` unsupported tw`decoration-[color:#50d71e]` tw`decoration-[color:var(--color)]` // `decoration-[var(--color)]` unsupported ================================================ FILE: tests/__fixtures__/utiltiesTypography/textDecorationStyle.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/text-decoration-style tw`decoration-solid` tw`decoration-double` tw`decoration-dotted` tw`decoration-dashed` tw`decoration-wavy` ================================================ FILE: tests/__fixtures__/utiltiesTypography/textDecorationThickness.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/text-decoration-thickness theme`textDecorationThickness` tw`decoration-auto` tw`decoration-from-font` tw`decoration-0` tw`decoration-1` tw`decoration-2` tw`decoration-4` tw`decoration-8` tw`decoration-[length:10px]` tw`decoration-[percentage:10%]` ================================================ FILE: tests/__fixtures__/utiltiesTypography/textIndent.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/text-indent theme`textIndent` tw`indent-0` tw`indent-px` tw`indent-0.5` tw`indent-1` tw`indent-1.5` tw`indent-2` tw`indent-2.5` tw`indent-3` tw`indent-3.5` tw`indent-4` tw`indent-5` tw`indent-6` tw`indent-7` tw`indent-8` tw`indent-9` tw`indent-10` tw`indent-11` tw`indent-12` tw`indent-14` tw`indent-16` tw`indent-20` tw`indent-24` tw`indent-28` tw`indent-32` tw`indent-36` tw`indent-40` tw`indent-44` tw`indent-48` tw`indent-52` tw`indent-56` tw`indent-60` tw`indent-64` tw`indent-72` tw`indent-80` tw`indent-96` tw`-indent-0` tw`-indent-px` tw`-indent-0.5` tw`-indent-1` tw`-indent-1.5` tw`-indent-2` tw`-indent-2.5` tw`-indent-3` tw`-indent-3.5` tw`-indent-4` tw`-indent-5` tw`-indent-6` tw`-indent-7` tw`-indent-8` tw`-indent-9` tw`-indent-10` tw`-indent-11` tw`-indent-12` tw`-indent-14` tw`-indent-16` tw`-indent-20` tw`-indent-24` tw`-indent-28` tw`-indent-32` tw`-indent-36` tw`-indent-40` tw`-indent-44` tw`-indent-48` tw`-indent-52` tw`-indent-56` tw`-indent-60` tw`-indent-64` tw`-indent-72` tw`-indent-80` tw`-indent-96` tw`indent-[50%]` tw`indent-[length:10px]` tw`indent-[lookup:10px]` ================================================ FILE: tests/__fixtures__/utiltiesTypography/textOpacity.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/text-opacity // Deprecated in favor of slash opacity syntax tw`text-opacity-0` tw`text-opacity-5` tw`text-opacity-10` tw`text-opacity-20` tw`text-opacity-25` tw`text-opacity-30` tw`text-opacity-40` tw`text-opacity-50` tw`text-opacity-60` tw`text-opacity-70` tw`text-opacity-75` tw`text-opacity-80` tw`text-opacity-90` tw`text-opacity-95` tw`text-opacity-100` ================================================ FILE: tests/__fixtures__/utiltiesTypography/textOverflow.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/text-overflow tw`truncate` tw`text-ellipsis` tw`text-clip` ================================================ FILE: tests/__fixtures__/utiltiesTypography/textTransform.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/text-transform tw`uppercase` tw`lowercase` tw`capitalize` tw`normal-case` ================================================ FILE: tests/__fixtures__/utiltiesTypography/textUnderlineOffset.tsx ================================================ // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/text-underline-offset theme`textUnderlineOffset` tw`underline-offset-auto` tw`underline-offset-0` tw`underline-offset-1` tw`underline-offset-2` tw`underline-offset-4` tw`underline-offset-8` tw`underline-offset-[3px]` tw`underline-offset-[length:3px]` tw`underline-offset-[30%]` tw`underline-offset-[percentage:30%]` ================================================ FILE: tests/__fixtures__/utiltiesTypography/verticalAlign.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/vertical-align tw`align-baseline` tw`align-top` tw`align-middle` tw`align-bottom` tw`align-text-top` tw`align-text-bottom` tw`align-sub` tw`align-super` tw`align-[something]` ================================================ FILE: tests/__fixtures__/utiltiesTypography/whitespace.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/whitespace tw`whitespace-normal` tw`whitespace-nowrap` tw`whitespace-pre` tw`whitespace-pre-line` tw`whitespace-pre-wrap` ================================================ FILE: tests/__fixtures__/utiltiesTypography/wordBreak.tsx ================================================ // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/word-break tw`break-keep` tw`break-normal` tw`break-words` tw`break-all` ================================================ FILE: tests/__fixtures__/variables/tailwind.config.js ================================================ module.exports = { theme: { extend: { spacing: { 'gutter-1/2': 'var(--gutter-half)', }, }, }, plugins: [addComponentsTestCssVariableAsRuleProperty], } function addComponentsTestCssVariableAsRuleProperty({ addComponents }) { const styles = [ { '.css-class-with-variable-as-rule-property': { '--some-css-variable-as-rule-prop': 'blue', }, }, ] addComponents(styles) } ================================================ FILE: tests/__fixtures__/variables/variables.tsx ================================================ // @ts-nocheck import tw from '../macro' // Test a user created css class with a css variable as a rule property tw`css-class-with-variable-as-rule-property` // Test negative css variables tw`-mx-gutter-1/2` ================================================ FILE: tests/__fixtures__/variantOrdering/variantOrdering.tsx ================================================ // @ts-nocheck import tw from '../macro' tw`before:valid:rtl:motion-safe:contrast-more:dark:print:portrait:any-pointer-fine:block` tw`any-pointer-fine:portrait:print:dark:contrast-more:motion-safe:rtl:valid:before:mt-5` ================================================ FILE: tests/__fixtures__/visitedOpacity/visitedOpacity.tsx ================================================ // @ts-nocheck import tw from '../macro' tw`visited:border-red-500 visited:bg-red-500 visited:text-red-500` tw`visited:border-red-500/20 visited:bg-red-500/20 visited:text-red-500/20` tw`visited:border-red-500/[20] visited:bg-red-500/[20] visited:text-red-500/[20]` tw`visited:(border-red-500) visited:(bg-red-500) visited:(text-red-500)` ================================================ FILE: tests/__snapshots__/plugin.test.js.snap ================================================ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`twin.macro !general.tsx: !general.tsx 1`] = ` // @ts-nocheck import tw from '../macro' /** * Misc usage tests */ const styles = tw\`uppercase\` const Box = tw.div\`text-red-500\` const BoxExtended = tw(Box)\`bg-blue-500\` // Media queries const MediaProperty = tw\`lg:uppercase\` const MediaColorProperty = tw.div\`lg:text-red-500\` const ElementMediaColorProperty = tw(Box)\`lg:bg-blue-500\` const MediaPropertyDuplicates = tw\`lg:bg-blue-500 lg:bg-black\` // Only basic evaluations supported // No functions or "beyond basic" conditionals. const plainConditional = true && 'red' const plainVariable = \`bg-\${plainConditional}-500\` tw\`\${plainVariable}\` ↓ ↓ ↓ ↓ ↓ ↓ import _styled from '@emotion/styled' /** * Misc usage tests */ const styles = { textTransform: 'uppercase', } const Box = _styled.div({ '--tw-text-opacity': '1', color: 'rgb(239 68 68 / var(--tw-text-opacity))', }) const BoxExtended = _styled(Box)({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(59 130 246 / var(--tw-bg-opacity))', }) // Media queries const MediaProperty = { '@media (min-width: 1024px)': { textTransform: 'uppercase', }, } const MediaColorProperty = _styled.div({ '@media (min-width: 1024px)': { '--tw-text-opacity': '1', color: 'rgb(239 68 68 / var(--tw-text-opacity))', }, }) const ElementMediaColorProperty = _styled(Box)({ '@media (min-width: 1024px)': { '--tw-bg-opacity': '1', backgroundColor: 'rgb(59 130 246 / var(--tw-bg-opacity))', }, }) const MediaPropertyDuplicates = { '@media (min-width: 1024px)': { '--tw-bg-opacity': '1', backgroundColor: 'rgb(59 130 246 / var(--tw-bg-opacity))', }, } // Only basic evaluations supported // No functions or "beyond basic" conditionals. const plainConditional = true && 'red' const plainVariable = \`bg-\${plainConditional}-500\` ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(239 68 68 / var(--tw-bg-opacity))', }) `; exports[`twin.macro !important.tsx: !important.tsx 1`] = ` // @ts-nocheck import tw from '../macro' const Box = tw.div\`text-red-500\` const Important = tw\`lg:uppercase!\` const MediaImportant = tw.div\`lg:text-red-500!\` const ElementMediaImportant = tw(Box)\`lg:bg-blue-500!\` const PlaceholderImportant = tw.input\`placeholder-red-500!\` const StateImportant = tw.input\`hover:text-red-500!\` const StatePlaceholderImportant = tw.input\`hover:placeholder-red-500!\` const StateStatePlaceholderImportant = tw.input\`active:hover:placeholder-red-500!\` const StateMultiplePropertiesImportant = tw.input\`hover:truncate!\` const MediaStateMultiplePropertiesImportant = tw.input\`lg:hover:truncate!\` const ElementMediaStateMultiplePropertiesImportant = tw(Box)\`lg:hover:truncate!\` const JsxPlaceholderImportant = () => const ImportantPrefixPrefix = tw\`lg:!uppercase\` const MediaImportantPrefix = tw.div\`lg:!text-red-500\` const ElementMediaImportantPrefix = tw(Box)\`lg:!bg-blue-500\` const PlaceholderImportantPrefix = tw.input\`!placeholder-red-500\` const StateImportantPrefix = tw.input\`hover:!text-red-500\` const StatePlaceholderImportantPrefix = tw.input\`hover:!placeholder-red-500\` const StateStatePlaceholderImportantPrefix = tw.input\`active:hover:!placeholder-red-500\` const StateMultiplePropertiesImportantPrefix = tw.input\`hover:!truncate\` const MediaStateMultiplePropertiesImportantPrefix = tw.input\`lg:hover:!truncate\` const ElementMediaStateMultiplePropertiesImportantPrefix = tw( Box )\`lg:hover:!truncate\` const VariantImportantPrefixMergeCheck = tw.div\`md:!from-black to-[#dc4fc2] bg-gradient-to-r\` const MultiVariantImportantPrefixMergeCheck = tw.div\`first:md:!from-black to-[#dc4fc2] bg-gradient-to-r\` const JsxPlaceholderImportantPrefix = () => ( ) ↓ ↓ ↓ ↓ ↓ ↓ import _styled from '@emotion/styled' const Box = _styled.div({ '--tw-text-opacity': '1', color: 'rgb(239 68 68 / var(--tw-text-opacity))', }) const Important = { '@media (min-width: 1024px)': { textTransform: 'uppercase !important', }, } const MediaImportant = _styled.div({ '@media (min-width: 1024px)': { '--tw-text-opacity': '1 !important', color: 'rgb(239 68 68 / var(--tw-text-opacity)) !important', }, }) const ElementMediaImportant = _styled(Box)({ '@media (min-width: 1024px)': { '--tw-bg-opacity': '1 !important', backgroundColor: 'rgb(59 130 246 / var(--tw-bg-opacity)) !important', }, }) const PlaceholderImportant = _styled.input({ '::placeholder': { '--tw-placeholder-opacity': '1 !important', color: 'rgb(239 68 68 / var(--tw-placeholder-opacity)) !important', }, }) const StateImportant = _styled.input({ ':hover': { '--tw-text-opacity': '1 !important', color: 'rgb(239 68 68 / var(--tw-text-opacity)) !important', }, }) const StatePlaceholderImportant = _styled.input({ ':hover::placeholder': { '--tw-placeholder-opacity': '1 !important', color: 'rgb(239 68 68 / var(--tw-placeholder-opacity)) !important', }, }) const StateStatePlaceholderImportant = _styled.input({ ':active:hover::placeholder': { '--tw-placeholder-opacity': '1 !important', color: 'rgb(239 68 68 / var(--tw-placeholder-opacity)) !important', }, }) const StateMultiplePropertiesImportant = _styled.input({ ':hover': { overflow: 'hidden !important', textOverflow: 'ellipsis !important', whiteSpace: 'nowrap !important', }, }) const MediaStateMultiplePropertiesImportant = _styled.input({ '@media (min-width: 1024px)': { ':hover': { overflow: 'hidden !important', textOverflow: 'ellipsis !important', whiteSpace: 'nowrap !important', }, }, }) const ElementMediaStateMultiplePropertiesImportant = _styled(Box)({ '@media (min-width: 1024px)': { ':hover': { overflow: 'hidden !important', textOverflow: 'ellipsis !important', whiteSpace: 'nowrap !important', }, }, }) const JsxPlaceholderImportant = () => ( ) const ImportantPrefixPrefix = { '@media (min-width: 1024px)': { textTransform: 'uppercase !important', }, } const MediaImportantPrefix = _styled.div({ '@media (min-width: 1024px)': { '--tw-text-opacity': '1 !important', color: 'rgb(239 68 68 / var(--tw-text-opacity)) !important', }, }) const ElementMediaImportantPrefix = _styled(Box)({ '@media (min-width: 1024px)': { '--tw-bg-opacity': '1 !important', backgroundColor: 'rgb(59 130 246 / var(--tw-bg-opacity)) !important', }, }) const PlaceholderImportantPrefix = _styled.input({ '::placeholder': { '--tw-placeholder-opacity': '1 !important', color: 'rgb(239 68 68 / var(--tw-placeholder-opacity)) !important', }, }) const StateImportantPrefix = _styled.input({ ':hover': { '--tw-text-opacity': '1 !important', color: 'rgb(239 68 68 / var(--tw-text-opacity)) !important', }, }) const StatePlaceholderImportantPrefix = _styled.input({ ':hover::placeholder': { '--tw-placeholder-opacity': '1 !important', color: 'rgb(239 68 68 / var(--tw-placeholder-opacity)) !important', }, }) const StateStatePlaceholderImportantPrefix = _styled.input({ ':active:hover::placeholder': { '--tw-placeholder-opacity': '1 !important', color: 'rgb(239 68 68 / var(--tw-placeholder-opacity)) !important', }, }) const StateMultiplePropertiesImportantPrefix = _styled.input({ ':hover': { overflow: 'hidden !important', textOverflow: 'ellipsis !important', whiteSpace: 'nowrap !important', }, }) const MediaStateMultiplePropertiesImportantPrefix = _styled.input({ '@media (min-width: 1024px)': { ':hover': { overflow: 'hidden !important', textOverflow: 'ellipsis !important', whiteSpace: 'nowrap !important', }, }, }) const ElementMediaStateMultiplePropertiesImportantPrefix = _styled(Box)({ '@media (min-width: 1024px)': { ':hover': { overflow: 'hidden !important', textOverflow: 'ellipsis !important', whiteSpace: 'nowrap !important', }, }, }) const VariantImportantPrefixMergeCheck = _styled.div({ backgroundImage: 'linear-gradient(to right, var(--tw-gradient-stops))', '--tw-gradient-to': '#dc4fc2 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '@media (min-width: 768px)': { '--tw-gradient-from': '#000 var(--tw-gradient-from-position) !important', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(0 0 0 / 0) var(--tw-gradient-from-position) !important', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to) !important', }, }) const MultiVariantImportantPrefixMergeCheck = _styled.div({ backgroundImage: 'linear-gradient(to right, var(--tw-gradient-stops))', '--tw-gradient-to': '#dc4fc2 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '@media (min-width: 768px)': { ':first-child': { '--tw-gradient-from': '#000 var(--tw-gradient-from-position) !important', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(0 0 0 / 0) var(--tw-gradient-from-position) !important', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to) !important', }, }, }) const JsxPlaceholderImportantPrefix = () => ( ) `; exports[`twin.macro !imports.tsx: !imports.tsx 1`] = ` // @ts-nocheck import tw, { theme, styled, css, GlobalStyles } from '../macro' const twPropertyTest =
const twFunctionTest = tw.div\`text-purple-500\` const cssFunctionTest = (
) const styledFunctionTest = styled.div\` \${css\` \${tw\`text-purple-500\`} background-color: purple; \`} \` const themeObjectPurple = ( ) const themeStringFont = ( ) const themeFontNoLineheight = ( ) const colorsRed = Object.values(theme\`colors.red\`) const themeFunctionObjectPurple = ( ) const themeFunctionStringHeight = ( ) const themeSquareBrackets = ( ) const GlobalStylesTest = () => // Dot syntax const Component = { Sub: () => [] } ; ; ↓ ↓ ↓ ↓ ↓ ↓ import { css as _css } from '@emotion/react' import _styled from '@emotion/styled' import { Global as _globalImport } from '@emotion/react' const _GlobalStyles = () => ( <_globalImport styles={_css\`*, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: #e5e7eb; --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: var(--tw-empty,/*!*/ /*!*/); --tw-pan-y: var(--tw-empty,/*!*/ /*!*/); --tw-pinch-zoom: var(--tw-empty,/*!*/ /*!*/); --tw-scroll-snap-strictness: proximity; --tw-ordinal: var(--tw-empty,/*!*/ /*!*/); --tw-slashed-zero: var(--tw-empty,/*!*/ /*!*/); --tw-numeric-figure: var(--tw-empty,/*!*/ /*!*/); --tw-numeric-spacing: var(--tw-empty,/*!*/ /*!*/); --tw-numeric-fraction: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-blur: var(--tw-empty,/*!*/ /*!*/); --tw-brightness: var(--tw-empty,/*!*/ /*!*/); --tw-contrast: var(--tw-empty,/*!*/ /*!*/); --tw-grayscale: var(--tw-empty,/*!*/ /*!*/); --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/); --tw-invert: var(--tw-empty,/*!*/ /*!*/); --tw-saturate: var(--tw-empty,/*!*/ /*!*/); --tw-sepia: var(--tw-empty,/*!*/ /*!*/); --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/); } ::before, ::after { --tw-content: ''; } html { line-height: 1.5; -webkit-text-size-adjust: 100%; -moz-tab-size: 4; tab-size: 4; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-feature-settings: normal; font-variation-settings: normal; } body { margin: 0; line-height: inherit; } hr { height: 0; color: inherit; border-top-width: 1px; } abbr:where([title]) { text-decoration: underline dotted; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } table { text-indent: 0; border-color: inherit; border-collapse: collapse; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; } button, select { text-transform: none; } button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; background-color: transparent; background-image: none; } :-moz-focusring { outline: auto; } :-moz-ui-invalid { box-shadow: none; } progress { vertical-align: baseline; } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } [type='search'] { -webkit-appearance: textfield; outline-offset: -2px; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } summary { display: list-item; } blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; } fieldset { margin: 0; padding: 0; } legend { padding: 0; } ol, ul, menu { list-style: none; margin: 0; padding: 0; } textarea { resize: vertical; } input::placeholder, textarea::placeholder { opacity: 1; color: #9ca3af; } button, [role="button"] { cursor: pointer; } :disabled { cursor: default; } img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; } img, video { max-width: 100%; height: auto; } [hidden] { display: none; } ::backdrop { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: var(--tw-empty,/*!*/ /*!*/); --tw-pan-y: var(--tw-empty,/*!*/ /*!*/); --tw-pinch-zoom: var(--tw-empty,/*!*/ /*!*/); --tw-scroll-snap-strictness: proximity; --tw-ordinal: var(--tw-empty,/*!*/ /*!*/); --tw-slashed-zero: var(--tw-empty,/*!*/ /*!*/); --tw-numeric-figure: var(--tw-empty,/*!*/ /*!*/); --tw-numeric-spacing: var(--tw-empty,/*!*/ /*!*/); --tw-numeric-fraction: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-blur: var(--tw-empty,/*!*/ /*!*/); --tw-brightness: var(--tw-empty,/*!*/ /*!*/); --tw-contrast: var(--tw-empty,/*!*/ /*!*/); --tw-grayscale: var(--tw-empty,/*!*/ /*!*/); --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/); --tw-invert: var(--tw-empty,/*!*/ /*!*/); --tw-saturate: var(--tw-empty,/*!*/ /*!*/); --tw-sepia: var(--tw-empty,/*!*/ /*!*/); --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/); }\`} /> ) const twPropertyTest = (
) const twFunctionTest = _styled.div({ '--tw-text-opacity': '1', color: 'rgb(168 85 247 / var(--tw-text-opacity))', }) const cssFunctionTest = (
) const styledFunctionTest = _styled.div\` \${_css\` \${{ '--tw-text-opacity': '1', color: 'rgb(168 85 247 / var(--tw-text-opacity))', }} background-color: purple; \`} \` const themeObjectPurple = ( ) const themeStringFont = ( ) const themeFontNoLineheight = ( ) const colorsRed = Object.values({ 50: '#fef2f2', 100: '#fee2e2', 200: '#fecaca', 300: '#fca5a5', 400: '#f87171', 500: '#ef4444', 600: '#dc2626', 700: '#b91c1c', 800: '#991b1b', 900: '#7f1d1d', 950: '#450a0a', }) const themeFunctionObjectPurple = ( ) const themeFunctionStringHeight = ( ) const themeSquareBrackets = ( ) const GlobalStylesTest = () => <_GlobalStyles /> // Dot syntax const Component = { Sub: () => [], } ; ; `; exports[`twin.macro !namelessImport.tsx: !namelessImport.tsx 1`] = ` // @ts-nocheck import '../macro' const twPropertyString =
const twPropertyExpression =
↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck const twPropertyString = (
) const twPropertyExpression = (
) `; exports[`twin.macro !ordering.tsx: !ordering.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // Test the screen ordering - they are ordered by screens in tailwind.config.js tw.div\`xl:bg-red-500 lg:bg-blue-500 bg-green-500 fill-current md:bg-pink-500 sm:bg-green-500 sm:text-yellow-500 hidden\` // Bg opacity should trump the default bg opacity tw\`bg-opacity-50 bg-red-500\` ↓ ↓ ↓ ↓ ↓ ↓ import _styled from '@emotion/styled' // Test the screen ordering - they are ordered by screens in tailwind.config.js _styled.div({ display: 'none', '--tw-bg-opacity': '1', backgroundColor: 'rgb(34 197 94 / var(--tw-bg-opacity))', fill: 'currentColor', '@media (min-width: 640px)': { '--tw-bg-opacity': '1', backgroundColor: 'rgb(34 197 94 / var(--tw-bg-opacity))', '--tw-text-opacity': '1', color: 'rgb(234 179 8 / var(--tw-text-opacity))', }, '@media (min-width: 768px)': { '--tw-bg-opacity': '1', backgroundColor: 'rgb(236 72 153 / var(--tw-bg-opacity))', }, '@media (min-width: 1024px)': { '--tw-bg-opacity': '1', backgroundColor: 'rgb(59 130 246 / var(--tw-bg-opacity))', }, '@media (min-width: 1280px)': { '--tw-bg-opacity': '1', backgroundColor: 'rgb(239 68 68 / var(--tw-bg-opacity))', }, }) // Bg opacity should trump the default bg opacity ;({ '--tw-bg-opacity': '0.5', backgroundColor: 'rgb(239 68 68 / var(--tw-bg-opacity))', }) `; exports[`twin.macro !properties.tsx: !properties.tsx 1`] = ` // @ts-nocheck import tw from '../macro' const Component1 = () =>
const Component2 = () =>
const Component3 = () =>
const Component4 = () =>
const Component5 = () =>
const Component6 = () => (
) const Component7 = () => (
) ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck const Component1 = () => (
) const Component2 = () => (
) const Component3 = () => (
) const Component4 = () => (
) const Component5 = () => (
) const Component6 = () => (
) const Component7 = () => (
) `; exports[`twin.macro !variantGrouping.tsx: !variantGrouping.tsx 1`] = ` // @ts-nocheck import tw from '../macro' const basic = tw\`group-hover:(flex m-10)\` const subMediaQuery = tw\`focus-within:(md:flex mt-5)\` const multipleClasses = tw\`hover:(bg-black text-white underline)\` const pseudoElement = tw\`before:(w-10 h-10 block bg-black)\` const pseudoElementNoContent = tw\`before:(w-10 h-10 block bg-black)\` const pseudoElementsNoContent = tw\`before:(w-10 h-10) after:(w-10 h-10)\` const mediaHover = tw\`sm:hover:(bg-black text-white)\` const sloppySpacing = tw\` last:( flex mt-5)\` const multipleGroups = tw\`focus:(w-10 h-10 block bg-black) focus-within:(md:flex mt-5)\` const nestedGroups = tw\`md:(w-10 hocus:(h-10 block bg-black))\` tw\`(block w-10)\` tw\`((block w-10))\` tw\`hover:(block w-10)\` tw\`md:(hover:(block w-10))\` tw\`md:(hover:(block (block) w-10))\` tw\`md:(hover:(block (h-10) w-10))\` // Important tw\`(block w-10)!\` tw\`hover:(block w-10)!\` tw\`md:(hover:(block (block)! w-10))\` tw\`md:(hover:(block (h-10)! w-10))\` tw\`md:(hover:(block w-10)!)\` // Ignored tw\`\` tw\`()\` tw\`md:()\` tw\`md:(hover:())\` // Slash opacity tw\`first:(bg-[black]/20 block)\` tw\`first:(bg-[black]/[.20] block)\` tw\`first:(bg-[black]/[.20] inline last:(bg-[black]/[.20] block))\` tw\`first:(block bg-[black]/[.20])\` tw\`md:(ml-4 [one]:( mt-5 [two]:(inline [three]:(inline))))!\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck const basic = { '.group:hover &': { margin: '2.5rem', display: 'flex', }, } const subMediaQuery = { ':focus-within': { marginTop: '1.25rem', }, '@media (min-width: 768px)': { ':focus-within': { display: 'flex', }, }, } const multipleClasses = { ':hover': { '--tw-bg-opacity': '1', backgroundColor: 'rgb(0 0 0 / var(--tw-bg-opacity))', '--tw-text-opacity': '1', color: 'rgb(255 255 255 / var(--tw-text-opacity))', textDecorationLine: 'underline', }, } const pseudoElement = { '::before': { content: 'var(--tw-content)', display: 'block', height: '2.5rem', width: '2.5rem', '--tw-bg-opacity': '1', backgroundColor: 'rgb(0 0 0 / var(--tw-bg-opacity))', }, } const pseudoElementNoContent = { '::before': { content: 'var(--tw-content)', display: 'block', height: '2.5rem', width: '2.5rem', '--tw-bg-opacity': '1', backgroundColor: 'rgb(0 0 0 / var(--tw-bg-opacity))', }, } const pseudoElementsNoContent = { '::before': { content: 'var(--tw-content)', height: '2.5rem', width: '2.5rem', }, '::after': { content: 'var(--tw-content)', height: '2.5rem', width: '2.5rem', }, } const mediaHover = { '@media (min-width: 640px)': { ':hover': { '--tw-bg-opacity': '1', backgroundColor: 'rgb(0 0 0 / var(--tw-bg-opacity))', '--tw-text-opacity': '1', color: 'rgb(255 255 255 / var(--tw-text-opacity))', }, }, } const sloppySpacing = { ':last-child': { marginTop: '1.25rem', display: 'flex', }, } const multipleGroups = { ':focus-within': { marginTop: '1.25rem', }, ':focus': { display: 'block', height: '2.5rem', width: '2.5rem', '--tw-bg-opacity': '1', backgroundColor: 'rgb(0 0 0 / var(--tw-bg-opacity))', }, '@media (min-width: 768px)': { ':focus-within': { display: 'flex', }, }, } const nestedGroups = { '@media (min-width: 768px)': { width: '2.5rem', ':hover': { display: 'block', height: '2.5rem', '--tw-bg-opacity': '1', backgroundColor: 'rgb(0 0 0 / var(--tw-bg-opacity))', }, ':focus': { display: 'block', height: '2.5rem', '--tw-bg-opacity': '1', backgroundColor: 'rgb(0 0 0 / var(--tw-bg-opacity))', }, }, } ;({ display: 'block', width: '2.5rem', }) ;({ display: 'block', width: '2.5rem', }) ;({ ':hover': { display: 'block', width: '2.5rem', }, }) ;({ '@media (min-width: 768px)': { ':hover': { display: 'block', width: '2.5rem', }, }, }) ;({ '@media (min-width: 768px)': { ':hover': { display: 'block', width: '2.5rem', }, }, }) ;({ '@media (min-width: 768px)': { ':hover': { display: 'block', height: '2.5rem', width: '2.5rem', }, }, }) // Important ;({ display: 'block !important', width: '2.5rem !important', }) ;({ ':hover': { display: 'block !important', width: '2.5rem !important', }, }) ;({ '@media (min-width: 768px)': { ':hover': { display: 'block', width: '2.5rem', }, }, }) ;({ '@media (min-width: 768px)': { ':hover': { display: 'block', height: '2.5rem !important', width: '2.5rem', }, }, }) ;({ '@media (min-width: 768px)': { ':hover': { display: 'block !important', width: '2.5rem !important', }, }, }) // Ignored ;({}) ;({}) ;({}) ;({}) // Slash opacity ;({ ':first-child': { display: 'block', backgroundColor: 'rgb(0 0 0 / 0.2)', }, }) ;({ ':first-child': { display: 'block', backgroundColor: 'rgb(0 0 0 / .20)', }, }) ;({ ':first-child': { display: 'inline', backgroundColor: 'rgb(0 0 0 / .20)', }, ':first-child:last-child': { display: 'block', backgroundColor: 'rgb(0 0 0 / .20)', }, }) ;({ ':first-child': { display: 'block', backgroundColor: 'rgb(0 0 0 / .20)', }, }) ;({ '@media (min-width: 768px)': { marginLeft: '1rem !important', '& one': { marginTop: '1.25rem !important', }, '& one two': { display: 'inline !important', }, '& one two three': { display: 'inline !important', }, }, }) `; exports[`twin.macro !variants.tsx: !variants.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // Pseudo element variants tw\`first-letter:block\` tw\`first-line:block\` tw\`marker:block\` tw\`selection:block\` tw\`file:block\` tw\`placeholder:block\` tw\`backdrop:block\` tw\`before:block\` tw\`after:block\` tw\`before:(content block)\` tw\`after:(content block)\` // Positional tw\`first:block\` tw\`last:block\` tw\`only:block\` tw\`odd:block\` tw\`even:block\` tw\`first-of-type:block\` tw\`last-of-type:block\` tw\`only-of-type:block\` // State tw\`visited:block\` tw\`target:block\` tw\`open:block\` // Forms tw\`default:block\` tw\`checked:block\` tw\`indeterminate:block\` tw\`placeholder-shown:block\` tw\`autofill:block\` tw\`optional:block\` tw\`required:block\` tw\`valid:block\` tw\`invalid:block\` tw\`in-range:block\` tw\`out-of-range:block\` tw\`read-only:block\` // Content tw\`empty:block\` // Interactive tw\`focus-within:block\` tw\`hover:block\` tw\`focus:block\` tw\`focus-visible:block\` tw\`active:block\` tw\`enabled:block\` tw\`disabled:block\` // Twin custom tw\`all:block\` tw\`all-child:block\` tw\`sibling:block\` tw\`hocus:block\` tw\`link:block\` tw\`read-write:block\` tw\`svg:block\` tw\`even-of-type:block\` tw\`odd-of-type:block\` // Not versions of the above // Positional tw\`not-first:block\` tw\`not-last:block\` tw\`not-only:block\` tw\`not-odd:block\` tw\`not-even:block\` tw\`not-first-of-type:block\` tw\`not-last-of-type:block\` tw\`not-only-of-type:block\` // State tw\`not-target:block\` tw\`not-open:block\` // Forms tw\`not-default:block\` tw\`not-checked:block\` tw\`not-indeterminate:block\` tw\`not-placeholder-shown:block\` tw\`not-autofill:block\` tw\`not-optional:block\` tw\`not-required:block\` tw\`not-valid:block\` tw\`not-invalid:block\` tw\`not-in-range:block\` tw\`not-out-of-range:block\` tw\`not-read-only:block\` // Content tw\`not-empty:block\` // Interactive tw\`not-focus-within:block\` tw\`not-hover:block\` tw\`not-focus:block\` tw\`not-focus-visible:block\` tw\`not-active:block\` tw\`not-enabled:block\` tw\`not-disabled:block\` // Twin custom tw\`not-all:block\` tw\`not-all-child:block\` tw\`not-sibling:block\` tw\`not-hocus:block\` tw\`not-link:block\` tw\`not-read-write:block\` tw\`not-svg:block\` tw\`not-even-of-type:block\` tw\`not-odd-of-type:block\` // tw\`ltr:block\` tw\`rtl:block\` tw\`motion-safe:block\` tw\`motion-reduce:block\` tw\`dark:block\` tw\`light:block\` tw\`dark:sm:block\` tw\`light:sm:block\` tw\`dark:group-hover:sm:block\` tw\`light:group-hocus:sm:block\` tw\`print:block\` tw\`screen:block\` tw\`portrait:block\` tw\`landscape:block\` tw\`contrast-more:block\` tw\`contrast-less:block\` tw\`any-pointer-none:block\` tw\`any-pointer-fine:block\` tw\`any-pointer-coarse:block\` tw\`pointer-none:block\` tw\`pointer-fine:block\` tw\`pointer-coarse:block\` tw\`any-hover-none:block\` tw\`any-hover:block\` tw\`can-hover:block\` tw\`cant-hover:block\` // Arbitrary values tw\`first:inset-[50px]\` tw\`md:text-[red]\` // Random tw\`xl:placeholder-red-500! first:md:block sm:disabled:flex\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // Pseudo element variants ;({ '::first-letter': { display: 'block', }, }) ;({ '::first-line': { display: 'block', }, }) ;({ '& *::marker': { display: 'block', }, '::marker': { display: 'block', }, }) ;({ '& *::selection': { display: 'block', }, '::selection': { display: 'block', }, }) ;({ '::file-selector-button': { display: 'block', }, }) ;({ '::placeholder': { display: 'block', }, }) ;({ '::backdrop': { display: 'block', }, }) ;({ '::before': { content: 'var(--tw-content)', display: 'block', }, }) ;({ '::after': { content: 'var(--tw-content)', display: 'block', }, }) ;({ '::before': { content: 'var(--tw-content)', display: 'block', '--tw-content': '', }, }) ;({ '::after': { content: 'var(--tw-content)', display: 'block', '--tw-content': '', }, }) // Positional ;({ ':first-child': { display: 'block', }, }) ;({ ':last-child': { display: 'block', }, }) ;({ ':only-child': { display: 'block', }, }) ;({ ':nth-child(odd)': { display: 'block', }, }) ;({ ':nth-child(even)': { display: 'block', }, }) ;({ ':first-of-type': { display: 'block', }, }) ;({ ':last-of-type': { display: 'block', }, }) ;({ ':only-of-type': { display: 'block', }, }) // State ;({ ':visited': { display: 'block', }, }) ;({ ':target': { display: 'block', }, }) ;({ '&[open]': { display: 'block', }, }) // Forms ;({ ':default': { display: 'block', }, }) ;({ ':checked': { display: 'block', }, }) ;({ ':indeterminate': { display: 'block', }, }) ;({ ':placeholder-shown': { display: 'block', }, }) ;({ ':autofill': { display: 'block', }, }) ;({ ':optional': { display: 'block', }, }) ;({ ':required': { display: 'block', }, }) ;({ ':valid': { display: 'block', }, }) ;({ ':invalid': { display: 'block', }, }) ;({ ':in-range': { display: 'block', }, }) ;({ ':out-of-range': { display: 'block', }, }) ;({ ':read-only': { display: 'block', }, }) // Content ;({ ':empty': { display: 'block', }, }) // Interactive ;({ ':focus-within': { display: 'block', }, }) ;({ ':hover': { display: 'block', }, }) ;({ ':focus': { display: 'block', }, }) ;({ ':focus-visible': { display: 'block', }, }) ;({ ':active': { display: 'block', }, }) ;({ ':enabled': { display: 'block', }, }) ;({ ':disabled': { display: 'block', }, }) // Twin custom ;({ '& *': { display: 'block', }, }) ;({ '> *': { display: 'block', }, }) ;({ '& ~ *': { display: 'block', }, }) ;({ ':hover': { display: 'block', }, ':focus': { display: 'block', }, }) ;({ ':link': { display: 'block', }, }) ;({ ':read-write': { display: 'block', }, }) ;({ '& svg': { display: 'block', }, }) ;({ ':nth-of-type(even)': { display: 'block', }, }) ;({ ':nth-of-type(odd)': { display: 'block', }, }) // Not versions of the above // Positional ;({ ':not(:first-child)': { display: 'block', }, }) ;({ ':not(:last-child)': { display: 'block', }, }) ;({ ':not(:only-child)': { display: 'block', }, }) ;({ ':not(:nth-child(odd))': { display: 'block', }, }) ;({ ':not(:nth-child(even))': { display: 'block', }, }) ;({ ':not(:first-of-type)': { display: 'block', }, }) ;({ ':not(:last-of-type)': { display: 'block', }, }) ;({ ':not(:only-of-type)': { display: 'block', }, }) // State ;({ ':not(:target)': { display: 'block', }, }) ;({ ':not([open])': { display: 'block', }, }) // Forms ;({ ':not(:default)': { display: 'block', }, }) ;({ ':not(:checked)': { display: 'block', }, }) ;({ ':not(:indeterminate)': { display: 'block', }, }) ;({ ':not(:placeholder-shown)': { display: 'block', }, }) ;({ ':not(:autofill)': { display: 'block', }, }) ;({ ':not(:optional)': { display: 'block', }, }) ;({ ':not(:required)': { display: 'block', }, }) ;({ ':not(:valid)': { display: 'block', }, }) ;({ ':not(:invalid)': { display: 'block', }, }) ;({ ':not(:in-range)': { display: 'block', }, }) ;({ ':not(:out-of-range)': { display: 'block', }, }) ;({ ':not(:read-only)': { display: 'block', }, }) // Content ;({ ':not(:empty)': { display: 'block', }, }) // Interactive ;({ ':not(:focus-within)': { display: 'block', }, }) ;({ ':not(:hover)': { display: 'block', }, }) ;({ ':not(:focus)': { display: 'block', }, }) ;({ ':not(:focus-visible)': { display: 'block', }, }) ;({ ':not(:active)': { display: 'block', }, }) ;({ ':not(:enabled)': { display: 'block', }, }) ;({ ':not(:disabled)': { display: 'block', }, }) // Twin custom ;({ ':not(*)': { display: 'block', }, }) ;({ ':not(> *)': { display: 'block', }, }) ;({ ':not(~ *)': { display: 'block', }, }) ;({ ':not(:hover)': { display: 'block', }, ':not(:focus)': { display: 'block', }, }) ;({ ':not(:link)': { display: 'block', }, }) ;({ ':not(:read-write)': { display: 'block', }, }) ;({ ':not(svg)': { display: 'block', }, }) ;({ ':not(:nth-of-type(even))': { display: 'block', }, }) ;({ ':not(:nth-of-type(odd))': { display: 'block', }, }) // ;({ ':is([dir="ltr"] &)': { display: 'block', }, }) ;({ ':is([dir="rtl"] &)': { display: 'block', }, }) ;({ '@media (prefers-reduced-motion: no-preference)': { display: 'block', }, }) ;({ '@media (prefers-reduced-motion: reduce)': { display: 'block', }, }) ;({ '@media (prefers-color-scheme: dark)': { display: 'block', }, }) ;({ '@media (prefers-color-scheme: light)': { display: 'block', }, }) ;({ '@media (min-width: 640px)': { '@media (prefers-color-scheme: dark)': { display: 'block', }, }, }) ;({ '@media (min-width: 640px)': { '@media (prefers-color-scheme: light)': { display: 'block', }, }, }) ;({ '@media (min-width: 640px)': { '@media (prefers-color-scheme: dark)': { '.group:hover &': { display: 'block', }, }, }, }) ;({ '@media (min-width: 640px)': { '@media (prefers-color-scheme: light)': { '.group:hover &': { display: 'block', }, '.group:focus &': { display: 'block', }, }, }, }) ;({ '@media print': { display: 'block', }, }) ;({ '@media screen': { display: 'block', }, }) ;({ '@media (orientation: portrait)': { display: 'block', }, }) ;({ '@media (orientation: landscape)': { display: 'block', }, }) ;({ '@media (prefers-contrast: more)': { display: 'block', }, }) ;({ '@media (prefers-contrast: less)': { display: 'block', }, }) ;({ '@media (any-pointer: none)': { display: 'block', }, }) ;({ '@media (any-pointer: fine)': { display: 'block', }, }) ;({ '@media (any-pointer: coarse)': { display: 'block', }, }) ;({ '@media (pointer: none)': { display: 'block', }, }) ;({ '@media (pointer: fine)': { display: 'block', }, }) ;({ '@media (pointer: coarse)': { display: 'block', }, }) ;({ '@media (any-hover: none)': { display: 'block', }, }) ;({ '@media (any-hover: hover)': { display: 'block', }, }) ;({ '@media (hover: hover)': { display: 'block', }, }) ;({ '@media (hover: none)': { display: 'block', }, }) // Arbitrary values ;({ ':first-child': { inset: '50px', }, }) ;({ '@media (min-width: 768px)': { '--tw-text-opacity': '1', color: 'rgb(255 0 0 / var(--tw-text-opacity))', }, }) // Random ;({ '@media (min-width: 640px)': { ':disabled': { display: 'flex', }, }, '@media (min-width: 768px)': { ':first-child': { display: 'block', }, }, '@media (min-width: 1280px)': { '::placeholder': { '--tw-placeholder-opacity': '1 !important', color: 'rgb(239 68 68 / var(--tw-placeholder-opacity)) !important', }, }, }) `; exports[`twin.macro accentColor.tsx: accentColor.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/accent-color theme\`accentColor\` tw\`accent-inherit\` tw\`accent-current\` tw\`accent-transparent\` tw\`accent-black\` tw\`accent-white\` tw\`accent-slate-50\` tw\`accent-slate-100\` tw\`accent-slate-200\` tw\`accent-slate-300\` tw\`accent-slate-400\` tw\`accent-slate-500\` tw\`accent-slate-600\` tw\`accent-slate-700\` tw\`accent-slate-800\` tw\`accent-slate-900\` tw\`accent-gray-50\` tw\`accent-gray-100\` tw\`accent-gray-200\` tw\`accent-gray-300\` tw\`accent-gray-400\` tw\`accent-gray-500\` tw\`accent-gray-600\` tw\`accent-gray-700\` tw\`accent-gray-800\` tw\`accent-gray-900\` tw\`accent-zinc-50\` tw\`accent-zinc-100\` tw\`accent-zinc-200\` tw\`accent-zinc-300\` tw\`accent-zinc-400\` tw\`accent-zinc-500\` tw\`accent-zinc-600\` tw\`accent-zinc-700\` tw\`accent-zinc-800\` tw\`accent-zinc-900\` tw\`accent-neutral-50\` tw\`accent-neutral-100\` tw\`accent-neutral-200\` tw\`accent-neutral-300\` tw\`accent-neutral-400\` tw\`accent-neutral-500\` tw\`accent-neutral-600\` tw\`accent-neutral-700\` tw\`accent-neutral-800\` tw\`accent-neutral-900\` tw\`accent-stone-50\` tw\`accent-stone-100\` tw\`accent-stone-200\` tw\`accent-stone-300\` tw\`accent-stone-400\` tw\`accent-stone-500\` tw\`accent-stone-600\` tw\`accent-stone-700\` tw\`accent-stone-800\` tw\`accent-stone-900\` tw\`accent-red-50\` tw\`accent-red-100\` tw\`accent-red-200\` tw\`accent-red-300\` tw\`accent-red-400\` tw\`accent-red-500\` tw\`accent-red-600\` tw\`accent-red-700\` tw\`accent-red-800\` tw\`accent-red-900\` tw\`accent-orange-50\` tw\`accent-orange-100\` tw\`accent-orange-200\` tw\`accent-orange-300\` tw\`accent-orange-400\` tw\`accent-orange-500\` tw\`accent-orange-600\` tw\`accent-orange-700\` tw\`accent-orange-800\` tw\`accent-orange-900\` tw\`accent-amber-50\` tw\`accent-amber-100\` tw\`accent-amber-200\` tw\`accent-amber-300\` tw\`accent-amber-400\` tw\`accent-amber-500\` tw\`accent-amber-600\` tw\`accent-amber-700\` tw\`accent-amber-800\` tw\`accent-amber-900\` tw\`accent-yellow-50\` tw\`accent-yellow-100\` tw\`accent-yellow-200\` tw\`accent-yellow-300\` tw\`accent-yellow-400\` tw\`accent-yellow-500\` tw\`accent-yellow-600\` tw\`accent-yellow-700\` tw\`accent-yellow-800\` tw\`accent-yellow-900\` tw\`accent-lime-50\` tw\`accent-lime-100\` tw\`accent-lime-200\` tw\`accent-lime-300\` tw\`accent-lime-400\` tw\`accent-lime-500\` tw\`accent-lime-600\` tw\`accent-lime-700\` tw\`accent-lime-800\` tw\`accent-lime-900\` tw\`accent-green-50\` tw\`accent-green-100\` tw\`accent-green-200\` tw\`accent-green-300\` tw\`accent-green-400\` tw\`accent-green-500\` tw\`accent-green-600\` tw\`accent-green-700\` tw\`accent-green-800\` tw\`accent-green-900\` tw\`accent-emerald-50\` tw\`accent-emerald-100\` tw\`accent-emerald-200\` tw\`accent-emerald-300\` tw\`accent-emerald-400\` tw\`accent-emerald-500\` tw\`accent-emerald-600\` tw\`accent-emerald-700\` tw\`accent-emerald-800\` tw\`accent-emerald-900\` tw\`accent-teal-50\` tw\`accent-teal-100\` tw\`accent-teal-200\` tw\`accent-teal-300\` tw\`accent-teal-400\` tw\`accent-teal-500\` tw\`accent-teal-600\` tw\`accent-teal-700\` tw\`accent-teal-800\` tw\`accent-teal-900\` tw\`accent-cyan-50\` tw\`accent-cyan-100\` tw\`accent-cyan-200\` tw\`accent-cyan-300\` tw\`accent-cyan-400\` tw\`accent-cyan-500\` tw\`accent-cyan-600\` tw\`accent-cyan-700\` tw\`accent-cyan-800\` tw\`accent-cyan-900\` tw\`accent-sky-50\` tw\`accent-sky-100\` tw\`accent-sky-200\` tw\`accent-sky-300\` tw\`accent-sky-400\` tw\`accent-sky-500\` tw\`accent-sky-600\` tw\`accent-sky-700\` tw\`accent-sky-800\` tw\`accent-sky-900\` tw\`accent-blue-50\` tw\`accent-blue-100\` tw\`accent-blue-200\` tw\`accent-blue-300\` tw\`accent-blue-400\` tw\`accent-blue-500\` tw\`accent-blue-600\` tw\`accent-blue-700\` tw\`accent-blue-800\` tw\`accent-blue-900\` tw\`accent-indigo-50\` tw\`accent-indigo-100\` tw\`accent-indigo-200\` tw\`accent-indigo-300\` tw\`accent-indigo-400\` tw\`accent-indigo-500\` tw\`accent-indigo-600\` tw\`accent-indigo-700\` tw\`accent-indigo-800\` tw\`accent-indigo-900\` tw\`accent-violet-50\` tw\`accent-violet-100\` tw\`accent-violet-200\` tw\`accent-violet-300\` tw\`accent-violet-400\` tw\`accent-violet-500\` tw\`accent-violet-600\` tw\`accent-violet-700\` tw\`accent-violet-800\` tw\`accent-violet-900\` tw\`accent-purple-50\` tw\`accent-purple-100\` tw\`accent-purple-200\` tw\`accent-purple-300\` tw\`accent-purple-400\` tw\`accent-purple-500\` tw\`accent-purple-600\` tw\`accent-purple-700\` tw\`accent-purple-800\` tw\`accent-purple-900\` tw\`accent-fuchsia-50\` tw\`accent-fuchsia-100\` tw\`accent-fuchsia-200\` tw\`accent-fuchsia-300\` tw\`accent-fuchsia-400\` tw\`accent-fuchsia-500\` tw\`accent-fuchsia-600\` tw\`accent-fuchsia-700\` tw\`accent-fuchsia-800\` tw\`accent-fuchsia-900\` tw\`accent-pink-50\` tw\`accent-pink-100\` tw\`accent-pink-200\` tw\`accent-pink-300\` tw\`accent-pink-400\` tw\`accent-pink-500\` tw\`accent-pink-600\` tw\`accent-pink-700\` tw\`accent-pink-800\` tw\`accent-pink-900\` tw\`accent-rose-50\` tw\`accent-rose-100\` tw\`accent-rose-200\` tw\`accent-rose-300\` tw\`accent-rose-400\` tw\`accent-rose-500\` tw\`accent-rose-600\` tw\`accent-rose-700\` tw\`accent-rose-800\` tw\`accent-rose-900\` tw\`accent-auto\` tw\`accent-[#50d71e]\` tw\`accent-[theme('colors.red.500')]\` tw\`accent-[theme('colors.red.500')]/20\` tw\`accent-[color:red]\` tw\`accent-[any:red]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/accent-color ;({ inherit: 'inherit', current: 'currentColor', transparent: 'transparent', black: '#000', white: '#fff', slate: { 50: '#f8fafc', 100: '#f1f5f9', 200: '#e2e8f0', 300: '#cbd5e1', 400: '#94a3b8', 500: '#64748b', 600: '#475569', 700: '#334155', 800: '#1e293b', 900: '#0f172a', 950: '#020617', }, gray: { 50: '#f9fafb', 100: '#f3f4f6', 200: '#e5e7eb', 300: '#d1d5db', 400: '#9ca3af', 500: '#6b7280', 600: '#4b5563', 700: '#374151', 800: '#1f2937', 900: '#111827', 950: '#030712', }, zinc: { 50: '#fafafa', 100: '#f4f4f5', 200: '#e4e4e7', 300: '#d4d4d8', 400: '#a1a1aa', 500: '#71717a', 600: '#52525b', 700: '#3f3f46', 800: '#27272a', 900: '#18181b', 950: '#09090b', }, neutral: { 50: '#fafafa', 100: '#f5f5f5', 200: '#e5e5e5', 300: '#d4d4d4', 400: '#a3a3a3', 500: '#737373', 600: '#525252', 700: '#404040', 800: '#262626', 900: '#171717', 950: '#0a0a0a', }, stone: { 50: '#fafaf9', 100: '#f5f5f4', 200: '#e7e5e4', 300: '#d6d3d1', 400: '#a8a29e', 500: '#78716c', 600: '#57534e', 700: '#44403c', 800: '#292524', 900: '#1c1917', 950: '#0c0a09', }, red: { 50: '#fef2f2', 100: '#fee2e2', 200: '#fecaca', 300: '#fca5a5', 400: '#f87171', 500: '#ef4444', 600: '#dc2626', 700: '#b91c1c', 800: '#991b1b', 900: '#7f1d1d', 950: '#450a0a', }, orange: { 50: '#fff7ed', 100: '#ffedd5', 200: '#fed7aa', 300: '#fdba74', 400: '#fb923c', 500: '#f97316', 600: '#ea580c', 700: '#c2410c', 800: '#9a3412', 900: '#7c2d12', 950: '#431407', }, amber: { 50: '#fffbeb', 100: '#fef3c7', 200: '#fde68a', 300: '#fcd34d', 400: '#fbbf24', 500: '#f59e0b', 600: '#d97706', 700: '#b45309', 800: '#92400e', 900: '#78350f', 950: '#451a03', }, yellow: { 50: '#fefce8', 100: '#fef9c3', 200: '#fef08a', 300: '#fde047', 400: '#facc15', 500: '#eab308', 600: '#ca8a04', 700: '#a16207', 800: '#854d0e', 900: '#713f12', 950: '#422006', }, lime: { 50: '#f7fee7', 100: '#ecfccb', 200: '#d9f99d', 300: '#bef264', 400: '#a3e635', 500: '#84cc16', 600: '#65a30d', 700: '#4d7c0f', 800: '#3f6212', 900: '#365314', 950: '#1a2e05', }, green: { 50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 300: '#86efac', 400: '#4ade80', 500: '#22c55e', 600: '#16a34a', 700: '#15803d', 800: '#166534', 900: '#14532d', 950: '#052e16', }, emerald: { 50: '#ecfdf5', 100: '#d1fae5', 200: '#a7f3d0', 300: '#6ee7b7', 400: '#34d399', 500: '#10b981', 600: '#059669', 700: '#047857', 800: '#065f46', 900: '#064e3b', 950: '#022c22', }, teal: { 50: '#f0fdfa', 100: '#ccfbf1', 200: '#99f6e4', 300: '#5eead4', 400: '#2dd4bf', 500: '#14b8a6', 600: '#0d9488', 700: '#0f766e', 800: '#115e59', 900: '#134e4a', 950: '#042f2e', }, cyan: { 50: '#ecfeff', 100: '#cffafe', 200: '#a5f3fc', 300: '#67e8f9', 400: '#22d3ee', 500: '#06b6d4', 600: '#0891b2', 700: '#0e7490', 800: '#155e75', 900: '#164e63', 950: '#083344', }, sky: { 50: '#f0f9ff', 100: '#e0f2fe', 200: '#bae6fd', 300: '#7dd3fc', 400: '#38bdf8', 500: '#0ea5e9', 600: '#0284c7', 700: '#0369a1', 800: '#075985', 900: '#0c4a6e', 950: '#082f49', }, blue: { 50: '#eff6ff', 100: '#dbeafe', 200: '#bfdbfe', 300: '#93c5fd', 400: '#60a5fa', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8', 800: '#1e40af', 900: '#1e3a8a', 950: '#172554', }, indigo: { 50: '#eef2ff', 100: '#e0e7ff', 200: '#c7d2fe', 300: '#a5b4fc', 400: '#818cf8', 500: '#6366f1', 600: '#4f46e5', 700: '#4338ca', 800: '#3730a3', 900: '#312e81', 950: '#1e1b4b', }, violet: { 50: '#f5f3ff', 100: '#ede9fe', 200: '#ddd6fe', 300: '#c4b5fd', 400: '#a78bfa', 500: '#8b5cf6', 600: '#7c3aed', 700: '#6d28d9', 800: '#5b21b6', 900: '#4c1d95', 950: '#2e1065', }, purple: { 50: '#faf5ff', 100: '#f3e8ff', 200: '#e9d5ff', 300: '#d8b4fe', 400: '#c084fc', 500: '#a855f7', 600: '#9333ea', 700: '#7e22ce', 800: '#6b21a8', 900: '#581c87', 950: '#3b0764', }, fuchsia: { 50: '#fdf4ff', 100: '#fae8ff', 200: '#f5d0fe', 300: '#f0abfc', 400: '#e879f9', 500: '#d946ef', 600: '#c026d3', 700: '#a21caf', 800: '#86198f', 900: '#701a75', 950: '#4a044e', }, pink: { 50: '#fdf2f8', 100: '#fce7f3', 200: '#fbcfe8', 300: '#f9a8d4', 400: '#f472b6', 500: '#ec4899', 600: '#db2777', 700: '#be185d', 800: '#9d174d', 900: '#831843', 950: '#500724', }, rose: { 50: '#fff1f2', 100: '#ffe4e6', 200: '#fecdd3', 300: '#fda4af', 400: '#fb7185', 500: '#f43f5e', 600: '#e11d48', 700: '#be123c', 800: '#9f1239', 900: '#881337', 950: '#4c0519', }, 'red-500/fromConfig': '#000', electric: void 0, auto: 'auto', }) ;({ accentColor: 'inherit', }) ;({ accentColor: 'currentColor', }) ;({ accentColor: 'transparent', }) ;({ accentColor: '#000', }) ;({ accentColor: '#fff', }) ;({ accentColor: '#f8fafc', }) ;({ accentColor: '#f1f5f9', }) ;({ accentColor: '#e2e8f0', }) ;({ accentColor: '#cbd5e1', }) ;({ accentColor: '#94a3b8', }) ;({ accentColor: '#64748b', }) ;({ accentColor: '#475569', }) ;({ accentColor: '#334155', }) ;({ accentColor: '#1e293b', }) ;({ accentColor: '#0f172a', }) ;({ accentColor: '#f9fafb', }) ;({ accentColor: '#f3f4f6', }) ;({ accentColor: '#e5e7eb', }) ;({ accentColor: '#d1d5db', }) ;({ accentColor: '#9ca3af', }) ;({ accentColor: '#6b7280', }) ;({ accentColor: '#4b5563', }) ;({ accentColor: '#374151', }) ;({ accentColor: '#1f2937', }) ;({ accentColor: '#111827', }) ;({ accentColor: '#fafafa', }) ;({ accentColor: '#f4f4f5', }) ;({ accentColor: '#e4e4e7', }) ;({ accentColor: '#d4d4d8', }) ;({ accentColor: '#a1a1aa', }) ;({ accentColor: '#71717a', }) ;({ accentColor: '#52525b', }) ;({ accentColor: '#3f3f46', }) ;({ accentColor: '#27272a', }) ;({ accentColor: '#18181b', }) ;({ accentColor: '#fafafa', }) ;({ accentColor: '#f5f5f5', }) ;({ accentColor: '#e5e5e5', }) ;({ accentColor: '#d4d4d4', }) ;({ accentColor: '#a3a3a3', }) ;({ accentColor: '#737373', }) ;({ accentColor: '#525252', }) ;({ accentColor: '#404040', }) ;({ accentColor: '#262626', }) ;({ accentColor: '#171717', }) ;({ accentColor: '#fafaf9', }) ;({ accentColor: '#f5f5f4', }) ;({ accentColor: '#e7e5e4', }) ;({ accentColor: '#d6d3d1', }) ;({ accentColor: '#a8a29e', }) ;({ accentColor: '#78716c', }) ;({ accentColor: '#57534e', }) ;({ accentColor: '#44403c', }) ;({ accentColor: '#292524', }) ;({ accentColor: '#1c1917', }) ;({ accentColor: '#fef2f2', }) ;({ accentColor: '#fee2e2', }) ;({ accentColor: '#fecaca', }) ;({ accentColor: '#fca5a5', }) ;({ accentColor: '#f87171', }) ;({ accentColor: '#ef4444', }) ;({ accentColor: '#dc2626', }) ;({ accentColor: '#b91c1c', }) ;({ accentColor: '#991b1b', }) ;({ accentColor: '#7f1d1d', }) ;({ accentColor: '#fff7ed', }) ;({ accentColor: '#ffedd5', }) ;({ accentColor: '#fed7aa', }) ;({ accentColor: '#fdba74', }) ;({ accentColor: '#fb923c', }) ;({ accentColor: '#f97316', }) ;({ accentColor: '#ea580c', }) ;({ accentColor: '#c2410c', }) ;({ accentColor: '#9a3412', }) ;({ accentColor: '#7c2d12', }) ;({ accentColor: '#fffbeb', }) ;({ accentColor: '#fef3c7', }) ;({ accentColor: '#fde68a', }) ;({ accentColor: '#fcd34d', }) ;({ accentColor: '#fbbf24', }) ;({ accentColor: '#f59e0b', }) ;({ accentColor: '#d97706', }) ;({ accentColor: '#b45309', }) ;({ accentColor: '#92400e', }) ;({ accentColor: '#78350f', }) ;({ accentColor: '#fefce8', }) ;({ accentColor: '#fef9c3', }) ;({ accentColor: '#fef08a', }) ;({ accentColor: '#fde047', }) ;({ accentColor: '#facc15', }) ;({ accentColor: '#eab308', }) ;({ accentColor: '#ca8a04', }) ;({ accentColor: '#a16207', }) ;({ accentColor: '#854d0e', }) ;({ accentColor: '#713f12', }) ;({ accentColor: '#f7fee7', }) ;({ accentColor: '#ecfccb', }) ;({ accentColor: '#d9f99d', }) ;({ accentColor: '#bef264', }) ;({ accentColor: '#a3e635', }) ;({ accentColor: '#84cc16', }) ;({ accentColor: '#65a30d', }) ;({ accentColor: '#4d7c0f', }) ;({ accentColor: '#3f6212', }) ;({ accentColor: '#365314', }) ;({ accentColor: '#f0fdf4', }) ;({ accentColor: '#dcfce7', }) ;({ accentColor: '#bbf7d0', }) ;({ accentColor: '#86efac', }) ;({ accentColor: '#4ade80', }) ;({ accentColor: '#22c55e', }) ;({ accentColor: '#16a34a', }) ;({ accentColor: '#15803d', }) ;({ accentColor: '#166534', }) ;({ accentColor: '#14532d', }) ;({ accentColor: '#ecfdf5', }) ;({ accentColor: '#d1fae5', }) ;({ accentColor: '#a7f3d0', }) ;({ accentColor: '#6ee7b7', }) ;({ accentColor: '#34d399', }) ;({ accentColor: '#10b981', }) ;({ accentColor: '#059669', }) ;({ accentColor: '#047857', }) ;({ accentColor: '#065f46', }) ;({ accentColor: '#064e3b', }) ;({ accentColor: '#f0fdfa', }) ;({ accentColor: '#ccfbf1', }) ;({ accentColor: '#99f6e4', }) ;({ accentColor: '#5eead4', }) ;({ accentColor: '#2dd4bf', }) ;({ accentColor: '#14b8a6', }) ;({ accentColor: '#0d9488', }) ;({ accentColor: '#0f766e', }) ;({ accentColor: '#115e59', }) ;({ accentColor: '#134e4a', }) ;({ accentColor: '#ecfeff', }) ;({ accentColor: '#cffafe', }) ;({ accentColor: '#a5f3fc', }) ;({ accentColor: '#67e8f9', }) ;({ accentColor: '#22d3ee', }) ;({ accentColor: '#06b6d4', }) ;({ accentColor: '#0891b2', }) ;({ accentColor: '#0e7490', }) ;({ accentColor: '#155e75', }) ;({ accentColor: '#164e63', }) ;({ accentColor: '#f0f9ff', }) ;({ accentColor: '#e0f2fe', }) ;({ accentColor: '#bae6fd', }) ;({ accentColor: '#7dd3fc', }) ;({ accentColor: '#38bdf8', }) ;({ accentColor: '#0ea5e9', }) ;({ accentColor: '#0284c7', }) ;({ accentColor: '#0369a1', }) ;({ accentColor: '#075985', }) ;({ accentColor: '#0c4a6e', }) ;({ accentColor: '#eff6ff', }) ;({ accentColor: '#dbeafe', }) ;({ accentColor: '#bfdbfe', }) ;({ accentColor: '#93c5fd', }) ;({ accentColor: '#60a5fa', }) ;({ accentColor: '#3b82f6', }) ;({ accentColor: '#2563eb', }) ;({ accentColor: '#1d4ed8', }) ;({ accentColor: '#1e40af', }) ;({ accentColor: '#1e3a8a', }) ;({ accentColor: '#eef2ff', }) ;({ accentColor: '#e0e7ff', }) ;({ accentColor: '#c7d2fe', }) ;({ accentColor: '#a5b4fc', }) ;({ accentColor: '#818cf8', }) ;({ accentColor: '#6366f1', }) ;({ accentColor: '#4f46e5', }) ;({ accentColor: '#4338ca', }) ;({ accentColor: '#3730a3', }) ;({ accentColor: '#312e81', }) ;({ accentColor: '#f5f3ff', }) ;({ accentColor: '#ede9fe', }) ;({ accentColor: '#ddd6fe', }) ;({ accentColor: '#c4b5fd', }) ;({ accentColor: '#a78bfa', }) ;({ accentColor: '#8b5cf6', }) ;({ accentColor: '#7c3aed', }) ;({ accentColor: '#6d28d9', }) ;({ accentColor: '#5b21b6', }) ;({ accentColor: '#4c1d95', }) ;({ accentColor: '#faf5ff', }) ;({ accentColor: '#f3e8ff', }) ;({ accentColor: '#e9d5ff', }) ;({ accentColor: '#d8b4fe', }) ;({ accentColor: '#c084fc', }) ;({ accentColor: '#a855f7', }) ;({ accentColor: '#9333ea', }) ;({ accentColor: '#7e22ce', }) ;({ accentColor: '#6b21a8', }) ;({ accentColor: '#581c87', }) ;({ accentColor: '#fdf4ff', }) ;({ accentColor: '#fae8ff', }) ;({ accentColor: '#f5d0fe', }) ;({ accentColor: '#f0abfc', }) ;({ accentColor: '#e879f9', }) ;({ accentColor: '#d946ef', }) ;({ accentColor: '#c026d3', }) ;({ accentColor: '#a21caf', }) ;({ accentColor: '#86198f', }) ;({ accentColor: '#701a75', }) ;({ accentColor: '#fdf2f8', }) ;({ accentColor: '#fce7f3', }) ;({ accentColor: '#fbcfe8', }) ;({ accentColor: '#f9a8d4', }) ;({ accentColor: '#f472b6', }) ;({ accentColor: '#ec4899', }) ;({ accentColor: '#db2777', }) ;({ accentColor: '#be185d', }) ;({ accentColor: '#9d174d', }) ;({ accentColor: '#831843', }) ;({ accentColor: '#fff1f2', }) ;({ accentColor: '#ffe4e6', }) ;({ accentColor: '#fecdd3', }) ;({ accentColor: '#fda4af', }) ;({ accentColor: '#fb7185', }) ;({ accentColor: '#f43f5e', }) ;({ accentColor: '#e11d48', }) ;({ accentColor: '#be123c', }) ;({ accentColor: '#9f1239', }) ;({ accentColor: '#881337', }) ;({ accentColor: 'auto', }) ;({ accentColor: '#50d71e', }) ;({ accentColor: '#ef4444', }) ;({ accentColor: 'rgb(239 68 68 / 0.2)', }) ;({ accentColor: 'red', }) ;({ accentColor: 'red', }) `; exports[`twin.macro addBase.tsx: addBase.tsx 1`] = ` // @ts-nocheck import tw, { GlobalStyles, globalStyles } from '../macro' tw\`base-selector\` ; globalStyles ↓ ↓ ↓ ↓ ↓ ↓ import { css as _css } from '@emotion/react' import { Global as _globalImport } from '@emotion/react' const _GlobalStyles = () => ( <_globalImport styles={_css\`*, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: #e5e7eb; --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: var(--tw-empty,/*!*/ /*!*/); --tw-pan-y: var(--tw-empty,/*!*/ /*!*/); --tw-pinch-zoom: var(--tw-empty,/*!*/ /*!*/); --tw-scroll-snap-strictness: proximity; --tw-ordinal: var(--tw-empty,/*!*/ /*!*/); --tw-slashed-zero: var(--tw-empty,/*!*/ /*!*/); --tw-numeric-figure: var(--tw-empty,/*!*/ /*!*/); --tw-numeric-spacing: var(--tw-empty,/*!*/ /*!*/); --tw-numeric-fraction: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-blur: var(--tw-empty,/*!*/ /*!*/); --tw-brightness: var(--tw-empty,/*!*/ /*!*/); --tw-contrast: var(--tw-empty,/*!*/ /*!*/); --tw-grayscale: var(--tw-empty,/*!*/ /*!*/); --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/); --tw-invert: var(--tw-empty,/*!*/ /*!*/); --tw-saturate: var(--tw-empty,/*!*/ /*!*/); --tw-sepia: var(--tw-empty,/*!*/ /*!*/); --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/); } ::before, ::after { --tw-content: ''; } html { line-height: 1.5; -webkit-text-size-adjust: 100%; -moz-tab-size: 4; tab-size: 4; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-feature-settings: normal; font-variation-settings: normal; } body { margin: 0; line-height: inherit; margin-top: 20rem; background-color: black; } hr { height: 0; color: inherit; border-top-width: 1px; } abbr:where([title]) { text-decoration: underline dotted; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } table { text-indent: 0; border-color: inherit; border-collapse: collapse; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; } button, select { text-transform: none; } button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; background-color: transparent; background-image: none; } :-moz-focusring { outline: auto; } :-moz-ui-invalid { box-shadow: none; } progress { vertical-align: baseline; } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } [type='search'] { -webkit-appearance: textfield; outline-offset: -2px; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } summary { display: list-item; } blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; } fieldset { margin: 0; padding: 0; } legend { padding: 0; } ol, ul, menu { list-style: none; margin: 0; padding: 0; } textarea { resize: vertical; } input::placeholder, textarea::placeholder { opacity: 1; color: #9ca3af; } button, [role="button"] { cursor: pointer; } :disabled { cursor: default; } img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; } img, video { max-width: 100%; height: auto; } [hidden] { display: none; } ::backdrop { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: var(--tw-empty,/*!*/ /*!*/); --tw-pan-y: var(--tw-empty,/*!*/ /*!*/); --tw-pinch-zoom: var(--tw-empty,/*!*/ /*!*/); --tw-scroll-snap-strictness: proximity; --tw-ordinal: var(--tw-empty,/*!*/ /*!*/); --tw-slashed-zero: var(--tw-empty,/*!*/ /*!*/); --tw-numeric-figure: var(--tw-empty,/*!*/ /*!*/); --tw-numeric-spacing: var(--tw-empty,/*!*/ /*!*/); --tw-numeric-fraction: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-blur: var(--tw-empty,/*!*/ /*!*/); --tw-brightness: var(--tw-empty,/*!*/ /*!*/); --tw-contrast: var(--tw-empty,/*!*/ /*!*/); --tw-grayscale: var(--tw-empty,/*!*/ /*!*/); --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/); --tw-invert: var(--tw-empty,/*!*/ /*!*/); --tw-saturate: var(--tw-empty,/*!*/ /*!*/); --tw-sepia: var(--tw-empty,/*!*/ /*!*/); --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/); } :root { --color-pink-900: #831843; } @font-face { font-family: NotoSans; font-weight: 400; font-style: normal; src: url('./fonts/myfont.ttf'); }\`} /> ) ;({ display: 'block', 'section &': { display: 'block', }, '@media (min-width: 640px)': { 'section &:hover': { marginTop: '50px', }, '[type="button"] &:hover': { marginTop: '5rem', }, }, '[type="button"] &': { display: 'block', }, }) ;<_GlobalStyles /> ;({ '*, ::before, ::after': { boxSizing: 'border-box', borderWidth: '0', borderStyle: 'solid', borderColor: '#e5e7eb', '--tw-border-spacing-x': '0', '--tw-border-spacing-y': '0', '--tw-translate-x': '0', '--tw-translate-y': '0', '--tw-rotate': '0', '--tw-skew-x': '0', '--tw-skew-y': '0', '--tw-scale-x': '1', '--tw-scale-y': '1', '--tw-pan-x': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-pan-y': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-pinch-zoom': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-scroll-snap-strictness': 'proximity', '--tw-ordinal': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-slashed-zero': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-numeric-figure': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-numeric-spacing': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-numeric-fraction': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-ring-offset-shadow': '0 0 #0000', '--tw-ring-shadow': '0 0 #0000', '--tw-shadow': '0 0 #0000', '--tw-shadow-colored': '0 0 #0000', '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-ring-offset-width': '0px', '--tw-ring-offset-color': '#fff', '--tw-ring-color': 'rgb(59 130 246 / 0.5)', '--tw-blur': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-brightness': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-contrast': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-grayscale': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-invert': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-saturate': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-sepia': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-drop-shadow': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-blur': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-brightness': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-contrast': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-grayscale': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-invert': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-opacity': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-saturate': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-sepia': 'var(--tw-empty,/*!*/ /*!*/)', }, '::before, ::after': { '--tw-content': "''", }, html: { lineHeight: '1.5', WebkitTextSizeAdjust: '100%', MozTabSize: '4', tabSize: '4', fontFamily: 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"', fontFeatureSettings: ' normal', fontVariationSettings: ' normal', }, body: { margin: '0', lineHeight: 'inherit', marginTop: '20rem', backgroundColor: 'black', }, hr: { height: '0', color: 'inherit', borderTopWidth: '1px', }, 'abbr:where([title])': { textDecoration: 'underline dotted', }, 'h1, h2, h3, h4, h5, h6': { fontSize: 'inherit', fontWeight: 'inherit', }, a: { color: 'inherit', textDecoration: 'inherit', }, 'b, strong': { fontWeight: 'bolder', }, 'code, kbd, samp, pre': { fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace', fontSize: '1em', }, small: { fontSize: '80%', }, 'sub, sup': { fontSize: '75%', lineHeight: '0', position: 'relative', verticalAlign: 'baseline', }, sub: { bottom: '-0.25em', }, sup: { top: '-0.5em', }, table: { textIndent: '0', borderColor: 'inherit', borderCollapse: 'collapse', }, 'button, input, optgroup, select, textarea': { fontFamily: 'inherit', fontSize: '100%', fontWeight: 'inherit', lineHeight: 'inherit', color: 'inherit', margin: '0', padding: '0', }, 'button, select': { textTransform: 'none', }, "button, [type='button'], [type='reset'], [type='submit']": { WebkitAppearance: 'button', backgroundColor: 'transparent', backgroundImage: 'none', }, ':-moz-focusring': { outline: 'auto', }, ':-moz-ui-invalid': { boxShadow: 'none', }, progress: { verticalAlign: 'baseline', }, '::-webkit-inner-spin-button, ::-webkit-outer-spin-button': { height: 'auto', }, "[type='search']": { WebkitAppearance: 'textfield', outlineOffset: '-2px', }, '::-webkit-search-decoration': { WebkitAppearance: 'none', }, '::-webkit-file-upload-button': { WebkitAppearance: 'button', font: 'inherit', }, summary: { display: 'list-item', }, 'blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre': { margin: '0', }, fieldset: { margin: '0', padding: '0', }, legend: { padding: '0', }, 'ol, ul, menu': { listStyle: 'none', margin: '0', padding: '0', }, textarea: { resize: 'vertical', }, 'input::placeholder, textarea::placeholder': { opacity: '1', color: '#9ca3af', }, 'button, [role="button"]': { cursor: 'pointer', }, ':disabled': { cursor: 'default', }, 'img, svg, video, canvas, audio, iframe, embed, object': { display: 'block', verticalAlign: 'middle', }, 'img, video': { maxWidth: '100%', height: 'auto', }, '[hidden]': { display: 'none', }, '::backdrop': { '--tw-border-spacing-x': '0', '--tw-border-spacing-y': '0', '--tw-translate-x': '0', '--tw-translate-y': '0', '--tw-rotate': '0', '--tw-skew-x': '0', '--tw-skew-y': '0', '--tw-scale-x': '1', '--tw-scale-y': '1', '--tw-pan-x': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-pan-y': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-pinch-zoom': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-scroll-snap-strictness': 'proximity', '--tw-ordinal': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-slashed-zero': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-numeric-figure': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-numeric-spacing': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-numeric-fraction': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-ring-offset-shadow': '0 0 #0000', '--tw-ring-shadow': '0 0 #0000', '--tw-shadow': '0 0 #0000', '--tw-shadow-colored': '0 0 #0000', '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-ring-offset-width': '0px', '--tw-ring-offset-color': '#fff', '--tw-ring-color': 'rgb(59 130 246 / 0.5)', '--tw-blur': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-brightness': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-contrast': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-grayscale': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-invert': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-saturate': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-sepia': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-drop-shadow': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-blur': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-brightness': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-contrast': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-grayscale': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-invert': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-opacity': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-saturate': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-sepia': 'var(--tw-empty,/*!*/ /*!*/)', }, ':root': { '--color-pink-900': '#831843', }, '@font-face': { fontFamily: 'NotoSans', fontWeight: '400', fontStyle: 'normal', src: "url('./fonts/myfont.ttf')", }, }) `; exports[`twin.macro alignContent.tsx: alignContent.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/align-content tw\`content-center\` tw\`content-start\` tw\`content-end\` tw\`content-between\` tw\`content-around\` tw\`content-evenly\` tw\`content-baseline\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/align-content ;({ alignContent: 'center', }) ;({ alignContent: 'flex-start', }) ;({ alignContent: 'flex-end', }) ;({ alignContent: 'space-between', }) ;({ alignContent: 'space-around', }) ;({ alignContent: 'space-evenly', }) ;({ alignContent: 'baseline', }) `; exports[`twin.macro alignItems.tsx: alignItems.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/align-items tw\`items-start\` tw\`items-end\` tw\`items-center\` tw\`items-baseline\` tw\`items-stretch\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/align-items ;({ alignItems: 'flex-start', }) ;({ alignItems: 'flex-end', }) ;({ alignItems: 'center', }) ;({ alignItems: 'baseline', }) ;({ alignItems: 'stretch', }) `; exports[`twin.macro alignSelf.tsx: alignSelf.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/align-self tw\`self-auto\` tw\`self-start\` tw\`self-end\` tw\`self-center\` tw\`self-stretch\` tw\`self-baseline\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/align-self ;({ alignSelf: 'auto', }) ;({ alignSelf: 'flex-start', }) ;({ alignSelf: 'flex-end', }) ;({ alignSelf: 'center', }) ;({ alignSelf: 'stretch', }) ;({ alignSelf: 'baseline', }) `; exports[`twin.macro animation.tsx: animation.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/animation theme\`animation\` tw\`animate-none\` tw\`animate-spin\` tw\`animate-ping\` tw\`animate-pulse\` tw\`animate-bounce\` tw\`animate-[wiggle 1s ease-in-out infinite]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/animation ;({ none: 'none', spin: 'spin 1s linear infinite', ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite', pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', bounce: 'bounce 1s infinite', }) ;({ animation: 'none', }) ;({ '@keyframes spin': { to: { transform: 'rotate(360deg)', }, }, animation: 'spin 1s linear infinite', }) ;({ '@keyframes ping': { '75%, 100%': { transform: 'scale(2)', opacity: '0', }, }, animation: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite', }) ;({ '@keyframes pulse': { '50%': { opacity: '.5', }, }, animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', }) ;({ '@keyframes bounce': { '0%, 100%': { transform: 'translateY(-25%)', animationTimingFunction: 'cubic-bezier(0.8,0,1,1)', }, '50%': { transform: 'none', animationTimingFunction: 'cubic-bezier(0,0,0.2,1)', }, }, animation: 'bounce 1s infinite', }) ;({ animation: 'wiggle 1s ease-in-out infinite', }) `; exports[`twin.macro appearance.tsx: appearance.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/appearance tw\`appearance-none\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/appearance ;({ appearance: 'none', }) `; exports[`twin.macro arbitraryProperties.tsx: arbitraryProperties.tsx 1`] = ` // @ts-nocheck import tw from '../macro' tw\`[mask-image:linear-gradient(180deg,white, rgba(255,255,255,0))]\` tw\`[-webkit-property:bg-black]\` tw\`[--my-var:blue]\` tw\`[color:var(--my-var)]\` tw\`bg-black md:[color:var(--my-var)]\` tw\`[margin:2px_4px_5px_1px]\` tw\`[content:'—']\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck ;({ maskImage: 'linear-gradient(180deg,white, rgba(255,255,255,0))', }) ;({ WebkitProperty: 'bg-black', }) ;({ '--my-var': 'blue', }) ;({ color: 'var(--my-var)', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(0 0 0 / var(--tw-bg-opacity))', '@media (min-width: 768px)': { color: 'var(--my-var)', }, }) ;({ margin: '2px 4px 5px 1px', }) ;({ content: "'\\u2014'", }) `; exports[`twin.macro arbitraryVariants.tsx: arbitraryVariants.tsx 1`] = ` // @ts-nocheck import tw from '../macro' tw\`[section]:hover:block\` tw\`[section&]:hover:block\` tw\`[p]:hover:block\` tw\`hover:[p]:block\` tw\`[* + *]:block\` // Spaces tw\`[.class1 .class2]:block\` // Classes tw\`[.class1]:[.class2]:block\` // Multiple dynamic variants tw\`[.class1 .class2]:[.class3]:block\` // Multiple dynamic variants tw\`[p]:placeholder-red-500/[var(--myvar)]\` tw\`[p]:mt-[var(--myvar)]\` tw\`[p]:marginTop[var(--myvar)]\` tw\`[p]:[margin-top:var(--myvar)]\` tw\`[p]:(mt-4 mb-4)\` tw\`[@media (min-width: 800px)]:block\` tw\`[content\\!]:block\` // Combinations tw\`[&:nth-child(1)]:block\` tw\`[:nth-child(1)]:block\` tw\`[@media ...]:block\` tw\`[.selector]:block\` tw\`[section]:block\` tw\`[section &]:block\` tw\`md:[section]:block\` tw\`[section]:[bla]:block\` tw\`[section &]:[pre &]:block\` tw\`[section &]:[& pre]:block\` tw\`[section &]:first:[pre &]:block\` tw\`[section &]:first:[& pre]:block\` tw\`first:[section &]:[pre &]:block\` tw\`first:[section &]:[& pre]:block\` tw\`first:[section &]:[& pre]:mt-[2px]\` tw\`first:[section &]:[& pre]:[display:inline]\` tw\`[pre]:[display:inline]\` tw\`[& pre]:[display:inline]\` tw\`[:hover]:[display:inline]\` tw\`[.dropdown.dropdown-open &, .dropdown:focus &]:block\` tw\`[path]:first:[stroke: #000] md:[path]:[stroke: #000]\` tw\`first:block md:[path]:[stroke: #000]\` tw\`[.sec section a[target="_blank"]]:block\` // < issue with _blank present in tailwindcss tw\`[&.pre,& section,]:block\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck ;({ 'section:hover': { display: 'block', }, }) ;({ 'section:hover': { display: 'block', }, }) ;({ 'p:hover': { display: 'block', }, }) ;({ ':hover p': { display: 'block', }, }) ;({ '& * + *': { display: 'block', }, }) // Spaces ;({ '& .class1 .class2': { display: 'block', }, }) // Classes ;({ '& .class1 .class2': { display: 'block', }, }) // Multiple dynamic variants ;({ '& .class1 .class2 .class3': { display: 'block', }, }) // Multiple dynamic variants ;({ '& p::placeholder': { color: 'rgb(239 68 68 / var(--myvar))', }, }) ;({ '& p': { marginTop: 'var(--myvar)', }, }) ;({ '& p': { marginTop: 'var(--myvar)', }, }) ;({ '& p': { marginTop: 'var(--myvar)', }, }) ;({ '& p': { marginBottom: '1rem', marginTop: '1rem', }, }) ;({ '@media (min-width: 800px)': { display: 'block', }, }) ;({ '& content!': { display: 'block', }, }) // Combinations ;({ ':nth-child(1)': { display: 'block', }, }) ;({ ':nth-child(1)': { display: 'block', }, }) ;({ '@media ...': { display: 'block', }, }) ;({ '& .selector': { display: 'block', }, }) ;({ '& section': { display: 'block', }, }) ;({ 'section &': { display: 'block', }, }) ;({ '@media (min-width: 768px)': { '& section': { display: 'block', }, }, }) ;({ '& section bla': { display: 'block', }, }) ;({ '& pre section': { display: 'block', }, }) ;({ '& section pre': { display: 'block', }, }) ;({ 'pre section &:first-child': { display: 'block', }, }) ;({ 'section &:first-child pre': { display: 'block', }, }) ;({ ':first-child pre section': { display: 'block', }, }) ;({ ':first-child section pre': { display: 'block', }, }) ;({ ':first-child section pre': { marginTop: '2px', }, }) ;({ ':first-child section pre': { display: 'inline', }, }) ;({ '& pre': { display: 'inline', }, }) ;({ '& pre': { display: 'inline', }, }) ;({ ':hover': { display: 'inline', }, }) ;({ '.dropdown.dropdown-open &,.dropdown:focus &': { display: 'block', }, }) ;({ '@media (min-width: 768px)': { '& path': { stroke: '#000', }, }, 'path:first-child': { stroke: '#000', }, }) ;({ ':first-child': { display: 'block', }, '@media (min-width: 768px)': { '& path': { stroke: '#000', }, }, }) ;({ '& .sec section a[target=" blank"]': { display: 'block', }, }) // < issue with _blank present in tailwindcss ;({ '&.pre,& section': { display: 'block', }, }) `; exports[`twin.macro aspectRatio.tsx: aspectRatio.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/aspect-ratio theme\`aspectRatio\` tw\`aspect-auto\` tw\`aspect-square\` tw\`aspect-video\` tw\`aspect-[4/3]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/aspect-ratio ;({ auto: 'auto', square: '1 / 1', video: '16 / 9', }) ;({ aspectRatio: 'auto', }) ;({ aspectRatio: '1 / 1', }) ;({ aspectRatio: '16 / 9', }) ;({ aspectRatio: '4/3', }) `; exports[`twin.macro autoCssProp.tsx: autoCssProp.tsx 1`] = ` // @ts-nocheck import '../macro' // twinImport // Css prop isn't handled by twin ;
;
↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck ;
;
`; exports[`twin.macro autoCssProp.tsx: autoCssProp.tsx 2`] = ` // @ts-nocheck import '../macro' // twinImport ;
;
↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck ;
;
`; exports[`twin.macro autoCssProp.tsx: autoCssProp.tsx 3`] = ` // @ts-nocheck import '../macro' // twinImport ;
;
↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck ;
;
`; exports[`twin.macro autoCssPropWithStyled.tsx: autoCssPropWithStyled.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // twinImport // Css prop isn't handled by twin tw.div\`block\` ;
const Test = tw.div\`\` ; ↓ ↓ ↓ ↓ ↓ ↓ import _styled from '@emotion/styled' // twinImport // Css prop isn't handled by twin _styled.div({ display: 'block', }) ;
const Test = _styled.div({}) ; `; exports[`twin.macro autoCssPropWithStyled.tsx: autoCssPropWithStyled.tsx 2`] = ` // @ts-nocheck import tw from '../macro' // twinImport tw.div\`block\` ;
const Test = tw.div\`\` ; ↓ ↓ ↓ ↓ ↓ ↓ import _styled from 'styled-components' // twinImport _styled.div({ display: 'block', }) ;
const Test = _styled.div({}) ; `; exports[`twin.macro backdropBlur.tsx: backdropBlur.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/backdrop-blur theme\`backdropBlur.\` tw\`backdrop-blur-none\` tw\`backdrop-blur-sm\` tw\`backdrop-blur\` tw\`backdrop-blur-md\` tw\`backdrop-blur-lg\` tw\`backdrop-blur-xl\` tw\`backdrop-blur-2xl\` tw\`backdrop-blur-3xl\` tw\`backdrop-blur-[2px]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/backdrop-blur ;({ 0: '0', none: '0', sm: '4px', DEFAULT: '8px', md: '12px', lg: '16px', xl: '24px', '2xl': '40px', '3xl': '64px', }) ;({ '--tw-backdrop-blur': 'blur(0)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-blur': 'blur(4px)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-blur': 'blur(8px)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-blur': 'blur(12px)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-blur': 'blur(16px)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-blur': 'blur(24px)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-blur': 'blur(40px)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-blur': 'blur(64px)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-blur': 'blur(2px)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) `; exports[`twin.macro backdropBrightness.tsx: backdropBrightness.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/backdrop-brightness theme\`brightness\` tw\`brightness-0\` tw\`brightness-50\` tw\`brightness-75\` tw\`brightness-90\` tw\`brightness-95\` tw\`brightness-100\` tw\`brightness-105\` tw\`brightness-110\` tw\`brightness-125\` tw\`brightness-150\` tw\`brightness-200\` tw\`brightness-[1.75]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/backdrop-brightness ;({ 0: '0', 50: '.5', 75: '.75', 90: '.9', 95: '.95', 100: '1', 105: '1.05', 110: '1.1', 125: '1.25', 150: '1.5', 200: '2', }) ;({ '--tw-brightness': 'brightness(0)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-brightness': 'brightness(.5)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-brightness': 'brightness(.75)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-brightness': 'brightness(.9)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-brightness': 'brightness(.95)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-brightness': 'brightness(1)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-brightness': 'brightness(1.05)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-brightness': 'brightness(1.1)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-brightness': 'brightness(1.25)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-brightness': 'brightness(1.5)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-brightness': 'brightness(2)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-brightness': 'brightness(1.75)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) `; exports[`twin.macro backdropContrast.tsx: backdropContrast.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/backdrop-contrast theme\`backdropContrast\` tw\`backdrop-contrast-0\` tw\`backdrop-contrast-50\` tw\`backdrop-contrast-75\` tw\`backdrop-contrast-100\` tw\`backdrop-contrast-125\` tw\`backdrop-contrast-150\` tw\`backdrop-contrast-200\` tw\`backdrop-contrast-[.25]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/backdrop-contrast ;({ 0: '0', 50: '.5', 75: '.75', 100: '1', 125: '1.25', 150: '1.5', 200: '2', }) ;({ '--tw-backdrop-contrast': 'contrast(0)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-contrast': 'contrast(.5)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-contrast': 'contrast(.75)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-contrast': 'contrast(1)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-contrast': 'contrast(1.25)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-contrast': 'contrast(1.5)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-contrast': 'contrast(2)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-contrast': 'contrast(.25)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) `; exports[`twin.macro backdropGrayscale.tsx: backdropGrayscale.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/backdrop-grayscale theme\`backdropGrayscale.\` tw\`backdrop-grayscale-0\` tw\`backdrop-grayscale\` tw\`backdrop-grayscale-[.5]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/backdrop-grayscale ;({ 0: '0', DEFAULT: '100%', }) ;({ '--tw-backdrop-grayscale': 'grayscale(0)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-grayscale': 'grayscale(100%)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-grayscale': 'grayscale(.5)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) `; exports[`twin.macro backdropHueRotate.tsx: backdropHueRotate.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/backdrop-hue-rotate theme\`backdropHueRotate\` tw\`backdrop-hue-rotate-0\` tw\`backdrop-hue-rotate-15\` tw\`backdrop-hue-rotate-30\` tw\`backdrop-hue-rotate-60\` tw\`backdrop-hue-rotate-90\` tw\`backdrop-hue-rotate-180\` tw\`-backdrop-hue-rotate-0\` tw\`-backdrop-hue-rotate-15\` tw\`-backdrop-hue-rotate-30\` tw\`-backdrop-hue-rotate-60\` tw\`-backdrop-hue-rotate-90\` tw\`-backdrop-hue-rotate-180\` tw\`backdrop-hue-rotate-[270deg]\` tw\`-backdrop-hue-rotate-[270deg]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/backdrop-hue-rotate ;({ 0: '0deg', 15: '15deg', 30: '30deg', 60: '60deg', 90: '90deg', 180: '180deg', }) ;({ '--tw-backdrop-hue-rotate': 'hue-rotate(0deg)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-hue-rotate': 'hue-rotate(15deg)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-hue-rotate': 'hue-rotate(30deg)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-hue-rotate': 'hue-rotate(60deg)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-hue-rotate': 'hue-rotate(90deg)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-hue-rotate': 'hue-rotate(180deg)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-hue-rotate': 'hue-rotate(-0deg)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-hue-rotate': 'hue-rotate(-15deg)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-hue-rotate': 'hue-rotate(-30deg)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-hue-rotate': 'hue-rotate(-60deg)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-hue-rotate': 'hue-rotate(-90deg)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-hue-rotate': 'hue-rotate(-180deg)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-hue-rotate': 'hue-rotate(270deg)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-hue-rotate': 'hue-rotate(-270deg)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) `; exports[`twin.macro backdropInvert.tsx: backdropInvert.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/backdrop-invert theme\`backdropInvert.\` tw\`backdrop-invert-0\` tw\`backdrop-invert\` tw\`backdrop-invert-[.25]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/backdrop-invert ;({ 0: '0', DEFAULT: '100%', }) ;({ '--tw-backdrop-invert': 'invert(0)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-invert': 'invert(100%)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-invert': 'invert(.25)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) `; exports[`twin.macro backdropOpacity.tsx: backdropOpacity.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/backdrop-opacity theme\`backdropOpacity\` tw\`backdrop-opacity-0\` tw\`backdrop-opacity-5\` tw\`backdrop-opacity-10\` tw\`backdrop-opacity-20\` tw\`backdrop-opacity-25\` tw\`backdrop-opacity-30\` tw\`backdrop-opacity-40\` tw\`backdrop-opacity-50\` tw\`backdrop-opacity-60\` tw\`backdrop-opacity-70\` tw\`backdrop-opacity-75\` tw\`backdrop-opacity-80\` tw\`backdrop-opacity-90\` tw\`backdrop-opacity-95\` tw\`backdrop-opacity-100\` tw\`backdrop-opacity-[.15]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/backdrop-opacity ;({ 0: '0', 5: '0.05', 10: '0.1', 20: '0.2', 25: '0.25', 30: '0.3', 40: '0.4', 50: '0.5', 60: '0.6', 70: '0.7', 75: '0.75', 80: '0.8', 90: '0.9', 95: '0.95', 100: '1', }) ;({ '--tw-backdrop-opacity': 'opacity(0)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-opacity': 'opacity(0.05)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-opacity': 'opacity(0.1)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-opacity': 'opacity(0.2)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-opacity': 'opacity(0.25)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-opacity': 'opacity(0.3)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-opacity': 'opacity(0.4)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-opacity': 'opacity(0.5)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-opacity': 'opacity(0.6)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-opacity': 'opacity(0.7)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-opacity': 'opacity(0.75)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-opacity': 'opacity(0.8)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-opacity': 'opacity(0.9)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-opacity': 'opacity(0.95)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-opacity': 'opacity(1)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-opacity': 'opacity(.15)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) `; exports[`twin.macro backdropSaturate.tsx: backdropSaturate.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/backdrop-saturate theme\`backdropSaturate\` tw\`backdrop-saturate-0\` tw\`backdrop-saturate-50\` tw\`backdrop-saturate-100\` tw\`backdrop-saturate-150\` tw\`backdrop-saturate-200\` tw\`backdrop-saturate-[.25]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/backdrop-saturate ;({ 0: '0', 50: '.5', 100: '1', 150: '1.5', 200: '2', }) ;({ '--tw-backdrop-saturate': 'saturate(0)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-saturate': 'saturate(.5)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-saturate': 'saturate(1)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-saturate': 'saturate(1.5)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-saturate': 'saturate(2)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-saturate': 'saturate(.25)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) `; exports[`twin.macro backdropSepia.tsx: backdropSepia.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/backdrop-sepia theme\`backdropSepia.\` tw\`backdrop-sepia-0\` tw\`backdrop-sepia\` tw\`backdrop-sepia-[.25]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/backdrop-sepia ;({ 0: '0', DEFAULT: '100%', }) ;({ '--tw-backdrop-sepia': 'sepia(0)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-sepia': 'sepia(100%)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) ;({ '--tw-backdrop-sepia': 'sepia(.25)', backdropFilter: 'var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)', }) `; exports[`twin.macro backgroundAttachment.tsx: backgroundAttachment.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/background-attachment tw\`bg-fixed\` tw\`bg-local\` tw\`bg-scroll\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/background-attachment ;({ backgroundAttachment: 'fixed', }) ;({ backgroundAttachment: 'local', }) ;({ backgroundAttachment: 'scroll', }) `; exports[`twin.macro backgroundBlendMode.tsx: backgroundBlendMode.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/background-blend-mode tw\`bg-blend-normal\` tw\`bg-blend-multiply\` tw\`bg-blend-screen\` tw\`bg-blend-overlay\` tw\`bg-blend-darken\` tw\`bg-blend-lighten\` tw\`bg-blend-color-dodge\` tw\`bg-blend-color-burn\` tw\`bg-blend-hard-light\` tw\`bg-blend-soft-light\` tw\`bg-blend-difference\` tw\`bg-blend-exclusion\` tw\`bg-blend-hue\` tw\`bg-blend-saturation\` tw\`bg-blend-color\` tw\`bg-blend-luminosity\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/background-blend-mode ;({ backgroundBlendMode: 'normal', }) ;({ backgroundBlendMode: 'multiply', }) ;({ backgroundBlendMode: 'screen', }) ;({ backgroundBlendMode: 'overlay', }) ;({ backgroundBlendMode: 'darken', }) ;({ backgroundBlendMode: 'lighten', }) ;({ backgroundBlendMode: 'color-dodge', }) ;({ backgroundBlendMode: 'color-burn', }) ;({ backgroundBlendMode: 'hard-light', }) ;({ backgroundBlendMode: 'soft-light', }) ;({ backgroundBlendMode: 'difference', }) ;({ backgroundBlendMode: 'exclusion', }) ;({ backgroundBlendMode: 'hue', }) ;({ backgroundBlendMode: 'saturation', }) ;({ backgroundBlendMode: 'color', }) ;({ backgroundBlendMode: 'luminosity', }) `; exports[`twin.macro backgroundClip.tsx: backgroundClip.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/background-clip tw\`bg-clip-border\` tw\`bg-clip-padding\` tw\`bg-clip-content\` tw\`bg-clip-text\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/background-clip ;({ backgroundClip: 'border-box', }) ;({ backgroundClip: 'padding-box', }) ;({ backgroundClip: 'content-box', }) ;({ WebkitBackgroundClip: 'text', backgroundClip: 'text', }) `; exports[`twin.macro backgroundColor.tsx: backgroundColor.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/background-color theme\`backgroundColor\` tw\`bg-inherit\` tw\`bg-current\` tw\`bg-transparent\` tw\`bg-black\` tw\`bg-white\` tw\`bg-slate-50\` tw\`bg-slate-100\` tw\`bg-slate-200\` tw\`bg-slate-300\` tw\`bg-slate-400\` tw\`bg-slate-500\` tw\`bg-slate-600\` tw\`bg-slate-700\` tw\`bg-slate-800\` tw\`bg-slate-900\` tw\`bg-gray-50\` tw\`bg-gray-100\` tw\`bg-gray-200\` tw\`bg-gray-300\` tw\`bg-gray-400\` tw\`bg-gray-500\` tw\`bg-gray-600\` tw\`bg-gray-700\` tw\`bg-gray-800\` tw\`bg-gray-900\` tw\`bg-zinc-50\` tw\`bg-zinc-100\` tw\`bg-zinc-200\` tw\`bg-zinc-300\` tw\`bg-zinc-400\` tw\`bg-zinc-500\` tw\`bg-zinc-600\` tw\`bg-zinc-700\` tw\`bg-zinc-800\` tw\`bg-zinc-900\` tw\`bg-neutral-50\` tw\`bg-neutral-100\` tw\`bg-neutral-200\` tw\`bg-neutral-300\` tw\`bg-neutral-400\` tw\`bg-neutral-500\` tw\`bg-neutral-600\` tw\`bg-neutral-700\` tw\`bg-neutral-800\` tw\`bg-neutral-900\` tw\`bg-stone-50\` tw\`bg-stone-100\` tw\`bg-stone-200\` tw\`bg-stone-300\` tw\`bg-stone-400\` tw\`bg-stone-500\` tw\`bg-stone-600\` tw\`bg-stone-700\` tw\`bg-stone-800\` tw\`bg-stone-900\` tw\`bg-red-50\` tw\`bg-red-100\` tw\`bg-red-200\` tw\`bg-red-300\` tw\`bg-red-400\` tw\`bg-red-500\` tw\`bg-red-600\` tw\`bg-red-700\` tw\`bg-red-800\` tw\`bg-red-900\` tw\`bg-orange-50\` tw\`bg-orange-100\` tw\`bg-orange-200\` tw\`bg-orange-300\` tw\`bg-orange-400\` tw\`bg-orange-500\` tw\`bg-orange-600\` tw\`bg-orange-700\` tw\`bg-orange-800\` tw\`bg-orange-900\` tw\`bg-amber-50\` tw\`bg-amber-100\` tw\`bg-amber-200\` tw\`bg-amber-300\` tw\`bg-amber-400\` tw\`bg-amber-500\` tw\`bg-amber-600\` tw\`bg-amber-700\` tw\`bg-amber-800\` tw\`bg-amber-900\` tw\`bg-yellow-50\` tw\`bg-yellow-100\` tw\`bg-yellow-200\` tw\`bg-yellow-300\` tw\`bg-yellow-400\` tw\`bg-yellow-500\` tw\`bg-yellow-600\` tw\`bg-yellow-700\` tw\`bg-yellow-800\` tw\`bg-yellow-900\` tw\`bg-lime-50\` tw\`bg-lime-100\` tw\`bg-lime-200\` tw\`bg-lime-300\` tw\`bg-lime-400\` tw\`bg-lime-500\` tw\`bg-lime-600\` tw\`bg-lime-700\` tw\`bg-lime-800\` tw\`bg-lime-900\` tw\`bg-green-50\` tw\`bg-green-100\` tw\`bg-green-200\` tw\`bg-green-300\` tw\`bg-green-400\` tw\`bg-green-500\` tw\`bg-green-600\` tw\`bg-green-700\` tw\`bg-green-800\` tw\`bg-green-900\` tw\`bg-emerald-50\` tw\`bg-emerald-100\` tw\`bg-emerald-200\` tw\`bg-emerald-300\` tw\`bg-emerald-400\` tw\`bg-emerald-500\` tw\`bg-emerald-600\` tw\`bg-emerald-700\` tw\`bg-emerald-800\` tw\`bg-emerald-900\` tw\`bg-teal-50\` tw\`bg-teal-100\` tw\`bg-teal-200\` tw\`bg-teal-300\` tw\`bg-teal-400\` tw\`bg-teal-500\` tw\`bg-teal-600\` tw\`bg-teal-700\` tw\`bg-teal-800\` tw\`bg-teal-900\` tw\`bg-cyan-50\` tw\`bg-cyan-100\` tw\`bg-cyan-200\` tw\`bg-cyan-300\` tw\`bg-cyan-400\` tw\`bg-cyan-500\` tw\`bg-cyan-600\` tw\`bg-cyan-700\` tw\`bg-cyan-800\` tw\`bg-cyan-900\` tw\`bg-sky-50\` tw\`bg-sky-100\` tw\`bg-sky-200\` tw\`bg-sky-300\` tw\`bg-sky-400\` tw\`bg-sky-500\` tw\`bg-sky-600\` tw\`bg-sky-700\` tw\`bg-sky-800\` tw\`bg-sky-900\` tw\`bg-blue-50\` tw\`bg-blue-100\` tw\`bg-blue-200\` tw\`bg-blue-300\` tw\`bg-blue-400\` tw\`bg-blue-500\` tw\`bg-blue-600\` tw\`bg-blue-700\` tw\`bg-blue-800\` tw\`bg-blue-900\` tw\`bg-indigo-50\` tw\`bg-indigo-100\` tw\`bg-indigo-200\` tw\`bg-indigo-300\` tw\`bg-indigo-400\` tw\`bg-indigo-500\` tw\`bg-indigo-600\` tw\`bg-indigo-700\` tw\`bg-indigo-800\` tw\`bg-indigo-900\` tw\`bg-violet-50\` tw\`bg-violet-100\` tw\`bg-violet-200\` tw\`bg-violet-300\` tw\`bg-violet-400\` tw\`bg-violet-500\` tw\`bg-violet-600\` tw\`bg-violet-700\` tw\`bg-violet-800\` tw\`bg-violet-900\` tw\`bg-purple-50\` tw\`bg-purple-100\` tw\`bg-purple-200\` tw\`bg-purple-300\` tw\`bg-purple-400\` tw\`bg-purple-500\` tw\`bg-purple-600\` tw\`bg-purple-700\` tw\`bg-purple-800\` tw\`bg-purple-900\` tw\`bg-fuchsia-50\` tw\`bg-fuchsia-100\` tw\`bg-fuchsia-200\` tw\`bg-fuchsia-300\` tw\`bg-fuchsia-400\` tw\`bg-fuchsia-500\` tw\`bg-fuchsia-600\` tw\`bg-fuchsia-700\` tw\`bg-fuchsia-800\` tw\`bg-fuchsia-900\` tw\`bg-pink-50\` tw\`bg-pink-100\` tw\`bg-pink-200\` tw\`bg-pink-300\` tw\`bg-pink-400\` tw\`bg-pink-500\` tw\`bg-pink-600\` tw\`bg-pink-700\` tw\`bg-pink-800\` tw\`bg-pink-900\` tw\`bg-rose-50\` tw\`bg-rose-100\` tw\`bg-rose-200\` tw\`bg-rose-300\` tw\`bg-rose-400\` tw\`bg-rose-500\` tw\`bg-rose-600\` tw\`bg-rose-700\` tw\`bg-rose-800\` tw\`bg-rose-900\` tw\`bg-[#0f0] bg-[#ff0000] bg-[#0000ffcc]\` tw\`bg-[#0000ffcc]\` tw\`bg-[rgb(123,123,123)] bg-[rgba(123,123,123,0.5)]\` tw\`bg-[hsl(0,100%,50%)] bg-[hsla(0,100%,50%,0.3)]\` tw\`bg-[url('/img/hero-pattern.svg')]\` tw\`bg-red-500/25\` tw\`bg-red-500/fromConfig\` tw\`bg-red-500/fromConfig/25\` tw\`bg-red-500/fromConfig/[.555]\` tw\`bg-red-500/fromConfig/[var(--myvar)]\` tw\`bg-red-500/[.555]\` tw\`bg-red-500/[var(--myvar)]\` tw\`bg-[theme('colors.red.500')]\` tw\`bg-[theme('colors.red.500')]/20\` tw\`bg-electric\` tw\`bg-electric/25\` tw\`bg-electric/[.555]\` tw\`bg-electric/[var(--myvar)]\` tw\`bg-[theme('colors.electric')]\` tw\`bg-[theme('colors.electric')]/20\` tw\`bg-[color:custom]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/background-color ;({ inherit: 'inherit', current: 'currentColor', transparent: 'transparent', black: '#000', white: '#fff', slate: { 50: '#f8fafc', 100: '#f1f5f9', 200: '#e2e8f0', 300: '#cbd5e1', 400: '#94a3b8', 500: '#64748b', 600: '#475569', 700: '#334155', 800: '#1e293b', 900: '#0f172a', 950: '#020617', }, gray: { 50: '#f9fafb', 100: '#f3f4f6', 200: '#e5e7eb', 300: '#d1d5db', 400: '#9ca3af', 500: '#6b7280', 600: '#4b5563', 700: '#374151', 800: '#1f2937', 900: '#111827', 950: '#030712', }, zinc: { 50: '#fafafa', 100: '#f4f4f5', 200: '#e4e4e7', 300: '#d4d4d8', 400: '#a1a1aa', 500: '#71717a', 600: '#52525b', 700: '#3f3f46', 800: '#27272a', 900: '#18181b', 950: '#09090b', }, neutral: { 50: '#fafafa', 100: '#f5f5f5', 200: '#e5e5e5', 300: '#d4d4d4', 400: '#a3a3a3', 500: '#737373', 600: '#525252', 700: '#404040', 800: '#262626', 900: '#171717', 950: '#0a0a0a', }, stone: { 50: '#fafaf9', 100: '#f5f5f4', 200: '#e7e5e4', 300: '#d6d3d1', 400: '#a8a29e', 500: '#78716c', 600: '#57534e', 700: '#44403c', 800: '#292524', 900: '#1c1917', 950: '#0c0a09', }, red: { 50: '#fef2f2', 100: '#fee2e2', 200: '#fecaca', 300: '#fca5a5', 400: '#f87171', 500: '#ef4444', 600: '#dc2626', 700: '#b91c1c', 800: '#991b1b', 900: '#7f1d1d', 950: '#450a0a', }, orange: { 50: '#fff7ed', 100: '#ffedd5', 200: '#fed7aa', 300: '#fdba74', 400: '#fb923c', 500: '#f97316', 600: '#ea580c', 700: '#c2410c', 800: '#9a3412', 900: '#7c2d12', 950: '#431407', }, amber: { 50: '#fffbeb', 100: '#fef3c7', 200: '#fde68a', 300: '#fcd34d', 400: '#fbbf24', 500: '#f59e0b', 600: '#d97706', 700: '#b45309', 800: '#92400e', 900: '#78350f', 950: '#451a03', }, yellow: { 50: '#fefce8', 100: '#fef9c3', 200: '#fef08a', 300: '#fde047', 400: '#facc15', 500: '#eab308', 600: '#ca8a04', 700: '#a16207', 800: '#854d0e', 900: '#713f12', 950: '#422006', }, lime: { 50: '#f7fee7', 100: '#ecfccb', 200: '#d9f99d', 300: '#bef264', 400: '#a3e635', 500: '#84cc16', 600: '#65a30d', 700: '#4d7c0f', 800: '#3f6212', 900: '#365314', 950: '#1a2e05', }, green: { 50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 300: '#86efac', 400: '#4ade80', 500: '#22c55e', 600: '#16a34a', 700: '#15803d', 800: '#166534', 900: '#14532d', 950: '#052e16', }, emerald: { 50: '#ecfdf5', 100: '#d1fae5', 200: '#a7f3d0', 300: '#6ee7b7', 400: '#34d399', 500: '#10b981', 600: '#059669', 700: '#047857', 800: '#065f46', 900: '#064e3b', 950: '#022c22', }, teal: { 50: '#f0fdfa', 100: '#ccfbf1', 200: '#99f6e4', 300: '#5eead4', 400: '#2dd4bf', 500: '#14b8a6', 600: '#0d9488', 700: '#0f766e', 800: '#115e59', 900: '#134e4a', 950: '#042f2e', }, cyan: { 50: '#ecfeff', 100: '#cffafe', 200: '#a5f3fc', 300: '#67e8f9', 400: '#22d3ee', 500: '#06b6d4', 600: '#0891b2', 700: '#0e7490', 800: '#155e75', 900: '#164e63', 950: '#083344', }, sky: { 50: '#f0f9ff', 100: '#e0f2fe', 200: '#bae6fd', 300: '#7dd3fc', 400: '#38bdf8', 500: '#0ea5e9', 600: '#0284c7', 700: '#0369a1', 800: '#075985', 900: '#0c4a6e', 950: '#082f49', }, blue: { 50: '#eff6ff', 100: '#dbeafe', 200: '#bfdbfe', 300: '#93c5fd', 400: '#60a5fa', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8', 800: '#1e40af', 900: '#1e3a8a', 950: '#172554', }, indigo: { 50: '#eef2ff', 100: '#e0e7ff', 200: '#c7d2fe', 300: '#a5b4fc', 400: '#818cf8', 500: '#6366f1', 600: '#4f46e5', 700: '#4338ca', 800: '#3730a3', 900: '#312e81', 950: '#1e1b4b', }, violet: { 50: '#f5f3ff', 100: '#ede9fe', 200: '#ddd6fe', 300: '#c4b5fd', 400: '#a78bfa', 500: '#8b5cf6', 600: '#7c3aed', 700: '#6d28d9', 800: '#5b21b6', 900: '#4c1d95', 950: '#2e1065', }, purple: { 50: '#faf5ff', 100: '#f3e8ff', 200: '#e9d5ff', 300: '#d8b4fe', 400: '#c084fc', 500: '#a855f7', 600: '#9333ea', 700: '#7e22ce', 800: '#6b21a8', 900: '#581c87', 950: '#3b0764', }, fuchsia: { 50: '#fdf4ff', 100: '#fae8ff', 200: '#f5d0fe', 300: '#f0abfc', 400: '#e879f9', 500: '#d946ef', 600: '#c026d3', 700: '#a21caf', 800: '#86198f', 900: '#701a75', 950: '#4a044e', }, pink: { 50: '#fdf2f8', 100: '#fce7f3', 200: '#fbcfe8', 300: '#f9a8d4', 400: '#f472b6', 500: '#ec4899', 600: '#db2777', 700: '#be185d', 800: '#9d174d', 900: '#831843', 950: '#500724', }, rose: { 50: '#fff1f2', 100: '#ffe4e6', 200: '#fecdd3', 300: '#fda4af', 400: '#fb7185', 500: '#f43f5e', 600: '#e11d48', 700: '#be123c', 800: '#9f1239', 900: '#881337', 950: '#4c0519', }, 'red-500/fromConfig': '#000', electric: void 0, }) ;({ backgroundColor: 'inherit', }) ;({ backgroundColor: 'currentColor', }) ;({ backgroundColor: 'transparent', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(0 0 0 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(255 255 255 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(248 250 252 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(241 245 249 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(226 232 240 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(203 213 225 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(148 163 184 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(100 116 139 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(71 85 105 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(51 65 85 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(30 41 59 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(15 23 42 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(249 250 251 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(243 244 246 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(229 231 235 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(209 213 219 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(156 163 175 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(107 114 128 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(75 85 99 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(55 65 81 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(31 41 55 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(17 24 39 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(250 250 250 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(244 244 245 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(228 228 231 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(212 212 216 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(161 161 170 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(113 113 122 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(82 82 91 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(63 63 70 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(39 39 42 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(24 24 27 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(250 250 250 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(245 245 245 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(229 229 229 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(212 212 212 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(163 163 163 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(115 115 115 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(82 82 82 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(64 64 64 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(38 38 38 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(23 23 23 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(250 250 249 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(245 245 244 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(231 229 228 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(214 211 209 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(168 162 158 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(120 113 108 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(87 83 78 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(68 64 60 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(41 37 36 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(28 25 23 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(254 242 242 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(254 226 226 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(254 202 202 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(252 165 165 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(248 113 113 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(239 68 68 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(220 38 38 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(185 28 28 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(153 27 27 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(127 29 29 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(255 247 237 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(255 237 213 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(254 215 170 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(253 186 116 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(251 146 60 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(249 115 22 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(234 88 12 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(194 65 12 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(154 52 18 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(124 45 18 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(255 251 235 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(254 243 199 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(253 230 138 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(252 211 77 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(251 191 36 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(245 158 11 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(217 119 6 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(180 83 9 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(146 64 14 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(120 53 15 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(254 252 232 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(254 249 195 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(254 240 138 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(253 224 71 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(250 204 21 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(234 179 8 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(202 138 4 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(161 98 7 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(133 77 14 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(113 63 18 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(247 254 231 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(236 252 203 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(217 249 157 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(190 242 100 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(163 230 53 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(132 204 22 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(101 163 13 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(77 124 15 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(63 98 18 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(54 83 20 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(240 253 244 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(220 252 231 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(187 247 208 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(134 239 172 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(74 222 128 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(34 197 94 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(22 163 74 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(21 128 61 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(22 101 52 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(20 83 45 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(236 253 245 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(209 250 229 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(167 243 208 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(110 231 183 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(52 211 153 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(16 185 129 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(5 150 105 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(4 120 87 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(6 95 70 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(6 78 59 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(240 253 250 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(204 251 241 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(153 246 228 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(94 234 212 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(45 212 191 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(20 184 166 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(13 148 136 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(15 118 110 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(17 94 89 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(19 78 74 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(236 254 255 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(207 250 254 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(165 243 252 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(103 232 249 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(34 211 238 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(6 182 212 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(8 145 178 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(14 116 144 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(21 94 117 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(22 78 99 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(240 249 255 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(224 242 254 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(186 230 253 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(125 211 252 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(56 189 248 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(14 165 233 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(2 132 199 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(3 105 161 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(7 89 133 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(12 74 110 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(239 246 255 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(219 234 254 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(191 219 254 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(147 197 253 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(96 165 250 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(59 130 246 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(37 99 235 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(29 78 216 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(30 64 175 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(30 58 138 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(238 242 255 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(224 231 255 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(199 210 254 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(165 180 252 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(129 140 248 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(99 102 241 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(79 70 229 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(67 56 202 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(55 48 163 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(49 46 129 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(245 243 255 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(237 233 254 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(221 214 254 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(196 181 253 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(167 139 250 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(139 92 246 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(124 58 237 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(109 40 217 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(91 33 182 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(76 29 149 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(250 245 255 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(243 232 255 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(233 213 255 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(216 180 254 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(192 132 252 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(168 85 247 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(147 51 234 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(126 34 206 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(107 33 168 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(88 28 135 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(253 244 255 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(250 232 255 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(245 208 254 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(240 171 252 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(232 121 249 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(217 70 239 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(192 38 211 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(162 28 175 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(134 25 143 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(112 26 117 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(253 242 248 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(252 231 243 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(251 207 232 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(249 168 212 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(244 114 182 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(236 72 153 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(219 39 119 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(190 24 93 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(157 23 77 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(131 24 67 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(255 241 242 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(255 228 230 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(254 205 211 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(253 164 175 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(251 113 133 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(244 63 94 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(225 29 72 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(190 18 60 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(159 18 57 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(136 19 55 / var(--tw-bg-opacity))', }) ;({ backgroundColor: 'rgb(255 0 0 / var(--tw-bg-opacity))', '--tw-bg-opacity': '1', }) ;({ backgroundColor: '#0000ffcc', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgba(123,123,123,0.5)', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'hsla(0,100%,50%,0.3)', }) ;({ backgroundImage: "url('/img/hero-pattern.svg')", }) ;({ backgroundColor: 'rgb(239 68 68 / 0.25)', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(0 0 0 / var(--tw-bg-opacity))', }) ;({ backgroundColor: 'rgb(0 0 0 / 0.25)', }) ;({ backgroundColor: 'rgb(0 0 0 / .555)', }) ;({ backgroundColor: 'rgb(0 0 0 / var(--myvar))', }) ;({ backgroundColor: 'rgb(239 68 68 / .555)', }) ;({ backgroundColor: 'rgb(239 68 68 / var(--myvar))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(239 68 68 / var(--tw-bg-opacity))', }) ;({ backgroundColor: 'rgb(239 68 68 / 0.2)', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgba(219, 0, 255, var(--tw-bg-opacity))', }) ;({ backgroundColor: 'rgba(219, 0, 255, 0.25)', }) ;({ backgroundColor: 'rgba(219, 0, 255, .555)', }) ;({ backgroundColor: 'rgba(219, 0, 255, var(--myvar))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(219 0 255 / var(--tw-bg-opacity))', }) ;({ backgroundColor: 'rgb(219 0 255 / 0.2)', }) ;({ backgroundColor: 'custom', }) `; exports[`twin.macro backgroundImage.tsx: backgroundImage.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/background-image theme\`backgroundImage\` tw\`bg-none\` tw\`bg-gradient-to-t\` tw\`bg-gradient-to-tr\` tw\`bg-gradient-to-r\` tw\`bg-gradient-to-br\` tw\`bg-gradient-to-b\` tw\`bg-gradient-to-bl\` tw\`bg-gradient-to-l\` tw\`bg-gradient-to-tl\` tw\`bg-[image:custom]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/background-image ;({ none: 'none', 'gradient-to-t': 'linear-gradient(to top, var(--tw-gradient-stops))', 'gradient-to-tr': 'linear-gradient(to top right, var(--tw-gradient-stops))', 'gradient-to-r': 'linear-gradient(to right, var(--tw-gradient-stops))', 'gradient-to-br': 'linear-gradient(to bottom right, var(--tw-gradient-stops))', 'gradient-to-b': 'linear-gradient(to bottom, var(--tw-gradient-stops))', 'gradient-to-bl': 'linear-gradient(to bottom left, var(--tw-gradient-stops))', 'gradient-to-l': 'linear-gradient(to left, var(--tw-gradient-stops))', 'gradient-to-tl': 'linear-gradient(to top left, var(--tw-gradient-stops))', }) ;({ backgroundImage: 'none', }) ;({ backgroundImage: 'linear-gradient(to top, var(--tw-gradient-stops))', }) ;({ backgroundImage: 'linear-gradient(to top right, var(--tw-gradient-stops))', }) ;({ backgroundImage: 'linear-gradient(to right, var(--tw-gradient-stops))', }) ;({ backgroundImage: 'linear-gradient(to bottom right, var(--tw-gradient-stops))', }) ;({ backgroundImage: 'linear-gradient(to bottom, var(--tw-gradient-stops))', }) ;({ backgroundImage: 'linear-gradient(to bottom left, var(--tw-gradient-stops))', }) ;({ backgroundImage: 'linear-gradient(to left, var(--tw-gradient-stops))', }) ;({ backgroundImage: 'linear-gradient(to top left, var(--tw-gradient-stops))', }) ;({ backgroundImage: 'custom', }) `; exports[`twin.macro backgroundOpacity.tsx: backgroundOpacity.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/background-opacity tw\`bg-sky-500/100\` tw\`bg-sky-500/75\` tw\`bg-sky-500/50\` tw\`bg-sky-500/[.06]\` tw\`bg-opacity-0\` tw\`bg-opacity-5\` tw\`bg-opacity-10\` tw\`bg-opacity-20\` tw\`bg-opacity-25\` tw\`bg-opacity-30\` tw\`bg-opacity-40\` tw\`bg-opacity-50\` tw\`bg-opacity-60\` tw\`bg-opacity-70\` tw\`bg-opacity-75\` tw\`bg-opacity-80\` tw\`bg-opacity-90\` tw\`bg-opacity-95\` tw\`bg-opacity-100\` tw\`bg-opacity-[0.11]\` tw\`bg-opacity-[var(--value)]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/background-opacity ;({ backgroundColor: 'rgb(14 165 233 / 1)', }) ;({ backgroundColor: 'rgb(14 165 233 / 0.75)', }) ;({ backgroundColor: 'rgb(14 165 233 / 0.5)', }) ;({ backgroundColor: 'rgb(14 165 233 / .06)', }) ;({ '--tw-bg-opacity': '0', }) ;({ '--tw-bg-opacity': '0.05', }) ;({ '--tw-bg-opacity': '0.1', }) ;({ '--tw-bg-opacity': '0.2', }) ;({ '--tw-bg-opacity': '0.25', }) ;({ '--tw-bg-opacity': '0.3', }) ;({ '--tw-bg-opacity': '0.4', }) ;({ '--tw-bg-opacity': '0.5', }) ;({ '--tw-bg-opacity': '0.6', }) ;({ '--tw-bg-opacity': '0.7', }) ;({ '--tw-bg-opacity': '0.75', }) ;({ '--tw-bg-opacity': '0.8', }) ;({ '--tw-bg-opacity': '0.9', }) ;({ '--tw-bg-opacity': '0.95', }) ;({ '--tw-bg-opacity': '1', }) ;({ '--tw-bg-opacity': '0.11', }) ;({ '--tw-bg-opacity': 'var(--value)', }) `; exports[`twin.macro backgroundOrigin.tsx: backgroundOrigin.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/background-origin tw\`bg-origin-border\` tw\`bg-origin-padding\` tw\`bg-origin-content\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/background-origin ;({ backgroundOrigin: 'border-box', }) ;({ backgroundOrigin: 'padding-box', }) ;({ backgroundOrigin: 'content-box', }) `; exports[`twin.macro backgroundPosition.tsx: backgroundPosition.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/background-position tw\`bg-bottom\` tw\`bg-center\` tw\`bg-left\` tw\`bg-left-bottom\` tw\`bg-left-top\` tw\`bg-right\` tw\`bg-right-bottom\` tw\`bg-right-top\` tw\`bg-top\` tw\`bg-[position:200px 100px]\` tw\`bg-[position:var(--value)]\` tw\`bg-[center top 1rem]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/background-position ;({ backgroundPosition: 'bottom', }) ;({ backgroundPosition: 'center', }) ;({ backgroundPosition: 'left', }) ;({ backgroundPosition: 'left bottom', }) ;({ backgroundPosition: 'left top', }) ;({ backgroundPosition: 'right', }) ;({ backgroundPosition: 'right bottom', }) ;({ backgroundPosition: 'right top', }) ;({ backgroundPosition: 'top', }) ;({ backgroundPosition: '200px 100px', }) ;({ backgroundPosition: 'var(--value)', }) ;({ backgroundPosition: 'center top 1rem', }) `; exports[`twin.macro backgroundRepeat.tsx: backgroundRepeat.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/background-repeat theme\`backgroundPosition\` tw\`bg-repeat\` tw\`bg-no-repeat\` tw\`bg-repeat-x\` tw\`bg-repeat-y\` tw\`bg-repeat-round\` tw\`bg-repeat-space\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/background-repeat ;({ bottom: 'bottom', center: 'center', left: 'left', 'left-bottom': 'left bottom', 'left-top': 'left top', right: 'right', 'right-bottom': 'right bottom', 'right-top': 'right top', top: 'top', }) ;({ backgroundRepeat: 'repeat', }) ;({ backgroundRepeat: 'no-repeat', }) ;({ backgroundRepeat: 'repeat-x', }) ;({ backgroundRepeat: 'repeat-y', }) ;({ backgroundRepeat: 'round', }) ;({ backgroundRepeat: 'space', }) `; exports[`twin.macro backgroundSize.tsx: backgroundSize.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/background-size theme\`backgroundSize\` tw\`bg-auto\` tw\`bg-cover\` tw\`bg-contain\` tw\`bg-[length:var(--value)]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/background-size ;({ auto: 'auto', cover: 'cover', contain: 'contain', }) ;({ backgroundSize: 'auto', }) ;({ backgroundSize: 'cover', }) ;({ backgroundSize: 'contain', }) ;({ backgroundSize: 'var(--value)', }) `; exports[`twin.macro blur.tsx: blur.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/blur theme\`blur.\` tw\`blur-none\` tw\`blur-sm\` tw\`blur\` tw\`blur-md\` tw\`blur-lg\` tw\`blur-xl\` tw\`blur-2xl\` tw\`blur-3xl\` tw\`blur-[2px]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/blur ;({ 0: '0', none: '0', sm: '4px', DEFAULT: '8px', md: '12px', lg: '16px', xl: '24px', '2xl': '40px', '3xl': '64px', }) ;({ '--tw-blur': 'blur(0)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-blur': 'blur(4px)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-blur': 'blur(8px)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-blur': 'blur(12px)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-blur': 'blur(16px)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-blur': 'blur(24px)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-blur': 'blur(40px)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-blur': 'blur(64px)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-blur': 'blur(2px)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) `; exports[`twin.macro borderCollapse.tsx: borderCollapse.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/border-collapse tw\`border-collapse\` tw\`border-separate\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/border-collapse ;({ borderCollapse: 'collapse', }) ;({ borderCollapse: 'separate', }) `; exports[`twin.macro borderColor.tsx: borderColor.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/border-color theme\`borderColor.\` tw\`border-inherit\` tw\`border-current\` tw\`border-transparent\` tw\`border-black\` tw\`border-white\` tw\`border-slate-50\` tw\`border-slate-100\` tw\`border-slate-200\` tw\`border-slate-300\` tw\`border-slate-400\` tw\`border-slate-500\` tw\`border-slate-600\` tw\`border-slate-700\` tw\`border-slate-800\` tw\`border-slate-900\` tw\`border-gray-50\` tw\`border-gray-100\` tw\`border-gray-200\` tw\`border-gray-300\` tw\`border-gray-400\` tw\`border-gray-500\` tw\`border-gray-600\` tw\`border-gray-700\` tw\`border-gray-800\` tw\`border-gray-900\` tw\`border-zinc-50\` tw\`border-zinc-100\` tw\`border-zinc-200\` tw\`border-zinc-300\` tw\`border-zinc-400\` tw\`border-zinc-500\` tw\`border-zinc-600\` tw\`border-zinc-700\` tw\`border-zinc-800\` tw\`border-zinc-900\` tw\`border-neutral-50\` tw\`border-neutral-100\` tw\`border-neutral-200\` tw\`border-neutral-300\` tw\`border-neutral-400\` tw\`border-neutral-500\` tw\`border-neutral-600\` tw\`border-neutral-700\` tw\`border-neutral-800\` tw\`border-neutral-900\` tw\`border-stone-50\` tw\`border-stone-100\` tw\`border-stone-200\` tw\`border-stone-300\` tw\`border-stone-400\` tw\`border-stone-500\` tw\`border-stone-600\` tw\`border-stone-700\` tw\`border-stone-800\` tw\`border-stone-900\` tw\`border-red-50\` tw\`border-red-100\` tw\`border-red-200\` tw\`border-red-300\` tw\`border-red-400\` tw\`border-red-500\` tw\`border-red-600\` tw\`border-red-700\` tw\`border-red-800\` tw\`border-red-900\` tw\`border-orange-50\` tw\`border-orange-100\` tw\`border-orange-200\` tw\`border-orange-300\` tw\`border-orange-400\` tw\`border-orange-500\` tw\`border-orange-600\` tw\`border-orange-700\` tw\`border-orange-800\` tw\`border-orange-900\` tw\`border-amber-50\` tw\`border-amber-100\` tw\`border-amber-200\` tw\`border-amber-300\` tw\`border-amber-400\` tw\`border-amber-500\` tw\`border-amber-600\` tw\`border-amber-700\` tw\`border-amber-800\` tw\`border-amber-900\` tw\`border-yellow-50\` tw\`border-yellow-100\` tw\`border-yellow-200\` tw\`border-yellow-300\` tw\`border-yellow-400\` tw\`border-yellow-500\` tw\`border-yellow-600\` tw\`border-yellow-700\` tw\`border-yellow-800\` tw\`border-yellow-900\` tw\`border-lime-50\` tw\`border-lime-100\` tw\`border-lime-200\` tw\`border-lime-300\` tw\`border-lime-400\` tw\`border-lime-500\` tw\`border-lime-600\` tw\`border-lime-700\` tw\`border-lime-800\` tw\`border-lime-900\` tw\`border-green-50\` tw\`border-green-100\` tw\`border-green-200\` tw\`border-green-300\` tw\`border-green-400\` tw\`border-green-500\` tw\`border-green-600\` tw\`border-green-700\` tw\`border-green-800\` tw\`border-green-900\` tw\`border-emerald-50\` tw\`border-emerald-100\` tw\`border-emerald-200\` tw\`border-emerald-300\` tw\`border-emerald-400\` tw\`border-emerald-500\` tw\`border-emerald-600\` tw\`border-emerald-700\` tw\`border-emerald-800\` tw\`border-emerald-900\` tw\`border-teal-50\` tw\`border-teal-100\` tw\`border-teal-200\` tw\`border-teal-300\` tw\`border-teal-400\` tw\`border-teal-500\` tw\`border-teal-600\` tw\`border-teal-700\` tw\`border-teal-800\` tw\`border-teal-900\` tw\`border-cyan-50\` tw\`border-cyan-100\` tw\`border-cyan-200\` tw\`border-cyan-300\` tw\`border-cyan-400\` tw\`border-cyan-500\` tw\`border-cyan-600\` tw\`border-cyan-700\` tw\`border-cyan-800\` tw\`border-cyan-900\` tw\`border-sky-50\` tw\`border-sky-100\` tw\`border-sky-200\` tw\`border-sky-300\` tw\`border-sky-400\` tw\`border-sky-500\` tw\`border-sky-600\` tw\`border-sky-700\` tw\`border-sky-800\` tw\`border-sky-900\` tw\`border-blue-50\` tw\`border-blue-100\` tw\`border-blue-200\` tw\`border-blue-300\` tw\`border-blue-400\` tw\`border-blue-500\` tw\`border-blue-600\` tw\`border-blue-700\` tw\`border-blue-800\` tw\`border-blue-900\` tw\`border-indigo-50\` tw\`border-indigo-100\` tw\`border-indigo-200\` tw\`border-indigo-300\` tw\`border-indigo-400\` tw\`border-indigo-500\` tw\`border-indigo-600\` tw\`border-indigo-700\` tw\`border-indigo-800\` tw\`border-indigo-900\` tw\`border-violet-50\` tw\`border-violet-100\` tw\`border-violet-200\` tw\`border-violet-300\` tw\`border-violet-400\` tw\`border-violet-500\` tw\`border-violet-600\` tw\`border-violet-700\` tw\`border-violet-800\` tw\`border-violet-900\` tw\`border-purple-50\` tw\`border-purple-100\` tw\`border-purple-200\` tw\`border-purple-300\` tw\`border-purple-400\` tw\`border-purple-500\` tw\`border-purple-600\` tw\`border-purple-700\` tw\`border-purple-800\` tw\`border-purple-900\` tw\`border-fuchsia-50\` tw\`border-fuchsia-100\` tw\`border-fuchsia-200\` tw\`border-fuchsia-300\` tw\`border-fuchsia-400\` tw\`border-fuchsia-500\` tw\`border-fuchsia-600\` tw\`border-fuchsia-700\` tw\`border-fuchsia-800\` tw\`border-fuchsia-900\` tw\`border-pink-50\` tw\`border-pink-100\` tw\`border-pink-200\` tw\`border-pink-300\` tw\`border-pink-400\` tw\`border-pink-500\` tw\`border-pink-600\` tw\`border-pink-700\` tw\`border-pink-800\` tw\`border-pink-900\` tw\`border-rose-50\` tw\`border-rose-100\` tw\`border-rose-200\` tw\`border-rose-300\` tw\`border-rose-400\` tw\`border-rose-500\` tw\`border-rose-600\` tw\`border-rose-700\` tw\`border-rose-800\` tw\`border-rose-900\` tw\`border-x-inherit\` tw\`border-x-current\` tw\`border-x-transparent\` tw\`border-x-black\` tw\`border-x-white\` tw\`border-x-slate-50\` tw\`border-x-slate-100\` tw\`border-x-slate-200\` tw\`border-x-slate-300\` tw\`border-x-slate-400\` tw\`border-x-slate-500\` tw\`border-x-slate-600\` tw\`border-x-slate-700\` tw\`border-x-slate-800\` tw\`border-x-slate-900\` tw\`border-x-gray-50\` tw\`border-x-gray-100\` tw\`border-x-gray-200\` tw\`border-x-gray-300\` tw\`border-x-gray-400\` tw\`border-x-gray-500\` tw\`border-x-gray-600\` tw\`border-x-gray-700\` tw\`border-x-gray-800\` tw\`border-x-gray-900\` tw\`border-x-zinc-50\` tw\`border-x-zinc-100\` tw\`border-x-zinc-200\` tw\`border-x-zinc-300\` tw\`border-x-zinc-400\` tw\`border-x-zinc-500\` tw\`border-x-zinc-600\` tw\`border-x-zinc-700\` tw\`border-x-zinc-800\` tw\`border-x-zinc-900\` tw\`border-x-neutral-50\` tw\`border-x-neutral-100\` tw\`border-x-neutral-200\` tw\`border-x-neutral-300\` tw\`border-x-neutral-400\` tw\`border-x-neutral-500\` tw\`border-x-neutral-600\` tw\`border-x-neutral-700\` tw\`border-x-neutral-800\` tw\`border-x-neutral-900\` tw\`border-x-stone-50\` tw\`border-x-stone-100\` tw\`border-x-stone-200\` tw\`border-x-stone-300\` tw\`border-x-stone-400\` tw\`border-x-stone-500\` tw\`border-x-stone-600\` tw\`border-x-stone-700\` tw\`border-x-stone-800\` tw\`border-x-stone-900\` tw\`border-x-red-50\` tw\`border-x-red-100\` tw\`border-x-red-200\` tw\`border-x-red-300\` tw\`border-x-red-400\` tw\`border-x-red-500\` tw\`border-x-red-600\` tw\`border-x-red-700\` tw\`border-x-red-800\` tw\`border-x-red-900\` tw\`border-x-orange-50\` tw\`border-x-orange-100\` tw\`border-x-orange-200\` tw\`border-x-orange-300\` tw\`border-x-orange-400\` tw\`border-x-orange-500\` tw\`border-x-orange-600\` tw\`border-x-orange-700\` tw\`border-x-orange-800\` tw\`border-x-orange-900\` tw\`border-x-amber-50\` tw\`border-x-amber-100\` tw\`border-x-amber-200\` tw\`border-x-amber-300\` tw\`border-x-amber-400\` tw\`border-x-amber-500\` tw\`border-x-amber-600\` tw\`border-x-amber-700\` tw\`border-x-amber-800\` tw\`border-x-amber-900\` tw\`border-x-yellow-50\` tw\`border-x-yellow-100\` tw\`border-x-yellow-200\` tw\`border-x-yellow-300\` tw\`border-x-yellow-400\` tw\`border-x-yellow-500\` tw\`border-x-yellow-600\` tw\`border-x-yellow-700\` tw\`border-x-yellow-800\` tw\`border-x-yellow-900\` tw\`border-x-lime-50\` tw\`border-x-lime-100\` tw\`border-x-lime-200\` tw\`border-x-lime-300\` tw\`border-x-lime-400\` tw\`border-x-lime-500\` tw\`border-x-lime-600\` tw\`border-x-lime-700\` tw\`border-x-lime-800\` tw\`border-x-lime-900\` tw\`border-x-green-50\` tw\`border-x-green-100\` tw\`border-x-green-200\` tw\`border-x-green-300\` tw\`border-x-green-400\` tw\`border-x-green-500\` tw\`border-x-green-600\` tw\`border-x-green-700\` tw\`border-x-green-800\` tw\`border-x-green-900\` tw\`border-x-emerald-50\` tw\`border-x-emerald-100\` tw\`border-x-emerald-200\` tw\`border-x-emerald-300\` tw\`border-x-emerald-400\` tw\`border-x-emerald-500\` tw\`border-x-emerald-600\` tw\`border-x-emerald-700\` tw\`border-x-emerald-800\` tw\`border-x-emerald-900\` tw\`border-x-teal-50\` tw\`border-x-teal-100\` tw\`border-x-teal-200\` tw\`border-x-teal-300\` tw\`border-x-teal-400\` tw\`border-x-teal-500\` tw\`border-x-teal-600\` tw\`border-x-teal-700\` tw\`border-x-teal-800\` tw\`border-x-teal-900\` tw\`border-x-cyan-50\` tw\`border-x-cyan-100\` tw\`border-x-cyan-200\` tw\`border-x-cyan-300\` tw\`border-x-cyan-400\` tw\`border-x-cyan-500\` tw\`border-x-cyan-600\` tw\`border-x-cyan-700\` tw\`border-x-cyan-800\` tw\`border-x-cyan-900\` tw\`border-x-sky-50\` tw\`border-x-sky-100\` tw\`border-x-sky-200\` tw\`border-x-sky-300\` tw\`border-x-sky-400\` tw\`border-x-sky-500\` tw\`border-x-sky-600\` tw\`border-x-sky-700\` tw\`border-x-sky-800\` tw\`border-x-sky-900\` tw\`border-x-blue-50\` tw\`border-x-blue-100\` tw\`border-x-blue-200\` tw\`border-x-blue-300\` tw\`border-x-blue-400\` tw\`border-x-blue-500\` tw\`border-x-blue-600\` tw\`border-x-blue-700\` tw\`border-x-blue-800\` tw\`border-x-blue-900\` tw\`border-x-indigo-50\` tw\`border-x-indigo-100\` tw\`border-x-indigo-200\` tw\`border-x-indigo-300\` tw\`border-x-indigo-400\` tw\`border-x-indigo-500\` tw\`border-x-indigo-600\` tw\`border-x-indigo-700\` tw\`border-x-indigo-800\` tw\`border-x-indigo-900\` tw\`border-x-violet-50\` tw\`border-x-violet-100\` tw\`border-x-violet-200\` tw\`border-x-violet-300\` tw\`border-x-violet-400\` tw\`border-x-violet-500\` tw\`border-x-violet-600\` tw\`border-x-violet-700\` tw\`border-x-violet-800\` tw\`border-x-violet-900\` tw\`border-x-purple-50\` tw\`border-x-purple-100\` tw\`border-x-purple-200\` tw\`border-x-purple-300\` tw\`border-x-purple-400\` tw\`border-x-purple-500\` tw\`border-x-purple-600\` tw\`border-x-purple-700\` tw\`border-x-purple-800\` tw\`border-x-purple-900\` tw\`border-x-fuchsia-50\` tw\`border-x-fuchsia-100\` tw\`border-x-fuchsia-200\` tw\`border-x-fuchsia-300\` tw\`border-x-fuchsia-400\` tw\`border-x-fuchsia-500\` tw\`border-x-fuchsia-600\` tw\`border-x-fuchsia-700\` tw\`border-x-fuchsia-800\` tw\`border-x-fuchsia-900\` tw\`border-x-pink-50\` tw\`border-x-pink-100\` tw\`border-x-pink-200\` tw\`border-x-pink-300\` tw\`border-x-pink-400\` tw\`border-x-pink-500\` tw\`border-x-pink-600\` tw\`border-x-pink-700\` tw\`border-x-pink-800\` tw\`border-x-pink-900\` tw\`border-x-rose-50\` tw\`border-x-rose-100\` tw\`border-x-rose-200\` tw\`border-x-rose-300\` tw\`border-x-rose-400\` tw\`border-x-rose-500\` tw\`border-x-rose-600\` tw\`border-x-rose-700\` tw\`border-x-rose-800\` tw\`border-x-rose-900\` tw\`border-y-inherit\` tw\`border-y-current\` tw\`border-y-transparent\` tw\`border-y-black\` tw\`border-y-white\` tw\`border-y-slate-50\` tw\`border-y-slate-100\` tw\`border-y-slate-200\` tw\`border-y-slate-300\` tw\`border-y-slate-400\` tw\`border-y-slate-500\` tw\`border-y-slate-600\` tw\`border-y-slate-700\` tw\`border-y-slate-800\` tw\`border-y-slate-900\` tw\`border-y-gray-50\` tw\`border-y-gray-100\` tw\`border-y-gray-200\` tw\`border-y-gray-300\` tw\`border-y-gray-400\` tw\`border-y-gray-500\` tw\`border-y-gray-600\` tw\`border-y-gray-700\` tw\`border-y-gray-800\` tw\`border-y-gray-900\` tw\`border-y-zinc-50\` tw\`border-y-zinc-100\` tw\`border-y-zinc-200\` tw\`border-y-zinc-300\` tw\`border-y-zinc-400\` tw\`border-y-zinc-500\` tw\`border-y-zinc-600\` tw\`border-y-zinc-700\` tw\`border-y-zinc-800\` tw\`border-y-zinc-900\` tw\`border-y-neutral-50\` tw\`border-y-neutral-100\` tw\`border-y-neutral-200\` tw\`border-y-neutral-300\` tw\`border-y-neutral-400\` tw\`border-y-neutral-500\` tw\`border-y-neutral-600\` tw\`border-y-neutral-700\` tw\`border-y-neutral-800\` tw\`border-y-neutral-900\` tw\`border-y-stone-50\` tw\`border-y-stone-100\` tw\`border-y-stone-200\` tw\`border-y-stone-300\` tw\`border-y-stone-400\` tw\`border-y-stone-500\` tw\`border-y-stone-600\` tw\`border-y-stone-700\` tw\`border-y-stone-800\` tw\`border-y-stone-900\` tw\`border-y-red-50\` tw\`border-y-red-100\` tw\`border-y-red-200\` tw\`border-y-red-300\` tw\`border-y-red-400\` tw\`border-y-red-500\` tw\`border-y-red-600\` tw\`border-y-red-700\` tw\`border-y-red-800\` tw\`border-y-red-900\` tw\`border-y-orange-50\` tw\`border-y-orange-100\` tw\`border-y-orange-200\` tw\`border-y-orange-300\` tw\`border-y-orange-400\` tw\`border-y-orange-500\` tw\`border-y-orange-600\` tw\`border-y-orange-700\` tw\`border-y-orange-800\` tw\`border-y-orange-900\` tw\`border-y-amber-50\` tw\`border-y-amber-100\` tw\`border-y-amber-200\` tw\`border-y-amber-300\` tw\`border-y-amber-400\` tw\`border-y-amber-500\` tw\`border-y-amber-600\` tw\`border-y-amber-700\` tw\`border-y-amber-800\` tw\`border-y-amber-900\` tw\`border-y-yellow-50\` tw\`border-y-yellow-100\` tw\`border-y-yellow-200\` tw\`border-y-yellow-300\` tw\`border-y-yellow-400\` tw\`border-y-yellow-500\` tw\`border-y-yellow-600\` tw\`border-y-yellow-700\` tw\`border-y-yellow-800\` tw\`border-y-yellow-900\` tw\`border-y-lime-50\` tw\`border-y-lime-100\` tw\`border-y-lime-200\` tw\`border-y-lime-300\` tw\`border-y-lime-400\` tw\`border-y-lime-500\` tw\`border-y-lime-600\` tw\`border-y-lime-700\` tw\`border-y-lime-800\` tw\`border-y-lime-900\` tw\`border-y-green-50\` tw\`border-y-green-100\` tw\`border-y-green-200\` tw\`border-y-green-300\` tw\`border-y-green-400\` tw\`border-y-green-500\` tw\`border-y-green-600\` tw\`border-y-green-700\` tw\`border-y-green-800\` tw\`border-y-green-900\` tw\`border-y-emerald-50\` tw\`border-y-emerald-100\` tw\`border-y-emerald-200\` tw\`border-y-emerald-300\` tw\`border-y-emerald-400\` tw\`border-y-emerald-500\` tw\`border-y-emerald-600\` tw\`border-y-emerald-700\` tw\`border-y-emerald-800\` tw\`border-y-emerald-900\` tw\`border-y-teal-50\` tw\`border-y-teal-100\` tw\`border-y-teal-200\` tw\`border-y-teal-300\` tw\`border-y-teal-400\` tw\`border-y-teal-500\` tw\`border-y-teal-600\` tw\`border-y-teal-700\` tw\`border-y-teal-800\` tw\`border-y-teal-900\` tw\`border-y-cyan-50\` tw\`border-y-cyan-100\` tw\`border-y-cyan-200\` tw\`border-y-cyan-300\` tw\`border-y-cyan-400\` tw\`border-y-cyan-500\` tw\`border-y-cyan-600\` tw\`border-y-cyan-700\` tw\`border-y-cyan-800\` tw\`border-y-cyan-900\` tw\`border-y-sky-50\` tw\`border-y-sky-100\` tw\`border-y-sky-200\` tw\`border-y-sky-300\` tw\`border-y-sky-400\` tw\`border-y-sky-500\` tw\`border-y-sky-600\` tw\`border-y-sky-700\` tw\`border-y-sky-800\` tw\`border-y-sky-900\` tw\`border-y-blue-50\` tw\`border-y-blue-100\` tw\`border-y-blue-200\` tw\`border-y-blue-300\` tw\`border-y-blue-400\` tw\`border-y-blue-500\` tw\`border-y-blue-600\` tw\`border-y-blue-700\` tw\`border-y-blue-800\` tw\`border-y-blue-900\` tw\`border-y-indigo-50\` tw\`border-y-indigo-100\` tw\`border-y-indigo-200\` tw\`border-y-indigo-300\` tw\`border-y-indigo-400\` tw\`border-y-indigo-500\` tw\`border-y-indigo-600\` tw\`border-y-indigo-700\` tw\`border-y-indigo-800\` tw\`border-y-indigo-900\` tw\`border-y-violet-50\` tw\`border-y-violet-100\` tw\`border-y-violet-200\` tw\`border-y-violet-300\` tw\`border-y-violet-400\` tw\`border-y-violet-500\` tw\`border-y-violet-600\` tw\`border-y-violet-700\` tw\`border-y-violet-800\` tw\`border-y-violet-900\` tw\`border-y-purple-50\` tw\`border-y-purple-100\` tw\`border-y-purple-200\` tw\`border-y-purple-300\` tw\`border-y-purple-400\` tw\`border-y-purple-500\` tw\`border-y-purple-600\` tw\`border-y-purple-700\` tw\`border-y-purple-800\` tw\`border-y-purple-900\` tw\`border-y-fuchsia-50\` tw\`border-y-fuchsia-100\` tw\`border-y-fuchsia-200\` tw\`border-y-fuchsia-300\` tw\`border-y-fuchsia-400\` tw\`border-y-fuchsia-500\` tw\`border-y-fuchsia-600\` tw\`border-y-fuchsia-700\` tw\`border-y-fuchsia-800\` tw\`border-y-fuchsia-900\` tw\`border-y-pink-50\` tw\`border-y-pink-100\` tw\`border-y-pink-200\` tw\`border-y-pink-300\` tw\`border-y-pink-400\` tw\`border-y-pink-500\` tw\`border-y-pink-600\` tw\`border-y-pink-700\` tw\`border-y-pink-800\` tw\`border-y-pink-900\` tw\`border-y-rose-50\` tw\`border-y-rose-100\` tw\`border-y-rose-200\` tw\`border-y-rose-300\` tw\`border-y-rose-400\` tw\`border-y-rose-500\` tw\`border-y-rose-600\` tw\`border-y-rose-700\` tw\`border-y-rose-800\` tw\`border-y-rose-900\` tw\`border-t-inherit\` tw\`border-t-current\` tw\`border-t-transparent\` tw\`border-t-black\` tw\`border-t-white\` tw\`border-t-slate-50\` tw\`border-t-slate-100\` tw\`border-t-slate-200\` tw\`border-t-slate-300\` tw\`border-t-slate-400\` tw\`border-t-slate-500\` tw\`border-t-slate-600\` tw\`border-t-slate-700\` tw\`border-t-slate-800\` tw\`border-t-slate-900\` tw\`border-t-gray-50\` tw\`border-t-gray-100\` tw\`border-t-gray-200\` tw\`border-t-gray-300\` tw\`border-t-gray-400\` tw\`border-t-gray-500\` tw\`border-t-gray-600\` tw\`border-t-gray-700\` tw\`border-t-gray-800\` tw\`border-t-gray-900\` tw\`border-t-zinc-50\` tw\`border-t-zinc-100\` tw\`border-t-zinc-200\` tw\`border-t-zinc-300\` tw\`border-t-zinc-400\` tw\`border-t-zinc-500\` tw\`border-t-zinc-600\` tw\`border-t-zinc-700\` tw\`border-t-zinc-800\` tw\`border-t-zinc-900\` tw\`border-t-neutral-50\` tw\`border-t-neutral-100\` tw\`border-t-neutral-200\` tw\`border-t-neutral-300\` tw\`border-t-neutral-400\` tw\`border-t-neutral-500\` tw\`border-t-neutral-600\` tw\`border-t-neutral-700\` tw\`border-t-neutral-800\` tw\`border-t-neutral-900\` tw\`border-t-stone-50\` tw\`border-t-stone-100\` tw\`border-t-stone-200\` tw\`border-t-stone-300\` tw\`border-t-stone-400\` tw\`border-t-stone-500\` tw\`border-t-stone-600\` tw\`border-t-stone-700\` tw\`border-t-stone-800\` tw\`border-t-stone-900\` tw\`border-t-red-50\` tw\`border-t-red-100\` tw\`border-t-red-200\` tw\`border-t-red-300\` tw\`border-t-red-400\` tw\`border-t-red-500\` tw\`border-t-red-600\` tw\`border-t-red-700\` tw\`border-t-red-800\` tw\`border-t-red-900\` tw\`border-t-orange-50\` tw\`border-t-orange-100\` tw\`border-t-orange-200\` tw\`border-t-orange-300\` tw\`border-t-orange-400\` tw\`border-t-orange-500\` tw\`border-t-orange-600\` tw\`border-t-orange-700\` tw\`border-t-orange-800\` tw\`border-t-orange-900\` tw\`border-t-amber-50\` tw\`border-t-amber-100\` tw\`border-t-amber-200\` tw\`border-t-amber-300\` tw\`border-t-amber-400\` tw\`border-t-amber-500\` tw\`border-t-amber-600\` tw\`border-t-amber-700\` tw\`border-t-amber-800\` tw\`border-t-amber-900\` tw\`border-t-yellow-50\` tw\`border-t-yellow-100\` tw\`border-t-yellow-200\` tw\`border-t-yellow-300\` tw\`border-t-yellow-400\` tw\`border-t-yellow-500\` tw\`border-t-yellow-600\` tw\`border-t-yellow-700\` tw\`border-t-yellow-800\` tw\`border-t-yellow-900\` tw\`border-t-lime-50\` tw\`border-t-lime-100\` tw\`border-t-lime-200\` tw\`border-t-lime-300\` tw\`border-t-lime-400\` tw\`border-t-lime-500\` tw\`border-t-lime-600\` tw\`border-t-lime-700\` tw\`border-t-lime-800\` tw\`border-t-lime-900\` tw\`border-t-green-50\` tw\`border-t-green-100\` tw\`border-t-green-200\` tw\`border-t-green-300\` tw\`border-t-green-400\` tw\`border-t-green-500\` tw\`border-t-green-600\` tw\`border-t-green-700\` tw\`border-t-green-800\` tw\`border-t-green-900\` tw\`border-t-emerald-50\` tw\`border-t-emerald-100\` tw\`border-t-emerald-200\` tw\`border-t-emerald-300\` tw\`border-t-emerald-400\` tw\`border-t-emerald-500\` tw\`border-t-emerald-600\` tw\`border-t-emerald-700\` tw\`border-t-emerald-800\` tw\`border-t-emerald-900\` tw\`border-t-teal-50\` tw\`border-t-teal-100\` tw\`border-t-teal-200\` tw\`border-t-teal-300\` tw\`border-t-teal-400\` tw\`border-t-teal-500\` tw\`border-t-teal-600\` tw\`border-t-teal-700\` tw\`border-t-teal-800\` tw\`border-t-teal-900\` tw\`border-t-cyan-50\` tw\`border-t-cyan-100\` tw\`border-t-cyan-200\` tw\`border-t-cyan-300\` tw\`border-t-cyan-400\` tw\`border-t-cyan-500\` tw\`border-t-cyan-600\` tw\`border-t-cyan-700\` tw\`border-t-cyan-800\` tw\`border-t-cyan-900\` tw\`border-t-sky-50\` tw\`border-t-sky-100\` tw\`border-t-sky-200\` tw\`border-t-sky-300\` tw\`border-t-sky-400\` tw\`border-t-sky-500\` tw\`border-t-sky-600\` tw\`border-t-sky-700\` tw\`border-t-sky-800\` tw\`border-t-sky-900\` tw\`border-t-blue-50\` tw\`border-t-blue-100\` tw\`border-t-blue-200\` tw\`border-t-blue-300\` tw\`border-t-blue-400\` tw\`border-t-blue-500\` tw\`border-t-blue-600\` tw\`border-t-blue-700\` tw\`border-t-blue-800\` tw\`border-t-blue-900\` tw\`border-t-indigo-50\` tw\`border-t-indigo-100\` tw\`border-t-indigo-200\` tw\`border-t-indigo-300\` tw\`border-t-indigo-400\` tw\`border-t-indigo-500\` tw\`border-t-indigo-600\` tw\`border-t-indigo-700\` tw\`border-t-indigo-800\` tw\`border-t-indigo-900\` tw\`border-t-violet-50\` tw\`border-t-violet-100\` tw\`border-t-violet-200\` tw\`border-t-violet-300\` tw\`border-t-violet-400\` tw\`border-t-violet-500\` tw\`border-t-violet-600\` tw\`border-t-violet-700\` tw\`border-t-violet-800\` tw\`border-t-violet-900\` tw\`border-t-purple-50\` tw\`border-t-purple-100\` tw\`border-t-purple-200\` tw\`border-t-purple-300\` tw\`border-t-purple-400\` tw\`border-t-purple-500\` tw\`border-t-purple-600\` tw\`border-t-purple-700\` tw\`border-t-purple-800\` tw\`border-t-purple-900\` tw\`border-t-fuchsia-50\` tw\`border-t-fuchsia-100\` tw\`border-t-fuchsia-200\` tw\`border-t-fuchsia-300\` tw\`border-t-fuchsia-400\` tw\`border-t-fuchsia-500\` tw\`border-t-fuchsia-600\` tw\`border-t-fuchsia-700\` tw\`border-t-fuchsia-800\` tw\`border-t-fuchsia-900\` tw\`border-t-pink-50\` tw\`border-t-pink-100\` tw\`border-t-pink-200\` tw\`border-t-pink-300\` tw\`border-t-pink-400\` tw\`border-t-pink-500\` tw\`border-t-pink-600\` tw\`border-t-pink-700\` tw\`border-t-pink-800\` tw\`border-t-pink-900\` tw\`border-t-rose-50\` tw\`border-t-rose-100\` tw\`border-t-rose-200\` tw\`border-t-rose-300\` tw\`border-t-rose-400\` tw\`border-t-rose-500\` tw\`border-t-rose-600\` tw\`border-t-rose-700\` tw\`border-t-rose-800\` tw\`border-t-rose-900\` tw\`border-r-inherit border-r-current border-r-transparent border-r-black border-r-white border-r-slate-50\` tw\`border-r-slate-100\` tw\`border-r-slate-200\` tw\`border-r-slate-300\` tw\`border-r-slate-400\` tw\`border-r-slate-500\` tw\`border-r-slate-600\` tw\`border-r-slate-700\` tw\`border-r-slate-800\` tw\`border-r-slate-900\` tw\`border-r-gray-50\` tw\`border-r-gray-100\` tw\`border-r-gray-200\` tw\`border-r-gray-300\` tw\`border-r-gray-400\` tw\`border-r-gray-500\` tw\`border-r-gray-600\` tw\`border-r-gray-700\` tw\`border-r-gray-800\` tw\`border-r-gray-900\` tw\`border-r-zinc-50\` tw\`border-r-zinc-100\` tw\`border-r-zinc-200\` tw\`border-r-zinc-300\` tw\`border-r-zinc-400\` tw\`border-r-zinc-500\` tw\`border-r-zinc-600\` tw\`border-r-zinc-700\` tw\`border-r-zinc-800\` tw\`border-r-zinc-900\` tw\`border-r-neutral-50\` tw\`border-r-neutral-100\` tw\`border-r-neutral-200\` tw\`border-r-neutral-300\` tw\`border-r-neutral-400\` tw\`border-r-neutral-500\` tw\`border-r-neutral-600\` tw\`border-r-neutral-700\` tw\`border-r-neutral-800\` tw\`border-r-neutral-900\` tw\`border-r-stone-50\` tw\`border-r-stone-100\` tw\`border-r-stone-200\` tw\`border-r-stone-300\` tw\`border-r-stone-400\` tw\`border-r-stone-500\` tw\`border-r-stone-600\` tw\`border-r-stone-700\` tw\`border-r-stone-800\` tw\`border-r-stone-900\` tw\`border-r-red-50\` tw\`border-r-red-100\` tw\`border-r-red-200\` tw\`border-r-red-300\` tw\`border-r-red-400\` tw\`border-r-red-500\` tw\`border-r-red-600\` tw\`border-r-red-700\` tw\`border-r-red-800\` tw\`border-r-red-900\` tw\`border-r-orange-50\` tw\`border-r-orange-100\` tw\`border-r-orange-200\` tw\`border-r-orange-300\` tw\`border-r-orange-400\` tw\`border-r-orange-500\` tw\`border-r-orange-600\` tw\`border-r-orange-700\` tw\`border-r-orange-800\` tw\`border-r-orange-900\` tw\`border-r-amber-50\` tw\`border-r-amber-100\` tw\`border-r-amber-200\` tw\`border-r-amber-300\` tw\`border-r-amber-400\` tw\`border-r-amber-500\` tw\`border-r-amber-600\` tw\`border-r-amber-700\` tw\`border-r-amber-800\` tw\`border-r-amber-900\` tw\`border-r-yellow-50\` tw\`border-r-yellow-100\` tw\`border-r-yellow-200\` tw\`border-r-yellow-300\` tw\`border-r-yellow-400\` tw\`border-r-yellow-500\` tw\`border-r-yellow-600\` tw\`border-r-yellow-700\` tw\`border-r-yellow-800\` tw\`border-r-yellow-900\` tw\`border-r-lime-50\` tw\`border-r-lime-100\` tw\`border-r-lime-200\` tw\`border-r-lime-300\` tw\`border-r-lime-400\` tw\`border-r-lime-500\` tw\`border-r-lime-600\` tw\`border-r-lime-700\` tw\`border-r-lime-800\` tw\`border-r-lime-900\` tw\`border-r-green-50\` tw\`border-r-green-100\` tw\`border-r-green-200\` tw\`border-r-green-300\` tw\`border-r-green-400\` tw\`border-r-green-500\` tw\`border-r-green-600\` tw\`border-r-green-700\` tw\`border-r-green-800\` tw\`border-r-green-900\` tw\`border-r-emerald-50\` tw\`border-r-emerald-100\` tw\`border-r-emerald-200\` tw\`border-r-emerald-300\` tw\`border-r-emerald-400\` tw\`border-r-emerald-500\` tw\`border-r-emerald-600\` tw\`border-r-emerald-700\` tw\`border-r-emerald-800\` tw\`border-r-emerald-900\` tw\`border-r-teal-50\` tw\`border-r-teal-100\` tw\`border-r-teal-200\` tw\`border-r-teal-300\` tw\`border-r-teal-400\` tw\`border-r-teal-500\` tw\`border-r-teal-600\` tw\`border-r-teal-700\` tw\`border-r-teal-800\` tw\`border-r-teal-900\` tw\`border-r-cyan-50\` tw\`border-r-cyan-100\` tw\`border-r-cyan-200\` tw\`border-r-cyan-300\` tw\`border-r-cyan-400\` tw\`border-r-cyan-500\` tw\`border-r-cyan-600\` tw\`border-r-cyan-700\` tw\`border-r-cyan-800\` tw\`border-r-cyan-900\` tw\`border-r-sky-50\` tw\`border-r-sky-100\` tw\`border-r-sky-200\` tw\`border-r-sky-300\` tw\`border-r-sky-400\` tw\`border-r-sky-500\` tw\`border-r-sky-600\` tw\`border-r-sky-700\` tw\`border-r-sky-800\` tw\`border-r-sky-900\` tw\`border-r-blue-50\` tw\`border-r-blue-100\` tw\`border-r-blue-200\` tw\`border-r-blue-300\` tw\`border-r-blue-400\` tw\`border-r-blue-500\` tw\`border-r-blue-600\` tw\`border-r-blue-700\` tw\`border-r-blue-800\` tw\`border-r-blue-900\` tw\`border-r-indigo-50\` tw\`border-r-indigo-100\` tw\`border-r-indigo-200\` tw\`border-r-indigo-300\` tw\`border-r-indigo-400\` tw\`border-r-indigo-500\` tw\`border-r-indigo-600\` tw\`border-r-indigo-700\` tw\`border-r-indigo-800\` tw\`border-r-indigo-900\` tw\`border-r-violet-50\` tw\`border-r-violet-100\` tw\`border-r-violet-200\` tw\`border-r-violet-300\` tw\`border-r-violet-400\` tw\`border-r-violet-500\` tw\`border-r-violet-600\` tw\`border-r-violet-700\` tw\`border-r-violet-800\` tw\`border-r-violet-900\` tw\`border-r-purple-50\` tw\`border-r-purple-100\` tw\`border-r-purple-200\` tw\`border-r-purple-300\` tw\`border-r-purple-400\` tw\`border-r-purple-500\` tw\`border-r-purple-600\` tw\`border-r-purple-700\` tw\`border-r-purple-800\` tw\`border-r-purple-900\` tw\`border-r-fuchsia-50\` tw\`border-r-fuchsia-100\` tw\`border-r-fuchsia-200\` tw\`border-r-fuchsia-300\` tw\`border-r-fuchsia-400\` tw\`border-r-fuchsia-500\` tw\`border-r-fuchsia-600\` tw\`border-r-fuchsia-700\` tw\`border-r-fuchsia-800\` tw\`border-r-fuchsia-900\` tw\`border-r-pink-50\` tw\`border-r-pink-100\` tw\`border-r-pink-200\` tw\`border-r-pink-300\` tw\`border-r-pink-400\` tw\`border-r-pink-500\` tw\`border-r-pink-600\` tw\`border-r-pink-700\` tw\`border-r-pink-800\` tw\`border-r-pink-900\` tw\`border-r-rose-50\` tw\`border-r-rose-100\` tw\`border-r-rose-200\` tw\`border-r-rose-300\` tw\`border-r-rose-400\` tw\`border-r-rose-500\` tw\`border-r-rose-600\` tw\`border-r-rose-700\` tw\`border-r-rose-800\` tw\`border-r-rose-900\` tw\`border-b-inherit\` tw\`border-b-current\` tw\`border-b-transparent\` tw\`border-b-black\` tw\`border-b-white\` tw\`border-b-slate-50\` tw\`border-b-slate-100\` tw\`border-b-slate-200\` tw\`border-b-slate-300\` tw\`border-b-slate-400\` tw\`border-b-slate-500\` tw\`border-b-slate-600\` tw\`border-b-slate-700\` tw\`border-b-slate-800\` tw\`border-b-slate-900\` tw\`border-b-gray-50\` tw\`border-b-gray-100\` tw\`border-b-gray-200\` tw\`border-b-gray-300\` tw\`border-b-gray-400\` tw\`border-b-gray-500\` tw\`border-b-gray-600\` tw\`border-b-gray-700\` tw\`border-b-gray-800\` tw\`border-b-gray-900\` tw\`border-b-zinc-50\` tw\`border-b-zinc-100\` tw\`border-b-zinc-200\` tw\`border-b-zinc-300\` tw\`border-b-zinc-400\` tw\`border-b-zinc-500\` tw\`border-b-zinc-600\` tw\`border-b-zinc-700\` tw\`border-b-zinc-800\` tw\`border-b-zinc-900\` tw\`border-b-neutral-50\` tw\`border-b-neutral-100\` tw\`border-b-neutral-200\` tw\`border-b-neutral-300\` tw\`border-b-neutral-400\` tw\`border-b-neutral-500\` tw\`border-b-neutral-600\` tw\`border-b-neutral-700\` tw\`border-b-neutral-800\` tw\`border-b-neutral-900\` tw\`border-b-stone-50\` tw\`border-b-stone-100\` tw\`border-b-stone-200\` tw\`border-b-stone-300\` tw\`border-b-stone-400\` tw\`border-b-stone-500\` tw\`border-b-stone-600\` tw\`border-b-stone-700\` tw\`border-b-stone-800\` tw\`border-b-stone-900\` tw\`border-b-red-50\` tw\`border-b-red-100\` tw\`border-b-red-200\` tw\`border-b-red-300\` tw\`border-b-red-400\` tw\`border-b-red-500\` tw\`border-b-red-600\` tw\`border-b-red-700\` tw\`border-b-red-800\` tw\`border-b-red-900\` tw\`border-b-orange-50\` tw\`border-b-orange-100\` tw\`border-b-orange-200\` tw\`border-b-orange-300\` tw\`border-b-orange-400\` tw\`border-b-orange-500\` tw\`border-b-orange-600\` tw\`border-b-orange-700\` tw\`border-b-orange-800\` tw\`border-b-orange-900\` tw\`border-b-amber-50\` tw\`border-b-amber-100\` tw\`border-b-amber-200\` tw\`border-b-amber-300\` tw\`border-b-amber-400\` tw\`border-b-amber-500\` tw\`border-b-amber-600\` tw\`border-b-amber-700\` tw\`border-b-amber-800\` tw\`border-b-amber-900\` tw\`border-b-yellow-50\` tw\`border-b-yellow-100\` tw\`border-b-yellow-200\` tw\`border-b-yellow-300\` tw\`border-b-yellow-400\` tw\`border-b-yellow-500\` tw\`border-b-yellow-600\` tw\`border-b-yellow-700\` tw\`border-b-yellow-800\` tw\`border-b-yellow-900\` tw\`border-b-lime-50\` tw\`border-b-lime-100\` tw\`border-b-lime-200\` tw\`border-b-lime-300\` tw\`border-b-lime-400\` tw\`border-b-lime-500\` tw\`border-b-lime-600\` tw\`border-b-lime-700\` tw\`border-b-lime-800\` tw\`border-b-lime-900\` tw\`border-b-green-50\` tw\`border-b-green-100\` tw\`border-b-green-200\` tw\`border-b-green-300\` tw\`border-b-green-400\` tw\`border-b-green-500\` tw\`border-b-green-600\` tw\`border-b-green-700\` tw\`border-b-green-800\` tw\`border-b-green-900\` tw\`border-b-emerald-50\` tw\`border-b-emerald-100\` tw\`border-b-emerald-200\` tw\`border-b-emerald-300\` tw\`border-b-emerald-400\` tw\`border-b-emerald-500\` tw\`border-b-emerald-600\` tw\`border-b-emerald-700\` tw\`border-b-emerald-800\` tw\`border-b-emerald-900\` tw\`border-b-teal-50\` tw\`border-b-teal-100\` tw\`border-b-teal-200\` tw\`border-b-teal-300\` tw\`border-b-teal-400\` tw\`border-b-teal-500\` tw\`border-b-teal-600\` tw\`border-b-teal-700\` tw\`border-b-teal-800\` tw\`border-b-teal-900\` tw\`border-b-cyan-50\` tw\`border-b-cyan-100\` tw\`border-b-cyan-200\` tw\`border-b-cyan-300\` tw\`border-b-cyan-400\` tw\`border-b-cyan-500\` tw\`border-b-cyan-600\` tw\`border-b-cyan-700\` tw\`border-b-cyan-800\` tw\`border-b-cyan-900\` tw\`border-b-sky-50\` tw\`border-b-sky-100\` tw\`border-b-sky-200\` tw\`border-b-sky-300\` tw\`border-b-sky-400\` tw\`border-b-sky-500\` tw\`border-b-sky-600\` tw\`border-b-sky-700\` tw\`border-b-sky-800\` tw\`border-b-sky-900\` tw\`border-b-blue-50\` tw\`border-b-blue-100\` tw\`border-b-blue-200\` tw\`border-b-blue-300\` tw\`border-b-blue-400\` tw\`border-b-blue-500\` tw\`border-b-blue-600\` tw\`border-b-blue-700\` tw\`border-b-blue-800\` tw\`border-b-blue-900\` tw\`border-b-indigo-50\` tw\`border-b-indigo-100\` tw\`border-b-indigo-200\` tw\`border-b-indigo-300\` tw\`border-b-indigo-400\` tw\`border-b-indigo-500\` tw\`border-b-indigo-600\` tw\`border-b-indigo-700\` tw\`border-b-indigo-800\` tw\`border-b-indigo-900\` tw\`border-b-violet-50\` tw\`border-b-violet-100\` tw\`border-b-violet-200\` tw\`border-b-violet-300\` tw\`border-b-violet-400\` tw\`border-b-violet-500\` tw\`border-b-violet-600\` tw\`border-b-violet-700\` tw\`border-b-violet-800\` tw\`border-b-violet-900\` tw\`border-b-purple-50\` tw\`border-b-purple-100\` tw\`border-b-purple-200\` tw\`border-b-purple-300\` tw\`border-b-purple-400\` tw\`border-b-purple-500\` tw\`border-b-purple-600\` tw\`border-b-purple-700\` tw\`border-b-purple-800\` tw\`border-b-purple-900\` tw\`border-b-fuchsia-50\` tw\`border-b-fuchsia-100\` tw\`border-b-fuchsia-200\` tw\`border-b-fuchsia-300\` tw\`border-b-fuchsia-400\` tw\`border-b-fuchsia-500\` tw\`border-b-fuchsia-600\` tw\`border-b-fuchsia-700\` tw\`border-b-fuchsia-800\` tw\`border-b-fuchsia-900\` tw\`border-b-pink-50\` tw\`border-b-pink-100\` tw\`border-b-pink-200\` tw\`border-b-pink-300\` tw\`border-b-pink-400\` tw\`border-b-pink-500\` tw\`border-b-pink-600\` tw\`border-b-pink-700\` tw\`border-b-pink-800\` tw\`border-b-pink-900\` tw\`border-b-rose-50\` tw\`border-b-rose-100\` tw\`border-b-rose-200\` tw\`border-b-rose-300\` tw\`border-b-rose-400\` tw\`border-b-rose-500\` tw\`border-b-rose-600\` tw\`border-b-rose-700\` tw\`border-b-rose-800\` tw\`border-b-rose-900\` tw\`border-l-inherit\` tw\`border-l-current\` tw\`border-l-transparent\` tw\`border-l-black\` tw\`border-l-white\` tw\`border-l-slate-50\` tw\`border-l-slate-100\` tw\`border-l-slate-200\` tw\`border-l-slate-300\` tw\`border-l-slate-400\` tw\`border-l-slate-500\` tw\`border-l-slate-600\` tw\`border-l-slate-700\` tw\`border-l-slate-800\` tw\`border-l-slate-900\` tw\`border-l-gray-50\` tw\`border-l-gray-100\` tw\`border-l-gray-200\` tw\`border-l-gray-300\` tw\`border-l-gray-400\` tw\`border-l-gray-500\` tw\`border-l-gray-600\` tw\`border-l-gray-700\` tw\`border-l-gray-800\` tw\`border-l-gray-900\` tw\`border-l-zinc-50\` tw\`border-l-zinc-100\` tw\`border-l-zinc-200\` tw\`border-l-zinc-300\` tw\`border-l-zinc-400\` tw\`border-l-zinc-500\` tw\`border-l-zinc-600\` tw\`border-l-zinc-700\` tw\`border-l-zinc-800\` tw\`border-l-zinc-900\` tw\`border-l-neutral-50\` tw\`border-l-neutral-100\` tw\`border-l-neutral-200\` tw\`border-l-neutral-300\` tw\`border-l-neutral-400\` tw\`border-l-neutral-500\` tw\`border-l-neutral-600\` tw\`border-l-neutral-700\` tw\`border-l-neutral-800\` tw\`border-l-neutral-900\` tw\`border-l-stone-50\` tw\`border-l-stone-100\` tw\`border-l-stone-200\` tw\`border-l-stone-300\` tw\`border-l-stone-400\` tw\`border-l-stone-500\` tw\`border-l-stone-600\` tw\`border-l-stone-700\` tw\`border-l-stone-800\` tw\`border-l-stone-900\` tw\`border-l-red-50\` tw\`border-l-red-100\` tw\`border-l-red-200\` tw\`border-l-red-300\` tw\`border-l-red-400\` tw\`border-l-red-500\` tw\`border-l-red-600\` tw\`border-l-red-700\` tw\`border-l-red-800\` tw\`border-l-red-900\` tw\`border-l-orange-50\` tw\`border-l-orange-100\` tw\`border-l-orange-200\` tw\`border-l-orange-300\` tw\`border-l-orange-400\` tw\`border-l-orange-500\` tw\`border-l-orange-600\` tw\`border-l-orange-700\` tw\`border-l-orange-800\` tw\`border-l-orange-900\` tw\`border-l-amber-50\` tw\`border-l-amber-100\` tw\`border-l-amber-200\` tw\`border-l-amber-300\` tw\`border-l-amber-400\` tw\`border-l-amber-500\` tw\`border-l-amber-600\` tw\`border-l-amber-700\` tw\`border-l-amber-800\` tw\`border-l-amber-900\` tw\`border-l-yellow-50\` tw\`border-l-yellow-100\` tw\`border-l-yellow-200\` tw\`border-l-yellow-300\` tw\`border-l-yellow-400\` tw\`border-l-yellow-500\` tw\`border-l-yellow-600\` tw\`border-l-yellow-700\` tw\`border-l-yellow-800\` tw\`border-l-yellow-900\` tw\`border-l-lime-50\` tw\`border-l-lime-100\` tw\`border-l-lime-200\` tw\`border-l-lime-300\` tw\`border-l-lime-400\` tw\`border-l-lime-500\` tw\`border-l-lime-600\` tw\`border-l-lime-700\` tw\`border-l-lime-800\` tw\`border-l-lime-900\` tw\`border-l-green-50\` tw\`border-l-green-100\` tw\`border-l-green-200\` tw\`border-l-green-300\` tw\`border-l-green-400\` tw\`border-l-green-500\` tw\`border-l-green-600\` tw\`border-l-green-700\` tw\`border-l-green-800\` tw\`border-l-green-900\` tw\`border-l-emerald-50\` tw\`border-l-emerald-100\` tw\`border-l-emerald-200\` tw\`border-l-emerald-300\` tw\`border-l-emerald-400\` tw\`border-l-emerald-500\` tw\`border-l-emerald-600\` tw\`border-l-emerald-700\` tw\`border-l-emerald-800\` tw\`border-l-emerald-900\` tw\`border-l-teal-50\` tw\`border-l-teal-100\` tw\`border-l-teal-200\` tw\`border-l-teal-300\` tw\`border-l-teal-400\` tw\`border-l-teal-500\` tw\`border-l-teal-600\` tw\`border-l-teal-700\` tw\`border-l-teal-800\` tw\`border-l-teal-900\` tw\`border-l-cyan-50\` tw\`border-l-cyan-100\` tw\`border-l-cyan-200\` tw\`border-l-cyan-300\` tw\`border-l-cyan-400\` tw\`border-l-cyan-500\` tw\`border-l-cyan-600\` tw\`border-l-cyan-700\` tw\`border-l-cyan-800\` tw\`border-l-cyan-900\` tw\`border-l-sky-50\` tw\`border-l-sky-100\` tw\`border-l-sky-200\` tw\`border-l-sky-300\` tw\`border-l-sky-400\` tw\`border-l-sky-500\` tw\`border-l-sky-600\` tw\`border-l-sky-700\` tw\`border-l-sky-800\` tw\`border-l-sky-900\` tw\`border-l-blue-50\` tw\`border-l-blue-100\` tw\`border-l-blue-200\` tw\`border-l-blue-300\` tw\`border-l-blue-400\` tw\`border-l-blue-500\` tw\`border-l-blue-600\` tw\`border-l-blue-700\` tw\`border-l-blue-800\` tw\`border-l-blue-900\` tw\`border-l-indigo-50\` tw\`border-l-indigo-100\` tw\`border-l-indigo-200\` tw\`border-l-indigo-300\` tw\`border-l-indigo-400\` tw\`border-l-indigo-500\` tw\`border-l-indigo-600\` tw\`border-l-indigo-700\` tw\`border-l-indigo-800\` tw\`border-l-indigo-900\` tw\`border-l-violet-50\` tw\`border-l-violet-100\` tw\`border-l-violet-200\` tw\`border-l-violet-300\` tw\`border-l-violet-400\` tw\`border-l-violet-500\` tw\`border-l-violet-600\` tw\`border-l-violet-700\` tw\`border-l-violet-800\` tw\`border-l-violet-900\` tw\`border-l-purple-50\` tw\`border-l-purple-100\` tw\`border-l-purple-200\` tw\`border-l-purple-300\` tw\`border-l-purple-400\` tw\`border-l-purple-500\` tw\`border-l-purple-600\` tw\`border-l-purple-700\` tw\`border-l-purple-800\` tw\`border-l-purple-900\` tw\`border-l-fuchsia-50\` tw\`border-l-fuchsia-100\` tw\`border-l-fuchsia-200\` tw\`border-l-fuchsia-300\` tw\`border-l-fuchsia-400\` tw\`border-l-fuchsia-500\` tw\`border-l-fuchsia-600\` tw\`border-l-fuchsia-700\` tw\`border-l-fuchsia-800\` tw\`border-l-fuchsia-900\` tw\`border-l-pink-50\` tw\`border-l-pink-100\` tw\`border-l-pink-200\` tw\`border-l-pink-300\` tw\`border-l-pink-400\` tw\`border-l-pink-500\` tw\`border-l-pink-600\` tw\`border-l-pink-700\` tw\`border-l-pink-800\` tw\`border-l-pink-900\` tw\`border-l-rose-50\` tw\`border-l-rose-100\` tw\`border-l-rose-200\` tw\`border-l-rose-300\` tw\`border-l-rose-400\` tw\`border-l-rose-500\` tw\`border-l-rose-600\` tw\`border-l-rose-700\` tw\`border-l-rose-800\` tw\`border-l-rose-900\` tw\`border-4 border-indigo-500/100\` tw\`border-4 border-indigo-500/75\` tw\`border-4 border-indigo-500/50\` tw\`border-4 border-indigo-600/[.55]\` tw\`border-[#243c5a]\` tw\`border-[#f00]\` tw\`border-t-[#f00]\` tw\`border-red-500/25\` tw\`border-red-500/fromConfig\` tw\`border-red-500/fromConfig/25\` tw\`border-red-500/fromConfig/[.555]\` tw\`border-red-500/fromConfig/[var(--myvar)]\` tw\`border-red-500/[.555]\` tw\`border-red-500/[var(--myvar)]\` tw\`border-[theme('colors.red.500')]\` tw\`border-[theme('colors.red.500')]/20\` tw\`border-electric/25\` tw\`border-electric/[.555]\` tw\`border-electric/[var(--myvar)]\` tw\`border-[theme('colors.electric')]\` tw\`border-[theme('colors.electric')]/20\` tw\`border-[hsla(235, 100%, 50%, .5)]\` tw\`border-[rgba(255, 255, 255, 0)]\` tw\`border-[red_black_white rgb(255, 255,255,0)]\` tw\`border-[red black_blue]\` tw\`border-[red black]\` tw\`border-[hsl(50 50% 50%)]\` tw\`border-t-[color:green]\` tw\`border-t-[color:rgba(255, 255, 255, .45)]\` tw\`border-r-[color:green]\` tw\`border-r-[color:rgba(255, 255, 255, .45)]\` tw\`border-b-[color:green]\` tw\`border-b-[color:rgba(255, 255, 255, .45)]\` tw\`border-l-[color:green]\` tw\`border-l-[color:rgba(255, 255, 255, .45)]\` tw\`border-[color:green]\` tw\`border-[color:rgba(255, 255, 255, .45)]\` tw\`border-x-[color:green]\` tw\`border-y-[color:rgba(255, 255, 255, .45)]\` tw\`border-black border-s-green-500 border-e-red-400\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/border-color ;({ inherit: 'inherit', current: 'currentColor', transparent: 'transparent', black: '#000', white: '#fff', slate: { 50: '#f8fafc', 100: '#f1f5f9', 200: '#e2e8f0', 300: '#cbd5e1', 400: '#94a3b8', 500: '#64748b', 600: '#475569', 700: '#334155', 800: '#1e293b', 900: '#0f172a', 950: '#020617', }, gray: { 50: '#f9fafb', 100: '#f3f4f6', 200: '#e5e7eb', 300: '#d1d5db', 400: '#9ca3af', 500: '#6b7280', 600: '#4b5563', 700: '#374151', 800: '#1f2937', 900: '#111827', 950: '#030712', }, zinc: { 50: '#fafafa', 100: '#f4f4f5', 200: '#e4e4e7', 300: '#d4d4d8', 400: '#a1a1aa', 500: '#71717a', 600: '#52525b', 700: '#3f3f46', 800: '#27272a', 900: '#18181b', 950: '#09090b', }, neutral: { 50: '#fafafa', 100: '#f5f5f5', 200: '#e5e5e5', 300: '#d4d4d4', 400: '#a3a3a3', 500: '#737373', 600: '#525252', 700: '#404040', 800: '#262626', 900: '#171717', 950: '#0a0a0a', }, stone: { 50: '#fafaf9', 100: '#f5f5f4', 200: '#e7e5e4', 300: '#d6d3d1', 400: '#a8a29e', 500: '#78716c', 600: '#57534e', 700: '#44403c', 800: '#292524', 900: '#1c1917', 950: '#0c0a09', }, red: { 50: '#fef2f2', 100: '#fee2e2', 200: '#fecaca', 300: '#fca5a5', 400: '#f87171', 500: '#ef4444', 600: '#dc2626', 700: '#b91c1c', 800: '#991b1b', 900: '#7f1d1d', 950: '#450a0a', }, orange: { 50: '#fff7ed', 100: '#ffedd5', 200: '#fed7aa', 300: '#fdba74', 400: '#fb923c', 500: '#f97316', 600: '#ea580c', 700: '#c2410c', 800: '#9a3412', 900: '#7c2d12', 950: '#431407', }, amber: { 50: '#fffbeb', 100: '#fef3c7', 200: '#fde68a', 300: '#fcd34d', 400: '#fbbf24', 500: '#f59e0b', 600: '#d97706', 700: '#b45309', 800: '#92400e', 900: '#78350f', 950: '#451a03', }, yellow: { 50: '#fefce8', 100: '#fef9c3', 200: '#fef08a', 300: '#fde047', 400: '#facc15', 500: '#eab308', 600: '#ca8a04', 700: '#a16207', 800: '#854d0e', 900: '#713f12', 950: '#422006', }, lime: { 50: '#f7fee7', 100: '#ecfccb', 200: '#d9f99d', 300: '#bef264', 400: '#a3e635', 500: '#84cc16', 600: '#65a30d', 700: '#4d7c0f', 800: '#3f6212', 900: '#365314', 950: '#1a2e05', }, green: { 50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 300: '#86efac', 400: '#4ade80', 500: '#22c55e', 600: '#16a34a', 700: '#15803d', 800: '#166534', 900: '#14532d', 950: '#052e16', }, emerald: { 50: '#ecfdf5', 100: '#d1fae5', 200: '#a7f3d0', 300: '#6ee7b7', 400: '#34d399', 500: '#10b981', 600: '#059669', 700: '#047857', 800: '#065f46', 900: '#064e3b', 950: '#022c22', }, teal: { 50: '#f0fdfa', 100: '#ccfbf1', 200: '#99f6e4', 300: '#5eead4', 400: '#2dd4bf', 500: '#14b8a6', 600: '#0d9488', 700: '#0f766e', 800: '#115e59', 900: '#134e4a', 950: '#042f2e', }, cyan: { 50: '#ecfeff', 100: '#cffafe', 200: '#a5f3fc', 300: '#67e8f9', 400: '#22d3ee', 500: '#06b6d4', 600: '#0891b2', 700: '#0e7490', 800: '#155e75', 900: '#164e63', 950: '#083344', }, sky: { 50: '#f0f9ff', 100: '#e0f2fe', 200: '#bae6fd', 300: '#7dd3fc', 400: '#38bdf8', 500: '#0ea5e9', 600: '#0284c7', 700: '#0369a1', 800: '#075985', 900: '#0c4a6e', 950: '#082f49', }, blue: { 50: '#eff6ff', 100: '#dbeafe', 200: '#bfdbfe', 300: '#93c5fd', 400: '#60a5fa', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8', 800: '#1e40af', 900: '#1e3a8a', 950: '#172554', }, indigo: { 50: '#eef2ff', 100: '#e0e7ff', 200: '#c7d2fe', 300: '#a5b4fc', 400: '#818cf8', 500: '#6366f1', 600: '#4f46e5', 700: '#4338ca', 800: '#3730a3', 900: '#312e81', 950: '#1e1b4b', }, violet: { 50: '#f5f3ff', 100: '#ede9fe', 200: '#ddd6fe', 300: '#c4b5fd', 400: '#a78bfa', 500: '#8b5cf6', 600: '#7c3aed', 700: '#6d28d9', 800: '#5b21b6', 900: '#4c1d95', 950: '#2e1065', }, purple: { 50: '#faf5ff', 100: '#f3e8ff', 200: '#e9d5ff', 300: '#d8b4fe', 400: '#c084fc', 500: '#a855f7', 600: '#9333ea', 700: '#7e22ce', 800: '#6b21a8', 900: '#581c87', 950: '#3b0764', }, fuchsia: { 50: '#fdf4ff', 100: '#fae8ff', 200: '#f5d0fe', 300: '#f0abfc', 400: '#e879f9', 500: '#d946ef', 600: '#c026d3', 700: '#a21caf', 800: '#86198f', 900: '#701a75', 950: '#4a044e', }, pink: { 50: '#fdf2f8', 100: '#fce7f3', 200: '#fbcfe8', 300: '#f9a8d4', 400: '#f472b6', 500: '#ec4899', 600: '#db2777', 700: '#be185d', 800: '#9d174d', 900: '#831843', 950: '#500724', }, rose: { 50: '#fff1f2', 100: '#ffe4e6', 200: '#fecdd3', 300: '#fda4af', 400: '#fb7185', 500: '#f43f5e', 600: '#e11d48', 700: '#be123c', 800: '#9f1239', 900: '#881337', 950: '#4c0519', }, 'red-500/fromConfig': '#000', electric: void 0, DEFAULT: '#e5e7eb', }) ;({ borderColor: 'inherit', }) ;({ borderColor: 'currentColor', }) ;({ borderColor: 'transparent', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(0 0 0 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(255 255 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(248 250 252 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(241 245 249 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(226 232 240 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(203 213 225 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(148 163 184 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(100 116 139 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(71 85 105 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(51 65 85 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(30 41 59 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(15 23 42 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(249 250 251 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(243 244 246 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(229 231 235 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(209 213 219 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(156 163 175 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(107 114 128 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(75 85 99 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(55 65 81 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(31 41 55 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(17 24 39 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(250 250 250 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(244 244 245 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(228 228 231 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(212 212 216 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(161 161 170 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(113 113 122 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(82 82 91 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(63 63 70 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(39 39 42 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(24 24 27 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(250 250 250 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(245 245 245 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(229 229 229 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(212 212 212 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(163 163 163 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(115 115 115 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(82 82 82 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(64 64 64 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(38 38 38 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(23 23 23 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(250 250 249 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(245 245 244 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(231 229 228 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(214 211 209 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(168 162 158 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(120 113 108 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(87 83 78 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(68 64 60 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(41 37 36 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(28 25 23 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(254 242 242 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(254 226 226 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(254 202 202 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(252 165 165 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(248 113 113 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(239 68 68 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(220 38 38 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(185 28 28 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(153 27 27 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(127 29 29 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(255 247 237 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(255 237 213 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(254 215 170 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(253 186 116 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(251 146 60 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(249 115 22 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(234 88 12 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(194 65 12 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(154 52 18 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(124 45 18 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(255 251 235 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(254 243 199 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(253 230 138 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(252 211 77 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(251 191 36 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(245 158 11 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(217 119 6 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(180 83 9 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(146 64 14 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(120 53 15 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(254 252 232 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(254 249 195 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(254 240 138 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(253 224 71 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(250 204 21 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(234 179 8 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(202 138 4 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(161 98 7 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(133 77 14 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(113 63 18 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(247 254 231 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(236 252 203 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(217 249 157 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(190 242 100 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(163 230 53 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(132 204 22 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(101 163 13 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(77 124 15 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(63 98 18 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(54 83 20 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(240 253 244 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(220 252 231 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(187 247 208 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(134 239 172 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(74 222 128 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(34 197 94 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(22 163 74 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(21 128 61 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(22 101 52 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(20 83 45 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(236 253 245 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(209 250 229 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(167 243 208 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(110 231 183 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(52 211 153 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(16 185 129 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(5 150 105 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(4 120 87 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(6 95 70 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(6 78 59 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(240 253 250 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(204 251 241 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(153 246 228 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(94 234 212 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(45 212 191 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(20 184 166 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(13 148 136 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(15 118 110 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(17 94 89 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(19 78 74 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(236 254 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(207 250 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(165 243 252 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(103 232 249 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(34 211 238 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(6 182 212 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(8 145 178 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(14 116 144 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(21 94 117 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(22 78 99 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(240 249 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(224 242 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(186 230 253 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(125 211 252 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(56 189 248 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(14 165 233 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(2 132 199 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(3 105 161 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(7 89 133 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(12 74 110 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(239 246 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(219 234 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(191 219 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(147 197 253 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(96 165 250 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(59 130 246 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(37 99 235 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(29 78 216 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(30 64 175 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(30 58 138 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(238 242 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(224 231 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(199 210 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(165 180 252 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(129 140 248 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(99 102 241 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(79 70 229 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(67 56 202 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(55 48 163 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(49 46 129 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(245 243 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(237 233 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(221 214 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(196 181 253 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(167 139 250 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(139 92 246 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(124 58 237 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(109 40 217 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(91 33 182 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(76 29 149 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(250 245 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(243 232 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(233 213 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(216 180 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(192 132 252 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(168 85 247 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(147 51 234 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(126 34 206 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(107 33 168 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(88 28 135 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(253 244 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(250 232 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(245 208 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(240 171 252 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(232 121 249 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(217 70 239 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(192 38 211 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(162 28 175 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(134 25 143 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(112 26 117 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(253 242 248 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(252 231 243 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(251 207 232 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(249 168 212 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(244 114 182 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(236 72 153 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(219 39 119 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(190 24 93 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(157 23 77 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(131 24 67 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(255 241 242 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(255 228 230 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(254 205 211 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(253 164 175 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(251 113 133 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(244 63 94 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(225 29 72 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(190 18 60 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(159 18 57 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(136 19 55 / var(--tw-border-opacity))', }) ;({ borderLeftColor: 'inherit', borderRightColor: 'inherit', }) ;({ borderLeftColor: 'currentColor', borderRightColor: 'currentColor', }) ;({ borderLeftColor: 'transparent', borderRightColor: 'transparent', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(0 0 0 / var(--tw-border-opacity))', borderRightColor: 'rgb(0 0 0 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(255 255 255 / var(--tw-border-opacity))', borderRightColor: 'rgb(255 255 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(248 250 252 / var(--tw-border-opacity))', borderRightColor: 'rgb(248 250 252 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(241 245 249 / var(--tw-border-opacity))', borderRightColor: 'rgb(241 245 249 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(226 232 240 / var(--tw-border-opacity))', borderRightColor: 'rgb(226 232 240 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(203 213 225 / var(--tw-border-opacity))', borderRightColor: 'rgb(203 213 225 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(148 163 184 / var(--tw-border-opacity))', borderRightColor: 'rgb(148 163 184 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(100 116 139 / var(--tw-border-opacity))', borderRightColor: 'rgb(100 116 139 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(71 85 105 / var(--tw-border-opacity))', borderRightColor: 'rgb(71 85 105 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(51 65 85 / var(--tw-border-opacity))', borderRightColor: 'rgb(51 65 85 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(30 41 59 / var(--tw-border-opacity))', borderRightColor: 'rgb(30 41 59 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(15 23 42 / var(--tw-border-opacity))', borderRightColor: 'rgb(15 23 42 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(249 250 251 / var(--tw-border-opacity))', borderRightColor: 'rgb(249 250 251 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(243 244 246 / var(--tw-border-opacity))', borderRightColor: 'rgb(243 244 246 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(229 231 235 / var(--tw-border-opacity))', borderRightColor: 'rgb(229 231 235 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(209 213 219 / var(--tw-border-opacity))', borderRightColor: 'rgb(209 213 219 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(156 163 175 / var(--tw-border-opacity))', borderRightColor: 'rgb(156 163 175 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(107 114 128 / var(--tw-border-opacity))', borderRightColor: 'rgb(107 114 128 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(75 85 99 / var(--tw-border-opacity))', borderRightColor: 'rgb(75 85 99 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(55 65 81 / var(--tw-border-opacity))', borderRightColor: 'rgb(55 65 81 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(31 41 55 / var(--tw-border-opacity))', borderRightColor: 'rgb(31 41 55 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(17 24 39 / var(--tw-border-opacity))', borderRightColor: 'rgb(17 24 39 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(250 250 250 / var(--tw-border-opacity))', borderRightColor: 'rgb(250 250 250 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(244 244 245 / var(--tw-border-opacity))', borderRightColor: 'rgb(244 244 245 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(228 228 231 / var(--tw-border-opacity))', borderRightColor: 'rgb(228 228 231 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(212 212 216 / var(--tw-border-opacity))', borderRightColor: 'rgb(212 212 216 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(161 161 170 / var(--tw-border-opacity))', borderRightColor: 'rgb(161 161 170 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(113 113 122 / var(--tw-border-opacity))', borderRightColor: 'rgb(113 113 122 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(82 82 91 / var(--tw-border-opacity))', borderRightColor: 'rgb(82 82 91 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(63 63 70 / var(--tw-border-opacity))', borderRightColor: 'rgb(63 63 70 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(39 39 42 / var(--tw-border-opacity))', borderRightColor: 'rgb(39 39 42 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(24 24 27 / var(--tw-border-opacity))', borderRightColor: 'rgb(24 24 27 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(250 250 250 / var(--tw-border-opacity))', borderRightColor: 'rgb(250 250 250 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(245 245 245 / var(--tw-border-opacity))', borderRightColor: 'rgb(245 245 245 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(229 229 229 / var(--tw-border-opacity))', borderRightColor: 'rgb(229 229 229 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(212 212 212 / var(--tw-border-opacity))', borderRightColor: 'rgb(212 212 212 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(163 163 163 / var(--tw-border-opacity))', borderRightColor: 'rgb(163 163 163 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(115 115 115 / var(--tw-border-opacity))', borderRightColor: 'rgb(115 115 115 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(82 82 82 / var(--tw-border-opacity))', borderRightColor: 'rgb(82 82 82 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(64 64 64 / var(--tw-border-opacity))', borderRightColor: 'rgb(64 64 64 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(38 38 38 / var(--tw-border-opacity))', borderRightColor: 'rgb(38 38 38 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(23 23 23 / var(--tw-border-opacity))', borderRightColor: 'rgb(23 23 23 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(250 250 249 / var(--tw-border-opacity))', borderRightColor: 'rgb(250 250 249 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(245 245 244 / var(--tw-border-opacity))', borderRightColor: 'rgb(245 245 244 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(231 229 228 / var(--tw-border-opacity))', borderRightColor: 'rgb(231 229 228 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(214 211 209 / var(--tw-border-opacity))', borderRightColor: 'rgb(214 211 209 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(168 162 158 / var(--tw-border-opacity))', borderRightColor: 'rgb(168 162 158 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(120 113 108 / var(--tw-border-opacity))', borderRightColor: 'rgb(120 113 108 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(87 83 78 / var(--tw-border-opacity))', borderRightColor: 'rgb(87 83 78 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(68 64 60 / var(--tw-border-opacity))', borderRightColor: 'rgb(68 64 60 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(41 37 36 / var(--tw-border-opacity))', borderRightColor: 'rgb(41 37 36 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(28 25 23 / var(--tw-border-opacity))', borderRightColor: 'rgb(28 25 23 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(254 242 242 / var(--tw-border-opacity))', borderRightColor: 'rgb(254 242 242 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(254 226 226 / var(--tw-border-opacity))', borderRightColor: 'rgb(254 226 226 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(254 202 202 / var(--tw-border-opacity))', borderRightColor: 'rgb(254 202 202 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(252 165 165 / var(--tw-border-opacity))', borderRightColor: 'rgb(252 165 165 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(248 113 113 / var(--tw-border-opacity))', borderRightColor: 'rgb(248 113 113 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(239 68 68 / var(--tw-border-opacity))', borderRightColor: 'rgb(239 68 68 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(220 38 38 / var(--tw-border-opacity))', borderRightColor: 'rgb(220 38 38 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(185 28 28 / var(--tw-border-opacity))', borderRightColor: 'rgb(185 28 28 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(153 27 27 / var(--tw-border-opacity))', borderRightColor: 'rgb(153 27 27 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(127 29 29 / var(--tw-border-opacity))', borderRightColor: 'rgb(127 29 29 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(255 247 237 / var(--tw-border-opacity))', borderRightColor: 'rgb(255 247 237 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(255 237 213 / var(--tw-border-opacity))', borderRightColor: 'rgb(255 237 213 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(254 215 170 / var(--tw-border-opacity))', borderRightColor: 'rgb(254 215 170 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(253 186 116 / var(--tw-border-opacity))', borderRightColor: 'rgb(253 186 116 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(251 146 60 / var(--tw-border-opacity))', borderRightColor: 'rgb(251 146 60 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(249 115 22 / var(--tw-border-opacity))', borderRightColor: 'rgb(249 115 22 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(234 88 12 / var(--tw-border-opacity))', borderRightColor: 'rgb(234 88 12 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(194 65 12 / var(--tw-border-opacity))', borderRightColor: 'rgb(194 65 12 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(154 52 18 / var(--tw-border-opacity))', borderRightColor: 'rgb(154 52 18 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(124 45 18 / var(--tw-border-opacity))', borderRightColor: 'rgb(124 45 18 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(255 251 235 / var(--tw-border-opacity))', borderRightColor: 'rgb(255 251 235 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(254 243 199 / var(--tw-border-opacity))', borderRightColor: 'rgb(254 243 199 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(253 230 138 / var(--tw-border-opacity))', borderRightColor: 'rgb(253 230 138 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(252 211 77 / var(--tw-border-opacity))', borderRightColor: 'rgb(252 211 77 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(251 191 36 / var(--tw-border-opacity))', borderRightColor: 'rgb(251 191 36 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(245 158 11 / var(--tw-border-opacity))', borderRightColor: 'rgb(245 158 11 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(217 119 6 / var(--tw-border-opacity))', borderRightColor: 'rgb(217 119 6 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(180 83 9 / var(--tw-border-opacity))', borderRightColor: 'rgb(180 83 9 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(146 64 14 / var(--tw-border-opacity))', borderRightColor: 'rgb(146 64 14 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(120 53 15 / var(--tw-border-opacity))', borderRightColor: 'rgb(120 53 15 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(254 252 232 / var(--tw-border-opacity))', borderRightColor: 'rgb(254 252 232 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(254 249 195 / var(--tw-border-opacity))', borderRightColor: 'rgb(254 249 195 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(254 240 138 / var(--tw-border-opacity))', borderRightColor: 'rgb(254 240 138 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(253 224 71 / var(--tw-border-opacity))', borderRightColor: 'rgb(253 224 71 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(250 204 21 / var(--tw-border-opacity))', borderRightColor: 'rgb(250 204 21 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(234 179 8 / var(--tw-border-opacity))', borderRightColor: 'rgb(234 179 8 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(202 138 4 / var(--tw-border-opacity))', borderRightColor: 'rgb(202 138 4 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(161 98 7 / var(--tw-border-opacity))', borderRightColor: 'rgb(161 98 7 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(133 77 14 / var(--tw-border-opacity))', borderRightColor: 'rgb(133 77 14 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(113 63 18 / var(--tw-border-opacity))', borderRightColor: 'rgb(113 63 18 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(247 254 231 / var(--tw-border-opacity))', borderRightColor: 'rgb(247 254 231 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(236 252 203 / var(--tw-border-opacity))', borderRightColor: 'rgb(236 252 203 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(217 249 157 / var(--tw-border-opacity))', borderRightColor: 'rgb(217 249 157 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(190 242 100 / var(--tw-border-opacity))', borderRightColor: 'rgb(190 242 100 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(163 230 53 / var(--tw-border-opacity))', borderRightColor: 'rgb(163 230 53 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(132 204 22 / var(--tw-border-opacity))', borderRightColor: 'rgb(132 204 22 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(101 163 13 / var(--tw-border-opacity))', borderRightColor: 'rgb(101 163 13 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(77 124 15 / var(--tw-border-opacity))', borderRightColor: 'rgb(77 124 15 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(63 98 18 / var(--tw-border-opacity))', borderRightColor: 'rgb(63 98 18 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(54 83 20 / var(--tw-border-opacity))', borderRightColor: 'rgb(54 83 20 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(240 253 244 / var(--tw-border-opacity))', borderRightColor: 'rgb(240 253 244 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(220 252 231 / var(--tw-border-opacity))', borderRightColor: 'rgb(220 252 231 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(187 247 208 / var(--tw-border-opacity))', borderRightColor: 'rgb(187 247 208 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(134 239 172 / var(--tw-border-opacity))', borderRightColor: 'rgb(134 239 172 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(74 222 128 / var(--tw-border-opacity))', borderRightColor: 'rgb(74 222 128 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(34 197 94 / var(--tw-border-opacity))', borderRightColor: 'rgb(34 197 94 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(22 163 74 / var(--tw-border-opacity))', borderRightColor: 'rgb(22 163 74 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(21 128 61 / var(--tw-border-opacity))', borderRightColor: 'rgb(21 128 61 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(22 101 52 / var(--tw-border-opacity))', borderRightColor: 'rgb(22 101 52 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(20 83 45 / var(--tw-border-opacity))', borderRightColor: 'rgb(20 83 45 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(236 253 245 / var(--tw-border-opacity))', borderRightColor: 'rgb(236 253 245 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(209 250 229 / var(--tw-border-opacity))', borderRightColor: 'rgb(209 250 229 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(167 243 208 / var(--tw-border-opacity))', borderRightColor: 'rgb(167 243 208 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(110 231 183 / var(--tw-border-opacity))', borderRightColor: 'rgb(110 231 183 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(52 211 153 / var(--tw-border-opacity))', borderRightColor: 'rgb(52 211 153 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(16 185 129 / var(--tw-border-opacity))', borderRightColor: 'rgb(16 185 129 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(5 150 105 / var(--tw-border-opacity))', borderRightColor: 'rgb(5 150 105 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(4 120 87 / var(--tw-border-opacity))', borderRightColor: 'rgb(4 120 87 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(6 95 70 / var(--tw-border-opacity))', borderRightColor: 'rgb(6 95 70 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(6 78 59 / var(--tw-border-opacity))', borderRightColor: 'rgb(6 78 59 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(240 253 250 / var(--tw-border-opacity))', borderRightColor: 'rgb(240 253 250 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(204 251 241 / var(--tw-border-opacity))', borderRightColor: 'rgb(204 251 241 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(153 246 228 / var(--tw-border-opacity))', borderRightColor: 'rgb(153 246 228 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(94 234 212 / var(--tw-border-opacity))', borderRightColor: 'rgb(94 234 212 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(45 212 191 / var(--tw-border-opacity))', borderRightColor: 'rgb(45 212 191 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(20 184 166 / var(--tw-border-opacity))', borderRightColor: 'rgb(20 184 166 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(13 148 136 / var(--tw-border-opacity))', borderRightColor: 'rgb(13 148 136 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(15 118 110 / var(--tw-border-opacity))', borderRightColor: 'rgb(15 118 110 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(17 94 89 / var(--tw-border-opacity))', borderRightColor: 'rgb(17 94 89 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(19 78 74 / var(--tw-border-opacity))', borderRightColor: 'rgb(19 78 74 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(236 254 255 / var(--tw-border-opacity))', borderRightColor: 'rgb(236 254 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(207 250 254 / var(--tw-border-opacity))', borderRightColor: 'rgb(207 250 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(165 243 252 / var(--tw-border-opacity))', borderRightColor: 'rgb(165 243 252 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(103 232 249 / var(--tw-border-opacity))', borderRightColor: 'rgb(103 232 249 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(34 211 238 / var(--tw-border-opacity))', borderRightColor: 'rgb(34 211 238 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(6 182 212 / var(--tw-border-opacity))', borderRightColor: 'rgb(6 182 212 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(8 145 178 / var(--tw-border-opacity))', borderRightColor: 'rgb(8 145 178 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(14 116 144 / var(--tw-border-opacity))', borderRightColor: 'rgb(14 116 144 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(21 94 117 / var(--tw-border-opacity))', borderRightColor: 'rgb(21 94 117 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(22 78 99 / var(--tw-border-opacity))', borderRightColor: 'rgb(22 78 99 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(240 249 255 / var(--tw-border-opacity))', borderRightColor: 'rgb(240 249 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(224 242 254 / var(--tw-border-opacity))', borderRightColor: 'rgb(224 242 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(186 230 253 / var(--tw-border-opacity))', borderRightColor: 'rgb(186 230 253 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(125 211 252 / var(--tw-border-opacity))', borderRightColor: 'rgb(125 211 252 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(56 189 248 / var(--tw-border-opacity))', borderRightColor: 'rgb(56 189 248 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(14 165 233 / var(--tw-border-opacity))', borderRightColor: 'rgb(14 165 233 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(2 132 199 / var(--tw-border-opacity))', borderRightColor: 'rgb(2 132 199 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(3 105 161 / var(--tw-border-opacity))', borderRightColor: 'rgb(3 105 161 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(7 89 133 / var(--tw-border-opacity))', borderRightColor: 'rgb(7 89 133 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(12 74 110 / var(--tw-border-opacity))', borderRightColor: 'rgb(12 74 110 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(239 246 255 / var(--tw-border-opacity))', borderRightColor: 'rgb(239 246 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(219 234 254 / var(--tw-border-opacity))', borderRightColor: 'rgb(219 234 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(191 219 254 / var(--tw-border-opacity))', borderRightColor: 'rgb(191 219 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(147 197 253 / var(--tw-border-opacity))', borderRightColor: 'rgb(147 197 253 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(96 165 250 / var(--tw-border-opacity))', borderRightColor: 'rgb(96 165 250 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(59 130 246 / var(--tw-border-opacity))', borderRightColor: 'rgb(59 130 246 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(37 99 235 / var(--tw-border-opacity))', borderRightColor: 'rgb(37 99 235 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(29 78 216 / var(--tw-border-opacity))', borderRightColor: 'rgb(29 78 216 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(30 64 175 / var(--tw-border-opacity))', borderRightColor: 'rgb(30 64 175 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(30 58 138 / var(--tw-border-opacity))', borderRightColor: 'rgb(30 58 138 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(238 242 255 / var(--tw-border-opacity))', borderRightColor: 'rgb(238 242 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(224 231 255 / var(--tw-border-opacity))', borderRightColor: 'rgb(224 231 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(199 210 254 / var(--tw-border-opacity))', borderRightColor: 'rgb(199 210 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(165 180 252 / var(--tw-border-opacity))', borderRightColor: 'rgb(165 180 252 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(129 140 248 / var(--tw-border-opacity))', borderRightColor: 'rgb(129 140 248 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(99 102 241 / var(--tw-border-opacity))', borderRightColor: 'rgb(99 102 241 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(79 70 229 / var(--tw-border-opacity))', borderRightColor: 'rgb(79 70 229 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(67 56 202 / var(--tw-border-opacity))', borderRightColor: 'rgb(67 56 202 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(55 48 163 / var(--tw-border-opacity))', borderRightColor: 'rgb(55 48 163 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(49 46 129 / var(--tw-border-opacity))', borderRightColor: 'rgb(49 46 129 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(245 243 255 / var(--tw-border-opacity))', borderRightColor: 'rgb(245 243 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(237 233 254 / var(--tw-border-opacity))', borderRightColor: 'rgb(237 233 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(221 214 254 / var(--tw-border-opacity))', borderRightColor: 'rgb(221 214 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(196 181 253 / var(--tw-border-opacity))', borderRightColor: 'rgb(196 181 253 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(167 139 250 / var(--tw-border-opacity))', borderRightColor: 'rgb(167 139 250 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(139 92 246 / var(--tw-border-opacity))', borderRightColor: 'rgb(139 92 246 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(124 58 237 / var(--tw-border-opacity))', borderRightColor: 'rgb(124 58 237 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(109 40 217 / var(--tw-border-opacity))', borderRightColor: 'rgb(109 40 217 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(91 33 182 / var(--tw-border-opacity))', borderRightColor: 'rgb(91 33 182 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(76 29 149 / var(--tw-border-opacity))', borderRightColor: 'rgb(76 29 149 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(250 245 255 / var(--tw-border-opacity))', borderRightColor: 'rgb(250 245 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(243 232 255 / var(--tw-border-opacity))', borderRightColor: 'rgb(243 232 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(233 213 255 / var(--tw-border-opacity))', borderRightColor: 'rgb(233 213 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(216 180 254 / var(--tw-border-opacity))', borderRightColor: 'rgb(216 180 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(192 132 252 / var(--tw-border-opacity))', borderRightColor: 'rgb(192 132 252 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(168 85 247 / var(--tw-border-opacity))', borderRightColor: 'rgb(168 85 247 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(147 51 234 / var(--tw-border-opacity))', borderRightColor: 'rgb(147 51 234 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(126 34 206 / var(--tw-border-opacity))', borderRightColor: 'rgb(126 34 206 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(107 33 168 / var(--tw-border-opacity))', borderRightColor: 'rgb(107 33 168 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(88 28 135 / var(--tw-border-opacity))', borderRightColor: 'rgb(88 28 135 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(253 244 255 / var(--tw-border-opacity))', borderRightColor: 'rgb(253 244 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(250 232 255 / var(--tw-border-opacity))', borderRightColor: 'rgb(250 232 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(245 208 254 / var(--tw-border-opacity))', borderRightColor: 'rgb(245 208 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(240 171 252 / var(--tw-border-opacity))', borderRightColor: 'rgb(240 171 252 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(232 121 249 / var(--tw-border-opacity))', borderRightColor: 'rgb(232 121 249 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(217 70 239 / var(--tw-border-opacity))', borderRightColor: 'rgb(217 70 239 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(192 38 211 / var(--tw-border-opacity))', borderRightColor: 'rgb(192 38 211 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(162 28 175 / var(--tw-border-opacity))', borderRightColor: 'rgb(162 28 175 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(134 25 143 / var(--tw-border-opacity))', borderRightColor: 'rgb(134 25 143 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(112 26 117 / var(--tw-border-opacity))', borderRightColor: 'rgb(112 26 117 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(253 242 248 / var(--tw-border-opacity))', borderRightColor: 'rgb(253 242 248 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(252 231 243 / var(--tw-border-opacity))', borderRightColor: 'rgb(252 231 243 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(251 207 232 / var(--tw-border-opacity))', borderRightColor: 'rgb(251 207 232 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(249 168 212 / var(--tw-border-opacity))', borderRightColor: 'rgb(249 168 212 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(244 114 182 / var(--tw-border-opacity))', borderRightColor: 'rgb(244 114 182 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(236 72 153 / var(--tw-border-opacity))', borderRightColor: 'rgb(236 72 153 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(219 39 119 / var(--tw-border-opacity))', borderRightColor: 'rgb(219 39 119 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(190 24 93 / var(--tw-border-opacity))', borderRightColor: 'rgb(190 24 93 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(157 23 77 / var(--tw-border-opacity))', borderRightColor: 'rgb(157 23 77 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(131 24 67 / var(--tw-border-opacity))', borderRightColor: 'rgb(131 24 67 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(255 241 242 / var(--tw-border-opacity))', borderRightColor: 'rgb(255 241 242 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(255 228 230 / var(--tw-border-opacity))', borderRightColor: 'rgb(255 228 230 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(254 205 211 / var(--tw-border-opacity))', borderRightColor: 'rgb(254 205 211 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(253 164 175 / var(--tw-border-opacity))', borderRightColor: 'rgb(253 164 175 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(251 113 133 / var(--tw-border-opacity))', borderRightColor: 'rgb(251 113 133 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(244 63 94 / var(--tw-border-opacity))', borderRightColor: 'rgb(244 63 94 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(225 29 72 / var(--tw-border-opacity))', borderRightColor: 'rgb(225 29 72 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(190 18 60 / var(--tw-border-opacity))', borderRightColor: 'rgb(190 18 60 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(159 18 57 / var(--tw-border-opacity))', borderRightColor: 'rgb(159 18 57 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(136 19 55 / var(--tw-border-opacity))', borderRightColor: 'rgb(136 19 55 / var(--tw-border-opacity))', }) ;({ borderTopColor: 'inherit', borderBottomColor: 'inherit', }) ;({ borderTopColor: 'currentColor', borderBottomColor: 'currentColor', }) ;({ borderTopColor: 'transparent', borderBottomColor: 'transparent', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(0 0 0 / var(--tw-border-opacity))', borderBottomColor: 'rgb(0 0 0 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(255 255 255 / var(--tw-border-opacity))', borderBottomColor: 'rgb(255 255 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(248 250 252 / var(--tw-border-opacity))', borderBottomColor: 'rgb(248 250 252 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(241 245 249 / var(--tw-border-opacity))', borderBottomColor: 'rgb(241 245 249 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(226 232 240 / var(--tw-border-opacity))', borderBottomColor: 'rgb(226 232 240 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(203 213 225 / var(--tw-border-opacity))', borderBottomColor: 'rgb(203 213 225 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(148 163 184 / var(--tw-border-opacity))', borderBottomColor: 'rgb(148 163 184 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(100 116 139 / var(--tw-border-opacity))', borderBottomColor: 'rgb(100 116 139 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(71 85 105 / var(--tw-border-opacity))', borderBottomColor: 'rgb(71 85 105 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(51 65 85 / var(--tw-border-opacity))', borderBottomColor: 'rgb(51 65 85 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(30 41 59 / var(--tw-border-opacity))', borderBottomColor: 'rgb(30 41 59 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(15 23 42 / var(--tw-border-opacity))', borderBottomColor: 'rgb(15 23 42 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(249 250 251 / var(--tw-border-opacity))', borderBottomColor: 'rgb(249 250 251 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(243 244 246 / var(--tw-border-opacity))', borderBottomColor: 'rgb(243 244 246 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(229 231 235 / var(--tw-border-opacity))', borderBottomColor: 'rgb(229 231 235 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(209 213 219 / var(--tw-border-opacity))', borderBottomColor: 'rgb(209 213 219 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(156 163 175 / var(--tw-border-opacity))', borderBottomColor: 'rgb(156 163 175 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(107 114 128 / var(--tw-border-opacity))', borderBottomColor: 'rgb(107 114 128 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(75 85 99 / var(--tw-border-opacity))', borderBottomColor: 'rgb(75 85 99 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(55 65 81 / var(--tw-border-opacity))', borderBottomColor: 'rgb(55 65 81 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(31 41 55 / var(--tw-border-opacity))', borderBottomColor: 'rgb(31 41 55 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(17 24 39 / var(--tw-border-opacity))', borderBottomColor: 'rgb(17 24 39 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(250 250 250 / var(--tw-border-opacity))', borderBottomColor: 'rgb(250 250 250 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(244 244 245 / var(--tw-border-opacity))', borderBottomColor: 'rgb(244 244 245 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(228 228 231 / var(--tw-border-opacity))', borderBottomColor: 'rgb(228 228 231 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(212 212 216 / var(--tw-border-opacity))', borderBottomColor: 'rgb(212 212 216 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(161 161 170 / var(--tw-border-opacity))', borderBottomColor: 'rgb(161 161 170 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(113 113 122 / var(--tw-border-opacity))', borderBottomColor: 'rgb(113 113 122 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(82 82 91 / var(--tw-border-opacity))', borderBottomColor: 'rgb(82 82 91 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(63 63 70 / var(--tw-border-opacity))', borderBottomColor: 'rgb(63 63 70 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(39 39 42 / var(--tw-border-opacity))', borderBottomColor: 'rgb(39 39 42 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(24 24 27 / var(--tw-border-opacity))', borderBottomColor: 'rgb(24 24 27 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(250 250 250 / var(--tw-border-opacity))', borderBottomColor: 'rgb(250 250 250 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(245 245 245 / var(--tw-border-opacity))', borderBottomColor: 'rgb(245 245 245 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(229 229 229 / var(--tw-border-opacity))', borderBottomColor: 'rgb(229 229 229 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(212 212 212 / var(--tw-border-opacity))', borderBottomColor: 'rgb(212 212 212 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(163 163 163 / var(--tw-border-opacity))', borderBottomColor: 'rgb(163 163 163 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(115 115 115 / var(--tw-border-opacity))', borderBottomColor: 'rgb(115 115 115 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(82 82 82 / var(--tw-border-opacity))', borderBottomColor: 'rgb(82 82 82 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(64 64 64 / var(--tw-border-opacity))', borderBottomColor: 'rgb(64 64 64 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(38 38 38 / var(--tw-border-opacity))', borderBottomColor: 'rgb(38 38 38 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(23 23 23 / var(--tw-border-opacity))', borderBottomColor: 'rgb(23 23 23 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(250 250 249 / var(--tw-border-opacity))', borderBottomColor: 'rgb(250 250 249 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(245 245 244 / var(--tw-border-opacity))', borderBottomColor: 'rgb(245 245 244 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(231 229 228 / var(--tw-border-opacity))', borderBottomColor: 'rgb(231 229 228 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(214 211 209 / var(--tw-border-opacity))', borderBottomColor: 'rgb(214 211 209 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(168 162 158 / var(--tw-border-opacity))', borderBottomColor: 'rgb(168 162 158 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(120 113 108 / var(--tw-border-opacity))', borderBottomColor: 'rgb(120 113 108 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(87 83 78 / var(--tw-border-opacity))', borderBottomColor: 'rgb(87 83 78 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(68 64 60 / var(--tw-border-opacity))', borderBottomColor: 'rgb(68 64 60 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(41 37 36 / var(--tw-border-opacity))', borderBottomColor: 'rgb(41 37 36 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(28 25 23 / var(--tw-border-opacity))', borderBottomColor: 'rgb(28 25 23 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(254 242 242 / var(--tw-border-opacity))', borderBottomColor: 'rgb(254 242 242 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(254 226 226 / var(--tw-border-opacity))', borderBottomColor: 'rgb(254 226 226 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(254 202 202 / var(--tw-border-opacity))', borderBottomColor: 'rgb(254 202 202 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(252 165 165 / var(--tw-border-opacity))', borderBottomColor: 'rgb(252 165 165 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(248 113 113 / var(--tw-border-opacity))', borderBottomColor: 'rgb(248 113 113 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(239 68 68 / var(--tw-border-opacity))', borderBottomColor: 'rgb(239 68 68 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(220 38 38 / var(--tw-border-opacity))', borderBottomColor: 'rgb(220 38 38 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(185 28 28 / var(--tw-border-opacity))', borderBottomColor: 'rgb(185 28 28 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(153 27 27 / var(--tw-border-opacity))', borderBottomColor: 'rgb(153 27 27 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(127 29 29 / var(--tw-border-opacity))', borderBottomColor: 'rgb(127 29 29 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(255 247 237 / var(--tw-border-opacity))', borderBottomColor: 'rgb(255 247 237 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(255 237 213 / var(--tw-border-opacity))', borderBottomColor: 'rgb(255 237 213 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(254 215 170 / var(--tw-border-opacity))', borderBottomColor: 'rgb(254 215 170 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(253 186 116 / var(--tw-border-opacity))', borderBottomColor: 'rgb(253 186 116 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(251 146 60 / var(--tw-border-opacity))', borderBottomColor: 'rgb(251 146 60 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(249 115 22 / var(--tw-border-opacity))', borderBottomColor: 'rgb(249 115 22 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(234 88 12 / var(--tw-border-opacity))', borderBottomColor: 'rgb(234 88 12 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(194 65 12 / var(--tw-border-opacity))', borderBottomColor: 'rgb(194 65 12 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(154 52 18 / var(--tw-border-opacity))', borderBottomColor: 'rgb(154 52 18 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(124 45 18 / var(--tw-border-opacity))', borderBottomColor: 'rgb(124 45 18 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(255 251 235 / var(--tw-border-opacity))', borderBottomColor: 'rgb(255 251 235 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(254 243 199 / var(--tw-border-opacity))', borderBottomColor: 'rgb(254 243 199 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(253 230 138 / var(--tw-border-opacity))', borderBottomColor: 'rgb(253 230 138 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(252 211 77 / var(--tw-border-opacity))', borderBottomColor: 'rgb(252 211 77 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(251 191 36 / var(--tw-border-opacity))', borderBottomColor: 'rgb(251 191 36 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(245 158 11 / var(--tw-border-opacity))', borderBottomColor: 'rgb(245 158 11 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(217 119 6 / var(--tw-border-opacity))', borderBottomColor: 'rgb(217 119 6 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(180 83 9 / var(--tw-border-opacity))', borderBottomColor: 'rgb(180 83 9 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(146 64 14 / var(--tw-border-opacity))', borderBottomColor: 'rgb(146 64 14 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(120 53 15 / var(--tw-border-opacity))', borderBottomColor: 'rgb(120 53 15 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(254 252 232 / var(--tw-border-opacity))', borderBottomColor: 'rgb(254 252 232 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(254 249 195 / var(--tw-border-opacity))', borderBottomColor: 'rgb(254 249 195 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(254 240 138 / var(--tw-border-opacity))', borderBottomColor: 'rgb(254 240 138 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(253 224 71 / var(--tw-border-opacity))', borderBottomColor: 'rgb(253 224 71 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(250 204 21 / var(--tw-border-opacity))', borderBottomColor: 'rgb(250 204 21 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(234 179 8 / var(--tw-border-opacity))', borderBottomColor: 'rgb(234 179 8 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(202 138 4 / var(--tw-border-opacity))', borderBottomColor: 'rgb(202 138 4 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(161 98 7 / var(--tw-border-opacity))', borderBottomColor: 'rgb(161 98 7 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(133 77 14 / var(--tw-border-opacity))', borderBottomColor: 'rgb(133 77 14 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(113 63 18 / var(--tw-border-opacity))', borderBottomColor: 'rgb(113 63 18 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(247 254 231 / var(--tw-border-opacity))', borderBottomColor: 'rgb(247 254 231 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(236 252 203 / var(--tw-border-opacity))', borderBottomColor: 'rgb(236 252 203 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(217 249 157 / var(--tw-border-opacity))', borderBottomColor: 'rgb(217 249 157 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(190 242 100 / var(--tw-border-opacity))', borderBottomColor: 'rgb(190 242 100 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(163 230 53 / var(--tw-border-opacity))', borderBottomColor: 'rgb(163 230 53 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(132 204 22 / var(--tw-border-opacity))', borderBottomColor: 'rgb(132 204 22 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(101 163 13 / var(--tw-border-opacity))', borderBottomColor: 'rgb(101 163 13 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(77 124 15 / var(--tw-border-opacity))', borderBottomColor: 'rgb(77 124 15 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(63 98 18 / var(--tw-border-opacity))', borderBottomColor: 'rgb(63 98 18 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(54 83 20 / var(--tw-border-opacity))', borderBottomColor: 'rgb(54 83 20 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(240 253 244 / var(--tw-border-opacity))', borderBottomColor: 'rgb(240 253 244 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(220 252 231 / var(--tw-border-opacity))', borderBottomColor: 'rgb(220 252 231 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(187 247 208 / var(--tw-border-opacity))', borderBottomColor: 'rgb(187 247 208 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(134 239 172 / var(--tw-border-opacity))', borderBottomColor: 'rgb(134 239 172 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(74 222 128 / var(--tw-border-opacity))', borderBottomColor: 'rgb(74 222 128 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(34 197 94 / var(--tw-border-opacity))', borderBottomColor: 'rgb(34 197 94 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(22 163 74 / var(--tw-border-opacity))', borderBottomColor: 'rgb(22 163 74 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(21 128 61 / var(--tw-border-opacity))', borderBottomColor: 'rgb(21 128 61 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(22 101 52 / var(--tw-border-opacity))', borderBottomColor: 'rgb(22 101 52 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(20 83 45 / var(--tw-border-opacity))', borderBottomColor: 'rgb(20 83 45 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(236 253 245 / var(--tw-border-opacity))', borderBottomColor: 'rgb(236 253 245 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(209 250 229 / var(--tw-border-opacity))', borderBottomColor: 'rgb(209 250 229 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(167 243 208 / var(--tw-border-opacity))', borderBottomColor: 'rgb(167 243 208 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(110 231 183 / var(--tw-border-opacity))', borderBottomColor: 'rgb(110 231 183 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(52 211 153 / var(--tw-border-opacity))', borderBottomColor: 'rgb(52 211 153 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(16 185 129 / var(--tw-border-opacity))', borderBottomColor: 'rgb(16 185 129 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(5 150 105 / var(--tw-border-opacity))', borderBottomColor: 'rgb(5 150 105 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(4 120 87 / var(--tw-border-opacity))', borderBottomColor: 'rgb(4 120 87 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(6 95 70 / var(--tw-border-opacity))', borderBottomColor: 'rgb(6 95 70 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(6 78 59 / var(--tw-border-opacity))', borderBottomColor: 'rgb(6 78 59 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(240 253 250 / var(--tw-border-opacity))', borderBottomColor: 'rgb(240 253 250 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(204 251 241 / var(--tw-border-opacity))', borderBottomColor: 'rgb(204 251 241 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(153 246 228 / var(--tw-border-opacity))', borderBottomColor: 'rgb(153 246 228 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(94 234 212 / var(--tw-border-opacity))', borderBottomColor: 'rgb(94 234 212 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(45 212 191 / var(--tw-border-opacity))', borderBottomColor: 'rgb(45 212 191 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(20 184 166 / var(--tw-border-opacity))', borderBottomColor: 'rgb(20 184 166 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(13 148 136 / var(--tw-border-opacity))', borderBottomColor: 'rgb(13 148 136 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(15 118 110 / var(--tw-border-opacity))', borderBottomColor: 'rgb(15 118 110 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(17 94 89 / var(--tw-border-opacity))', borderBottomColor: 'rgb(17 94 89 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(19 78 74 / var(--tw-border-opacity))', borderBottomColor: 'rgb(19 78 74 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(236 254 255 / var(--tw-border-opacity))', borderBottomColor: 'rgb(236 254 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(207 250 254 / var(--tw-border-opacity))', borderBottomColor: 'rgb(207 250 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(165 243 252 / var(--tw-border-opacity))', borderBottomColor: 'rgb(165 243 252 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(103 232 249 / var(--tw-border-opacity))', borderBottomColor: 'rgb(103 232 249 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(34 211 238 / var(--tw-border-opacity))', borderBottomColor: 'rgb(34 211 238 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(6 182 212 / var(--tw-border-opacity))', borderBottomColor: 'rgb(6 182 212 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(8 145 178 / var(--tw-border-opacity))', borderBottomColor: 'rgb(8 145 178 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(14 116 144 / var(--tw-border-opacity))', borderBottomColor: 'rgb(14 116 144 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(21 94 117 / var(--tw-border-opacity))', borderBottomColor: 'rgb(21 94 117 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(22 78 99 / var(--tw-border-opacity))', borderBottomColor: 'rgb(22 78 99 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(240 249 255 / var(--tw-border-opacity))', borderBottomColor: 'rgb(240 249 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(224 242 254 / var(--tw-border-opacity))', borderBottomColor: 'rgb(224 242 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(186 230 253 / var(--tw-border-opacity))', borderBottomColor: 'rgb(186 230 253 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(125 211 252 / var(--tw-border-opacity))', borderBottomColor: 'rgb(125 211 252 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(56 189 248 / var(--tw-border-opacity))', borderBottomColor: 'rgb(56 189 248 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(14 165 233 / var(--tw-border-opacity))', borderBottomColor: 'rgb(14 165 233 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(2 132 199 / var(--tw-border-opacity))', borderBottomColor: 'rgb(2 132 199 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(3 105 161 / var(--tw-border-opacity))', borderBottomColor: 'rgb(3 105 161 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(7 89 133 / var(--tw-border-opacity))', borderBottomColor: 'rgb(7 89 133 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(12 74 110 / var(--tw-border-opacity))', borderBottomColor: 'rgb(12 74 110 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(239 246 255 / var(--tw-border-opacity))', borderBottomColor: 'rgb(239 246 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(219 234 254 / var(--tw-border-opacity))', borderBottomColor: 'rgb(219 234 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(191 219 254 / var(--tw-border-opacity))', borderBottomColor: 'rgb(191 219 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(147 197 253 / var(--tw-border-opacity))', borderBottomColor: 'rgb(147 197 253 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(96 165 250 / var(--tw-border-opacity))', borderBottomColor: 'rgb(96 165 250 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(59 130 246 / var(--tw-border-opacity))', borderBottomColor: 'rgb(59 130 246 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(37 99 235 / var(--tw-border-opacity))', borderBottomColor: 'rgb(37 99 235 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(29 78 216 / var(--tw-border-opacity))', borderBottomColor: 'rgb(29 78 216 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(30 64 175 / var(--tw-border-opacity))', borderBottomColor: 'rgb(30 64 175 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(30 58 138 / var(--tw-border-opacity))', borderBottomColor: 'rgb(30 58 138 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(238 242 255 / var(--tw-border-opacity))', borderBottomColor: 'rgb(238 242 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(224 231 255 / var(--tw-border-opacity))', borderBottomColor: 'rgb(224 231 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(199 210 254 / var(--tw-border-opacity))', borderBottomColor: 'rgb(199 210 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(165 180 252 / var(--tw-border-opacity))', borderBottomColor: 'rgb(165 180 252 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(129 140 248 / var(--tw-border-opacity))', borderBottomColor: 'rgb(129 140 248 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(99 102 241 / var(--tw-border-opacity))', borderBottomColor: 'rgb(99 102 241 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(79 70 229 / var(--tw-border-opacity))', borderBottomColor: 'rgb(79 70 229 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(67 56 202 / var(--tw-border-opacity))', borderBottomColor: 'rgb(67 56 202 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(55 48 163 / var(--tw-border-opacity))', borderBottomColor: 'rgb(55 48 163 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(49 46 129 / var(--tw-border-opacity))', borderBottomColor: 'rgb(49 46 129 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(245 243 255 / var(--tw-border-opacity))', borderBottomColor: 'rgb(245 243 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(237 233 254 / var(--tw-border-opacity))', borderBottomColor: 'rgb(237 233 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(221 214 254 / var(--tw-border-opacity))', borderBottomColor: 'rgb(221 214 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(196 181 253 / var(--tw-border-opacity))', borderBottomColor: 'rgb(196 181 253 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(167 139 250 / var(--tw-border-opacity))', borderBottomColor: 'rgb(167 139 250 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(139 92 246 / var(--tw-border-opacity))', borderBottomColor: 'rgb(139 92 246 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(124 58 237 / var(--tw-border-opacity))', borderBottomColor: 'rgb(124 58 237 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(109 40 217 / var(--tw-border-opacity))', borderBottomColor: 'rgb(109 40 217 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(91 33 182 / var(--tw-border-opacity))', borderBottomColor: 'rgb(91 33 182 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(76 29 149 / var(--tw-border-opacity))', borderBottomColor: 'rgb(76 29 149 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(250 245 255 / var(--tw-border-opacity))', borderBottomColor: 'rgb(250 245 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(243 232 255 / var(--tw-border-opacity))', borderBottomColor: 'rgb(243 232 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(233 213 255 / var(--tw-border-opacity))', borderBottomColor: 'rgb(233 213 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(216 180 254 / var(--tw-border-opacity))', borderBottomColor: 'rgb(216 180 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(192 132 252 / var(--tw-border-opacity))', borderBottomColor: 'rgb(192 132 252 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(168 85 247 / var(--tw-border-opacity))', borderBottomColor: 'rgb(168 85 247 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(147 51 234 / var(--tw-border-opacity))', borderBottomColor: 'rgb(147 51 234 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(126 34 206 / var(--tw-border-opacity))', borderBottomColor: 'rgb(126 34 206 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(107 33 168 / var(--tw-border-opacity))', borderBottomColor: 'rgb(107 33 168 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(88 28 135 / var(--tw-border-opacity))', borderBottomColor: 'rgb(88 28 135 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(253 244 255 / var(--tw-border-opacity))', borderBottomColor: 'rgb(253 244 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(250 232 255 / var(--tw-border-opacity))', borderBottomColor: 'rgb(250 232 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(245 208 254 / var(--tw-border-opacity))', borderBottomColor: 'rgb(245 208 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(240 171 252 / var(--tw-border-opacity))', borderBottomColor: 'rgb(240 171 252 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(232 121 249 / var(--tw-border-opacity))', borderBottomColor: 'rgb(232 121 249 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(217 70 239 / var(--tw-border-opacity))', borderBottomColor: 'rgb(217 70 239 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(192 38 211 / var(--tw-border-opacity))', borderBottomColor: 'rgb(192 38 211 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(162 28 175 / var(--tw-border-opacity))', borderBottomColor: 'rgb(162 28 175 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(134 25 143 / var(--tw-border-opacity))', borderBottomColor: 'rgb(134 25 143 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(112 26 117 / var(--tw-border-opacity))', borderBottomColor: 'rgb(112 26 117 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(253 242 248 / var(--tw-border-opacity))', borderBottomColor: 'rgb(253 242 248 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(252 231 243 / var(--tw-border-opacity))', borderBottomColor: 'rgb(252 231 243 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(251 207 232 / var(--tw-border-opacity))', borderBottomColor: 'rgb(251 207 232 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(249 168 212 / var(--tw-border-opacity))', borderBottomColor: 'rgb(249 168 212 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(244 114 182 / var(--tw-border-opacity))', borderBottomColor: 'rgb(244 114 182 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(236 72 153 / var(--tw-border-opacity))', borderBottomColor: 'rgb(236 72 153 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(219 39 119 / var(--tw-border-opacity))', borderBottomColor: 'rgb(219 39 119 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(190 24 93 / var(--tw-border-opacity))', borderBottomColor: 'rgb(190 24 93 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(157 23 77 / var(--tw-border-opacity))', borderBottomColor: 'rgb(157 23 77 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(131 24 67 / var(--tw-border-opacity))', borderBottomColor: 'rgb(131 24 67 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(255 241 242 / var(--tw-border-opacity))', borderBottomColor: 'rgb(255 241 242 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(255 228 230 / var(--tw-border-opacity))', borderBottomColor: 'rgb(255 228 230 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(254 205 211 / var(--tw-border-opacity))', borderBottomColor: 'rgb(254 205 211 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(253 164 175 / var(--tw-border-opacity))', borderBottomColor: 'rgb(253 164 175 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(251 113 133 / var(--tw-border-opacity))', borderBottomColor: 'rgb(251 113 133 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(244 63 94 / var(--tw-border-opacity))', borderBottomColor: 'rgb(244 63 94 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(225 29 72 / var(--tw-border-opacity))', borderBottomColor: 'rgb(225 29 72 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(190 18 60 / var(--tw-border-opacity))', borderBottomColor: 'rgb(190 18 60 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(159 18 57 / var(--tw-border-opacity))', borderBottomColor: 'rgb(159 18 57 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(136 19 55 / var(--tw-border-opacity))', borderBottomColor: 'rgb(136 19 55 / var(--tw-border-opacity))', }) ;({ borderTopColor: 'inherit', }) ;({ borderTopColor: 'currentColor', }) ;({ borderTopColor: 'transparent', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(0 0 0 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(255 255 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(248 250 252 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(241 245 249 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(226 232 240 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(203 213 225 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(148 163 184 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(100 116 139 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(71 85 105 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(51 65 85 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(30 41 59 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(15 23 42 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(249 250 251 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(243 244 246 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(229 231 235 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(209 213 219 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(156 163 175 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(107 114 128 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(75 85 99 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(55 65 81 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(31 41 55 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(17 24 39 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(250 250 250 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(244 244 245 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(228 228 231 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(212 212 216 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(161 161 170 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(113 113 122 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(82 82 91 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(63 63 70 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(39 39 42 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(24 24 27 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(250 250 250 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(245 245 245 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(229 229 229 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(212 212 212 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(163 163 163 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(115 115 115 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(82 82 82 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(64 64 64 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(38 38 38 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(23 23 23 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(250 250 249 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(245 245 244 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(231 229 228 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(214 211 209 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(168 162 158 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(120 113 108 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(87 83 78 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(68 64 60 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(41 37 36 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(28 25 23 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(254 242 242 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(254 226 226 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(254 202 202 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(252 165 165 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(248 113 113 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(239 68 68 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(220 38 38 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(185 28 28 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(153 27 27 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(127 29 29 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(255 247 237 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(255 237 213 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(254 215 170 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(253 186 116 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(251 146 60 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(249 115 22 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(234 88 12 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(194 65 12 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(154 52 18 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(124 45 18 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(255 251 235 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(254 243 199 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(253 230 138 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(252 211 77 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(251 191 36 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(245 158 11 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(217 119 6 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(180 83 9 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(146 64 14 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(120 53 15 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(254 252 232 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(254 249 195 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(254 240 138 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(253 224 71 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(250 204 21 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(234 179 8 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(202 138 4 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(161 98 7 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(133 77 14 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(113 63 18 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(247 254 231 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(236 252 203 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(217 249 157 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(190 242 100 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(163 230 53 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(132 204 22 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(101 163 13 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(77 124 15 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(63 98 18 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(54 83 20 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(240 253 244 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(220 252 231 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(187 247 208 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(134 239 172 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(74 222 128 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(34 197 94 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(22 163 74 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(21 128 61 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(22 101 52 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(20 83 45 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(236 253 245 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(209 250 229 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(167 243 208 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(110 231 183 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(52 211 153 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(16 185 129 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(5 150 105 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(4 120 87 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(6 95 70 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(6 78 59 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(240 253 250 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(204 251 241 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(153 246 228 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(94 234 212 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(45 212 191 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(20 184 166 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(13 148 136 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(15 118 110 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(17 94 89 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(19 78 74 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(236 254 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(207 250 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(165 243 252 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(103 232 249 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(34 211 238 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(6 182 212 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(8 145 178 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(14 116 144 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(21 94 117 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(22 78 99 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(240 249 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(224 242 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(186 230 253 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(125 211 252 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(56 189 248 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(14 165 233 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(2 132 199 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(3 105 161 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(7 89 133 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(12 74 110 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(239 246 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(219 234 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(191 219 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(147 197 253 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(96 165 250 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(59 130 246 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(37 99 235 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(29 78 216 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(30 64 175 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(30 58 138 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(238 242 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(224 231 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(199 210 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(165 180 252 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(129 140 248 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(99 102 241 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(79 70 229 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(67 56 202 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(55 48 163 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(49 46 129 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(245 243 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(237 233 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(221 214 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(196 181 253 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(167 139 250 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(139 92 246 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(124 58 237 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(109 40 217 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(91 33 182 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(76 29 149 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(250 245 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(243 232 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(233 213 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(216 180 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(192 132 252 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(168 85 247 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(147 51 234 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(126 34 206 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(107 33 168 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(88 28 135 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(253 244 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(250 232 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(245 208 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(240 171 252 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(232 121 249 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(217 70 239 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(192 38 211 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(162 28 175 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(134 25 143 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(112 26 117 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(253 242 248 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(252 231 243 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(251 207 232 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(249 168 212 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(244 114 182 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(236 72 153 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(219 39 119 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(190 24 93 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(157 23 77 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(131 24 67 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(255 241 242 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(255 228 230 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(254 205 211 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(253 164 175 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(251 113 133 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(244 63 94 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(225 29 72 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(190 18 60 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(159 18 57 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(136 19 55 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(255 255 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(241 245 249 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(226 232 240 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(203 213 225 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(148 163 184 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(100 116 139 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(71 85 105 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(51 65 85 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(30 41 59 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(15 23 42 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(249 250 251 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(243 244 246 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(229 231 235 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(209 213 219 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(156 163 175 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(107 114 128 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(75 85 99 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(55 65 81 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(31 41 55 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(17 24 39 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(250 250 250 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(244 244 245 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(228 228 231 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(212 212 216 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(161 161 170 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(113 113 122 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(82 82 91 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(63 63 70 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(39 39 42 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(24 24 27 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(250 250 250 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(245 245 245 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(229 229 229 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(212 212 212 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(163 163 163 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(115 115 115 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(82 82 82 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(64 64 64 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(38 38 38 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(23 23 23 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(250 250 249 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(245 245 244 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(231 229 228 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(214 211 209 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(168 162 158 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(120 113 108 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(87 83 78 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(68 64 60 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(41 37 36 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(28 25 23 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(254 242 242 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(254 226 226 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(254 202 202 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(252 165 165 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(248 113 113 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(239 68 68 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(220 38 38 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(185 28 28 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(153 27 27 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(127 29 29 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(255 247 237 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(255 237 213 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(254 215 170 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(253 186 116 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(251 146 60 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(249 115 22 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(234 88 12 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(194 65 12 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(154 52 18 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(124 45 18 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(255 251 235 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(254 243 199 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(253 230 138 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(252 211 77 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(251 191 36 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(245 158 11 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(217 119 6 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(180 83 9 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(146 64 14 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(120 53 15 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(254 252 232 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(254 249 195 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(254 240 138 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(253 224 71 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(250 204 21 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(234 179 8 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(202 138 4 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(161 98 7 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(133 77 14 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(113 63 18 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(247 254 231 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(236 252 203 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(217 249 157 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(190 242 100 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(163 230 53 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(132 204 22 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(101 163 13 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(77 124 15 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(63 98 18 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(54 83 20 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(240 253 244 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(220 252 231 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(187 247 208 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(134 239 172 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(74 222 128 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(34 197 94 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(22 163 74 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(21 128 61 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(22 101 52 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(20 83 45 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(236 253 245 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(209 250 229 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(167 243 208 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(110 231 183 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(52 211 153 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(16 185 129 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(5 150 105 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(4 120 87 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(6 95 70 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(6 78 59 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(240 253 250 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(204 251 241 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(153 246 228 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(94 234 212 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(45 212 191 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(20 184 166 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(13 148 136 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(15 118 110 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(17 94 89 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(19 78 74 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(236 254 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(207 250 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(165 243 252 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(103 232 249 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(34 211 238 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(6 182 212 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(8 145 178 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(14 116 144 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(21 94 117 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(22 78 99 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(240 249 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(224 242 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(186 230 253 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(125 211 252 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(56 189 248 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(14 165 233 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(2 132 199 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(3 105 161 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(7 89 133 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(12 74 110 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(239 246 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(219 234 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(191 219 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(147 197 253 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(96 165 250 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(59 130 246 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(37 99 235 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(29 78 216 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(30 64 175 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(30 58 138 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(238 242 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(224 231 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(199 210 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(165 180 252 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(129 140 248 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(99 102 241 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(79 70 229 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(67 56 202 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(55 48 163 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(49 46 129 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(245 243 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(237 233 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(221 214 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(196 181 253 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(167 139 250 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(139 92 246 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(124 58 237 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(109 40 217 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(91 33 182 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(76 29 149 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(250 245 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(243 232 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(233 213 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(216 180 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(192 132 252 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(168 85 247 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(147 51 234 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(126 34 206 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(107 33 168 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(88 28 135 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(253 244 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(250 232 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(245 208 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(240 171 252 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(232 121 249 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(217 70 239 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(192 38 211 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(162 28 175 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(134 25 143 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(112 26 117 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(253 242 248 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(252 231 243 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(251 207 232 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(249 168 212 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(244 114 182 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(236 72 153 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(219 39 119 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(190 24 93 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(157 23 77 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(131 24 67 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(255 241 242 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(255 228 230 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(254 205 211 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(253 164 175 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(251 113 133 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(244 63 94 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(225 29 72 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(190 18 60 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(159 18 57 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(136 19 55 / var(--tw-border-opacity))', }) ;({ borderBottomColor: 'inherit', }) ;({ borderBottomColor: 'currentColor', }) ;({ borderBottomColor: 'transparent', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(0 0 0 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(255 255 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(248 250 252 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(241 245 249 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(226 232 240 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(203 213 225 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(148 163 184 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(100 116 139 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(71 85 105 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(51 65 85 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(30 41 59 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(15 23 42 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(249 250 251 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(243 244 246 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(229 231 235 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(209 213 219 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(156 163 175 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(107 114 128 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(75 85 99 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(55 65 81 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(31 41 55 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(17 24 39 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(250 250 250 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(244 244 245 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(228 228 231 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(212 212 216 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(161 161 170 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(113 113 122 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(82 82 91 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(63 63 70 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(39 39 42 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(24 24 27 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(250 250 250 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(245 245 245 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(229 229 229 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(212 212 212 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(163 163 163 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(115 115 115 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(82 82 82 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(64 64 64 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(38 38 38 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(23 23 23 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(250 250 249 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(245 245 244 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(231 229 228 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(214 211 209 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(168 162 158 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(120 113 108 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(87 83 78 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(68 64 60 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(41 37 36 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(28 25 23 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(254 242 242 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(254 226 226 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(254 202 202 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(252 165 165 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(248 113 113 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(239 68 68 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(220 38 38 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(185 28 28 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(153 27 27 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(127 29 29 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(255 247 237 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(255 237 213 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(254 215 170 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(253 186 116 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(251 146 60 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(249 115 22 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(234 88 12 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(194 65 12 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(154 52 18 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(124 45 18 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(255 251 235 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(254 243 199 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(253 230 138 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(252 211 77 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(251 191 36 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(245 158 11 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(217 119 6 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(180 83 9 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(146 64 14 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(120 53 15 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(254 252 232 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(254 249 195 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(254 240 138 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(253 224 71 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(250 204 21 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(234 179 8 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(202 138 4 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(161 98 7 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(133 77 14 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(113 63 18 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(247 254 231 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(236 252 203 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(217 249 157 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(190 242 100 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(163 230 53 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(132 204 22 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(101 163 13 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(77 124 15 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(63 98 18 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(54 83 20 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(240 253 244 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(220 252 231 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(187 247 208 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(134 239 172 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(74 222 128 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(34 197 94 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(22 163 74 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(21 128 61 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(22 101 52 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(20 83 45 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(236 253 245 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(209 250 229 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(167 243 208 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(110 231 183 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(52 211 153 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(16 185 129 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(5 150 105 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(4 120 87 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(6 95 70 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(6 78 59 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(240 253 250 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(204 251 241 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(153 246 228 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(94 234 212 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(45 212 191 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(20 184 166 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(13 148 136 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(15 118 110 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(17 94 89 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(19 78 74 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(236 254 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(207 250 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(165 243 252 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(103 232 249 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(34 211 238 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(6 182 212 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(8 145 178 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(14 116 144 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(21 94 117 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(22 78 99 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(240 249 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(224 242 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(186 230 253 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(125 211 252 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(56 189 248 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(14 165 233 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(2 132 199 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(3 105 161 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(7 89 133 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(12 74 110 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(239 246 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(219 234 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(191 219 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(147 197 253 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(96 165 250 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(59 130 246 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(37 99 235 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(29 78 216 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(30 64 175 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(30 58 138 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(238 242 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(224 231 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(199 210 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(165 180 252 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(129 140 248 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(99 102 241 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(79 70 229 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(67 56 202 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(55 48 163 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(49 46 129 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(245 243 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(237 233 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(221 214 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(196 181 253 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(167 139 250 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(139 92 246 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(124 58 237 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(109 40 217 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(91 33 182 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(76 29 149 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(250 245 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(243 232 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(233 213 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(216 180 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(192 132 252 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(168 85 247 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(147 51 234 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(126 34 206 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(107 33 168 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(88 28 135 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(253 244 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(250 232 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(245 208 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(240 171 252 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(232 121 249 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(217 70 239 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(192 38 211 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(162 28 175 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(134 25 143 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(112 26 117 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(253 242 248 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(252 231 243 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(251 207 232 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(249 168 212 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(244 114 182 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(236 72 153 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(219 39 119 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(190 24 93 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(157 23 77 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(131 24 67 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(255 241 242 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(255 228 230 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(254 205 211 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(253 164 175 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(251 113 133 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(244 63 94 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(225 29 72 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(190 18 60 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(159 18 57 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(136 19 55 / var(--tw-border-opacity))', }) ;({ borderLeftColor: 'inherit', }) ;({ borderLeftColor: 'currentColor', }) ;({ borderLeftColor: 'transparent', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(0 0 0 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(255 255 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(248 250 252 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(241 245 249 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(226 232 240 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(203 213 225 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(148 163 184 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(100 116 139 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(71 85 105 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(51 65 85 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(30 41 59 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(15 23 42 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(249 250 251 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(243 244 246 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(229 231 235 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(209 213 219 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(156 163 175 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(107 114 128 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(75 85 99 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(55 65 81 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(31 41 55 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(17 24 39 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(250 250 250 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(244 244 245 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(228 228 231 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(212 212 216 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(161 161 170 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(113 113 122 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(82 82 91 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(63 63 70 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(39 39 42 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(24 24 27 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(250 250 250 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(245 245 245 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(229 229 229 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(212 212 212 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(163 163 163 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(115 115 115 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(82 82 82 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(64 64 64 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(38 38 38 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(23 23 23 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(250 250 249 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(245 245 244 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(231 229 228 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(214 211 209 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(168 162 158 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(120 113 108 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(87 83 78 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(68 64 60 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(41 37 36 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(28 25 23 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(254 242 242 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(254 226 226 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(254 202 202 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(252 165 165 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(248 113 113 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(239 68 68 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(220 38 38 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(185 28 28 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(153 27 27 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(127 29 29 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(255 247 237 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(255 237 213 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(254 215 170 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(253 186 116 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(251 146 60 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(249 115 22 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(234 88 12 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(194 65 12 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(154 52 18 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(124 45 18 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(255 251 235 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(254 243 199 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(253 230 138 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(252 211 77 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(251 191 36 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(245 158 11 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(217 119 6 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(180 83 9 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(146 64 14 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(120 53 15 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(254 252 232 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(254 249 195 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(254 240 138 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(253 224 71 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(250 204 21 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(234 179 8 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(202 138 4 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(161 98 7 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(133 77 14 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(113 63 18 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(247 254 231 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(236 252 203 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(217 249 157 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(190 242 100 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(163 230 53 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(132 204 22 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(101 163 13 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(77 124 15 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(63 98 18 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(54 83 20 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(240 253 244 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(220 252 231 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(187 247 208 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(134 239 172 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(74 222 128 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(34 197 94 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(22 163 74 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(21 128 61 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(22 101 52 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(20 83 45 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(236 253 245 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(209 250 229 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(167 243 208 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(110 231 183 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(52 211 153 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(16 185 129 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(5 150 105 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(4 120 87 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(6 95 70 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(6 78 59 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(240 253 250 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(204 251 241 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(153 246 228 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(94 234 212 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(45 212 191 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(20 184 166 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(13 148 136 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(15 118 110 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(17 94 89 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(19 78 74 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(236 254 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(207 250 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(165 243 252 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(103 232 249 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(34 211 238 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(6 182 212 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(8 145 178 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(14 116 144 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(21 94 117 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(22 78 99 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(240 249 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(224 242 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(186 230 253 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(125 211 252 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(56 189 248 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(14 165 233 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(2 132 199 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(3 105 161 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(7 89 133 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(12 74 110 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(239 246 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(219 234 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(191 219 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(147 197 253 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(96 165 250 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(59 130 246 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(37 99 235 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(29 78 216 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(30 64 175 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(30 58 138 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(238 242 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(224 231 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(199 210 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(165 180 252 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(129 140 248 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(99 102 241 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(79 70 229 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(67 56 202 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(55 48 163 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(49 46 129 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(245 243 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(237 233 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(221 214 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(196 181 253 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(167 139 250 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(139 92 246 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(124 58 237 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(109 40 217 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(91 33 182 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(76 29 149 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(250 245 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(243 232 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(233 213 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(216 180 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(192 132 252 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(168 85 247 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(147 51 234 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(126 34 206 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(107 33 168 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(88 28 135 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(253 244 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(250 232 255 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(245 208 254 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(240 171 252 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(232 121 249 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(217 70 239 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(192 38 211 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(162 28 175 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(134 25 143 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(112 26 117 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(253 242 248 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(252 231 243 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(251 207 232 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(249 168 212 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(244 114 182 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(236 72 153 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(219 39 119 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(190 24 93 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(157 23 77 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(131 24 67 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(255 241 242 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(255 228 230 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(254 205 211 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(253 164 175 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(251 113 133 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(244 63 94 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(225 29 72 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(190 18 60 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(159 18 57 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(136 19 55 / var(--tw-border-opacity))', }) ;({ borderWidth: '4px', borderColor: 'rgb(99 102 241 / 1)', }) ;({ borderWidth: '4px', borderColor: 'rgb(99 102 241 / 0.75)', }) ;({ borderWidth: '4px', borderColor: 'rgb(99 102 241 / 0.5)', }) ;({ borderWidth: '4px', borderColor: 'rgb(79 70 229 / .55)', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(36 60 90 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(255 0 0 / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(255 0 0 / var(--tw-border-opacity))', }) ;({ borderColor: 'rgb(239 68 68 / 0.25)', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(0 0 0 / var(--tw-border-opacity))', }) ;({ borderColor: 'rgb(0 0 0 / 0.25)', }) ;({ borderColor: 'rgb(0 0 0 / .555)', }) ;({ borderColor: 'rgb(0 0 0 / var(--myvar))', }) ;({ borderColor: 'rgb(239 68 68 / .555)', }) ;({ borderColor: 'rgb(239 68 68 / var(--myvar))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(239 68 68 / var(--tw-border-opacity))', }) ;({ borderColor: 'rgb(239 68 68 / 0.2)', }) ;({ borderColor: 'rgba(219, 0, 255, 0.25)', }) ;({ borderColor: 'rgba(219, 0, 255, .555)', }) ;({ borderColor: 'rgba(219, 0, 255, var(--myvar))', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(219 0 255 / var(--tw-border-opacity))', }) ;({ borderColor: 'rgb(219 0 255 / 0.2)', }) ;({ borderColor: 'hsla(235, 100%, 50%, .5)', }) ;({ borderColor: 'rgba(255, 255, 255, 0)', }) ;({ borderColor: 'red black white rgb(255, 255,255,0)', }) ;({ borderColor: 'red black blue', }) ;({ borderColor: 'red black', }) ;({ '--tw-border-opacity': '1', borderColor: 'hsl(50 50% 50% / var(--tw-border-opacity))', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(0 128 0 / var(--tw-border-opacity))', }) ;({ borderTopColor: 'rgba(255, 255, 255, .45)', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(0 128 0 / var(--tw-border-opacity))', }) ;({ borderRightColor: 'rgba(255, 255, 255, .45)', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(0 128 0 / var(--tw-border-opacity))', }) ;({ borderBottomColor: 'rgba(255, 255, 255, .45)', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(0 128 0 / var(--tw-border-opacity))', }) ;({ borderLeftColor: 'rgba(255, 255, 255, .45)', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(0 128 0 / var(--tw-border-opacity))', }) ;({ borderColor: 'rgba(255, 255, 255, .45)', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(0 128 0 / var(--tw-border-opacity))', borderRightColor: 'rgb(0 128 0 / var(--tw-border-opacity))', }) ;({ borderTopColor: 'rgba(255, 255, 255, .45)', borderBottomColor: 'rgba(255, 255, 255, .45)', }) ;({ '--tw-border-opacity': '1', borderColor: 'rgb(0 0 0 / var(--tw-border-opacity))', borderInlineEndColor: 'rgb(248 113 113 / var(--tw-border-opacity))', borderInlineStartColor: 'rgb(34 197 94 / var(--tw-border-opacity))', }) `; exports[`twin.macro borderOpacity.tsx: borderOpacity.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/border-opacity // Deprecated tw\`border-opacity-0\` tw\`border-opacity-5\` tw\`border-opacity-10\` tw\`border-opacity-20\` tw\`border-opacity-25\` tw\`border-opacity-30\` tw\`border-opacity-40\` tw\`border-opacity-50\` tw\`border-opacity-60\` tw\`border-opacity-70\` tw\`border-opacity-75\` tw\`border-opacity-80\` tw\`border-opacity-90\` tw\`border-opacity-95\` tw\`border-opacity-100\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/border-opacity // Deprecated ;({ '--tw-border-opacity': '0', }) ;({ '--tw-border-opacity': '0.05', }) ;({ '--tw-border-opacity': '0.1', }) ;({ '--tw-border-opacity': '0.2', }) ;({ '--tw-border-opacity': '0.25', }) ;({ '--tw-border-opacity': '0.3', }) ;({ '--tw-border-opacity': '0.4', }) ;({ '--tw-border-opacity': '0.5', }) ;({ '--tw-border-opacity': '0.6', }) ;({ '--tw-border-opacity': '0.7', }) ;({ '--tw-border-opacity': '0.75', }) ;({ '--tw-border-opacity': '0.8', }) ;({ '--tw-border-opacity': '0.9', }) ;({ '--tw-border-opacity': '0.95', }) ;({ '--tw-border-opacity': '1', }) `; exports[`twin.macro borderRadius.tsx: borderRadius.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/border-radius theme\`borderRadius.\` tw\`rounded-none\` tw\`rounded-sm\` tw\`rounded\` tw\`rounded-md\` tw\`rounded-lg\` tw\`rounded-xl\` tw\`rounded-2xl\` tw\`rounded-3xl\` tw\`rounded-full\` tw\`rounded-t-none\` tw\`rounded-r-none\` tw\`rounded-b-none\` tw\`rounded-l-none\` tw\`rounded-t-sm\` tw\`rounded-r-sm\` tw\`rounded-b-sm\` tw\`rounded-l-sm\` tw\`rounded-t\` tw\`rounded-r\` tw\`rounded-b\` tw\`rounded-l\` tw\`rounded-t-lg\` tw\`rounded-r-lg\` tw\`rounded-b-lg\` tw\`rounded-l-lg\` tw\`rounded-t-xl\` tw\`rounded-r-xl\` tw\`rounded-b-xl\` tw\`rounded-l-xl\` tw\`rounded-t-2xl\` tw\`rounded-r-2xl\` tw\`rounded-b-2xl\` tw\`rounded-l-2xl\` tw\`rounded-t-3xl\` tw\`rounded-r-3xl\` tw\`rounded-b-3xl\` tw\`rounded-l-3xl\` tw\`rounded-t-full\` tw\`rounded-r-full\` tw\`rounded-b-full\` tw\`rounded-l-full\` tw\`rounded-tl-none\` tw\`rounded-tr-none\` tw\`rounded-br-none\` tw\`rounded-bl-none\` tw\`rounded-tl-sm\` tw\`rounded-tr-sm\` tw\`rounded-br-sm\` tw\`rounded-bl-sm\` tw\`rounded-tl\` tw\`rounded-tr\` tw\`rounded-br\` tw\`rounded-bl\` tw\`rounded-tl-lg\` tw\`rounded-tr-lg\` tw\`rounded-br-lg\` tw\`rounded-bl-lg\` tw\`rounded-tl-xl\` tw\`rounded-tr-xl\` tw\`rounded-br-xl\` tw\`rounded-bl-xl\` tw\`rounded-tl-2xl\` tw\`rounded-tr-2xl\` tw\`rounded-br-2xl\` tw\`rounded-bl-2xl\` tw\`rounded-tl-3xl\` tw\`rounded-tr-3xl\` tw\`rounded-br-3xl\` tw\`rounded-bl-3xl\` tw\`rounded-tl-full\` tw\`rounded-tr-full\` tw\`rounded-br-full\` tw\`rounded-bl-full\` tw\`rounded-[12px]\` tw\`rounded-t-[var(--radius)] rounded-r-[var(--radius)] rounded-b-[var(--radius)] rounded-l-[var(--radius)]\` tw\`rounded-tr-[var(--radius)] rounded-br-[var(--radius)] rounded-bl-[var(--radius)] rounded-tl-[var(--radius)]\` tw\`rounded-s rounded-e rounded-ss rounded-es\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/border-radius ;({ none: '0px', sm: '0.125rem', DEFAULT: '0.25rem', md: '0.375rem', lg: '0.5rem', xl: '0.75rem', '2xl': '1rem', '3xl': '1.5rem', full: '9999px', }) ;({ borderRadius: '0px', }) ;({ borderRadius: '0.125rem', }) ;({ borderRadius: '0.25rem', }) ;({ borderRadius: '0.375rem', }) ;({ borderRadius: '0.5rem', }) ;({ borderRadius: '0.75rem', }) ;({ borderRadius: '1rem', }) ;({ borderRadius: '1.5rem', }) ;({ borderRadius: '9999px', }) ;({ borderTopLeftRadius: '0px', borderTopRightRadius: '0px', }) ;({ borderTopRightRadius: '0px', borderBottomRightRadius: '0px', }) ;({ borderBottomRightRadius: '0px', borderBottomLeftRadius: '0px', }) ;({ borderTopLeftRadius: '0px', borderBottomLeftRadius: '0px', }) ;({ borderTopLeftRadius: '0.125rem', borderTopRightRadius: '0.125rem', }) ;({ borderTopRightRadius: '0.125rem', borderBottomRightRadius: '0.125rem', }) ;({ borderBottomRightRadius: '0.125rem', borderBottomLeftRadius: '0.125rem', }) ;({ borderTopLeftRadius: '0.125rem', borderBottomLeftRadius: '0.125rem', }) ;({ borderTopLeftRadius: '0.25rem', borderTopRightRadius: '0.25rem', }) ;({ borderTopRightRadius: '0.25rem', borderBottomRightRadius: '0.25rem', }) ;({ borderBottomRightRadius: '0.25rem', borderBottomLeftRadius: '0.25rem', }) ;({ borderTopLeftRadius: '0.25rem', borderBottomLeftRadius: '0.25rem', }) ;({ borderTopLeftRadius: '0.5rem', borderTopRightRadius: '0.5rem', }) ;({ borderTopRightRadius: '0.5rem', borderBottomRightRadius: '0.5rem', }) ;({ borderBottomRightRadius: '0.5rem', borderBottomLeftRadius: '0.5rem', }) ;({ borderTopLeftRadius: '0.5rem', borderBottomLeftRadius: '0.5rem', }) ;({ borderTopLeftRadius: '0.75rem', borderTopRightRadius: '0.75rem', }) ;({ borderTopRightRadius: '0.75rem', borderBottomRightRadius: '0.75rem', }) ;({ borderBottomRightRadius: '0.75rem', borderBottomLeftRadius: '0.75rem', }) ;({ borderTopLeftRadius: '0.75rem', borderBottomLeftRadius: '0.75rem', }) ;({ borderTopLeftRadius: '1rem', borderTopRightRadius: '1rem', }) ;({ borderTopRightRadius: '1rem', borderBottomRightRadius: '1rem', }) ;({ borderBottomRightRadius: '1rem', borderBottomLeftRadius: '1rem', }) ;({ borderTopLeftRadius: '1rem', borderBottomLeftRadius: '1rem', }) ;({ borderTopLeftRadius: '1.5rem', borderTopRightRadius: '1.5rem', }) ;({ borderTopRightRadius: '1.5rem', borderBottomRightRadius: '1.5rem', }) ;({ borderBottomRightRadius: '1.5rem', borderBottomLeftRadius: '1.5rem', }) ;({ borderTopLeftRadius: '1.5rem', borderBottomLeftRadius: '1.5rem', }) ;({ borderTopLeftRadius: '9999px', borderTopRightRadius: '9999px', }) ;({ borderTopRightRadius: '9999px', borderBottomRightRadius: '9999px', }) ;({ borderBottomRightRadius: '9999px', borderBottomLeftRadius: '9999px', }) ;({ borderTopLeftRadius: '9999px', borderBottomLeftRadius: '9999px', }) ;({ borderTopLeftRadius: '0px', }) ;({ borderTopRightRadius: '0px', }) ;({ borderBottomRightRadius: '0px', }) ;({ borderBottomLeftRadius: '0px', }) ;({ borderTopLeftRadius: '0.125rem', }) ;({ borderTopRightRadius: '0.125rem', }) ;({ borderBottomRightRadius: '0.125rem', }) ;({ borderBottomLeftRadius: '0.125rem', }) ;({ borderTopLeftRadius: '0.25rem', }) ;({ borderTopRightRadius: '0.25rem', }) ;({ borderBottomRightRadius: '0.25rem', }) ;({ borderBottomLeftRadius: '0.25rem', }) ;({ borderTopLeftRadius: '0.5rem', }) ;({ borderTopRightRadius: '0.5rem', }) ;({ borderBottomRightRadius: '0.5rem', }) ;({ borderBottomLeftRadius: '0.5rem', }) ;({ borderTopLeftRadius: '0.75rem', }) ;({ borderTopRightRadius: '0.75rem', }) ;({ borderBottomRightRadius: '0.75rem', }) ;({ borderBottomLeftRadius: '0.75rem', }) ;({ borderTopLeftRadius: '1rem', }) ;({ borderTopRightRadius: '1rem', }) ;({ borderBottomRightRadius: '1rem', }) ;({ borderBottomLeftRadius: '1rem', }) ;({ borderTopLeftRadius: '1.5rem', }) ;({ borderTopRightRadius: '1.5rem', }) ;({ borderBottomRightRadius: '1.5rem', }) ;({ borderBottomLeftRadius: '1.5rem', }) ;({ borderTopLeftRadius: '9999px', }) ;({ borderTopRightRadius: '9999px', }) ;({ borderBottomRightRadius: '9999px', }) ;({ borderBottomLeftRadius: '9999px', }) ;({ borderRadius: '12px', }) ;({ borderBottomRightRadius: 'var(--radius)', borderBottomLeftRadius: 'var(--radius)', borderTopLeftRadius: 'var(--radius)', borderTopRightRadius: 'var(--radius)', }) ;({ borderBottomLeftRadius: 'var(--radius)', borderBottomRightRadius: 'var(--radius)', borderTopLeftRadius: 'var(--radius)', borderTopRightRadius: 'var(--radius)', }) ;({ borderStartEndRadius: '0.25rem', borderEndEndRadius: '0.25rem', borderStartStartRadius: '0.25rem', borderEndStartRadius: '0.25rem', }) `; exports[`twin.macro borderSpacing.tsx: borderSpacing.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/border-spacing theme\`borderSpacing\` tw\`border-spacing-0\` tw\`border-spacing-x-0\` tw\`border-spacing-y-0\` tw\`border-spacing-px\` tw\`border-spacing-x-px\` tw\`border-spacing-y-px\` tw\`border-spacing-0.5\` tw\`border-spacing-x-0.5\` tw\`border-spacing-y-0.5\` tw\`border-spacing-1\` tw\`border-spacing-x-1\` tw\`border-spacing-y-1\` tw\`border-spacing-1.5\` tw\`border-spacing-x-1.5\` tw\`border-spacing-y-1.5\` tw\`border-spacing-2\` tw\`border-spacing-x-2\` tw\`border-spacing-y-2\` tw\`border-spacing-2.5\` tw\`border-spacing-x-2.5\` tw\`border-spacing-y-2.5\` tw\`border-spacing-3\` tw\`border-spacing-x-3\` tw\`border-spacing-y-3\` tw\`border-spacing-3.5\` tw\`border-spacing-x-3.5\` tw\`border-spacing-y-3.5\` tw\`border-spacing-4\` tw\`border-spacing-x-4\` tw\`border-spacing-y-4\` tw\`border-spacing-5\` tw\`border-spacing-x-5\` tw\`border-spacing-y-5\` tw\`border-spacing-6\` tw\`border-spacing-x-6\` tw\`border-spacing-y-6\` tw\`border-spacing-7\` tw\`border-spacing-x-7\` tw\`border-spacing-y-7\` tw\`border-spacing-8\` tw\`border-spacing-x-8\` tw\`border-spacing-y-8\` tw\`border-spacing-9\` tw\`border-spacing-x-9\` tw\`border-spacing-y-9\` tw\`border-spacing-10\` tw\`border-spacing-x-10\` tw\`border-spacing-y-10\` tw\`border-spacing-11\` tw\`border-spacing-x-11\` tw\`border-spacing-y-11\` tw\`border-spacing-12\` tw\`border-spacing-x-12\` tw\`border-spacing-y-12\` tw\`border-spacing-14\` tw\`border-spacing-x-14\` tw\`border-spacing-y-14\` tw\`border-spacing-16\` tw\`border-spacing-x-16\` tw\`border-spacing-y-16\` tw\`border-spacing-20\` tw\`border-spacing-x-20\` tw\`border-spacing-y-20\` tw\`border-spacing-24\` tw\`border-spacing-x-24\` tw\`border-spacing-y-24\` tw\`border-spacing-28\` tw\`border-spacing-x-28\` tw\`border-spacing-y-28\` tw\`border-spacing-32\` tw\`border-spacing-x-32\` tw\`border-spacing-y-32\` tw\`border-spacing-36\` tw\`border-spacing-x-36\` tw\`border-spacing-y-36\` tw\`border-spacing-40\` tw\`border-spacing-x-40\` tw\`border-spacing-y-40\` tw\`border-spacing-44\` tw\`border-spacing-x-44\` tw\`border-spacing-y-44\` tw\`border-spacing-48\` tw\`border-spacing-x-48\` tw\`border-spacing-y-48\` tw\`border-spacing-52\` tw\`border-spacing-x-52\` tw\`border-spacing-y-52\` tw\`border-spacing-56\` tw\`border-spacing-x-56\` tw\`border-spacing-y-56\` tw\`border-spacing-60\` tw\`border-spacing-x-60\` tw\`border-spacing-y-60\` tw\`border-spacing-64\` tw\`border-spacing-x-64\` tw\`border-spacing-y-64\` tw\`border-spacing-72\` tw\`border-spacing-x-72\` tw\`border-spacing-y-72\` tw\`border-spacing-80\` tw\`border-spacing-x-80\` tw\`border-spacing-y-80\` tw\`border-spacing-96\` tw\`border-spacing-x-96\` tw\`border-spacing-y-96\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/border-spacing ;({ 0: '0px', 1: '0.25rem', 2: '0.5rem', 3: '0.75rem', 4: '1rem', 5: '1.25rem', 6: '1.5rem', 7: '1.75rem', 8: '2rem', 9: '2.25rem', 10: '2.5rem', 11: '2.75rem', 12: '3rem', 14: '3.5rem', 16: '4rem', 20: '5rem', 24: '6rem', 28: '7rem', 32: '8rem', 36: '9rem', 40: '10rem', 44: '11rem', 48: '12rem', 52: '13rem', 56: '14rem', 60: '15rem', 64: '16rem', 72: '18rem', 80: '20rem', 96: '24rem', px: '1px', 0.5: '0.125rem', 1.5: '0.375rem', 2.5: '0.625rem', 3.5: '0.875rem', }) ;({ '--tw-border-spacing-x': '0px', '--tw-border-spacing-y': '0px', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '0px', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-y': '0px', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '1px', '--tw-border-spacing-y': '1px', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '1px', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-y': '1px', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '0.125rem', '--tw-border-spacing-y': '0.125rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '0.125rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-y': '0.125rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '0.25rem', '--tw-border-spacing-y': '0.25rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '0.25rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-y': '0.25rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '0.375rem', '--tw-border-spacing-y': '0.375rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '0.375rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-y': '0.375rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '0.5rem', '--tw-border-spacing-y': '0.5rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '0.5rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-y': '0.5rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '0.625rem', '--tw-border-spacing-y': '0.625rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '0.625rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-y': '0.625rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '0.75rem', '--tw-border-spacing-y': '0.75rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '0.75rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-y': '0.75rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '0.875rem', '--tw-border-spacing-y': '0.875rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '0.875rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-y': '0.875rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '1rem', '--tw-border-spacing-y': '1rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '1rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-y': '1rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '1.25rem', '--tw-border-spacing-y': '1.25rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '1.25rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-y': '1.25rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '1.5rem', '--tw-border-spacing-y': '1.5rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '1.5rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-y': '1.5rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '1.75rem', '--tw-border-spacing-y': '1.75rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '1.75rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-y': '1.75rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '2rem', '--tw-border-spacing-y': '2rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '2rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-y': '2rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '2.25rem', '--tw-border-spacing-y': '2.25rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '2.25rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-y': '2.25rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '2.5rem', '--tw-border-spacing-y': '2.5rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '2.5rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-y': '2.5rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '2.75rem', '--tw-border-spacing-y': '2.75rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '2.75rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-y': '2.75rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '3rem', '--tw-border-spacing-y': '3rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '3rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-y': '3rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '3.5rem', '--tw-border-spacing-y': '3.5rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '3.5rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-y': '3.5rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '4rem', '--tw-border-spacing-y': '4rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '4rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-y': '4rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '5rem', '--tw-border-spacing-y': '5rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '5rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-y': '5rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '6rem', '--tw-border-spacing-y': '6rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '6rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-y': '6rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '7rem', '--tw-border-spacing-y': '7rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '7rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-y': '7rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '8rem', '--tw-border-spacing-y': '8rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '8rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-y': '8rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '9rem', '--tw-border-spacing-y': '9rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '9rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-y': '9rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '10rem', '--tw-border-spacing-y': '10rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '10rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-y': '10rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '11rem', '--tw-border-spacing-y': '11rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '11rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-y': '11rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '12rem', '--tw-border-spacing-y': '12rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '12rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-y': '12rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '13rem', '--tw-border-spacing-y': '13rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '13rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-y': '13rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '14rem', '--tw-border-spacing-y': '14rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '14rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-y': '14rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '15rem', '--tw-border-spacing-y': '15rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '15rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-y': '15rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '16rem', '--tw-border-spacing-y': '16rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '16rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-y': '16rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '18rem', '--tw-border-spacing-y': '18rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '18rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-y': '18rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '20rem', '--tw-border-spacing-y': '20rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '20rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-y': '20rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '24rem', '--tw-border-spacing-y': '24rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-x': '24rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) ;({ '--tw-border-spacing-y': '24rem', borderSpacing: 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)', }) `; exports[`twin.macro borderStyle.tsx: borderStyle.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/border-style tw\`border-solid\` tw\`border-dashed\` tw\`border-dotted\` tw\`border-double\` tw\`border-hidden\` tw\`border-none\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/border-style ;({ borderStyle: 'solid', }) ;({ borderStyle: 'dashed', }) ;({ borderStyle: 'dotted', }) ;({ borderStyle: 'double', }) ;({ borderStyle: 'hidden', }) ;({ borderStyle: 'none', }) `; exports[`twin.macro borderWidth.tsx: borderWidth.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/border-width theme\`borderWidth.\` tw\`border-0\` tw\`border-2\` tw\`border-4\` tw\`border-8\` tw\`border\` tw\`border-x-0\` tw\`border-x-2\` tw\`border-x-4\` tw\`border-x-8\` tw\`border-x\` tw\`border-y-0\` tw\`border-y-2\` tw\`border-y-4\` tw\`border-y-8\` tw\`border-y\` tw\`border-t-0\` tw\`border-t-2\` tw\`border-t-4\` tw\`border-t-8\` tw\`border-t\` tw\`border-r-0\` tw\`border-r-2\` tw\`border-r-4\` tw\`border-r-8\` tw\`border-r\` tw\`border-b-0\` tw\`border-b-2\` tw\`border-b-4\` tw\`border-b-8\` tw\`border-b\` tw\`border-l-0\` tw\`border-l-2\` tw\`border-l-4\` tw\`border-l-8\` tw\`border-l\` tw\`border-[2.5px]\` tw\`border-t-[2.5px]\` tw\`border-t-[length:10px]\` tw\`border-r-[length:10px]\` tw\`border-b-[length:10px]\` tw\`border-l-[length:10px]\` tw\`border-l-[length:10px]\` tw\`border-x-[length:10px]\` tw\`border-y-[length:10px]\` tw\`border-[length:10px]\` tw\`border-2 border-s-0 border-e-4\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/border-width ;({ 0: '0px', 2: '2px', 4: '4px', 8: '8px', DEFAULT: '1px', }) ;({ borderWidth: '0px', }) ;({ borderWidth: '2px', }) ;({ borderWidth: '4px', }) ;({ borderWidth: '8px', }) ;({ borderWidth: '1px', }) ;({ borderLeftWidth: '0px', borderRightWidth: '0px', }) ;({ borderLeftWidth: '2px', borderRightWidth: '2px', }) ;({ borderLeftWidth: '4px', borderRightWidth: '4px', }) ;({ borderLeftWidth: '8px', borderRightWidth: '8px', }) ;({ borderLeftWidth: '1px', borderRightWidth: '1px', }) ;({ borderTopWidth: '0px', borderBottomWidth: '0px', }) ;({ borderTopWidth: '2px', borderBottomWidth: '2px', }) ;({ borderTopWidth: '4px', borderBottomWidth: '4px', }) ;({ borderTopWidth: '8px', borderBottomWidth: '8px', }) ;({ borderTopWidth: '1px', borderBottomWidth: '1px', }) ;({ borderTopWidth: '0px', }) ;({ borderTopWidth: '2px', }) ;({ borderTopWidth: '4px', }) ;({ borderTopWidth: '8px', }) ;({ borderTopWidth: '1px', }) ;({ borderRightWidth: '0px', }) ;({ borderRightWidth: '2px', }) ;({ borderRightWidth: '4px', }) ;({ borderRightWidth: '8px', }) ;({ borderRightWidth: '1px', }) ;({ borderBottomWidth: '0px', }) ;({ borderBottomWidth: '2px', }) ;({ borderBottomWidth: '4px', }) ;({ borderBottomWidth: '8px', }) ;({ borderBottomWidth: '1px', }) ;({ borderLeftWidth: '0px', }) ;({ borderLeftWidth: '2px', }) ;({ borderLeftWidth: '4px', }) ;({ borderLeftWidth: '8px', }) ;({ borderLeftWidth: '1px', }) ;({ borderWidth: '2.5px', }) ;({ borderTopWidth: '2.5px', }) ;({ borderTopWidth: '10px', }) ;({ borderRightWidth: '10px', }) ;({ borderBottomWidth: '10px', }) ;({ borderLeftWidth: '10px', }) ;({ borderLeftWidth: '10px', }) ;({ borderLeftWidth: '10px', borderRightWidth: '10px', }) ;({ borderTopWidth: '10px', borderBottomWidth: '10px', }) ;({ borderWidth: '10px', }) ;({ borderWidth: '2px', borderInlineEndWidth: '4px', borderInlineStartWidth: '0px', }) `; exports[`twin.macro boxDecorationBreak.tsx: boxDecorationBreak.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/box-decoration-break tw\`decoration-clone\` tw\`decoration-slice\` tw\`box-decoration-clone\` tw\`box-decoration-slice\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/box-decoration-break ;({ boxDecorationBreak: 'clone', }) ;({ boxDecorationBreak: 'slice', }) ;({ boxDecorationBreak: 'clone', }) ;({ boxDecorationBreak: 'slice', }) `; exports[`twin.macro boxShadow.tsx: boxShadow.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/box-shadow theme\`boxShadow.\` tw\`shadow-sm\` tw\`shadow\` tw\`shadow-md\` tw\`shadow-lg\` tw\`shadow-xl\` tw\`shadow-2xl\` tw\`shadow-inner\` tw\`shadow-none\` tw\`shadow-[0 35px 60px -15px rgba(0,0,0,0.3)]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/box-shadow ;({ sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)', DEFAULT: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)', md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)', lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)', xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)', '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)', inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)', none: 'none', }) ;({ '--tw-shadow': '0 1px 2px 0 rgb(0 0 0 / 0.05)', '--tw-shadow-colored': '0 1px 2px 0 var(--tw-shadow-color)', boxShadow: 'var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)', }) ;({ '--tw-shadow': '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)', '--tw-shadow-colored': '0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color)', boxShadow: 'var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)', }) ;({ '--tw-shadow': '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)', '--tw-shadow-colored': '0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color)', boxShadow: 'var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)', }) ;({ '--tw-shadow': '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)', '--tw-shadow-colored': '0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color)', boxShadow: 'var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)', }) ;({ '--tw-shadow': '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)', '--tw-shadow-colored': '0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color)', boxShadow: 'var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)', }) ;({ '--tw-shadow': '0 25px 50px -12px rgb(0 0 0 / 0.25)', '--tw-shadow-colored': '0 25px 50px -12px var(--tw-shadow-color)', boxShadow: 'var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)', }) ;({ '--tw-shadow': 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)', '--tw-shadow-colored': 'inset 0 2px 4px 0 var(--tw-shadow-color)', boxShadow: 'var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)', }) ;({ '--tw-shadow': '0 0 #0000', '--tw-shadow-colored': '0 0 #0000', boxShadow: 'var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)', }) ;({ '--tw-shadow': '0 35px 60px -15px rgba(0,0,0,0.3)', '--tw-shadow-colored': '0 35px 60px -15px var(--tw-shadow-color)', boxShadow: 'var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)', }) `; exports[`twin.macro boxShadowColor.tsx: boxShadowColor.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/box-shadow-color theme\`boxShadowColor\` tw\`shadow-inherit\` tw\`shadow-current\` tw\`shadow-transparent\` tw\`shadow-black\` tw\`shadow-white\` tw\`shadow-slate-50\` tw\`shadow-slate-100\` tw\`shadow-slate-200\` tw\`shadow-slate-300\` tw\`shadow-slate-400\` tw\`shadow-slate-500\` tw\`shadow-slate-600\` tw\`shadow-slate-700\` tw\`shadow-slate-800\` tw\`shadow-slate-900\` tw\`shadow-gray-50\` tw\`shadow-gray-100\` tw\`shadow-gray-200\` tw\`shadow-gray-300\` tw\`shadow-gray-400\` tw\`shadow-gray-500\` tw\`shadow-gray-600\` tw\`shadow-gray-700\` tw\`shadow-gray-800\` tw\`shadow-gray-900\` tw\`shadow-zinc-50\` tw\`shadow-zinc-100\` tw\`shadow-zinc-200\` tw\`shadow-zinc-300\` tw\`shadow-zinc-400\` tw\`shadow-zinc-500\` tw\`shadow-zinc-600\` tw\`shadow-zinc-700\` tw\`shadow-zinc-800\` tw\`shadow-zinc-900\` tw\`shadow-neutral-50\` tw\`shadow-neutral-100\` tw\`shadow-neutral-200\` tw\`shadow-neutral-300\` tw\`shadow-neutral-400\` tw\`shadow-neutral-500\` tw\`shadow-neutral-600\` tw\`shadow-neutral-700\` tw\`shadow-neutral-800\` tw\`shadow-neutral-900\` tw\`shadow-stone-50\` tw\`shadow-stone-100\` tw\`shadow-stone-200\` tw\`shadow-stone-300\` tw\`shadow-stone-400\` tw\`shadow-stone-500\` tw\`shadow-stone-600\` tw\`shadow-stone-700\` tw\`shadow-stone-800\` tw\`shadow-stone-900\` tw\`shadow-red-50\` tw\`shadow-red-100\` tw\`shadow-red-200\` tw\`shadow-red-300\` tw\`shadow-red-400\` tw\`shadow-red-500\` tw\`shadow-red-600\` tw\`shadow-red-700\` tw\`shadow-red-800\` tw\`shadow-red-900\` tw\`shadow-orange-50\` tw\`shadow-orange-100\` tw\`shadow-orange-200\` tw\`shadow-orange-300\` tw\`shadow-orange-400\` tw\`shadow-orange-500\` tw\`shadow-orange-600\` tw\`shadow-orange-700\` tw\`shadow-orange-800\` tw\`shadow-orange-900\` tw\`shadow-amber-50\` tw\`shadow-amber-100\` tw\`shadow-amber-200\` tw\`shadow-amber-300\` tw\`shadow-amber-400\` tw\`shadow-amber-500\` tw\`shadow-amber-600\` tw\`shadow-amber-700\` tw\`shadow-amber-800\` tw\`shadow-amber-900\` tw\`shadow-yellow-50\` tw\`shadow-yellow-100\` tw\`shadow-yellow-200\` tw\`shadow-yellow-300\` tw\`shadow-yellow-400\` tw\`shadow-yellow-500\` tw\`shadow-yellow-600\` tw\`shadow-yellow-700\` tw\`shadow-yellow-800\` tw\`shadow-yellow-900\` tw\`shadow-lime-50\` tw\`shadow-lime-100\` tw\`shadow-lime-200\` tw\`shadow-lime-300\` tw\`shadow-lime-400\` tw\`shadow-lime-500\` tw\`shadow-lime-600\` tw\`shadow-lime-700\` tw\`shadow-lime-800\` tw\`shadow-lime-900\` tw\`shadow-green-50\` tw\`shadow-green-100\` tw\`shadow-green-200\` tw\`shadow-green-300\` tw\`shadow-green-400\` tw\`shadow-green-500\` tw\`shadow-green-600\` tw\`shadow-green-700\` tw\`shadow-green-800\` tw\`shadow-green-900\` tw\`shadow-emerald-50\` tw\`shadow-emerald-100\` tw\`shadow-emerald-200\` tw\`shadow-emerald-300\` tw\`shadow-emerald-400\` tw\`shadow-emerald-500\` tw\`shadow-emerald-600\` tw\`shadow-emerald-700\` tw\`shadow-emerald-800\` tw\`shadow-emerald-900\` tw\`shadow-teal-50\` tw\`shadow-teal-100\` tw\`shadow-teal-200\` tw\`shadow-teal-300\` tw\`shadow-teal-400\` tw\`shadow-teal-500\` tw\`shadow-teal-600\` tw\`shadow-teal-700\` tw\`shadow-teal-800\` tw\`shadow-teal-900\` tw\`shadow-cyan-50\` tw\`shadow-cyan-100\` tw\`shadow-cyan-200\` tw\`shadow-cyan-300\` tw\`shadow-cyan-400\` tw\`shadow-cyan-500\` tw\`shadow-cyan-600\` tw\`shadow-cyan-700\` tw\`shadow-cyan-800\` tw\`shadow-cyan-900\` tw\`shadow-sky-50\` tw\`shadow-sky-100\` tw\`shadow-sky-200\` tw\`shadow-sky-300\` tw\`shadow-sky-400\` tw\`shadow-sky-500\` tw\`shadow-sky-600\` tw\`shadow-sky-700\` tw\`shadow-sky-800\` tw\`shadow-sky-900\` tw\`shadow-blue-50\` tw\`shadow-blue-100\` tw\`shadow-blue-200\` tw\`shadow-blue-300\` tw\`shadow-blue-400\` tw\`shadow-blue-500\` tw\`shadow-blue-600\` tw\`shadow-blue-700\` tw\`shadow-blue-800\` tw\`shadow-blue-900\` tw\`shadow-indigo-50\` tw\`shadow-indigo-100\` tw\`shadow-indigo-200\` tw\`shadow-indigo-300\` tw\`shadow-indigo-400\` tw\`shadow-indigo-500\` tw\`shadow-indigo-600\` tw\`shadow-indigo-700\` tw\`shadow-indigo-800\` tw\`shadow-indigo-900\` tw\`shadow-violet-50\` tw\`shadow-violet-100\` tw\`shadow-violet-200\` tw\`shadow-violet-300\` tw\`shadow-violet-400\` tw\`shadow-violet-500\` tw\`shadow-violet-600\` tw\`shadow-violet-700\` tw\`shadow-violet-800\` tw\`shadow-violet-900\` tw\`shadow-purple-50\` tw\`shadow-purple-100\` tw\`shadow-purple-200\` tw\`shadow-purple-300\` tw\`shadow-purple-400\` tw\`shadow-purple-500\` tw\`shadow-purple-600\` tw\`shadow-purple-700\` tw\`shadow-purple-800\` tw\`shadow-purple-900\` tw\`shadow-fuchsia-50\` tw\`shadow-fuchsia-100\` tw\`shadow-fuchsia-200\` tw\`shadow-fuchsia-300\` tw\`shadow-fuchsia-400\` tw\`shadow-fuchsia-500\` tw\`shadow-fuchsia-600\` tw\`shadow-fuchsia-700\` tw\`shadow-fuchsia-800\` tw\`shadow-fuchsia-900\` tw\`shadow-pink-50\` tw\`shadow-pink-100\` tw\`shadow-pink-200\` tw\`shadow-pink-300\` tw\`shadow-pink-400\` tw\`shadow-pink-500\` tw\`shadow-pink-600\` tw\`shadow-pink-700\` tw\`shadow-pink-800\` tw\`shadow-pink-900\` tw\`shadow-rose-50\` tw\`shadow-rose-100\` tw\`shadow-rose-200\` tw\`shadow-rose-300\` tw\`shadow-rose-400\` tw\`shadow-rose-500\` tw\`shadow-rose-600\` tw\`shadow-rose-700\` tw\`shadow-rose-800\` tw\`shadow-rose-900\` tw\`shadow-cyan-500/50\` tw\`shadow-cyan-500/[.50]\` tw\`shadow-[#50d71e]\` tw\`shadow-[color:#50d71e]\` tw\`shadow-[shadow:#50d71e]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/box-shadow-color ;({ inherit: 'inherit', current: 'currentColor', transparent: 'transparent', black: '#000', white: '#fff', slate: { 50: '#f8fafc', 100: '#f1f5f9', 200: '#e2e8f0', 300: '#cbd5e1', 400: '#94a3b8', 500: '#64748b', 600: '#475569', 700: '#334155', 800: '#1e293b', 900: '#0f172a', 950: '#020617', }, gray: { 50: '#f9fafb', 100: '#f3f4f6', 200: '#e5e7eb', 300: '#d1d5db', 400: '#9ca3af', 500: '#6b7280', 600: '#4b5563', 700: '#374151', 800: '#1f2937', 900: '#111827', 950: '#030712', }, zinc: { 50: '#fafafa', 100: '#f4f4f5', 200: '#e4e4e7', 300: '#d4d4d8', 400: '#a1a1aa', 500: '#71717a', 600: '#52525b', 700: '#3f3f46', 800: '#27272a', 900: '#18181b', 950: '#09090b', }, neutral: { 50: '#fafafa', 100: '#f5f5f5', 200: '#e5e5e5', 300: '#d4d4d4', 400: '#a3a3a3', 500: '#737373', 600: '#525252', 700: '#404040', 800: '#262626', 900: '#171717', 950: '#0a0a0a', }, stone: { 50: '#fafaf9', 100: '#f5f5f4', 200: '#e7e5e4', 300: '#d6d3d1', 400: '#a8a29e', 500: '#78716c', 600: '#57534e', 700: '#44403c', 800: '#292524', 900: '#1c1917', 950: '#0c0a09', }, red: { 50: '#fef2f2', 100: '#fee2e2', 200: '#fecaca', 300: '#fca5a5', 400: '#f87171', 500: '#ef4444', 600: '#dc2626', 700: '#b91c1c', 800: '#991b1b', 900: '#7f1d1d', 950: '#450a0a', }, orange: { 50: '#fff7ed', 100: '#ffedd5', 200: '#fed7aa', 300: '#fdba74', 400: '#fb923c', 500: '#f97316', 600: '#ea580c', 700: '#c2410c', 800: '#9a3412', 900: '#7c2d12', 950: '#431407', }, amber: { 50: '#fffbeb', 100: '#fef3c7', 200: '#fde68a', 300: '#fcd34d', 400: '#fbbf24', 500: '#f59e0b', 600: '#d97706', 700: '#b45309', 800: '#92400e', 900: '#78350f', 950: '#451a03', }, yellow: { 50: '#fefce8', 100: '#fef9c3', 200: '#fef08a', 300: '#fde047', 400: '#facc15', 500: '#eab308', 600: '#ca8a04', 700: '#a16207', 800: '#854d0e', 900: '#713f12', 950: '#422006', }, lime: { 50: '#f7fee7', 100: '#ecfccb', 200: '#d9f99d', 300: '#bef264', 400: '#a3e635', 500: '#84cc16', 600: '#65a30d', 700: '#4d7c0f', 800: '#3f6212', 900: '#365314', 950: '#1a2e05', }, green: { 50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 300: '#86efac', 400: '#4ade80', 500: '#22c55e', 600: '#16a34a', 700: '#15803d', 800: '#166534', 900: '#14532d', 950: '#052e16', }, emerald: { 50: '#ecfdf5', 100: '#d1fae5', 200: '#a7f3d0', 300: '#6ee7b7', 400: '#34d399', 500: '#10b981', 600: '#059669', 700: '#047857', 800: '#065f46', 900: '#064e3b', 950: '#022c22', }, teal: { 50: '#f0fdfa', 100: '#ccfbf1', 200: '#99f6e4', 300: '#5eead4', 400: '#2dd4bf', 500: '#14b8a6', 600: '#0d9488', 700: '#0f766e', 800: '#115e59', 900: '#134e4a', 950: '#042f2e', }, cyan: { 50: '#ecfeff', 100: '#cffafe', 200: '#a5f3fc', 300: '#67e8f9', 400: '#22d3ee', 500: '#06b6d4', 600: '#0891b2', 700: '#0e7490', 800: '#155e75', 900: '#164e63', 950: '#083344', }, sky: { 50: '#f0f9ff', 100: '#e0f2fe', 200: '#bae6fd', 300: '#7dd3fc', 400: '#38bdf8', 500: '#0ea5e9', 600: '#0284c7', 700: '#0369a1', 800: '#075985', 900: '#0c4a6e', 950: '#082f49', }, blue: { 50: '#eff6ff', 100: '#dbeafe', 200: '#bfdbfe', 300: '#93c5fd', 400: '#60a5fa', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8', 800: '#1e40af', 900: '#1e3a8a', 950: '#172554', }, indigo: { 50: '#eef2ff', 100: '#e0e7ff', 200: '#c7d2fe', 300: '#a5b4fc', 400: '#818cf8', 500: '#6366f1', 600: '#4f46e5', 700: '#4338ca', 800: '#3730a3', 900: '#312e81', 950: '#1e1b4b', }, violet: { 50: '#f5f3ff', 100: '#ede9fe', 200: '#ddd6fe', 300: '#c4b5fd', 400: '#a78bfa', 500: '#8b5cf6', 600: '#7c3aed', 700: '#6d28d9', 800: '#5b21b6', 900: '#4c1d95', 950: '#2e1065', }, purple: { 50: '#faf5ff', 100: '#f3e8ff', 200: '#e9d5ff', 300: '#d8b4fe', 400: '#c084fc', 500: '#a855f7', 600: '#9333ea', 700: '#7e22ce', 800: '#6b21a8', 900: '#581c87', 950: '#3b0764', }, fuchsia: { 50: '#fdf4ff', 100: '#fae8ff', 200: '#f5d0fe', 300: '#f0abfc', 400: '#e879f9', 500: '#d946ef', 600: '#c026d3', 700: '#a21caf', 800: '#86198f', 900: '#701a75', 950: '#4a044e', }, pink: { 50: '#fdf2f8', 100: '#fce7f3', 200: '#fbcfe8', 300: '#f9a8d4', 400: '#f472b6', 500: '#ec4899', 600: '#db2777', 700: '#be185d', 800: '#9d174d', 900: '#831843', 950: '#500724', }, rose: { 50: '#fff1f2', 100: '#ffe4e6', 200: '#fecdd3', 300: '#fda4af', 400: '#fb7185', 500: '#f43f5e', 600: '#e11d48', 700: '#be123c', 800: '#9f1239', 900: '#881337', 950: '#4c0519', }, }) ;({ '--tw-shadow-color': 'inherit', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': 'currentColor', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': 'transparent', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#000', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#fff', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#f8fafc', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#f1f5f9', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#e2e8f0', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#cbd5e1', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#94a3b8', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#64748b', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#475569', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#334155', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#1e293b', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#0f172a', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#f9fafb', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#f3f4f6', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#e5e7eb', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#d1d5db', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#9ca3af', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#6b7280', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#4b5563', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#374151', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#1f2937', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#111827', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#fafafa', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#f4f4f5', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#e4e4e7', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#d4d4d8', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#a1a1aa', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#71717a', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#52525b', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#3f3f46', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#27272a', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#18181b', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#fafafa', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#f5f5f5', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#e5e5e5', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#d4d4d4', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#a3a3a3', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#737373', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#525252', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#404040', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#262626', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#171717', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#fafaf9', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#f5f5f4', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#e7e5e4', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#d6d3d1', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#a8a29e', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#78716c', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#57534e', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#44403c', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#292524', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#1c1917', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#fef2f2', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#fee2e2', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#fecaca', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#fca5a5', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#f87171', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#ef4444', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#dc2626', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#b91c1c', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#991b1b', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#7f1d1d', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#fff7ed', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#ffedd5', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#fed7aa', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#fdba74', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#fb923c', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#f97316', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#ea580c', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#c2410c', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#9a3412', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#7c2d12', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#fffbeb', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#fef3c7', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#fde68a', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#fcd34d', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#fbbf24', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#f59e0b', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#d97706', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#b45309', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#92400e', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#78350f', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#fefce8', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#fef9c3', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#fef08a', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#fde047', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#facc15', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#eab308', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#ca8a04', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#a16207', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#854d0e', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#713f12', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#f7fee7', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#ecfccb', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#d9f99d', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#bef264', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#a3e635', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#84cc16', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#65a30d', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#4d7c0f', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#3f6212', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#365314', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#f0fdf4', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#dcfce7', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#bbf7d0', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#86efac', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#4ade80', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#22c55e', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#16a34a', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#15803d', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#166534', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#14532d', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#ecfdf5', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#d1fae5', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#a7f3d0', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#6ee7b7', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#34d399', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#10b981', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#059669', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#047857', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#065f46', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#064e3b', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#f0fdfa', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#ccfbf1', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#99f6e4', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#5eead4', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#2dd4bf', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#14b8a6', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#0d9488', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#0f766e', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#115e59', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#134e4a', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#ecfeff', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#cffafe', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#a5f3fc', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#67e8f9', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#22d3ee', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#06b6d4', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#0891b2', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#0e7490', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#155e75', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#164e63', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#f0f9ff', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#e0f2fe', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#bae6fd', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#7dd3fc', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#38bdf8', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#0ea5e9', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#0284c7', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#0369a1', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#075985', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#0c4a6e', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#eff6ff', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#dbeafe', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#bfdbfe', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#93c5fd', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#60a5fa', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#3b82f6', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#2563eb', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#1d4ed8', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#1e40af', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#1e3a8a', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#eef2ff', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#e0e7ff', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#c7d2fe', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#a5b4fc', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#818cf8', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#6366f1', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#4f46e5', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#4338ca', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#3730a3', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#312e81', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#f5f3ff', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#ede9fe', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#ddd6fe', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#c4b5fd', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#a78bfa', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#8b5cf6', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#7c3aed', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#6d28d9', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#5b21b6', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#4c1d95', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#faf5ff', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#f3e8ff', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#e9d5ff', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#d8b4fe', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#c084fc', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#a855f7', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#9333ea', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#7e22ce', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#6b21a8', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#581c87', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#fdf4ff', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#fae8ff', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#f5d0fe', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#f0abfc', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#e879f9', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#d946ef', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#c026d3', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#a21caf', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#86198f', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#701a75', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#fdf2f8', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#fce7f3', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#fbcfe8', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#f9a8d4', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#f472b6', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#ec4899', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#db2777', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#be185d', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#9d174d', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#831843', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#fff1f2', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#ffe4e6', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#fecdd3', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#fda4af', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#fb7185', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#f43f5e', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#e11d48', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#be123c', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#9f1239', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#881337', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': 'rgb(6 182 212 / 0.5)', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': 'rgb(6 182 212 / .50)', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#50d71e', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow-color': '#50d71e', '--tw-shadow': 'var(--tw-shadow-colored)', }) ;({ '--tw-shadow': '#50d71e', '--tw-shadow-colored': '#50d71e', boxShadow: 'var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)', }) `; exports[`twin.macro boxSizing.tsx: boxSizing.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/box-sizing tw\`box-border\` tw\`box-content\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/box-sizing ;({ boxSizing: 'border-box', }) ;({ boxSizing: 'content-box', }) `; exports[`twin.macro breakAfter.tsx: breakAfter.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/break-after tw\`break-after-auto\` tw\`break-after-avoid\` tw\`break-after-all\` tw\`break-after-avoid-page\` tw\`break-after-page\` tw\`break-after-left\` tw\`break-after-right\` tw\`break-after-column\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/break-after ;({ breakAfter: 'auto', }) ;({ breakAfter: 'avoid', }) ;({ breakAfter: 'all', }) ;({ breakAfter: 'avoid-page', }) ;({ breakAfter: 'page', }) ;({ breakAfter: 'left', }) ;({ breakAfter: 'right', }) ;({ breakAfter: 'column', }) `; exports[`twin.macro breakBefore.tsx: breakBefore.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/break-before tw\`break-before-auto\` tw\`break-before-avoid\` tw\`break-before-all\` tw\`break-before-avoid-page\` tw\`break-before-page\` tw\`break-before-left\` tw\`break-before-right\` tw\`break-before-column\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/break-before ;({ breakBefore: 'auto', }) ;({ breakBefore: 'avoid', }) ;({ breakBefore: 'all', }) ;({ breakBefore: 'avoid-page', }) ;({ breakBefore: 'page', }) ;({ breakBefore: 'left', }) ;({ breakBefore: 'right', }) ;({ breakBefore: 'column', }) `; exports[`twin.macro breakInside.tsx: breakInside.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/break-inside tw\`break-inside-auto\` tw\`break-inside-avoid\` tw\`break-inside-avoid-page\` tw\`break-inside-avoid-column\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/break-inside ;({ breakInside: 'auto', }) ;({ breakInside: 'avoid', }) ;({ breakInside: 'avoid-page', }) ;({ breakInside: 'avoid-column', }) `; exports[`twin.macro brightness.tsx: brightness.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/brightness theme\`brightness\` tw\`brightness-0\` tw\`brightness-50\` tw\`brightness-75\` tw\`brightness-90\` tw\`brightness-95\` tw\`brightness-100\` tw\`brightness-105\` tw\`brightness-110\` tw\`brightness-125\` tw\`brightness-150\` tw\`brightness-200\` tw\`brightness-[-1.75]\` tw\`brightness-[1.75]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/brightness ;({ 0: '0', 50: '.5', 75: '.75', 90: '.9', 95: '.95', 100: '1', 105: '1.05', 110: '1.1', 125: '1.25', 150: '1.5', 200: '2', }) ;({ '--tw-brightness': 'brightness(0)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-brightness': 'brightness(.5)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-brightness': 'brightness(.75)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-brightness': 'brightness(.9)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-brightness': 'brightness(.95)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-brightness': 'brightness(1)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-brightness': 'brightness(1.05)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-brightness': 'brightness(1.1)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-brightness': 'brightness(1.25)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-brightness': 'brightness(1.5)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-brightness': 'brightness(2)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-brightness': 'brightness(-1.75)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-brightness': 'brightness(1.75)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) `; exports[`twin.macro captionSide.tsx: captionSide.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/caption-side tw\`caption-top\` tw\`caption-bottom\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/caption-side ;({ captionSide: 'top', }) ;({ captionSide: 'bottom', }) `; exports[`twin.macro caretColor.tsx: caretColor.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/caret-color theme\`caretColor\` tw\`caret-inherit\` tw\`caret-current\` tw\`caret-transparent\` tw\`caret-black\` tw\`caret-white\` tw\`caret-slate-50\` tw\`caret-slate-100\` tw\`caret-slate-200\` tw\`caret-slate-300\` tw\`caret-slate-400\` tw\`caret-slate-500\` tw\`caret-slate-600\` tw\`caret-slate-700\` tw\`caret-slate-800\` tw\`caret-slate-900\` tw\`caret-gray-50\` tw\`caret-gray-100\` tw\`caret-gray-200\` tw\`caret-gray-300\` tw\`caret-gray-400\` tw\`caret-gray-500\` tw\`caret-gray-600\` tw\`caret-gray-700\` tw\`caret-gray-800\` tw\`caret-gray-900\` tw\`caret-zinc-50\` tw\`caret-zinc-100\` tw\`caret-zinc-200\` tw\`caret-zinc-300\` tw\`caret-zinc-400\` tw\`caret-zinc-500\` tw\`caret-zinc-600\` tw\`caret-zinc-700\` tw\`caret-zinc-800\` tw\`caret-zinc-900\` tw\`caret-neutral-50\` tw\`caret-neutral-100\` tw\`caret-neutral-200\` tw\`caret-neutral-300\` tw\`caret-neutral-400\` tw\`caret-neutral-500\` tw\`caret-neutral-600\` tw\`caret-neutral-700\` tw\`caret-neutral-800\` tw\`caret-neutral-900\` tw\`caret-stone-50\` tw\`caret-stone-100\` tw\`caret-stone-200\` tw\`caret-stone-300\` tw\`caret-stone-400\` tw\`caret-stone-500\` tw\`caret-stone-600\` tw\`caret-stone-700\` tw\`caret-stone-800\` tw\`caret-stone-900\` tw\`caret-red-50\` tw\`caret-red-100\` tw\`caret-red-200\` tw\`caret-red-300\` tw\`caret-red-400\` tw\`caret-red-500\` tw\`caret-red-600\` tw\`caret-red-700\` tw\`caret-red-800\` tw\`caret-red-900\` tw\`caret-orange-50\` tw\`caret-orange-100\` tw\`caret-orange-200\` tw\`caret-orange-300\` tw\`caret-orange-400\` tw\`caret-orange-500\` tw\`caret-orange-600\` tw\`caret-orange-700\` tw\`caret-orange-800\` tw\`caret-orange-900\` tw\`caret-amber-50\` tw\`caret-amber-100\` tw\`caret-amber-200\` tw\`caret-amber-300\` tw\`caret-amber-400\` tw\`caret-amber-500\` tw\`caret-amber-600\` tw\`caret-amber-700\` tw\`caret-amber-800\` tw\`caret-amber-900\` tw\`caret-yellow-50\` tw\`caret-yellow-100\` tw\`caret-yellow-200\` tw\`caret-yellow-300\` tw\`caret-yellow-400\` tw\`caret-yellow-500\` tw\`caret-yellow-600\` tw\`caret-yellow-700\` tw\`caret-yellow-800\` tw\`caret-yellow-900\` tw\`caret-lime-50\` tw\`caret-lime-100\` tw\`caret-lime-200\` tw\`caret-lime-300\` tw\`caret-lime-400\` tw\`caret-lime-500\` tw\`caret-lime-600\` tw\`caret-lime-700\` tw\`caret-lime-800\` tw\`caret-lime-900\` tw\`caret-green-50\` tw\`caret-green-100\` tw\`caret-green-200\` tw\`caret-green-300\` tw\`caret-green-400\` tw\`caret-green-500\` tw\`caret-green-600\` tw\`caret-green-700\` tw\`caret-green-800\` tw\`caret-green-900\` tw\`caret-emerald-50\` tw\`caret-emerald-100\` tw\`caret-emerald-200\` tw\`caret-emerald-300\` tw\`caret-emerald-400\` tw\`caret-emerald-500\` tw\`caret-emerald-600\` tw\`caret-emerald-700\` tw\`caret-emerald-800\` tw\`caret-emerald-900\` tw\`caret-teal-50\` tw\`caret-teal-100\` tw\`caret-teal-200\` tw\`caret-teal-300\` tw\`caret-teal-400\` tw\`caret-teal-500\` tw\`caret-teal-600\` tw\`caret-teal-700\` tw\`caret-teal-800\` tw\`caret-teal-900\` tw\`caret-cyan-50\` tw\`caret-cyan-100\` tw\`caret-cyan-200\` tw\`caret-cyan-300\` tw\`caret-cyan-400\` tw\`caret-cyan-500\` tw\`caret-cyan-600\` tw\`caret-cyan-700\` tw\`caret-cyan-800\` tw\`caret-cyan-900\` tw\`caret-sky-50\` tw\`caret-sky-100\` tw\`caret-sky-200\` tw\`caret-sky-300\` tw\`caret-sky-400\` tw\`caret-sky-500\` tw\`caret-sky-600\` tw\`caret-sky-700\` tw\`caret-sky-800\` tw\`caret-sky-900\` tw\`caret-blue-50\` tw\`caret-blue-100\` tw\`caret-blue-200\` tw\`caret-blue-300\` tw\`caret-blue-400\` tw\`caret-blue-500\` tw\`caret-blue-600\` tw\`caret-blue-700\` tw\`caret-blue-800\` tw\`caret-blue-900\` tw\`caret-indigo-50\` tw\`caret-indigo-100\` tw\`caret-indigo-200\` tw\`caret-indigo-300\` tw\`caret-indigo-400\` tw\`caret-indigo-500\` tw\`caret-indigo-600\` tw\`caret-indigo-700\` tw\`caret-indigo-800\` tw\`caret-indigo-900\` tw\`caret-violet-50\` tw\`caret-violet-100\` tw\`caret-violet-200\` tw\`caret-violet-300\` tw\`caret-violet-400\` tw\`caret-violet-500\` tw\`caret-violet-600\` tw\`caret-violet-700\` tw\`caret-violet-800\` tw\`caret-violet-900\` tw\`caret-purple-50\` tw\`caret-purple-100\` tw\`caret-purple-200\` tw\`caret-purple-300\` tw\`caret-purple-400\` tw\`caret-purple-500\` tw\`caret-purple-600\` tw\`caret-purple-700\` tw\`caret-purple-800\` tw\`caret-purple-900\` tw\`caret-fuchsia-50\` tw\`caret-fuchsia-100\` tw\`caret-fuchsia-200\` tw\`caret-fuchsia-300\` tw\`caret-fuchsia-400\` tw\`caret-fuchsia-500\` tw\`caret-fuchsia-600\` tw\`caret-fuchsia-700\` tw\`caret-fuchsia-800\` tw\`caret-fuchsia-900\` tw\`caret-pink-50\` tw\`caret-pink-100\` tw\`caret-pink-200\` tw\`caret-pink-300\` tw\`caret-pink-400\` tw\`caret-pink-500\` tw\`caret-pink-600\` tw\`caret-pink-700\` tw\`caret-pink-800\` tw\`caret-pink-900\` tw\`caret-rose-50\` tw\`caret-rose-100\` tw\`caret-rose-200\` tw\`caret-rose-300\` tw\`caret-rose-400\` tw\`caret-rose-500\` tw\`caret-rose-600\` tw\`caret-rose-700\` tw\`caret-rose-800\` tw\`caret-rose-900\` tw\`caret-[#50d71e]\` tw\`caret-red-500/25\` tw\`caret-red-500/fromConfig\` tw\`caret-red-500/fromConfig/25\` tw\`caret-red-500/fromConfig/[.555]\` tw\`caret-red-500/fromConfig/[var(--myvar)]\` tw\`caret-red-500/[.555]\` tw\`caret-red-500/[var(--myvar)]\` tw\`caret-[theme('colors.red.500')]\` tw\`caret-[theme('colors.red.500')]/20\` tw\`caret-electric\` tw\`caret-electric/25\` tw\`caret-electric/[.555]\` tw\`caret-electric/[var(--myvar)]\` tw\`caret-[theme('colors.electric')]\` tw\`caret-[theme('colors.electric')]/20\` tw\`caret-[color:green]\` tw\`caret-[color:rgba(255, 255, 255, .45)]\` tw\`caret-[any:blah]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/caret-color ;({ inherit: 'inherit', current: 'currentColor', transparent: 'transparent', black: '#000', white: '#fff', slate: { 50: '#f8fafc', 100: '#f1f5f9', 200: '#e2e8f0', 300: '#cbd5e1', 400: '#94a3b8', 500: '#64748b', 600: '#475569', 700: '#334155', 800: '#1e293b', 900: '#0f172a', 950: '#020617', }, gray: { 50: '#f9fafb', 100: '#f3f4f6', 200: '#e5e7eb', 300: '#d1d5db', 400: '#9ca3af', 500: '#6b7280', 600: '#4b5563', 700: '#374151', 800: '#1f2937', 900: '#111827', 950: '#030712', }, zinc: { 50: '#fafafa', 100: '#f4f4f5', 200: '#e4e4e7', 300: '#d4d4d8', 400: '#a1a1aa', 500: '#71717a', 600: '#52525b', 700: '#3f3f46', 800: '#27272a', 900: '#18181b', 950: '#09090b', }, neutral: { 50: '#fafafa', 100: '#f5f5f5', 200: '#e5e5e5', 300: '#d4d4d4', 400: '#a3a3a3', 500: '#737373', 600: '#525252', 700: '#404040', 800: '#262626', 900: '#171717', 950: '#0a0a0a', }, stone: { 50: '#fafaf9', 100: '#f5f5f4', 200: '#e7e5e4', 300: '#d6d3d1', 400: '#a8a29e', 500: '#78716c', 600: '#57534e', 700: '#44403c', 800: '#292524', 900: '#1c1917', 950: '#0c0a09', }, red: { 50: '#fef2f2', 100: '#fee2e2', 200: '#fecaca', 300: '#fca5a5', 400: '#f87171', 500: '#ef4444', 600: '#dc2626', 700: '#b91c1c', 800: '#991b1b', 900: '#7f1d1d', 950: '#450a0a', }, orange: { 50: '#fff7ed', 100: '#ffedd5', 200: '#fed7aa', 300: '#fdba74', 400: '#fb923c', 500: '#f97316', 600: '#ea580c', 700: '#c2410c', 800: '#9a3412', 900: '#7c2d12', 950: '#431407', }, amber: { 50: '#fffbeb', 100: '#fef3c7', 200: '#fde68a', 300: '#fcd34d', 400: '#fbbf24', 500: '#f59e0b', 600: '#d97706', 700: '#b45309', 800: '#92400e', 900: '#78350f', 950: '#451a03', }, yellow: { 50: '#fefce8', 100: '#fef9c3', 200: '#fef08a', 300: '#fde047', 400: '#facc15', 500: '#eab308', 600: '#ca8a04', 700: '#a16207', 800: '#854d0e', 900: '#713f12', 950: '#422006', }, lime: { 50: '#f7fee7', 100: '#ecfccb', 200: '#d9f99d', 300: '#bef264', 400: '#a3e635', 500: '#84cc16', 600: '#65a30d', 700: '#4d7c0f', 800: '#3f6212', 900: '#365314', 950: '#1a2e05', }, green: { 50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 300: '#86efac', 400: '#4ade80', 500: '#22c55e', 600: '#16a34a', 700: '#15803d', 800: '#166534', 900: '#14532d', 950: '#052e16', }, emerald: { 50: '#ecfdf5', 100: '#d1fae5', 200: '#a7f3d0', 300: '#6ee7b7', 400: '#34d399', 500: '#10b981', 600: '#059669', 700: '#047857', 800: '#065f46', 900: '#064e3b', 950: '#022c22', }, teal: { 50: '#f0fdfa', 100: '#ccfbf1', 200: '#99f6e4', 300: '#5eead4', 400: '#2dd4bf', 500: '#14b8a6', 600: '#0d9488', 700: '#0f766e', 800: '#115e59', 900: '#134e4a', 950: '#042f2e', }, cyan: { 50: '#ecfeff', 100: '#cffafe', 200: '#a5f3fc', 300: '#67e8f9', 400: '#22d3ee', 500: '#06b6d4', 600: '#0891b2', 700: '#0e7490', 800: '#155e75', 900: '#164e63', 950: '#083344', }, sky: { 50: '#f0f9ff', 100: '#e0f2fe', 200: '#bae6fd', 300: '#7dd3fc', 400: '#38bdf8', 500: '#0ea5e9', 600: '#0284c7', 700: '#0369a1', 800: '#075985', 900: '#0c4a6e', 950: '#082f49', }, blue: { 50: '#eff6ff', 100: '#dbeafe', 200: '#bfdbfe', 300: '#93c5fd', 400: '#60a5fa', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8', 800: '#1e40af', 900: '#1e3a8a', 950: '#172554', }, indigo: { 50: '#eef2ff', 100: '#e0e7ff', 200: '#c7d2fe', 300: '#a5b4fc', 400: '#818cf8', 500: '#6366f1', 600: '#4f46e5', 700: '#4338ca', 800: '#3730a3', 900: '#312e81', 950: '#1e1b4b', }, violet: { 50: '#f5f3ff', 100: '#ede9fe', 200: '#ddd6fe', 300: '#c4b5fd', 400: '#a78bfa', 500: '#8b5cf6', 600: '#7c3aed', 700: '#6d28d9', 800: '#5b21b6', 900: '#4c1d95', 950: '#2e1065', }, purple: { 50: '#faf5ff', 100: '#f3e8ff', 200: '#e9d5ff', 300: '#d8b4fe', 400: '#c084fc', 500: '#a855f7', 600: '#9333ea', 700: '#7e22ce', 800: '#6b21a8', 900: '#581c87', 950: '#3b0764', }, fuchsia: { 50: '#fdf4ff', 100: '#fae8ff', 200: '#f5d0fe', 300: '#f0abfc', 400: '#e879f9', 500: '#d946ef', 600: '#c026d3', 700: '#a21caf', 800: '#86198f', 900: '#701a75', 950: '#4a044e', }, pink: { 50: '#fdf2f8', 100: '#fce7f3', 200: '#fbcfe8', 300: '#f9a8d4', 400: '#f472b6', 500: '#ec4899', 600: '#db2777', 700: '#be185d', 800: '#9d174d', 900: '#831843', 950: '#500724', }, rose: { 50: '#fff1f2', 100: '#ffe4e6', 200: '#fecdd3', 300: '#fda4af', 400: '#fb7185', 500: '#f43f5e', 600: '#e11d48', 700: '#be123c', 800: '#9f1239', 900: '#881337', 950: '#4c0519', }, 'red-500/fromConfig': '#000', electric: void 0, }) ;({ caretColor: 'inherit', }) ;({ caretColor: 'currentColor', }) ;({ caretColor: 'transparent', }) ;({ caretColor: '#000', }) ;({ caretColor: '#fff', }) ;({ caretColor: '#f8fafc', }) ;({ caretColor: '#f1f5f9', }) ;({ caretColor: '#e2e8f0', }) ;({ caretColor: '#cbd5e1', }) ;({ caretColor: '#94a3b8', }) ;({ caretColor: '#64748b', }) ;({ caretColor: '#475569', }) ;({ caretColor: '#334155', }) ;({ caretColor: '#1e293b', }) ;({ caretColor: '#0f172a', }) ;({ caretColor: '#f9fafb', }) ;({ caretColor: '#f3f4f6', }) ;({ caretColor: '#e5e7eb', }) ;({ caretColor: '#d1d5db', }) ;({ caretColor: '#9ca3af', }) ;({ caretColor: '#6b7280', }) ;({ caretColor: '#4b5563', }) ;({ caretColor: '#374151', }) ;({ caretColor: '#1f2937', }) ;({ caretColor: '#111827', }) ;({ caretColor: '#fafafa', }) ;({ caretColor: '#f4f4f5', }) ;({ caretColor: '#e4e4e7', }) ;({ caretColor: '#d4d4d8', }) ;({ caretColor: '#a1a1aa', }) ;({ caretColor: '#71717a', }) ;({ caretColor: '#52525b', }) ;({ caretColor: '#3f3f46', }) ;({ caretColor: '#27272a', }) ;({ caretColor: '#18181b', }) ;({ caretColor: '#fafafa', }) ;({ caretColor: '#f5f5f5', }) ;({ caretColor: '#e5e5e5', }) ;({ caretColor: '#d4d4d4', }) ;({ caretColor: '#a3a3a3', }) ;({ caretColor: '#737373', }) ;({ caretColor: '#525252', }) ;({ caretColor: '#404040', }) ;({ caretColor: '#262626', }) ;({ caretColor: '#171717', }) ;({ caretColor: '#fafaf9', }) ;({ caretColor: '#f5f5f4', }) ;({ caretColor: '#e7e5e4', }) ;({ caretColor: '#d6d3d1', }) ;({ caretColor: '#a8a29e', }) ;({ caretColor: '#78716c', }) ;({ caretColor: '#57534e', }) ;({ caretColor: '#44403c', }) ;({ caretColor: '#292524', }) ;({ caretColor: '#1c1917', }) ;({ caretColor: '#fef2f2', }) ;({ caretColor: '#fee2e2', }) ;({ caretColor: '#fecaca', }) ;({ caretColor: '#fca5a5', }) ;({ caretColor: '#f87171', }) ;({ caretColor: '#ef4444', }) ;({ caretColor: '#dc2626', }) ;({ caretColor: '#b91c1c', }) ;({ caretColor: '#991b1b', }) ;({ caretColor: '#7f1d1d', }) ;({ caretColor: '#fff7ed', }) ;({ caretColor: '#ffedd5', }) ;({ caretColor: '#fed7aa', }) ;({ caretColor: '#fdba74', }) ;({ caretColor: '#fb923c', }) ;({ caretColor: '#f97316', }) ;({ caretColor: '#ea580c', }) ;({ caretColor: '#c2410c', }) ;({ caretColor: '#9a3412', }) ;({ caretColor: '#7c2d12', }) ;({ caretColor: '#fffbeb', }) ;({ caretColor: '#fef3c7', }) ;({ caretColor: '#fde68a', }) ;({ caretColor: '#fcd34d', }) ;({ caretColor: '#fbbf24', }) ;({ caretColor: '#f59e0b', }) ;({ caretColor: '#d97706', }) ;({ caretColor: '#b45309', }) ;({ caretColor: '#92400e', }) ;({ caretColor: '#78350f', }) ;({ caretColor: '#fefce8', }) ;({ caretColor: '#fef9c3', }) ;({ caretColor: '#fef08a', }) ;({ caretColor: '#fde047', }) ;({ caretColor: '#facc15', }) ;({ caretColor: '#eab308', }) ;({ caretColor: '#ca8a04', }) ;({ caretColor: '#a16207', }) ;({ caretColor: '#854d0e', }) ;({ caretColor: '#713f12', }) ;({ caretColor: '#f7fee7', }) ;({ caretColor: '#ecfccb', }) ;({ caretColor: '#d9f99d', }) ;({ caretColor: '#bef264', }) ;({ caretColor: '#a3e635', }) ;({ caretColor: '#84cc16', }) ;({ caretColor: '#65a30d', }) ;({ caretColor: '#4d7c0f', }) ;({ caretColor: '#3f6212', }) ;({ caretColor: '#365314', }) ;({ caretColor: '#f0fdf4', }) ;({ caretColor: '#dcfce7', }) ;({ caretColor: '#bbf7d0', }) ;({ caretColor: '#86efac', }) ;({ caretColor: '#4ade80', }) ;({ caretColor: '#22c55e', }) ;({ caretColor: '#16a34a', }) ;({ caretColor: '#15803d', }) ;({ caretColor: '#166534', }) ;({ caretColor: '#14532d', }) ;({ caretColor: '#ecfdf5', }) ;({ caretColor: '#d1fae5', }) ;({ caretColor: '#a7f3d0', }) ;({ caretColor: '#6ee7b7', }) ;({ caretColor: '#34d399', }) ;({ caretColor: '#10b981', }) ;({ caretColor: '#059669', }) ;({ caretColor: '#047857', }) ;({ caretColor: '#065f46', }) ;({ caretColor: '#064e3b', }) ;({ caretColor: '#f0fdfa', }) ;({ caretColor: '#ccfbf1', }) ;({ caretColor: '#99f6e4', }) ;({ caretColor: '#5eead4', }) ;({ caretColor: '#2dd4bf', }) ;({ caretColor: '#14b8a6', }) ;({ caretColor: '#0d9488', }) ;({ caretColor: '#0f766e', }) ;({ caretColor: '#115e59', }) ;({ caretColor: '#134e4a', }) ;({ caretColor: '#ecfeff', }) ;({ caretColor: '#cffafe', }) ;({ caretColor: '#a5f3fc', }) ;({ caretColor: '#67e8f9', }) ;({ caretColor: '#22d3ee', }) ;({ caretColor: '#06b6d4', }) ;({ caretColor: '#0891b2', }) ;({ caretColor: '#0e7490', }) ;({ caretColor: '#155e75', }) ;({ caretColor: '#164e63', }) ;({ caretColor: '#f0f9ff', }) ;({ caretColor: '#e0f2fe', }) ;({ caretColor: '#bae6fd', }) ;({ caretColor: '#7dd3fc', }) ;({ caretColor: '#38bdf8', }) ;({ caretColor: '#0ea5e9', }) ;({ caretColor: '#0284c7', }) ;({ caretColor: '#0369a1', }) ;({ caretColor: '#075985', }) ;({ caretColor: '#0c4a6e', }) ;({ caretColor: '#eff6ff', }) ;({ caretColor: '#dbeafe', }) ;({ caretColor: '#bfdbfe', }) ;({ caretColor: '#93c5fd', }) ;({ caretColor: '#60a5fa', }) ;({ caretColor: '#3b82f6', }) ;({ caretColor: '#2563eb', }) ;({ caretColor: '#1d4ed8', }) ;({ caretColor: '#1e40af', }) ;({ caretColor: '#1e3a8a', }) ;({ caretColor: '#eef2ff', }) ;({ caretColor: '#e0e7ff', }) ;({ caretColor: '#c7d2fe', }) ;({ caretColor: '#a5b4fc', }) ;({ caretColor: '#818cf8', }) ;({ caretColor: '#6366f1', }) ;({ caretColor: '#4f46e5', }) ;({ caretColor: '#4338ca', }) ;({ caretColor: '#3730a3', }) ;({ caretColor: '#312e81', }) ;({ caretColor: '#f5f3ff', }) ;({ caretColor: '#ede9fe', }) ;({ caretColor: '#ddd6fe', }) ;({ caretColor: '#c4b5fd', }) ;({ caretColor: '#a78bfa', }) ;({ caretColor: '#8b5cf6', }) ;({ caretColor: '#7c3aed', }) ;({ caretColor: '#6d28d9', }) ;({ caretColor: '#5b21b6', }) ;({ caretColor: '#4c1d95', }) ;({ caretColor: '#faf5ff', }) ;({ caretColor: '#f3e8ff', }) ;({ caretColor: '#e9d5ff', }) ;({ caretColor: '#d8b4fe', }) ;({ caretColor: '#c084fc', }) ;({ caretColor: '#a855f7', }) ;({ caretColor: '#9333ea', }) ;({ caretColor: '#7e22ce', }) ;({ caretColor: '#6b21a8', }) ;({ caretColor: '#581c87', }) ;({ caretColor: '#fdf4ff', }) ;({ caretColor: '#fae8ff', }) ;({ caretColor: '#f5d0fe', }) ;({ caretColor: '#f0abfc', }) ;({ caretColor: '#e879f9', }) ;({ caretColor: '#d946ef', }) ;({ caretColor: '#c026d3', }) ;({ caretColor: '#a21caf', }) ;({ caretColor: '#86198f', }) ;({ caretColor: '#701a75', }) ;({ caretColor: '#fdf2f8', }) ;({ caretColor: '#fce7f3', }) ;({ caretColor: '#fbcfe8', }) ;({ caretColor: '#f9a8d4', }) ;({ caretColor: '#f472b6', }) ;({ caretColor: '#ec4899', }) ;({ caretColor: '#db2777', }) ;({ caretColor: '#be185d', }) ;({ caretColor: '#9d174d', }) ;({ caretColor: '#831843', }) ;({ caretColor: '#fff1f2', }) ;({ caretColor: '#ffe4e6', }) ;({ caretColor: '#fecdd3', }) ;({ caretColor: '#fda4af', }) ;({ caretColor: '#fb7185', }) ;({ caretColor: '#f43f5e', }) ;({ caretColor: '#e11d48', }) ;({ caretColor: '#be123c', }) ;({ caretColor: '#9f1239', }) ;({ caretColor: '#881337', }) ;({ caretColor: '#50d71e', }) ;({ caretColor: 'rgb(239 68 68 / 0.25)', }) ;({ caretColor: '#000', }) ;({ caretColor: 'rgb(0 0 0 / 0.25)', }) ;({ caretColor: 'rgb(0 0 0 / .555)', }) ;({ caretColor: 'rgb(0 0 0 / var(--myvar))', }) ;({ caretColor: 'rgb(239 68 68 / .555)', }) ;({ caretColor: 'rgb(239 68 68 / var(--myvar))', }) ;({ caretColor: '#ef4444', }) ;({ caretColor: 'rgb(239 68 68 / 0.2)', }) ;({ caretColor: 'rgb(219, 0, 255)', }) ;({ caretColor: 'rgba(219, 0, 255, 0.25)', }) ;({ caretColor: 'rgba(219, 0, 255, .555)', }) ;({ caretColor: 'rgba(219, 0, 255, var(--myvar))', }) ;({ caretColor: 'rgb(219, 0, 255)', }) ;({ caretColor: 'rgb(219 0 255 / 0.2)', }) ;({ caretColor: 'green', }) ;({ caretColor: 'rgba(255, 255, 255, .45)', }) ;({ caretColor: 'blah', }) `; exports[`twin.macro clear.tsx: clear.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/clear tw\`clear-left\` tw\`clear-right\` tw\`clear-both\` tw\`clear-none\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/clear ;({ clear: 'left', }) ;({ clear: 'right', }) ;({ clear: 'both', }) ;({ clear: 'none', }) `; exports[`twin.macro colorFunctions.tsx: colorFunctions.tsx 1`] = ` // @ts-nocheck import tw, { GlobalStyles } from '../macro' // twinImport tw\`text-foreground text-opacity-40\` tw\`text-gray-300\` ; ↓ ↓ ↓ ↓ ↓ ↓ import { css as _css } from '@emotion/react' import { Global as _globalImport } from '@emotion/react' const _GlobalStyles = () => ( <_globalImport styles={_css\`*, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: rgb(var(--twc-gray-200)); --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: var(--tw-empty,/*!*/ /*!*/); --tw-pan-y: var(--tw-empty,/*!*/ /*!*/); --tw-pinch-zoom: var(--tw-empty,/*!*/ /*!*/); --tw-scroll-snap-strictness: proximity; --tw-ordinal: var(--tw-empty,/*!*/ /*!*/); --tw-slashed-zero: var(--tw-empty,/*!*/ /*!*/); --tw-numeric-figure: var(--tw-empty,/*!*/ /*!*/); --tw-numeric-spacing: var(--tw-empty,/*!*/ /*!*/); --tw-numeric-fraction: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-blur: var(--tw-empty,/*!*/ /*!*/); --tw-brightness: var(--tw-empty,/*!*/ /*!*/); --tw-contrast: var(--tw-empty,/*!*/ /*!*/); --tw-grayscale: var(--tw-empty,/*!*/ /*!*/); --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/); --tw-invert: var(--tw-empty,/*!*/ /*!*/); --tw-saturate: var(--tw-empty,/*!*/ /*!*/); --tw-sepia: var(--tw-empty,/*!*/ /*!*/); --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/); } ::before, ::after { --tw-content: ''; } html { line-height: 1.5; -webkit-text-size-adjust: 100%; -moz-tab-size: 4; tab-size: 4; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-feature-settings: normal; font-variation-settings: normal; } body { margin: 0; line-height: inherit; } hr { height: 0; color: inherit; border-top-width: 1px; } abbr:where([title]) { text-decoration: underline dotted; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } table { text-indent: 0; border-color: inherit; border-collapse: collapse; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; } button, select { text-transform: none; } button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; background-color: transparent; background-image: none; } :-moz-focusring { outline: auto; } :-moz-ui-invalid { box-shadow: none; } progress { vertical-align: baseline; } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } [type='search'] { -webkit-appearance: textfield; outline-offset: -2px; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } summary { display: list-item; } blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; } fieldset { margin: 0; padding: 0; } legend { padding: 0; } ol, ul, menu { list-style: none; margin: 0; padding: 0; } textarea { resize: vertical; } input::placeholder, textarea::placeholder { opacity: 1; color: rgb(var(--twc-gray-400)); } button, [role="button"] { cursor: pointer; } :disabled { cursor: default; } img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; } img, video { max-width: 100%; height: auto; } [hidden] { display: none; } ::backdrop { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: var(--tw-empty,/*!*/ /*!*/); --tw-pan-y: var(--tw-empty,/*!*/ /*!*/); --tw-pinch-zoom: var(--tw-empty,/*!*/ /*!*/); --tw-scroll-snap-strictness: proximity; --tw-ordinal: var(--tw-empty,/*!*/ /*!*/); --tw-slashed-zero: var(--tw-empty,/*!*/ /*!*/); --tw-numeric-figure: var(--tw-empty,/*!*/ /*!*/); --tw-numeric-spacing: var(--tw-empty,/*!*/ /*!*/); --tw-numeric-fraction: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-blur: var(--tw-empty,/*!*/ /*!*/); --tw-brightness: var(--tw-empty,/*!*/ /*!*/); --tw-contrast: var(--tw-empty,/*!*/ /*!*/); --tw-grayscale: var(--tw-empty,/*!*/ /*!*/); --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/); --tw-invert: var(--tw-empty,/*!*/ /*!*/); --tw-saturate: var(--tw-empty,/*!*/ /*!*/); --tw-sepia: var(--tw-empty,/*!*/ /*!*/); --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/); }\`} /> ) // twinImport ;({ '--tw-text-opacity': '0.4', color: 'rgba(var(--twc-foreground), var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgba(var(--twc-gray-300), var(--tw-text-opacity))', }) ;<_GlobalStyles /> `; exports[`twin.macro columns.tsx: columns.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/columns theme\`columns\` tw\`columns-1\` tw\`columns-2\` tw\`columns-3\` tw\`columns-4\` tw\`columns-5\` tw\`columns-6\` tw\`columns-7\` tw\`columns-8\` tw\`columns-9\` tw\`columns-10\` tw\`columns-11\` tw\`columns-12\` tw\`columns-auto\` tw\`columns-3xs\` tw\`columns-2xs\` tw\`columns-xs\` tw\`columns-sm\` tw\`columns-md\` tw\`columns-lg\` tw\`columns-xl\` tw\`columns-2xl\` tw\`columns-3xl\` tw\`columns-4xl\` tw\`columns-5xl\` tw\`columns-6xl\` tw\`columns-7xl\` tw\`columns-[10rem]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/columns ;({ 1: '1', 2: '2', 3: '3', 4: '4', 5: '5', 6: '6', 7: '7', 8: '8', 9: '9', 10: '10', 11: '11', 12: '12', auto: 'auto', '3xs': '16rem', '2xs': '18rem', xs: '20rem', sm: '24rem', md: '28rem', lg: '32rem', xl: '36rem', '2xl': '42rem', '3xl': '48rem', '4xl': '56rem', '5xl': '64rem', '6xl': '72rem', '7xl': '80rem', }) ;({ columns: '1', }) ;({ columns: '2', }) ;({ columns: '3', }) ;({ columns: '4', }) ;({ columns: '5', }) ;({ columns: '6', }) ;({ columns: '7', }) ;({ columns: '8', }) ;({ columns: '9', }) ;({ columns: '10', }) ;({ columns: '11', }) ;({ columns: '12', }) ;({ columns: 'auto', }) ;({ columns: '16rem', }) ;({ columns: '18rem', }) ;({ columns: '20rem', }) ;({ columns: '24rem', }) ;({ columns: '28rem', }) ;({ columns: '32rem', }) ;({ columns: '36rem', }) ;({ columns: '42rem', }) ;({ columns: '48rem', }) ;({ columns: '56rem', }) ;({ columns: '64rem', }) ;({ columns: '72rem', }) ;({ columns: '80rem', }) ;({ columns: '10rem', }) `; exports[`twin.macro comments.tsx: comments.tsx 1`] = ` // @ts-nocheck import tw from '../macro' /** * Test comments */ // singleline ;
// multiline ;
// mixture ;
// multiline comment ;
// singleline comment with class ;
// multiline comment out a singleline comment with class ;
// mixture with single and multiline on same line ;
// comment in variant group and consecutive strings ;
// break right bracket ;
// comments within multiline comment ;
↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck ;
// multiline ;
// mixture ;
// multiline comment ;
// singleline comment with class ;
// multiline comment out a singleline comment with class ;
// mixture with single and multiline on same line ;
// comment in variant group and consecutive strings ;
// break right bracket ;
// comments within multiline comment ;
`; exports[`twin.macro config.tsx: config.tsx 1`] = ` // @ts-nocheck import tw from '../macro' /** * Test the config matching is working correctly */ tw\`animate-zoom-.5\` tw\`text-number\` tw\`text-purple\` tw\`text-purple-hyphen\` tw\`text-mycolors\` tw\`text-mycolors-a-purple\` tw\`text-mycolors-a-number\` // tw\`text-mycolors-array\` // Arrays aren't supported tw\`text-my-blue-100\` tw\`text-color-opacity\` tw\`text-color-deep-config-500\` tw\`bg-number\` tw\`bg-purple\` tw\`bg-purple-hyphen\` tw\`bg-mycolors\` tw\`bg-mycolors-a-purple\` tw\`bg-mycolors-a-number\` // tw\`bg-mycolors-array\` // Arrays aren't supported tw\`bg-my-blue-100\` tw\`bg-color-opacity\` tw\`bg-color-deep-config-500\` tw\`bg-blue\` tw\`bg-blue-gray\` tw\`bg-blue-gray-200\` tw\`bg-blue-gray-green\` tw\`bg-blue-gray-green-200\` tw\`bg-blue-gray-green-deep-dish\` tw\`bg-blue-gray-green-deep-dish-200\` tw\`bg-blue-gray-green-pink\` tw\`font-customFontWeightAsString\` tw\`font-customFontWeightAsNumber\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck /** * Test the config matching is working correctly */ ;({ animation: 'zoom-.5 2s', }) ;({ color: '0', }) ;({ '--tw-text-opacity': '1', color: 'rgb(128 0 128 / var(--tw-text-opacity))', }) ;({ color: 'purple-hyphen', }) ;({ '--tw-text-opacity': '1', color: 'rgb(0 0 255 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(128 0 128 / var(--tw-text-opacity))', }) ;({ color: '0', }) // tw\`text-mycolors-array\` // Arrays aren't supported ;({ '--tw-text-opacity': '1', color: 'rgb(0 0 255 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgba(var(--color-primary), var(--tw-text-opacity, 1))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(7 71 166 / var(--tw-text-opacity))', }) ;({ backgroundColor: '0', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(128 0 128 / var(--tw-bg-opacity))', }) ;({ backgroundColor: 'purple-hyphen', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(0 0 255 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(128 0 128 / var(--tw-bg-opacity))', }) ;({ backgroundColor: '0', }) // tw\`bg-mycolors-array\` // Arrays aren't supported ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(0 0 255 / var(--tw-bg-opacity))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgba(var(--color-primary), var(--tw-bg-opacity, 1))', }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(7 71 166 / var(--tw-bg-opacity))', }) ;({ backgroundColor: 'blue-default', }) ;({ backgroundColor: 'blue-gray-default', }) ;({ backgroundColor: 'blue-gray-200', }) ;({ backgroundColor: 'blue-gray-green-default', }) ;({ backgroundColor: 'blue-gray-green-200', }) ;({ backgroundColor: 'blue-gray-green-deep-dish-default', }) ;({ backgroundColor: 'blue-gray-green-deep-dish-200', }) ;({ backgroundColor: 'blue-gray-green-pink', }) ;({ fontWeight: '700', }) ;({ fontWeight: '800', }) `; exports[`twin.macro configTS.tsx: configTS.tsx 1`] = ` // @ts-nocheck import tw from '../macro' /** * Test the config matching is working correctly */ tw\`text-purple\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck /** * Test the config matching is working correctly */ ;({ color: 'custom', }) `; exports[`twin.macro container.tsx: container.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/container theme\`container\` tw\`container\` tw\`md:container md:mx-auto\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/container ;({ padding: { DEFAULT: ['1rem', '2rem'], sm: ['2rem'], lg: '4rem', xl: '6rem', object: '8rem', 'object-width': '10rem', 'object-min-max': '12rem', }, margin: { DEFAULT: ['2rem', '3rem'], sm: ['auto'], lg: '5rem', xl: '7rem', }, }) ;({ width: '100%', paddingRight: '2rem', paddingLeft: '2rem', '@media (min-width: 640px)': { maxWidth: '640px', paddingRight: '2rem', paddingLeft: '2rem', }, '@media (min-width: 768px)': { maxWidth: '768px', }, '@media (min-width: 968px)': { maxWidth: '968px', paddingRight: '8rem', paddingLeft: '8rem', }, '@media (min-width: 992px)': { maxWidth: '992px', paddingRight: '10rem', paddingLeft: '10rem', }, '@media (min-width: 1024px)': { maxWidth: '1024px', paddingRight: '4rem', paddingLeft: '4rem', }, '@media (min-width: 1200px)': { maxWidth: '1200px', paddingRight: '12rem', paddingLeft: '12rem', }, '@media (min-width: 1280px)': { maxWidth: '1280px', paddingRight: '6rem', paddingLeft: '6rem', }, '@media (min-width: 1536px)': { maxWidth: '1536px', }, }) ;({ '@media (min-width: 768px)': { width: '100%', paddingRight: '2rem', paddingLeft: '2rem', '@media (min-width: 640px)': { maxWidth: '640px', paddingRight: '2rem', paddingLeft: '2rem', }, '@media (min-width: 768px)': { maxWidth: '768px', }, '@media (min-width: 968px)': { maxWidth: '968px', paddingRight: '8rem', paddingLeft: '8rem', }, '@media (min-width: 992px)': { maxWidth: '992px', paddingRight: '10rem', paddingLeft: '10rem', }, '@media (min-width: 1024px)': { maxWidth: '1024px', paddingRight: '4rem', paddingLeft: '4rem', }, '@media (min-width: 1200px)': { maxWidth: '1200px', paddingRight: '12rem', paddingLeft: '12rem', }, '@media (min-width: 1280px)': { maxWidth: '1280px', paddingRight: '6rem', paddingLeft: '6rem', }, '@media (min-width: 1536px)': { maxWidth: '1536px', }, marginLeft: 'auto', marginRight: 'auto', }, }) `; exports[`twin.macro content.tsx: content.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/content theme\`content\` tw\`content\` tw\`content-test\` tw\`content-['hello']\` tw\`content-[attr(content-before)]\` tw\`content-['>']\` tw\`content-['—']\` tw\`before:content-['—']\` tw\`before:(content-['—'] block)\` tw\`content-none\` tw\`before:block\` tw\`peer-focus:before:block\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/content ;({ none: 'none', DEFAULT: '"default"', test: '"hi"', }) ;({ '--tw-content': '"default"', content: 'var(--tw-content)', }) ;({ '--tw-content': '"hi"', content: 'var(--tw-content)', }) ;({ '--tw-content': "'hello'", content: 'var(--tw-content)', }) ;({ '--tw-content': 'attr(content-before)', content: 'var(--tw-content)', }) ;({ '--tw-content': "'>'", content: 'var(--tw-content)', }) ;({ '--tw-content': "'\\u2014'", content: 'var(--tw-content)', }) ;({ '::before': { '--tw-content': "'\\u2014'", content: 'var(--tw-content)', }, }) ;({ '::before': { content: 'var(--tw-content)', display: 'block', '--tw-content': "'\\u2014'", }, }) ;({ '--tw-content': 'none', content: 'var(--tw-content)', }) ;({ '::before': { content: 'var(--tw-content)', display: 'block', }, }) ;({ '.peer:focus ~ &::before': { content: 'var(--tw-content)', display: 'block', }, }) `; exports[`twin.macro contrast.tsx: contrast.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/contrast theme\`contrast\` tw\`contrast-0\` tw\`contrast-50\` tw\`contrast-75\` tw\`contrast-100\` tw\`contrast-125\` tw\`contrast-150\` tw\`contrast-200\` tw\`contrast-[.25]\` tw\`contrast-[-.25]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/contrast ;({ 0: '0', 50: '.5', 75: '.75', 100: '1', 125: '1.25', 150: '1.5', 200: '2', }) ;({ '--tw-contrast': 'contrast(0)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-contrast': 'contrast(.5)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-contrast': 'contrast(.75)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-contrast': 'contrast(1)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-contrast': 'contrast(1.25)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-contrast': 'contrast(1.5)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-contrast': 'contrast(2)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-contrast': 'contrast(.25)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-contrast': 'contrast(-.25)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) `; exports[`twin.macro cursor.tsx: cursor.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/cursor theme\`cursor\` tw\`cursor-auto\` tw\`cursor-default\` tw\`cursor-pointer\` tw\`cursor-wait\` tw\`cursor-text\` tw\`cursor-move\` tw\`cursor-help\` tw\`cursor-not-allowed\` tw\`cursor-none\` tw\`cursor-context-menu\` tw\`cursor-progress\` tw\`cursor-cell\` tw\`cursor-crosshair\` tw\`cursor-vertical-text\` tw\`cursor-alias\` tw\`cursor-copy\` tw\`cursor-no-drop\` tw\`cursor-grab\` tw\`cursor-grabbing\` tw\`cursor-all-scroll\` tw\`cursor-col-resize\` tw\`cursor-row-resize\` tw\`cursor-n-resize\` tw\`cursor-e-resize\` tw\`cursor-s-resize\` tw\`cursor-w-resize\` tw\`cursor-ne-resize\` tw\`cursor-nw-resize\` tw\`cursor-se-resize\` tw\`cursor-sw-resize\` tw\`cursor-ew-resize\` tw\`cursor-ns-resize\` tw\`cursor-nesw-resize\` tw\`cursor-nwse-resize\` tw\`cursor-zoom-in\` tw\`cursor-zoom-out\` tw\`cursor-[url(hand.cur), pointer]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/cursor ;({ auto: 'auto', default: 'default', pointer: 'pointer', wait: 'wait', text: 'text', move: 'move', help: 'help', 'not-allowed': 'not-allowed', none: 'none', 'context-menu': 'context-menu', progress: 'progress', cell: 'cell', crosshair: 'crosshair', 'vertical-text': 'vertical-text', alias: 'alias', copy: 'copy', 'no-drop': 'no-drop', grab: 'grab', grabbing: 'grabbing', 'all-scroll': 'all-scroll', 'col-resize': 'col-resize', 'row-resize': 'row-resize', 'n-resize': 'n-resize', 'e-resize': 'e-resize', 's-resize': 's-resize', 'w-resize': 'w-resize', 'ne-resize': 'ne-resize', 'nw-resize': 'nw-resize', 'se-resize': 'se-resize', 'sw-resize': 'sw-resize', 'ew-resize': 'ew-resize', 'ns-resize': 'ns-resize', 'nesw-resize': 'nesw-resize', 'nwse-resize': 'nwse-resize', 'zoom-in': 'zoom-in', 'zoom-out': 'zoom-out', }) ;({ cursor: 'auto', }) ;({ cursor: 'default', }) ;({ cursor: 'pointer', }) ;({ cursor: 'wait', }) ;({ cursor: 'text', }) ;({ cursor: 'move', }) ;({ cursor: 'help', }) ;({ cursor: 'not-allowed', }) ;({ cursor: 'none', }) ;({ cursor: 'context-menu', }) ;({ cursor: 'progress', }) ;({ cursor: 'cell', }) ;({ cursor: 'crosshair', }) ;({ cursor: 'vertical-text', }) ;({ cursor: 'alias', }) ;({ cursor: 'copy', }) ;({ cursor: 'no-drop', }) ;({ cursor: 'grab', }) ;({ cursor: 'grabbing', }) ;({ cursor: 'all-scroll', }) ;({ cursor: 'col-resize', }) ;({ cursor: 'row-resize', }) ;({ cursor: 'n-resize', }) ;({ cursor: 'e-resize', }) ;({ cursor: 's-resize', }) ;({ cursor: 'w-resize', }) ;({ cursor: 'ne-resize', }) ;({ cursor: 'nw-resize', }) ;({ cursor: 'se-resize', }) ;({ cursor: 'sw-resize', }) ;({ cursor: 'ew-resize', }) ;({ cursor: 'ns-resize', }) ;({ cursor: 'nesw-resize', }) ;({ cursor: 'nwse-resize', }) ;({ cursor: 'zoom-in', }) ;({ cursor: 'zoom-out', }) ;({ cursor: 'url(hand.cur), pointer', }) `; exports[`twin.macro darkLightModeArray.tsx: darkLightModeArray.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // twinImport tw\`dark:block\` tw\`light:block\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // twinImport ;({ ':is(.test-dark &)': { display: 'block', }, }) ;({ '.test-light &': { display: 'block', }, }) `; exports[`twin.macro directionalBorders.tsx: directionalBorders.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // twinImport tw\`border-t\` tw\`border-r\` tw\`border-b\` tw\`border-l\` tw\`border-t-transparent\` tw\`border-t-current\` tw\`border-t-gray-50\` tw\`border-r-transparent\` tw\`border-r-current\` tw\`border-r-gray-50\` tw\`border-b-transparent\` tw\`border-b-current\` tw\`border-b-gray-50\` tw\`border-l-transparent\` tw\`border-l-current\` tw\`border-l-gray-50\` tw\`border-l-gray-50/20\` tw\`border-t-4\` tw\`border-r-4\` tw\`border-b-4\` tw\`border-l-4\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // twinImport ;({ borderTopWidth: '1px', }) ;({ borderRightWidth: '1px', }) ;({ borderBottomWidth: '1px', }) ;({ borderLeftWidth: '1px', }) ;({ borderTopColor: 'transparent', }) ;({ borderTopColor: 'currentColor', }) ;({ '--tw-border-opacity': '1', borderTopColor: 'rgb(249 250 251 / var(--tw-border-opacity))', }) ;({ borderRightColor: 'transparent', }) ;({ borderRightColor: 'currentColor', }) ;({ '--tw-border-opacity': '1', borderRightColor: 'rgb(249 250 251 / var(--tw-border-opacity))', }) ;({ borderBottomColor: 'transparent', }) ;({ borderBottomColor: 'currentColor', }) ;({ '--tw-border-opacity': '1', borderBottomColor: 'rgb(249 250 251 / var(--tw-border-opacity))', }) ;({ borderLeftColor: 'transparent', }) ;({ borderLeftColor: 'currentColor', }) ;({ '--tw-border-opacity': '1', borderLeftColor: 'rgb(249 250 251 / var(--tw-border-opacity))', }) ;({ borderLeftColor: 'rgb(249 250 251 / 0.2)', }) ;({ borderTopWidth: '4px', }) ;({ borderRightWidth: '4px', }) ;({ borderBottomWidth: '4px', }) ;({ borderLeftWidth: '4px', }) `; exports[`twin.macro display.tsx: display.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/display tw\`block\` tw\`inline-block\` tw\`inline\` tw\`flex\` tw\`inline-flex\` tw\`table\` tw\`table-caption\` tw\`table-cell\` tw\`table-column\` tw\`table-column-group\` tw\`table-footer-group\` tw\`table-header-group\` tw\`table-row-group\` tw\`table-row\` tw\`flow-root\` tw\`grid\` tw\`inline-grid\` tw\`contents\` tw\`list-item\` tw\`hidden\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/display ;({ display: 'block', }) ;({ display: 'inline-block', }) ;({ display: 'inline', }) ;({ display: 'flex', }) ;({ display: 'inline-flex', }) ;({ display: 'table', }) ;({ display: 'table-caption', }) ;({ display: 'table-cell', }) ;({ display: 'table-column', }) ;({ display: 'table-column-group', }) ;({ display: 'table-footer-group', }) ;({ display: 'table-header-group', }) ;({ display: 'table-row-group', }) ;({ display: 'table-row', }) ;({ display: 'flow-root', }) ;({ display: 'grid', }) ;({ display: 'inline-grid', }) ;({ display: 'contents', }) ;({ display: 'list-item', }) ;({ display: 'none', }) `; exports[`twin.macro divideColor.tsx: divideColor.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/divide-color theme\`divideColor.\` tw\`divide-inherit\` tw\`divide-current\` tw\`divide-transparent\` tw\`divide-black\` tw\`divide-white\` tw\`divide-slate-50\` tw\`divide-slate-100\` tw\`divide-slate-200\` tw\`divide-slate-300\` tw\`divide-slate-400\` tw\`divide-slate-500\` tw\`divide-slate-600\` tw\`divide-slate-700\` tw\`divide-slate-800\` tw\`divide-slate-900\` tw\`divide-gray-50\` tw\`divide-gray-100\` tw\`divide-gray-200\` tw\`divide-gray-300\` tw\`divide-gray-400\` tw\`divide-gray-500\` tw\`divide-gray-600\` tw\`divide-gray-700\` tw\`divide-gray-800\` tw\`divide-gray-900\` tw\`divide-zinc-50\` tw\`divide-zinc-100\` tw\`divide-zinc-200\` tw\`divide-zinc-300\` tw\`divide-zinc-400\` tw\`divide-zinc-500\` tw\`divide-zinc-600\` tw\`divide-zinc-700\` tw\`divide-zinc-800\` tw\`divide-zinc-900\` tw\`divide-neutral-50\` tw\`divide-neutral-100\` tw\`divide-neutral-200\` tw\`divide-neutral-300\` tw\`divide-neutral-400\` tw\`divide-neutral-500\` tw\`divide-neutral-600\` tw\`divide-neutral-700\` tw\`divide-neutral-800\` tw\`divide-neutral-900\` tw\`divide-stone-50\` tw\`divide-stone-100\` tw\`divide-stone-200\` tw\`divide-stone-300\` tw\`divide-stone-400\` tw\`divide-stone-500\` tw\`divide-stone-600\` tw\`divide-stone-700\` tw\`divide-stone-800\` tw\`divide-stone-900\` tw\`divide-red-50\` tw\`divide-red-100\` tw\`divide-red-200\` tw\`divide-red-300\` tw\`divide-red-400\` tw\`divide-red-500\` tw\`divide-red-600\` tw\`divide-red-700\` tw\`divide-red-800\` tw\`divide-red-900\` tw\`divide-orange-50\` tw\`divide-orange-100\` tw\`divide-orange-200\` tw\`divide-orange-300\` tw\`divide-orange-400\` tw\`divide-orange-500\` tw\`divide-orange-600\` tw\`divide-orange-700\` tw\`divide-orange-800\` tw\`divide-orange-900\` tw\`divide-amber-50\` tw\`divide-amber-100\` tw\`divide-amber-200\` tw\`divide-amber-300\` tw\`divide-amber-400\` tw\`divide-amber-500\` tw\`divide-amber-600\` tw\`divide-amber-700\` tw\`divide-amber-800\` tw\`divide-amber-900\` tw\`divide-yellow-50\` tw\`divide-yellow-100\` tw\`divide-yellow-200\` tw\`divide-yellow-300\` tw\`divide-yellow-400\` tw\`divide-yellow-500\` tw\`divide-yellow-600\` tw\`divide-yellow-700\` tw\`divide-yellow-800\` tw\`divide-yellow-900\` tw\`divide-lime-50\` tw\`divide-lime-100\` tw\`divide-lime-200\` tw\`divide-lime-300\` tw\`divide-lime-400\` tw\`divide-lime-500\` tw\`divide-lime-600\` tw\`divide-lime-700\` tw\`divide-lime-800\` tw\`divide-lime-900\` tw\`divide-green-50\` tw\`divide-green-100\` tw\`divide-green-200\` tw\`divide-green-300\` tw\`divide-green-400\` tw\`divide-green-500\` tw\`divide-green-600\` tw\`divide-green-700\` tw\`divide-green-800\` tw\`divide-green-900\` tw\`divide-emerald-50\` tw\`divide-emerald-100\` tw\`divide-emerald-200\` tw\`divide-emerald-300\` tw\`divide-emerald-400\` tw\`divide-emerald-500\` tw\`divide-emerald-600\` tw\`divide-emerald-700\` tw\`divide-emerald-800\` tw\`divide-emerald-900\` tw\`divide-teal-50\` tw\`divide-teal-100\` tw\`divide-teal-200\` tw\`divide-teal-300\` tw\`divide-teal-400\` tw\`divide-teal-500\` tw\`divide-teal-600\` tw\`divide-teal-700\` tw\`divide-teal-800\` tw\`divide-teal-900\` tw\`divide-cyan-50\` tw\`divide-cyan-100\` tw\`divide-cyan-200\` tw\`divide-cyan-300\` tw\`divide-cyan-400\` tw\`divide-cyan-500\` tw\`divide-cyan-600\` tw\`divide-cyan-700\` tw\`divide-cyan-800\` tw\`divide-cyan-900\` tw\`divide-sky-50\` tw\`divide-sky-100\` tw\`divide-sky-200\` tw\`divide-sky-300\` tw\`divide-sky-400\` tw\`divide-sky-500\` tw\`divide-sky-600\` tw\`divide-sky-700\` tw\`divide-sky-800\` tw\`divide-sky-900\` tw\`divide-blue-50\` tw\`divide-blue-100\` tw\`divide-blue-200\` tw\`divide-blue-300\` tw\`divide-blue-400\` tw\`divide-blue-500\` tw\`divide-blue-600\` tw\`divide-blue-700\` tw\`divide-blue-800\` tw\`divide-blue-900\` tw\`divide-indigo-50\` tw\`divide-indigo-100\` tw\`divide-indigo-200\` tw\`divide-indigo-300\` tw\`divide-indigo-400\` tw\`divide-indigo-500\` tw\`divide-indigo-600\` tw\`divide-indigo-700\` tw\`divide-indigo-800\` tw\`divide-indigo-900\` tw\`divide-violet-50\` tw\`divide-violet-100\` tw\`divide-violet-200\` tw\`divide-violet-300\` tw\`divide-violet-400\` tw\`divide-violet-500\` tw\`divide-violet-600\` tw\`divide-violet-700\` tw\`divide-violet-800\` tw\`divide-violet-900\` tw\`divide-purple-50\` tw\`divide-purple-100\` tw\`divide-purple-200\` tw\`divide-purple-300\` tw\`divide-purple-400\` tw\`divide-purple-500\` tw\`divide-purple-600\` tw\`divide-purple-700\` tw\`divide-purple-800\` tw\`divide-purple-900\` tw\`divide-fuchsia-50\` tw\`divide-fuchsia-100\` tw\`divide-fuchsia-200\` tw\`divide-fuchsia-300\` tw\`divide-fuchsia-400\` tw\`divide-fuchsia-500\` tw\`divide-fuchsia-600\` tw\`divide-fuchsia-700\` tw\`divide-fuchsia-800\` tw\`divide-fuchsia-900\` tw\`divide-pink-50\` tw\`divide-pink-100\` tw\`divide-pink-200\` tw\`divide-pink-300\` tw\`divide-pink-400\` tw\`divide-pink-500\` tw\`divide-pink-600\` tw\`divide-pink-700\` tw\`divide-pink-800\` tw\`divide-pink-900\` tw\`divide-rose-50\` tw\`divide-rose-100\` tw\`divide-rose-200\` tw\`divide-rose-300\` tw\`divide-rose-400\` tw\`divide-rose-500\` tw\`divide-rose-600\` tw\`divide-rose-700\` tw\`divide-rose-800\` tw\`divide-rose-900\` tw\`divide-y-4 divide-slate-400/25\` tw\`divide-y-4 divide-slate-400/[.24]\` tw\`divide-[#243c5a]\` tw\`divide-[color:blue]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/divide-color ;({ inherit: 'inherit', current: 'currentColor', transparent: 'transparent', black: '#000', white: '#fff', slate: { 50: '#f8fafc', 100: '#f1f5f9', 200: '#e2e8f0', 300: '#cbd5e1', 400: '#94a3b8', 500: '#64748b', 600: '#475569', 700: '#334155', 800: '#1e293b', 900: '#0f172a', 950: '#020617', }, gray: { 50: '#f9fafb', 100: '#f3f4f6', 200: '#e5e7eb', 300: '#d1d5db', 400: '#9ca3af', 500: '#6b7280', 600: '#4b5563', 700: '#374151', 800: '#1f2937', 900: '#111827', 950: '#030712', }, zinc: { 50: '#fafafa', 100: '#f4f4f5', 200: '#e4e4e7', 300: '#d4d4d8', 400: '#a1a1aa', 500: '#71717a', 600: '#52525b', 700: '#3f3f46', 800: '#27272a', 900: '#18181b', 950: '#09090b', }, neutral: { 50: '#fafafa', 100: '#f5f5f5', 200: '#e5e5e5', 300: '#d4d4d4', 400: '#a3a3a3', 500: '#737373', 600: '#525252', 700: '#404040', 800: '#262626', 900: '#171717', 950: '#0a0a0a', }, stone: { 50: '#fafaf9', 100: '#f5f5f4', 200: '#e7e5e4', 300: '#d6d3d1', 400: '#a8a29e', 500: '#78716c', 600: '#57534e', 700: '#44403c', 800: '#292524', 900: '#1c1917', 950: '#0c0a09', }, red: { 50: '#fef2f2', 100: '#fee2e2', 200: '#fecaca', 300: '#fca5a5', 400: '#f87171', 500: '#ef4444', 600: '#dc2626', 700: '#b91c1c', 800: '#991b1b', 900: '#7f1d1d', 950: '#450a0a', }, orange: { 50: '#fff7ed', 100: '#ffedd5', 200: '#fed7aa', 300: '#fdba74', 400: '#fb923c', 500: '#f97316', 600: '#ea580c', 700: '#c2410c', 800: '#9a3412', 900: '#7c2d12', 950: '#431407', }, amber: { 50: '#fffbeb', 100: '#fef3c7', 200: '#fde68a', 300: '#fcd34d', 400: '#fbbf24', 500: '#f59e0b', 600: '#d97706', 700: '#b45309', 800: '#92400e', 900: '#78350f', 950: '#451a03', }, yellow: { 50: '#fefce8', 100: '#fef9c3', 200: '#fef08a', 300: '#fde047', 400: '#facc15', 500: '#eab308', 600: '#ca8a04', 700: '#a16207', 800: '#854d0e', 900: '#713f12', 950: '#422006', }, lime: { 50: '#f7fee7', 100: '#ecfccb', 200: '#d9f99d', 300: '#bef264', 400: '#a3e635', 500: '#84cc16', 600: '#65a30d', 700: '#4d7c0f', 800: '#3f6212', 900: '#365314', 950: '#1a2e05', }, green: { 50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 300: '#86efac', 400: '#4ade80', 500: '#22c55e', 600: '#16a34a', 700: '#15803d', 800: '#166534', 900: '#14532d', 950: '#052e16', }, emerald: { 50: '#ecfdf5', 100: '#d1fae5', 200: '#a7f3d0', 300: '#6ee7b7', 400: '#34d399', 500: '#10b981', 600: '#059669', 700: '#047857', 800: '#065f46', 900: '#064e3b', 950: '#022c22', }, teal: { 50: '#f0fdfa', 100: '#ccfbf1', 200: '#99f6e4', 300: '#5eead4', 400: '#2dd4bf', 500: '#14b8a6', 600: '#0d9488', 700: '#0f766e', 800: '#115e59', 900: '#134e4a', 950: '#042f2e', }, cyan: { 50: '#ecfeff', 100: '#cffafe', 200: '#a5f3fc', 300: '#67e8f9', 400: '#22d3ee', 500: '#06b6d4', 600: '#0891b2', 700: '#0e7490', 800: '#155e75', 900: '#164e63', 950: '#083344', }, sky: { 50: '#f0f9ff', 100: '#e0f2fe', 200: '#bae6fd', 300: '#7dd3fc', 400: '#38bdf8', 500: '#0ea5e9', 600: '#0284c7', 700: '#0369a1', 800: '#075985', 900: '#0c4a6e', 950: '#082f49', }, blue: { 50: '#eff6ff', 100: '#dbeafe', 200: '#bfdbfe', 300: '#93c5fd', 400: '#60a5fa', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8', 800: '#1e40af', 900: '#1e3a8a', 950: '#172554', }, indigo: { 50: '#eef2ff', 100: '#e0e7ff', 200: '#c7d2fe', 300: '#a5b4fc', 400: '#818cf8', 500: '#6366f1', 600: '#4f46e5', 700: '#4338ca', 800: '#3730a3', 900: '#312e81', 950: '#1e1b4b', }, violet: { 50: '#f5f3ff', 100: '#ede9fe', 200: '#ddd6fe', 300: '#c4b5fd', 400: '#a78bfa', 500: '#8b5cf6', 600: '#7c3aed', 700: '#6d28d9', 800: '#5b21b6', 900: '#4c1d95', 950: '#2e1065', }, purple: { 50: '#faf5ff', 100: '#f3e8ff', 200: '#e9d5ff', 300: '#d8b4fe', 400: '#c084fc', 500: '#a855f7', 600: '#9333ea', 700: '#7e22ce', 800: '#6b21a8', 900: '#581c87', 950: '#3b0764', }, fuchsia: { 50: '#fdf4ff', 100: '#fae8ff', 200: '#f5d0fe', 300: '#f0abfc', 400: '#e879f9', 500: '#d946ef', 600: '#c026d3', 700: '#a21caf', 800: '#86198f', 900: '#701a75', 950: '#4a044e', }, pink: { 50: '#fdf2f8', 100: '#fce7f3', 200: '#fbcfe8', 300: '#f9a8d4', 400: '#f472b6', 500: '#ec4899', 600: '#db2777', 700: '#be185d', 800: '#9d174d', 900: '#831843', 950: '#500724', }, rose: { 50: '#fff1f2', 100: '#ffe4e6', 200: '#fecdd3', 300: '#fda4af', 400: '#fb7185', 500: '#f43f5e', 600: '#e11d48', 700: '#be123c', 800: '#9f1239', 900: '#881337', 950: '#4c0519', }, 'red-500/fromConfig': '#000', electric: void 0, DEFAULT: '#e5e7eb', }) ;({ '> :not([hidden]) ~ :not([hidden])': { borderColor: 'inherit', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { borderColor: 'currentColor', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { borderColor: 'transparent', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(0 0 0 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(255 255 255 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(248 250 252 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(241 245 249 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(226 232 240 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(203 213 225 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(148 163 184 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(100 116 139 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(71 85 105 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(51 65 85 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(30 41 59 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(15 23 42 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(249 250 251 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(243 244 246 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(229 231 235 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(209 213 219 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(156 163 175 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(107 114 128 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(75 85 99 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(55 65 81 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(31 41 55 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(17 24 39 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(250 250 250 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(244 244 245 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(228 228 231 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(212 212 216 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(161 161 170 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(113 113 122 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(82 82 91 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(63 63 70 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(39 39 42 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(24 24 27 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(250 250 250 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(245 245 245 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(229 229 229 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(212 212 212 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(163 163 163 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(115 115 115 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(82 82 82 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(64 64 64 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(38 38 38 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(23 23 23 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(250 250 249 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(245 245 244 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(231 229 228 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(214 211 209 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(168 162 158 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(120 113 108 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(87 83 78 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(68 64 60 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(41 37 36 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(28 25 23 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(254 242 242 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(254 226 226 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(254 202 202 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(252 165 165 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(248 113 113 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(239 68 68 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(220 38 38 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(185 28 28 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(153 27 27 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(127 29 29 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(255 247 237 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(255 237 213 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(254 215 170 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(253 186 116 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(251 146 60 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(249 115 22 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(234 88 12 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(194 65 12 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(154 52 18 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(124 45 18 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(255 251 235 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(254 243 199 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(253 230 138 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(252 211 77 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(251 191 36 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(245 158 11 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(217 119 6 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(180 83 9 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(146 64 14 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(120 53 15 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(254 252 232 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(254 249 195 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(254 240 138 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(253 224 71 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(250 204 21 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(234 179 8 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(202 138 4 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(161 98 7 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(133 77 14 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(113 63 18 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(247 254 231 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(236 252 203 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(217 249 157 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(190 242 100 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(163 230 53 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(132 204 22 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(101 163 13 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(77 124 15 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(63 98 18 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(54 83 20 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(240 253 244 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(220 252 231 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(187 247 208 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(134 239 172 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(74 222 128 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(34 197 94 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(22 163 74 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(21 128 61 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(22 101 52 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(20 83 45 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(236 253 245 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(209 250 229 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(167 243 208 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(110 231 183 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(52 211 153 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(16 185 129 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(5 150 105 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(4 120 87 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(6 95 70 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(6 78 59 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(240 253 250 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(204 251 241 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(153 246 228 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(94 234 212 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(45 212 191 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(20 184 166 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(13 148 136 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(15 118 110 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(17 94 89 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(19 78 74 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(236 254 255 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(207 250 254 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(165 243 252 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(103 232 249 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(34 211 238 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(6 182 212 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(8 145 178 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(14 116 144 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(21 94 117 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(22 78 99 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(240 249 255 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(224 242 254 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(186 230 253 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(125 211 252 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(56 189 248 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(14 165 233 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(2 132 199 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(3 105 161 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(7 89 133 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(12 74 110 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(239 246 255 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(219 234 254 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(191 219 254 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(147 197 253 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(96 165 250 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(59 130 246 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(37 99 235 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(29 78 216 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(30 64 175 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(30 58 138 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(238 242 255 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(224 231 255 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(199 210 254 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(165 180 252 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(129 140 248 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(99 102 241 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(79 70 229 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(67 56 202 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(55 48 163 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(49 46 129 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(245 243 255 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(237 233 254 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(221 214 254 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(196 181 253 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(167 139 250 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(139 92 246 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(124 58 237 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(109 40 217 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(91 33 182 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(76 29 149 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(250 245 255 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(243 232 255 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(233 213 255 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(216 180 254 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(192 132 252 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(168 85 247 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(147 51 234 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(126 34 206 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(107 33 168 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(88 28 135 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(253 244 255 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(250 232 255 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(245 208 254 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(240 171 252 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(232 121 249 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(217 70 239 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(192 38 211 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(162 28 175 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(134 25 143 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(112 26 117 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(253 242 248 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(252 231 243 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(251 207 232 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(249 168 212 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(244 114 182 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(236 72 153 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(219 39 119 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(190 24 93 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(157 23 77 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(131 24 67 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(255 241 242 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(255 228 230 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(254 205 211 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(253 164 175 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(251 113 133 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(244 63 94 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(225 29 72 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(190 18 60 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(159 18 57 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(136 19 55 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-y-reverse': '0', borderTopWidth: 'calc(4px * calc(1 - var(--tw-divide-y-reverse)))', borderBottomWidth: 'calc(4px * var(--tw-divide-y-reverse))', borderColor: 'rgb(148 163 184 / 0.25)', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-y-reverse': '0', borderTopWidth: 'calc(4px * calc(1 - var(--tw-divide-y-reverse)))', borderBottomWidth: 'calc(4px * var(--tw-divide-y-reverse))', borderColor: 'rgb(148 163 184 / .24)', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(36 60 90 / var(--tw-divide-opacity))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', borderColor: 'rgb(0 0 255 / var(--tw-divide-opacity))', }, }) `; exports[`twin.macro divideOpacity.tsx: divideOpacity.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/divide-opacity // Deprecated in favor of slash opacity syntax tw\`divide-opacity-0\` tw\`divide-opacity-5\` tw\`divide-opacity-10\` tw\`divide-opacity-20\` tw\`divide-opacity-25\` tw\`divide-opacity-30\` tw\`divide-opacity-40\` tw\`divide-opacity-50\` tw\`divide-opacity-60\` tw\`divide-opacity-70\` tw\`divide-opacity-75\` tw\`divide-opacity-80\` tw\`divide-opacity-90\` tw\`divide-opacity-95\` tw\`divide-opacity-100\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/divide-opacity // Deprecated in favor of slash opacity syntax ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '0', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '0.05', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '0.1', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '0.2', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '0.25', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '0.3', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '0.4', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '0.5', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '0.6', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '0.7', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '0.75', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '0.8', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '0.9', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '0.95', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-opacity': '1', }, }) `; exports[`twin.macro divideStyle.tsx: divideStyle.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/divide-style tw\`divide-solid\` tw\`divide-dashed\` tw\`divide-dotted\` tw\`divide-double\` tw\`divide-none\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/divide-style ;({ '> :not([hidden]) ~ :not([hidden])': { borderStyle: 'solid', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { borderStyle: 'dashed', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { borderStyle: 'dotted', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { borderStyle: 'double', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { borderStyle: 'none', }, }) `; exports[`twin.macro divideWidth.tsx: divideWidth.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/divide-width theme\`divideWidth.\` tw\`divide-x-0\` tw\`divide-x-2\` tw\`divide-x-4\` tw\`divide-x-8\` tw\`divide-x\` tw\`divide-y-0\` tw\`divide-y-2\` tw\`divide-y-4\` tw\`divide-y-8\` tw\`divide-y\` tw\`divide-x-reverse\` tw\`divide-y-reverse\` tw\`divide-x-[3px]\` tw\`divide-y-[3px]\` tw\`divide-x-[line-width:3px]\` tw\`divide-x-[length:3px]\` tw\`divide-y-[line-width:3px]\` tw\`divide-y-[length:3px]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/divide-width ;({ 0: '0px', 2: '2px', 4: '4px', 8: '8px', DEFAULT: '1px', }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-x-reverse': '0', borderRightWidth: 'calc(0px * var(--tw-divide-x-reverse))', borderLeftWidth: 'calc(0px * calc(1 - var(--tw-divide-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-x-reverse': '0', borderRightWidth: 'calc(2px * var(--tw-divide-x-reverse))', borderLeftWidth: 'calc(2px * calc(1 - var(--tw-divide-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-x-reverse': '0', borderRightWidth: 'calc(4px * var(--tw-divide-x-reverse))', borderLeftWidth: 'calc(4px * calc(1 - var(--tw-divide-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-x-reverse': '0', borderRightWidth: 'calc(8px * var(--tw-divide-x-reverse))', borderLeftWidth: 'calc(8px * calc(1 - var(--tw-divide-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-x-reverse': '0', borderRightWidth: 'calc(1px * var(--tw-divide-x-reverse))', borderLeftWidth: 'calc(1px * calc(1 - var(--tw-divide-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-y-reverse': '0', borderTopWidth: 'calc(0px * calc(1 - var(--tw-divide-y-reverse)))', borderBottomWidth: 'calc(0px * var(--tw-divide-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-y-reverse': '0', borderTopWidth: 'calc(2px * calc(1 - var(--tw-divide-y-reverse)))', borderBottomWidth: 'calc(2px * var(--tw-divide-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-y-reverse': '0', borderTopWidth: 'calc(4px * calc(1 - var(--tw-divide-y-reverse)))', borderBottomWidth: 'calc(4px * var(--tw-divide-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-y-reverse': '0', borderTopWidth: 'calc(8px * calc(1 - var(--tw-divide-y-reverse)))', borderBottomWidth: 'calc(8px * var(--tw-divide-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-y-reverse': '0', borderTopWidth: 'calc(1px * calc(1 - var(--tw-divide-y-reverse)))', borderBottomWidth: 'calc(1px * var(--tw-divide-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-x-reverse': '1', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-y-reverse': '1', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-x-reverse': '0', borderRightWidth: 'calc(3px * var(--tw-divide-x-reverse))', borderLeftWidth: 'calc(3px * calc(1 - var(--tw-divide-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-y-reverse': '0', borderTopWidth: 'calc(3px * calc(1 - var(--tw-divide-y-reverse)))', borderBottomWidth: 'calc(3px * var(--tw-divide-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-x-reverse': '0', borderRightWidth: 'calc(3px * var(--tw-divide-x-reverse))', borderLeftWidth: 'calc(3px * calc(1 - var(--tw-divide-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-x-reverse': '0', borderRightWidth: 'calc(3px * var(--tw-divide-x-reverse))', borderLeftWidth: 'calc(3px * calc(1 - var(--tw-divide-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-y-reverse': '0', borderTopWidth: 'calc(3px * calc(1 - var(--tw-divide-y-reverse)))', borderBottomWidth: 'calc(3px * var(--tw-divide-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-divide-y-reverse': '0', borderTopWidth: 'calc(3px * calc(1 - var(--tw-divide-y-reverse)))', borderBottomWidth: 'calc(3px * var(--tw-divide-y-reverse))', }, }) `; exports[`twin.macro dropShadow.tsx: dropShadow.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/drop-shadow theme\`dropShadow\` tw\`drop-shadow-sm\` tw\`drop-shadow\` tw\`drop-shadow-md\` tw\`drop-shadow-lg\` tw\`drop-shadow-xl\` tw\`drop-shadow-2xl\` tw\`drop-shadow-none\` tw\`drop-shadow-[0 35px 35px rgba(0, 0, 0, 0.25)]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/drop-shadow ;({ sm: '0 1px 1px rgb(0 0 0 / 0.05)', DEFAULT: ['0 1px 2px rgb(0 0 0 / 0.1)', '0 1px 1px rgb(0 0 0 / 0.06)'], md: ['0 4px 3px rgb(0 0 0 / 0.07)', '0 2px 2px rgb(0 0 0 / 0.06)'], lg: ['0 10px 8px rgb(0 0 0 / 0.04)', '0 4px 3px rgb(0 0 0 / 0.1)'], xl: ['0 20px 13px rgb(0 0 0 / 0.03)', '0 8px 5px rgb(0 0 0 / 0.08)'], '2xl': '0 25px 25px rgb(0 0 0 / 0.15)', none: '0 0 #0000', }) ;({ '--tw-drop-shadow': 'drop-shadow(0 1px 1px rgb(0 0 0 / 0.05))', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-drop-shadow': 'drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06))', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-drop-shadow': 'drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06))', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-drop-shadow': 'drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1))', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-drop-shadow': 'drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08))', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-drop-shadow': 'drop-shadow(0 25px 25px rgb(0 0 0 / 0.15))', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-drop-shadow': 'drop-shadow(0 0 #0000)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-drop-shadow': 'drop-shadow(0 35px 35px rgba(0, 0, 0, 0.25))', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) `; exports[`twin.macro fill.tsx: fill.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/fill theme\`fill\` tw\`fill-none\` tw\`fill-inherit\` tw\`fill-current\` tw\`fill-transparent\` tw\`fill-black\` tw\`fill-white\` tw\`fill-slate-50\` tw\`fill-slate-100\` tw\`fill-slate-200\` tw\`fill-slate-300\` tw\`fill-slate-400\` tw\`fill-slate-500\` tw\`fill-slate-600\` tw\`fill-slate-700\` tw\`fill-slate-800\` tw\`fill-slate-900\` tw\`fill-gray-50\` tw\`fill-gray-100\` tw\`fill-gray-200\` tw\`fill-gray-300\` tw\`fill-gray-400\` tw\`fill-gray-500\` tw\`fill-gray-600\` tw\`fill-gray-700\` tw\`fill-gray-800\` tw\`fill-gray-900\` tw\`fill-zinc-50\` tw\`fill-zinc-100\` tw\`fill-zinc-200\` tw\`fill-zinc-300\` tw\`fill-zinc-400\` tw\`fill-zinc-500\` tw\`fill-zinc-600\` tw\`fill-zinc-700\` tw\`fill-zinc-800\` tw\`fill-zinc-900\` tw\`fill-neutral-50\` tw\`fill-neutral-100\` tw\`fill-neutral-200\` tw\`fill-neutral-300\` tw\`fill-neutral-400\` tw\`fill-neutral-500\` tw\`fill-neutral-600\` tw\`fill-neutral-700\` tw\`fill-neutral-800\` tw\`fill-neutral-900\` tw\`fill-stone-50\` tw\`fill-stone-100\` tw\`fill-stone-200\` tw\`fill-stone-300\` tw\`fill-stone-400\` tw\`fill-stone-500\` tw\`fill-stone-600\` tw\`fill-stone-700\` tw\`fill-stone-800\` tw\`fill-stone-900\` tw\`fill-red-50\` tw\`fill-red-100\` tw\`fill-red-200\` tw\`fill-red-300\` tw\`fill-red-400\` tw\`fill-red-500\` tw\`fill-red-600\` tw\`fill-red-700\` tw\`fill-red-800\` tw\`fill-red-900\` tw\`fill-orange-50\` tw\`fill-orange-100\` tw\`fill-orange-200\` tw\`fill-orange-300\` tw\`fill-orange-400\` tw\`fill-orange-500\` tw\`fill-orange-600\` tw\`fill-orange-700\` tw\`fill-orange-800\` tw\`fill-orange-900\` tw\`fill-amber-50\` tw\`fill-amber-100\` tw\`fill-amber-200\` tw\`fill-amber-300\` tw\`fill-amber-400\` tw\`fill-amber-500\` tw\`fill-amber-600\` tw\`fill-amber-700\` tw\`fill-amber-800\` tw\`fill-amber-900\` tw\`fill-yellow-50\` tw\`fill-yellow-100\` tw\`fill-yellow-200\` tw\`fill-yellow-300\` tw\`fill-yellow-400\` tw\`fill-yellow-500\` tw\`fill-yellow-600\` tw\`fill-yellow-700\` tw\`fill-yellow-800\` tw\`fill-yellow-900\` tw\`fill-lime-50\` tw\`fill-lime-100\` tw\`fill-lime-200\` tw\`fill-lime-300\` tw\`fill-lime-400\` tw\`fill-lime-500\` tw\`fill-lime-600\` tw\`fill-lime-700\` tw\`fill-lime-800\` tw\`fill-lime-900\` tw\`fill-green-50\` tw\`fill-green-100\` tw\`fill-green-200\` tw\`fill-green-300\` tw\`fill-green-400\` tw\`fill-green-500\` tw\`fill-green-600\` tw\`fill-green-700\` tw\`fill-green-800\` tw\`fill-green-900\` tw\`fill-emerald-50\` tw\`fill-emerald-100\` tw\`fill-emerald-200\` tw\`fill-emerald-300\` tw\`fill-emerald-400\` tw\`fill-emerald-500\` tw\`fill-emerald-600\` tw\`fill-emerald-700\` tw\`fill-emerald-800\` tw\`fill-emerald-900\` tw\`fill-teal-50\` tw\`fill-teal-100\` tw\`fill-teal-200\` tw\`fill-teal-300\` tw\`fill-teal-400\` tw\`fill-teal-500\` tw\`fill-teal-600\` tw\`fill-teal-700\` tw\`fill-teal-800\` tw\`fill-teal-900\` tw\`fill-cyan-50\` tw\`fill-cyan-100\` tw\`fill-cyan-200\` tw\`fill-cyan-300\` tw\`fill-cyan-400\` tw\`fill-cyan-500\` tw\`fill-cyan-600\` tw\`fill-cyan-700\` tw\`fill-cyan-800\` tw\`fill-cyan-900\` tw\`fill-sky-50\` tw\`fill-sky-100\` tw\`fill-sky-200\` tw\`fill-sky-300\` tw\`fill-sky-400\` tw\`fill-sky-500\` tw\`fill-sky-600\` tw\`fill-sky-700\` tw\`fill-sky-800\` tw\`fill-sky-900\` tw\`fill-blue-50\` tw\`fill-blue-100\` tw\`fill-blue-200\` tw\`fill-blue-300\` tw\`fill-blue-400\` tw\`fill-blue-500\` tw\`fill-blue-600\` tw\`fill-blue-700\` tw\`fill-blue-800\` tw\`fill-blue-900\` tw\`fill-indigo-50\` tw\`fill-indigo-100\` tw\`fill-indigo-200\` tw\`fill-indigo-300\` tw\`fill-indigo-400\` tw\`fill-indigo-500\` tw\`fill-indigo-600\` tw\`fill-indigo-700\` tw\`fill-indigo-800\` tw\`fill-indigo-900\` tw\`fill-violet-50\` tw\`fill-violet-100\` tw\`fill-violet-200\` tw\`fill-violet-300\` tw\`fill-violet-400\` tw\`fill-violet-500\` tw\`fill-violet-600\` tw\`fill-violet-700\` tw\`fill-violet-800\` tw\`fill-violet-900\` tw\`fill-purple-50\` tw\`fill-purple-100\` tw\`fill-purple-200\` tw\`fill-purple-300\` tw\`fill-purple-400\` tw\`fill-purple-500\` tw\`fill-purple-600\` tw\`fill-purple-700\` tw\`fill-purple-800\` tw\`fill-purple-900\` tw\`fill-fuchsia-50\` tw\`fill-fuchsia-100\` tw\`fill-fuchsia-200\` tw\`fill-fuchsia-300\` tw\`fill-fuchsia-400\` tw\`fill-fuchsia-500\` tw\`fill-fuchsia-600\` tw\`fill-fuchsia-700\` tw\`fill-fuchsia-800\` tw\`fill-fuchsia-900\` tw\`fill-pink-50\` tw\`fill-pink-100\` tw\`fill-pink-200\` tw\`fill-pink-300\` tw\`fill-pink-400\` tw\`fill-pink-500\` tw\`fill-pink-600\` tw\`fill-pink-700\` tw\`fill-pink-800\` tw\`fill-pink-900\` tw\`fill-rose-50\` tw\`fill-rose-100\` tw\`fill-rose-200\` tw\`fill-rose-300\` tw\`fill-rose-400\` tw\`fill-rose-500\` tw\`fill-rose-600\` tw\`fill-rose-700\` tw\`fill-rose-800\` tw\`fill-rose-900\` tw\`fill-[#243c5a]\` tw\`fill-[var(--color)]\` tw\`fill-red-500\` tw\`fill-red-500/25\` tw\`fill-red-500/fromConfig\` tw\`fill-red-500/fromConfig/25\` tw\`fill-red-500/fromConfig/[.555]\` tw\`fill-red-500/fromConfig/[var(--myvar)]\` tw\`fill-red-500/[.555]\` tw\`fill-red-500/[var(--myvar)]\` tw\`fill-[theme('colors.red.500')]\` tw\`fill-[theme('colors.red.500')]/20\` tw\`fill-electric\` tw\`fill-electric/25\` tw\`fill-electric/[.555]\` tw\`fill-electric/[var(--myvar)]\` tw\`fill-[theme('colors.electric')]\` tw\`fill-[theme('colors.electric')]/20\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/fill ;({ none: 'none', inherit: 'inherit', current: 'currentColor', transparent: 'transparent', black: '#000', white: '#fff', slate: { 50: '#f8fafc', 100: '#f1f5f9', 200: '#e2e8f0', 300: '#cbd5e1', 400: '#94a3b8', 500: '#64748b', 600: '#475569', 700: '#334155', 800: '#1e293b', 900: '#0f172a', 950: '#020617', }, gray: { 50: '#f9fafb', 100: '#f3f4f6', 200: '#e5e7eb', 300: '#d1d5db', 400: '#9ca3af', 500: '#6b7280', 600: '#4b5563', 700: '#374151', 800: '#1f2937', 900: '#111827', 950: '#030712', }, zinc: { 50: '#fafafa', 100: '#f4f4f5', 200: '#e4e4e7', 300: '#d4d4d8', 400: '#a1a1aa', 500: '#71717a', 600: '#52525b', 700: '#3f3f46', 800: '#27272a', 900: '#18181b', 950: '#09090b', }, neutral: { 50: '#fafafa', 100: '#f5f5f5', 200: '#e5e5e5', 300: '#d4d4d4', 400: '#a3a3a3', 500: '#737373', 600: '#525252', 700: '#404040', 800: '#262626', 900: '#171717', 950: '#0a0a0a', }, stone: { 50: '#fafaf9', 100: '#f5f5f4', 200: '#e7e5e4', 300: '#d6d3d1', 400: '#a8a29e', 500: '#78716c', 600: '#57534e', 700: '#44403c', 800: '#292524', 900: '#1c1917', 950: '#0c0a09', }, red: { 50: '#fef2f2', 100: '#fee2e2', 200: '#fecaca', 300: '#fca5a5', 400: '#f87171', 500: '#ef4444', 600: '#dc2626', 700: '#b91c1c', 800: '#991b1b', 900: '#7f1d1d', 950: '#450a0a', }, orange: { 50: '#fff7ed', 100: '#ffedd5', 200: '#fed7aa', 300: '#fdba74', 400: '#fb923c', 500: '#f97316', 600: '#ea580c', 700: '#c2410c', 800: '#9a3412', 900: '#7c2d12', 950: '#431407', }, amber: { 50: '#fffbeb', 100: '#fef3c7', 200: '#fde68a', 300: '#fcd34d', 400: '#fbbf24', 500: '#f59e0b', 600: '#d97706', 700: '#b45309', 800: '#92400e', 900: '#78350f', 950: '#451a03', }, yellow: { 50: '#fefce8', 100: '#fef9c3', 200: '#fef08a', 300: '#fde047', 400: '#facc15', 500: '#eab308', 600: '#ca8a04', 700: '#a16207', 800: '#854d0e', 900: '#713f12', 950: '#422006', }, lime: { 50: '#f7fee7', 100: '#ecfccb', 200: '#d9f99d', 300: '#bef264', 400: '#a3e635', 500: '#84cc16', 600: '#65a30d', 700: '#4d7c0f', 800: '#3f6212', 900: '#365314', 950: '#1a2e05', }, green: { 50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 300: '#86efac', 400: '#4ade80', 500: '#22c55e', 600: '#16a34a', 700: '#15803d', 800: '#166534', 900: '#14532d', 950: '#052e16', }, emerald: { 50: '#ecfdf5', 100: '#d1fae5', 200: '#a7f3d0', 300: '#6ee7b7', 400: '#34d399', 500: '#10b981', 600: '#059669', 700: '#047857', 800: '#065f46', 900: '#064e3b', 950: '#022c22', }, teal: { 50: '#f0fdfa', 100: '#ccfbf1', 200: '#99f6e4', 300: '#5eead4', 400: '#2dd4bf', 500: '#14b8a6', 600: '#0d9488', 700: '#0f766e', 800: '#115e59', 900: '#134e4a', 950: '#042f2e', }, cyan: { 50: '#ecfeff', 100: '#cffafe', 200: '#a5f3fc', 300: '#67e8f9', 400: '#22d3ee', 500: '#06b6d4', 600: '#0891b2', 700: '#0e7490', 800: '#155e75', 900: '#164e63', 950: '#083344', }, sky: { 50: '#f0f9ff', 100: '#e0f2fe', 200: '#bae6fd', 300: '#7dd3fc', 400: '#38bdf8', 500: '#0ea5e9', 600: '#0284c7', 700: '#0369a1', 800: '#075985', 900: '#0c4a6e', 950: '#082f49', }, blue: { 50: '#eff6ff', 100: '#dbeafe', 200: '#bfdbfe', 300: '#93c5fd', 400: '#60a5fa', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8', 800: '#1e40af', 900: '#1e3a8a', 950: '#172554', }, indigo: { 50: '#eef2ff', 100: '#e0e7ff', 200: '#c7d2fe', 300: '#a5b4fc', 400: '#818cf8', 500: '#6366f1', 600: '#4f46e5', 700: '#4338ca', 800: '#3730a3', 900: '#312e81', 950: '#1e1b4b', }, violet: { 50: '#f5f3ff', 100: '#ede9fe', 200: '#ddd6fe', 300: '#c4b5fd', 400: '#a78bfa', 500: '#8b5cf6', 600: '#7c3aed', 700: '#6d28d9', 800: '#5b21b6', 900: '#4c1d95', 950: '#2e1065', }, purple: { 50: '#faf5ff', 100: '#f3e8ff', 200: '#e9d5ff', 300: '#d8b4fe', 400: '#c084fc', 500: '#a855f7', 600: '#9333ea', 700: '#7e22ce', 800: '#6b21a8', 900: '#581c87', 950: '#3b0764', }, fuchsia: { 50: '#fdf4ff', 100: '#fae8ff', 200: '#f5d0fe', 300: '#f0abfc', 400: '#e879f9', 500: '#d946ef', 600: '#c026d3', 700: '#a21caf', 800: '#86198f', 900: '#701a75', 950: '#4a044e', }, pink: { 50: '#fdf2f8', 100: '#fce7f3', 200: '#fbcfe8', 300: '#f9a8d4', 400: '#f472b6', 500: '#ec4899', 600: '#db2777', 700: '#be185d', 800: '#9d174d', 900: '#831843', 950: '#500724', }, rose: { 50: '#fff1f2', 100: '#ffe4e6', 200: '#fecdd3', 300: '#fda4af', 400: '#fb7185', 500: '#f43f5e', 600: '#e11d48', 700: '#be123c', 800: '#9f1239', 900: '#881337', 950: '#4c0519', }, 'red-500/fromConfig': '#000', electric: void 0, }) ;({ fill: 'none', }) ;({ fill: 'inherit', }) ;({ fill: 'currentColor', }) ;({ fill: 'transparent', }) ;({ fill: '#000', }) ;({ fill: '#fff', }) ;({ fill: '#f8fafc', }) ;({ fill: '#f1f5f9', }) ;({ fill: '#e2e8f0', }) ;({ fill: '#cbd5e1', }) ;({ fill: '#94a3b8', }) ;({ fill: '#64748b', }) ;({ fill: '#475569', }) ;({ fill: '#334155', }) ;({ fill: '#1e293b', }) ;({ fill: '#0f172a', }) ;({ fill: '#f9fafb', }) ;({ fill: '#f3f4f6', }) ;({ fill: '#e5e7eb', }) ;({ fill: '#d1d5db', }) ;({ fill: '#9ca3af', }) ;({ fill: '#6b7280', }) ;({ fill: '#4b5563', }) ;({ fill: '#374151', }) ;({ fill: '#1f2937', }) ;({ fill: '#111827', }) ;({ fill: '#fafafa', }) ;({ fill: '#f4f4f5', }) ;({ fill: '#e4e4e7', }) ;({ fill: '#d4d4d8', }) ;({ fill: '#a1a1aa', }) ;({ fill: '#71717a', }) ;({ fill: '#52525b', }) ;({ fill: '#3f3f46', }) ;({ fill: '#27272a', }) ;({ fill: '#18181b', }) ;({ fill: '#fafafa', }) ;({ fill: '#f5f5f5', }) ;({ fill: '#e5e5e5', }) ;({ fill: '#d4d4d4', }) ;({ fill: '#a3a3a3', }) ;({ fill: '#737373', }) ;({ fill: '#525252', }) ;({ fill: '#404040', }) ;({ fill: '#262626', }) ;({ fill: '#171717', }) ;({ fill: '#fafaf9', }) ;({ fill: '#f5f5f4', }) ;({ fill: '#e7e5e4', }) ;({ fill: '#d6d3d1', }) ;({ fill: '#a8a29e', }) ;({ fill: '#78716c', }) ;({ fill: '#57534e', }) ;({ fill: '#44403c', }) ;({ fill: '#292524', }) ;({ fill: '#1c1917', }) ;({ fill: '#fef2f2', }) ;({ fill: '#fee2e2', }) ;({ fill: '#fecaca', }) ;({ fill: '#fca5a5', }) ;({ fill: '#f87171', }) ;({ fill: '#ef4444', }) ;({ fill: '#dc2626', }) ;({ fill: '#b91c1c', }) ;({ fill: '#991b1b', }) ;({ fill: '#7f1d1d', }) ;({ fill: '#fff7ed', }) ;({ fill: '#ffedd5', }) ;({ fill: '#fed7aa', }) ;({ fill: '#fdba74', }) ;({ fill: '#fb923c', }) ;({ fill: '#f97316', }) ;({ fill: '#ea580c', }) ;({ fill: '#c2410c', }) ;({ fill: '#9a3412', }) ;({ fill: '#7c2d12', }) ;({ fill: '#fffbeb', }) ;({ fill: '#fef3c7', }) ;({ fill: '#fde68a', }) ;({ fill: '#fcd34d', }) ;({ fill: '#fbbf24', }) ;({ fill: '#f59e0b', }) ;({ fill: '#d97706', }) ;({ fill: '#b45309', }) ;({ fill: '#92400e', }) ;({ fill: '#78350f', }) ;({ fill: '#fefce8', }) ;({ fill: '#fef9c3', }) ;({ fill: '#fef08a', }) ;({ fill: '#fde047', }) ;({ fill: '#facc15', }) ;({ fill: '#eab308', }) ;({ fill: '#ca8a04', }) ;({ fill: '#a16207', }) ;({ fill: '#854d0e', }) ;({ fill: '#713f12', }) ;({ fill: '#f7fee7', }) ;({ fill: '#ecfccb', }) ;({ fill: '#d9f99d', }) ;({ fill: '#bef264', }) ;({ fill: '#a3e635', }) ;({ fill: '#84cc16', }) ;({ fill: '#65a30d', }) ;({ fill: '#4d7c0f', }) ;({ fill: '#3f6212', }) ;({ fill: '#365314', }) ;({ fill: '#f0fdf4', }) ;({ fill: '#dcfce7', }) ;({ fill: '#bbf7d0', }) ;({ fill: '#86efac', }) ;({ fill: '#4ade80', }) ;({ fill: '#22c55e', }) ;({ fill: '#16a34a', }) ;({ fill: '#15803d', }) ;({ fill: '#166534', }) ;({ fill: '#14532d', }) ;({ fill: '#ecfdf5', }) ;({ fill: '#d1fae5', }) ;({ fill: '#a7f3d0', }) ;({ fill: '#6ee7b7', }) ;({ fill: '#34d399', }) ;({ fill: '#10b981', }) ;({ fill: '#059669', }) ;({ fill: '#047857', }) ;({ fill: '#065f46', }) ;({ fill: '#064e3b', }) ;({ fill: '#f0fdfa', }) ;({ fill: '#ccfbf1', }) ;({ fill: '#99f6e4', }) ;({ fill: '#5eead4', }) ;({ fill: '#2dd4bf', }) ;({ fill: '#14b8a6', }) ;({ fill: '#0d9488', }) ;({ fill: '#0f766e', }) ;({ fill: '#115e59', }) ;({ fill: '#134e4a', }) ;({ fill: '#ecfeff', }) ;({ fill: '#cffafe', }) ;({ fill: '#a5f3fc', }) ;({ fill: '#67e8f9', }) ;({ fill: '#22d3ee', }) ;({ fill: '#06b6d4', }) ;({ fill: '#0891b2', }) ;({ fill: '#0e7490', }) ;({ fill: '#155e75', }) ;({ fill: '#164e63', }) ;({ fill: '#f0f9ff', }) ;({ fill: '#e0f2fe', }) ;({ fill: '#bae6fd', }) ;({ fill: '#7dd3fc', }) ;({ fill: '#38bdf8', }) ;({ fill: '#0ea5e9', }) ;({ fill: '#0284c7', }) ;({ fill: '#0369a1', }) ;({ fill: '#075985', }) ;({ fill: '#0c4a6e', }) ;({ fill: '#eff6ff', }) ;({ fill: '#dbeafe', }) ;({ fill: '#bfdbfe', }) ;({ fill: '#93c5fd', }) ;({ fill: '#60a5fa', }) ;({ fill: '#3b82f6', }) ;({ fill: '#2563eb', }) ;({ fill: '#1d4ed8', }) ;({ fill: '#1e40af', }) ;({ fill: '#1e3a8a', }) ;({ fill: '#eef2ff', }) ;({ fill: '#e0e7ff', }) ;({ fill: '#c7d2fe', }) ;({ fill: '#a5b4fc', }) ;({ fill: '#818cf8', }) ;({ fill: '#6366f1', }) ;({ fill: '#4f46e5', }) ;({ fill: '#4338ca', }) ;({ fill: '#3730a3', }) ;({ fill: '#312e81', }) ;({ fill: '#f5f3ff', }) ;({ fill: '#ede9fe', }) ;({ fill: '#ddd6fe', }) ;({ fill: '#c4b5fd', }) ;({ fill: '#a78bfa', }) ;({ fill: '#8b5cf6', }) ;({ fill: '#7c3aed', }) ;({ fill: '#6d28d9', }) ;({ fill: '#5b21b6', }) ;({ fill: '#4c1d95', }) ;({ fill: '#faf5ff', }) ;({ fill: '#f3e8ff', }) ;({ fill: '#e9d5ff', }) ;({ fill: '#d8b4fe', }) ;({ fill: '#c084fc', }) ;({ fill: '#a855f7', }) ;({ fill: '#9333ea', }) ;({ fill: '#7e22ce', }) ;({ fill: '#6b21a8', }) ;({ fill: '#581c87', }) ;({ fill: '#fdf4ff', }) ;({ fill: '#fae8ff', }) ;({ fill: '#f5d0fe', }) ;({ fill: '#f0abfc', }) ;({ fill: '#e879f9', }) ;({ fill: '#d946ef', }) ;({ fill: '#c026d3', }) ;({ fill: '#a21caf', }) ;({ fill: '#86198f', }) ;({ fill: '#701a75', }) ;({ fill: '#fdf2f8', }) ;({ fill: '#fce7f3', }) ;({ fill: '#fbcfe8', }) ;({ fill: '#f9a8d4', }) ;({ fill: '#f472b6', }) ;({ fill: '#ec4899', }) ;({ fill: '#db2777', }) ;({ fill: '#be185d', }) ;({ fill: '#9d174d', }) ;({ fill: '#831843', }) ;({ fill: '#fff1f2', }) ;({ fill: '#ffe4e6', }) ;({ fill: '#fecdd3', }) ;({ fill: '#fda4af', }) ;({ fill: '#fb7185', }) ;({ fill: '#f43f5e', }) ;({ fill: '#e11d48', }) ;({ fill: '#be123c', }) ;({ fill: '#9f1239', }) ;({ fill: '#881337', }) ;({ fill: '#243c5a', }) ;({ fill: 'var(--color)', }) ;({ fill: '#ef4444', }) ;({ fill: 'rgb(239 68 68 / 0.25)', }) ;({ fill: '#000', }) ;({ fill: 'rgb(0 0 0 / 0.25)', }) ;({ fill: 'rgb(0 0 0 / .555)', }) ;({ fill: 'rgb(0 0 0 / var(--myvar))', }) ;({ fill: 'rgb(239 68 68 / .555)', }) ;({ fill: 'rgb(239 68 68 / var(--myvar))', }) ;({ fill: '#ef4444', }) ;({ fill: 'rgb(239 68 68 / 0.2)', }) ;({ fill: 'rgb(219, 0, 255)', }) ;({ fill: 'rgba(219, 0, 255, 0.25)', }) ;({ fill: 'rgba(219, 0, 255, .555)', }) ;({ fill: 'rgba(219, 0, 255, var(--myvar))', }) ;({ fill: 'rgb(219, 0, 255)', }) ;({ fill: 'rgb(219 0 255 / 0.2)', }) `; exports[`twin.macro flex.tsx: flex.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/flex theme\`flex\` tw\`flex-1\` tw\`flex-auto\` tw\`flex-initial\` tw\`flex-none\` tw\`flex-[2 2 0%]\` tw\`flex-[var(--flex)]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/flex ;({ 1: '1 1 0%', auto: '1 1 auto', initial: '0 1 auto', none: 'none', }) ;({ flex: '1 1 0%', }) ;({ flex: '1 1 auto', }) ;({ flex: '0 1 auto', }) ;({ flex: 'none', }) ;({ flex: '2 2 0%', }) ;({ flex: 'var(--flex)', }) `; exports[`twin.macro flexBasis.tsx: flexBasis.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/flex-basis theme\`flexBasis\` tw\`basis-0\` tw\`basis-1\` tw\`basis-2\` tw\`basis-3\` tw\`basis-4\` tw\`basis-5\` tw\`basis-6\` tw\`basis-7\` tw\`basis-8\` tw\`basis-9\` tw\`basis-10\` tw\`basis-11\` tw\`basis-12\` tw\`basis-14\` tw\`basis-16\` tw\`basis-20\` tw\`basis-24\` tw\`basis-28\` tw\`basis-32\` tw\`basis-36\` tw\`basis-40\` tw\`basis-44\` tw\`basis-48\` tw\`basis-52\` tw\`basis-56\` tw\`basis-60\` tw\`basis-64\` tw\`basis-72\` tw\`basis-80\` tw\`basis-96\` tw\`basis-auto\` tw\`basis-px\` tw\`basis-0.5\` tw\`basis-1.5\` tw\`basis-2.5\` tw\`basis-3.5\` tw\`basis-1/2\` tw\`basis-1/3\` tw\`basis-2/3\` tw\`basis-1/4\` tw\`basis-2/4\` tw\`basis-3/4\` tw\`basis-1/5\` tw\`basis-2/5\` tw\`basis-3/5\` tw\`basis-4/5\` tw\`basis-1/6\` tw\`basis-2/6\` tw\`basis-3/6\` tw\`basis-4/6\` tw\`basis-5/6\` tw\`basis-1/12\` tw\`basis-2/12\` tw\`basis-3/12\` tw\`basis-4/12\` tw\`basis-5/12\` tw\`basis-6/12\` tw\`basis-7/12\` tw\`basis-8/12\` tw\`basis-9/12\` tw\`basis-10/12\` tw\`basis-11/12\` tw\`basis-full\` tw\`basis-[14.2857143%]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/flex-basis ;({ 0: '0px', 1: '0.25rem', 2: '0.5rem', 3: '0.75rem', 4: '1rem', 5: '1.25rem', 6: '1.5rem', 7: '1.75rem', 8: '2rem', 9: '2.25rem', 10: '2.5rem', 11: '2.75rem', 12: '3rem', 14: '3.5rem', 16: '4rem', 20: '5rem', 24: '6rem', 28: '7rem', 32: '8rem', 36: '9rem', 40: '10rem', 44: '11rem', 48: '12rem', 52: '13rem', 56: '14rem', 60: '15rem', 64: '16rem', 72: '18rem', 80: '20rem', 96: '24rem', auto: 'auto', px: '1px', 0.5: '0.125rem', 1.5: '0.375rem', 2.5: '0.625rem', 3.5: '0.875rem', '1/2': '50%', '1/3': '33.333333%', '2/3': '66.666667%', '1/4': '25%', '2/4': '50%', '3/4': '75%', '1/5': '20%', '2/5': '40%', '3/5': '60%', '4/5': '80%', '1/6': '16.666667%', '2/6': '33.333333%', '3/6': '50%', '4/6': '66.666667%', '5/6': '83.333333%', '1/12': '8.333333%', '2/12': '16.666667%', '3/12': '25%', '4/12': '33.333333%', '5/12': '41.666667%', '6/12': '50%', '7/12': '58.333333%', '8/12': '66.666667%', '9/12': '75%', '10/12': '83.333333%', '11/12': '91.666667%', full: '100%', }) ;({ flexBasis: '0px', }) ;({ flexBasis: '0.25rem', }) ;({ flexBasis: '0.5rem', }) ;({ flexBasis: '0.75rem', }) ;({ flexBasis: '1rem', }) ;({ flexBasis: '1.25rem', }) ;({ flexBasis: '1.5rem', }) ;({ flexBasis: '1.75rem', }) ;({ flexBasis: '2rem', }) ;({ flexBasis: '2.25rem', }) ;({ flexBasis: '2.5rem', }) ;({ flexBasis: '2.75rem', }) ;({ flexBasis: '3rem', }) ;({ flexBasis: '3.5rem', }) ;({ flexBasis: '4rem', }) ;({ flexBasis: '5rem', }) ;({ flexBasis: '6rem', }) ;({ flexBasis: '7rem', }) ;({ flexBasis: '8rem', }) ;({ flexBasis: '9rem', }) ;({ flexBasis: '10rem', }) ;({ flexBasis: '11rem', }) ;({ flexBasis: '12rem', }) ;({ flexBasis: '13rem', }) ;({ flexBasis: '14rem', }) ;({ flexBasis: '15rem', }) ;({ flexBasis: '16rem', }) ;({ flexBasis: '18rem', }) ;({ flexBasis: '20rem', }) ;({ flexBasis: '24rem', }) ;({ flexBasis: 'auto', }) ;({ flexBasis: '1px', }) ;({ flexBasis: '0.125rem', }) ;({ flexBasis: '0.375rem', }) ;({ flexBasis: '0.625rem', }) ;({ flexBasis: '0.875rem', }) ;({ flexBasis: '50%', }) ;({ flexBasis: '33.333333%', }) ;({ flexBasis: '66.666667%', }) ;({ flexBasis: '25%', }) ;({ flexBasis: '50%', }) ;({ flexBasis: '75%', }) ;({ flexBasis: '20%', }) ;({ flexBasis: '40%', }) ;({ flexBasis: '60%', }) ;({ flexBasis: '80%', }) ;({ flexBasis: '16.666667%', }) ;({ flexBasis: '33.333333%', }) ;({ flexBasis: '50%', }) ;({ flexBasis: '66.666667%', }) ;({ flexBasis: '83.333333%', }) ;({ flexBasis: '8.333333%', }) ;({ flexBasis: '16.666667%', }) ;({ flexBasis: '25%', }) ;({ flexBasis: '33.333333%', }) ;({ flexBasis: '41.666667%', }) ;({ flexBasis: '50%', }) ;({ flexBasis: '58.333333%', }) ;({ flexBasis: '66.666667%', }) ;({ flexBasis: '75%', }) ;({ flexBasis: '83.333333%', }) ;({ flexBasis: '91.666667%', }) ;({ flexBasis: '100%', }) ;({ flexBasis: '14.2857143%', }) `; exports[`twin.macro flexDirection.tsx: flexDirection.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/flex-direction tw\`flex-row\` tw\`flex-row-reverse\` tw\`flex-col\` tw\`flex-col-reverse\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/flex-direction ;({ flexDirection: 'row', }) ;({ flexDirection: 'row-reverse', }) ;({ flexDirection: 'column', }) ;({ flexDirection: 'column-reverse', }) `; exports[`twin.macro flexGrow.tsx: flexGrow.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/flex-grow theme\`flexGrow.\` tw\`grow-0\` tw\`grow\` tw\`flex-grow-0\` // Deprecated tw\`flex-grow\` // Deprecated tw\`grow-[2]\` tw\`flex-grow-[var(--grow)]\` // Deprecated ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/flex-grow ;({ 0: '0', DEFAULT: '1', }) ;({ flexGrow: '0', }) ;({ flexGrow: '1', }) ;({ flexGrow: '0', }) // Deprecated ;({ flexGrow: '1', }) // Deprecated ;({ flexGrow: '2', }) ;({ flexGrow: 'var(--grow)', }) // Deprecated `; exports[`twin.macro flexShrink.tsx: flexShrink.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/flex-shrink theme\`flexShrink.\` tw\`shrink-0\` tw\`shrink\` tw\`flex-shrink-0\` // Deprecated tw\`flex-shrink\` // Deprecated tw\`flex-shrink-[var(--shrink)]\` // Deprecated tw\`shrink-[var(--shrink)]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/flex-shrink ;({ 0: '0', DEFAULT: '1', }) ;({ flexShrink: '0', }) ;({ flexShrink: '1', }) ;({ flexShrink: '0', }) // Deprecated ;({ flexShrink: '1', }) // Deprecated ;({ flexShrink: 'var(--shrink)', }) // Deprecated ;({ flexShrink: 'var(--shrink)', }) `; exports[`twin.macro flexWrap.tsx: flexWrap.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/flex-wrap tw\`flex-wrap\` tw\`flex-wrap-reverse\` tw\`flex-nowrap\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/flex-wrap ;({ flexWrap: 'wrap', }) ;({ flexWrap: 'wrap-reverse', }) ;({ flexWrap: 'nowrap', }) `; exports[`twin.macro float.tsx: float.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/float tw\`float-right\` tw\`float-left\` tw\`float-none\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/float ;({ float: 'right', }) ;({ float: 'left', }) ;({ float: 'none', }) `; exports[`twin.macro fluidContainer.tsx: fluidContainer.tsx 1`] = ` // @ts-nocheck import tw from '../macro' tw\`fluid-container ml-10\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck ;({ marginLeft: '2.5rem', marginRight: 'auto', width: '100%', ':focus': { marginLeft: '10rem', marginRight: '11rem', width: '100%', }, '@media (min-width: 1440px)': { display: 'block', width: '75%', backgroundColor: 'black', }, '@media (min-width: 768px)': { ':hover': { width: '25%', }, ':focus': { marginLeft: 'auto', marginRight: 'auto', width: '100%', }, }, '@media only screen and (max-width: 540px)': { width: '33%', backgroundColor: 'red', }, }) `; exports[`twin.macro fontFamily.tsx: fontFamily.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/font-family tw\`font-sans\` tw\`font-serif\` tw\`font-mono\` tw\`font-custom\` tw\`font-['Open Sans']\` tw\`font-[generic-name:fantasy]\` tw\`font-[family-name:'this and that', this]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/font-family ;({ fontFamily: 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"', }) ;({ fontFamily: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif', }) ;({ fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace', }) ;({ fontFamily: 'Inter var, sans-serif', fontFeatureSettings: '"cv11", "ss01"', fontVariationSettings: '"opsz" 32', }) ;({ fontFamily: "'Open Sans'", }) ;({ fontFamily: 'fantasy', }) ;({ fontFamily: "'this and that', this", }) `; exports[`twin.macro fontSize.tsx: fontSize.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/font-size theme\`fontSize\` tw\`text-xs\` tw\`text-sm\` tw\`text-base\` tw\`text-lg\` tw\`text-xl\` tw\`text-2xl\` tw\`text-3xl\` tw\`text-4xl\` tw\`text-5xl\` tw\`text-6xl\` tw\`text-7xl\` tw\`text-8xl\` tw\`text-9xl\` tw\`text-[2.23rem]\` tw\`text-[length:var(--font-size)]\` tw\`text-2xl\` tw\`text-3xl\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/font-size ;({ xs: [ '0.75rem', { lineHeight: '1rem', }, ], sm: [ '0.875rem', { lineHeight: '1.25rem', }, ], base: [ '1rem', { lineHeight: '1.5rem', }, ], lg: [ '1.125rem', { lineHeight: '1.75rem', }, ], xl: [ '1.25rem', { lineHeight: '1.75rem', }, ], '2xl': [ '24px', { letterSpacing: '-0.01em', }, ], '3xl': [ '32px', { letterSpacing: '-0.02em', lineHeight: '40px', }, ], '4xl': [ '2.25rem', { lineHeight: '2.5rem', }, ], '5xl': [ '3rem', { lineHeight: '1', }, ], '6xl': [ '3.75rem', { lineHeight: '1', }, ], '7xl': [ '4.5rem', { lineHeight: '1', }, ], '8xl': [ '6rem', { lineHeight: '1', }, ], '9xl': [ '8rem', { lineHeight: '1', }, ], }) ;({ fontSize: '0.75rem', lineHeight: '1rem', }) ;({ fontSize: '0.875rem', lineHeight: '1.25rem', }) ;({ fontSize: '1rem', lineHeight: '1.5rem', }) ;({ fontSize: '1.125rem', lineHeight: '1.75rem', }) ;({ fontSize: '1.25rem', lineHeight: '1.75rem', }) ;({ fontSize: '24px', letterSpacing: '-0.01em', }) ;({ fontSize: '32px', lineHeight: '40px', letterSpacing: '-0.02em', }) ;({ fontSize: '2.25rem', lineHeight: '2.5rem', }) ;({ fontSize: '3rem', lineHeight: '1', }) ;({ fontSize: '3.75rem', lineHeight: '1', }) ;({ fontSize: '4.5rem', lineHeight: '1', }) ;({ fontSize: '6rem', lineHeight: '1', }) ;({ fontSize: '8rem', lineHeight: '1', }) ;({ fontSize: '2.23rem', }) ;({ fontSize: 'var(--font-size)', }) ;({ fontSize: '24px', letterSpacing: '-0.01em', }) ;({ fontSize: '32px', lineHeight: '40px', letterSpacing: '-0.02em', }) `; exports[`twin.macro fontSmoothing.tsx: fontSmoothing.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/font-smoothing tw\`antialiased\` tw\`subpixel-antialiased\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/font-smoothing ;({ WebkitFontSmoothing: 'antialiased', MozOsxFontSmoothing: 'grayscale', }) ;({ WebkitFontSmoothing: 'auto', MozOsxFontSmoothing: 'auto', }) `; exports[`twin.macro fontStyle.tsx: fontStyle.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/font-style tw\`italic\` tw\`not-italic\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/font-style ;({ fontStyle: 'italic', }) ;({ fontStyle: 'normal', }) `; exports[`twin.macro fontVariantNumeric.tsx: fontVariantNumeric.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/font-variant-numeric tw\`normal-nums\` tw\`ordinal\` tw\`slashed-zero\` tw\`lining-nums\` tw\`oldstyle-nums\` tw\`proportional-nums\` tw\`tabular-nums\` tw\`diagonal-fractions\` tw\`stacked-fractions\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/font-variant-numeric ;({ fontVariantNumeric: 'normal', }) ;({ '--tw-ordinal': 'ordinal', fontVariantNumeric: 'var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)', }) ;({ '--tw-slashed-zero': 'slashed-zero', fontVariantNumeric: 'var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)', }) ;({ '--tw-numeric-figure': 'lining-nums', fontVariantNumeric: 'var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)', }) ;({ '--tw-numeric-figure': 'oldstyle-nums', fontVariantNumeric: 'var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)', }) ;({ '--tw-numeric-spacing': 'proportional-nums', fontVariantNumeric: 'var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)', }) ;({ '--tw-numeric-spacing': 'tabular-nums', fontVariantNumeric: 'var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)', }) ;({ '--tw-numeric-fraction': 'diagonal-fractions', fontVariantNumeric: 'var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)', }) ;({ '--tw-numeric-fraction': 'stacked-fractions', fontVariantNumeric: 'var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)', }) `; exports[`twin.macro fontWeight.tsx: fontWeight.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/font-weight tw\`font-thin\` tw\`font-extralight\` tw\`font-light\` tw\`font-normal\` tw\`font-medium\` tw\`font-semibold\` tw\`font-bold\` tw\`font-extrabold\` tw\`font-black\` tw\`font-[300]\` tw\`font-[number:medium]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/font-weight ;({ fontWeight: '100', }) ;({ fontWeight: '200', }) ;({ fontWeight: '300', }) ;({ fontWeight: '400', }) ;({ fontWeight: '500', }) ;({ fontWeight: '600', }) ;({ fontWeight: '700', }) ;({ fontWeight: '800', }) ;({ fontWeight: '900', }) ;({ fontWeight: '300', }) ;({ fontWeight: 'medium', }) `; exports[`twin.macro gap.tsx: gap.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/gap theme\`gap\` tw\`gap-0\` tw\`gap-0.5\` tw\`gap-1\` tw\`gap-1.5\` tw\`gap-2\` tw\`gap-2.5\` tw\`gap-3\` tw\`gap-3.5\` tw\`gap-4\` tw\`gap-5\` tw\`gap-6\` tw\`gap-7\` tw\`gap-8\` tw\`gap-9\` tw\`gap-10\` tw\`gap-12\` tw\`gap-14\` tw\`gap-16\` tw\`gap-20\` tw\`gap-24\` tw\`gap-28\` tw\`gap-32\` tw\`gap-36\` tw\`gap-40\` tw\`gap-44\` tw\`gap-48\` tw\`gap-52\` tw\`gap-56\` tw\`gap-60\` tw\`gap-64\` tw\`gap-72\` tw\`gap-80\` tw\`gap-96\` tw\`gap-px\` tw\`gap-[2.75rem]\` // https://tailwindcss.com/docs/gap tw\`gap-x-0\` tw\`gap-x-0.5\` tw\`gap-x-1\` tw\`gap-x-1.5\` tw\`gap-x-2\` tw\`gap-x-2.5\` tw\`gap-x-3\` tw\`gap-x-3.5\` tw\`gap-x-4\` tw\`gap-x-5\` tw\`gap-x-6\` tw\`gap-x-8\` tw\`gap-x-10\` tw\`gap-x-12\` tw\`gap-x-16\` tw\`gap-x-20\` tw\`gap-x-24\` tw\`gap-x-32\` tw\`gap-x-40\` tw\`gap-x-48\` tw\`gap-x-56\` tw\`gap-x-64\` tw\`gap-x-px\` tw\`gap-x-[2.75rem]\` // https://tailwindcss.com/docs/gap tw\`gap-y-0\` tw\`gap-y-0.5\` tw\`gap-y-1\` tw\`gap-y-1.5\` tw\`gap-y-2\` tw\`gap-y-2.5\` tw\`gap-y-3\` tw\`gap-y-3.5\` tw\`gap-y-4\` tw\`gap-y-5\` tw\`gap-y-6\` tw\`gap-y-7\` tw\`gap-y-8\` tw\`gap-y-9\` tw\`gap-y-10\` tw\`gap-y-11\` tw\`gap-y-12\` tw\`gap-y-16\` tw\`gap-y-20\` tw\`gap-y-24\` tw\`gap-y-28\` tw\`gap-y-32\` tw\`gap-y-36\` tw\`gap-y-40\` tw\`gap-y-44\` tw\`gap-y-48\` tw\`gap-y-52\` tw\`gap-y-56\` tw\`gap-y-60\` tw\`gap-y-64\` tw\`gap-y-72\` tw\`gap-y-80\` tw\`gap-y-96\` tw\`gap-y-px\` tw\`gap-y-[2.75rem]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/gap ;({ 0: '0px', 1: '0.25rem', 2: '0.5rem', 3: '0.75rem', 4: '1rem', 5: '1.25rem', 6: '1.5rem', 7: '1.75rem', 8: '2rem', 9: '2.25rem', 10: '2.5rem', 11: '2.75rem', 12: '3rem', 14: '3.5rem', 16: '4rem', 20: '5rem', 24: '6rem', 28: '7rem', 32: '8rem', 36: '9rem', 40: '10rem', 44: '11rem', 48: '12rem', 52: '13rem', 56: '14rem', 60: '15rem', 64: '16rem', 72: '18rem', 80: '20rem', 96: '24rem', px: '1px', 0.5: '0.125rem', 1.5: '0.375rem', 2.5: '0.625rem', 3.5: '0.875rem', }) ;({ gap: '0px', }) ;({ gap: '0.125rem', }) ;({ gap: '0.25rem', }) ;({ gap: '0.375rem', }) ;({ gap: '0.5rem', }) ;({ gap: '0.625rem', }) ;({ gap: '0.75rem', }) ;({ gap: '0.875rem', }) ;({ gap: '1rem', }) ;({ gap: '1.25rem', }) ;({ gap: '1.5rem', }) ;({ gap: '1.75rem', }) ;({ gap: '2rem', }) ;({ gap: '2.25rem', }) ;({ gap: '2.5rem', }) ;({ gap: '3rem', }) ;({ gap: '3.5rem', }) ;({ gap: '4rem', }) ;({ gap: '5rem', }) ;({ gap: '6rem', }) ;({ gap: '7rem', }) ;({ gap: '8rem', }) ;({ gap: '9rem', }) ;({ gap: '10rem', }) ;({ gap: '11rem', }) ;({ gap: '12rem', }) ;({ gap: '13rem', }) ;({ gap: '14rem', }) ;({ gap: '15rem', }) ;({ gap: '16rem', }) ;({ gap: '18rem', }) ;({ gap: '20rem', }) ;({ gap: '24rem', }) ;({ gap: '1px', }) ;({ gap: '2.75rem', }) // https://tailwindcss.com/docs/gap ;({ columnGap: '0px', }) ;({ columnGap: '0.125rem', }) ;({ columnGap: '0.25rem', }) ;({ columnGap: '0.375rem', }) ;({ columnGap: '0.5rem', }) ;({ columnGap: '0.625rem', }) ;({ columnGap: '0.75rem', }) ;({ columnGap: '0.875rem', }) ;({ columnGap: '1rem', }) ;({ columnGap: '1.25rem', }) ;({ columnGap: '1.5rem', }) ;({ columnGap: '2rem', }) ;({ columnGap: '2.5rem', }) ;({ columnGap: '3rem', }) ;({ columnGap: '4rem', }) ;({ columnGap: '5rem', }) ;({ columnGap: '6rem', }) ;({ columnGap: '8rem', }) ;({ columnGap: '10rem', }) ;({ columnGap: '12rem', }) ;({ columnGap: '14rem', }) ;({ columnGap: '16rem', }) ;({ columnGap: '1px', }) ;({ columnGap: '2.75rem', }) // https://tailwindcss.com/docs/gap ;({ rowGap: '0px', }) ;({ rowGap: '0.125rem', }) ;({ rowGap: '0.25rem', }) ;({ rowGap: '0.375rem', }) ;({ rowGap: '0.5rem', }) ;({ rowGap: '0.625rem', }) ;({ rowGap: '0.75rem', }) ;({ rowGap: '0.875rem', }) ;({ rowGap: '1rem', }) ;({ rowGap: '1.25rem', }) ;({ rowGap: '1.5rem', }) ;({ rowGap: '1.75rem', }) ;({ rowGap: '2rem', }) ;({ rowGap: '2.25rem', }) ;({ rowGap: '2.5rem', }) ;({ rowGap: '2.75rem', }) ;({ rowGap: '3rem', }) ;({ rowGap: '4rem', }) ;({ rowGap: '5rem', }) ;({ rowGap: '6rem', }) ;({ rowGap: '7rem', }) ;({ rowGap: '8rem', }) ;({ rowGap: '9rem', }) ;({ rowGap: '10rem', }) ;({ rowGap: '11rem', }) ;({ rowGap: '12rem', }) ;({ rowGap: '13rem', }) ;({ rowGap: '14rem', }) ;({ rowGap: '15rem', }) ;({ rowGap: '16rem', }) ;({ rowGap: '18rem', }) ;({ rowGap: '20rem', }) ;({ rowGap: '24rem', }) ;({ rowGap: '1px', }) ;({ rowGap: '2.75rem', }) `; exports[`twin.macro globalStyles.tsx: globalStyles.tsx 1`] = ` // @ts-nocheck import { GlobalStyles } from '../macro' import { css, Global } from '@emotion/react' const MyGlobals = () => (
) ↓ ↓ ↓ ↓ ↓ ↓ import { Global as _globalImport } from '@emotion/react' const _GlobalStyles = () => ( <_globalImport styles={css\` *, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: blueish; --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: var(--tw-empty, /*!*/ /*!*/); --tw-pan-y: var(--tw-empty, /*!*/ /*!*/); --tw-pinch-zoom: var(--tw-empty, /*!*/ /*!*/); --tw-scroll-snap-strictness: proximity; --tw-ordinal: var(--tw-empty, /*!*/ /*!*/); --tw-slashed-zero: var(--tw-empty, /*!*/ /*!*/); --tw-numeric-figure: var(--tw-empty, /*!*/ /*!*/); --tw-numeric-spacing: var(--tw-empty, /*!*/ /*!*/); --tw-numeric-fraction: var(--tw-empty, /*!*/ /*!*/); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/); --tw-ring-offset-width: 10px; --tw-ring-offset-color: rainbow; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-blur: var(--tw-empty, /*!*/ /*!*/); --tw-brightness: var(--tw-empty, /*!*/ /*!*/); --tw-contrast: var(--tw-empty, /*!*/ /*!*/); --tw-grayscale: var(--tw-empty, /*!*/ /*!*/); --tw-hue-rotate: var(--tw-empty, /*!*/ /*!*/); --tw-invert: var(--tw-empty, /*!*/ /*!*/); --tw-saturate: var(--tw-empty, /*!*/ /*!*/); --tw-sepia: var(--tw-empty, /*!*/ /*!*/); --tw-drop-shadow: var(--tw-empty, /*!*/ /*!*/); --tw-backdrop-blur: var(--tw-empty, /*!*/ /*!*/); --tw-backdrop-brightness: var(--tw-empty, /*!*/ /*!*/); --tw-backdrop-contrast: var(--tw-empty, /*!*/ /*!*/); --tw-backdrop-grayscale: var(--tw-empty, /*!*/ /*!*/); --tw-backdrop-hue-rotate: var(--tw-empty, /*!*/ /*!*/); --tw-backdrop-invert: var(--tw-empty, /*!*/ /*!*/); --tw-backdrop-opacity: var(--tw-empty, /*!*/ /*!*/); --tw-backdrop-saturate: var(--tw-empty, /*!*/ /*!*/); --tw-backdrop-sepia: var(--tw-empty, /*!*/ /*!*/); } ::before, ::after { --tw-content: ''; } html { line-height: 1.5; -webkit-text-size-adjust: 100%; -moz-tab-size: 4; tab-size: 4; font-family: testSans, testSans2; font-feature-settings: normal; font-variation-settings: normal; } body { margin: 0; line-height: inherit; } hr { height: 0; color: inherit; border-top-width: 1px; } abbr:where([title]) { text-decoration: underline dotted; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, samp, pre { font-family: testMono, testMono2; font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } table { text-indent: 0; border-color: inherit; border-collapse: collapse; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; } button, select { text-transform: none; } button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; background-color: transparent; background-image: none; } :-moz-focusring { outline: auto; } :-moz-ui-invalid { box-shadow: none; } progress { vertical-align: baseline; } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } [type='search'] { -webkit-appearance: textfield; outline-offset: -2px; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } summary { display: list-item; } blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; } fieldset { margin: 0; padding: 0; } legend { padding: 0; } ol, ul, menu { list-style: none; margin: 0; padding: 0; } textarea { resize: vertical; } input::placeholder, textarea::placeholder { opacity: 1; color: grayish; } button, [role='button'] { cursor: pointer; } :disabled { cursor: default; } img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; } img, video { max-width: 100%; height: auto; } [hidden] { display: none; } ::backdrop { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: var(--tw-empty, /*!*/ /*!*/); --tw-pan-y: var(--tw-empty, /*!*/ /*!*/); --tw-pinch-zoom: var(--tw-empty, /*!*/ /*!*/); --tw-scroll-snap-strictness: proximity; --tw-ordinal: var(--tw-empty, /*!*/ /*!*/); --tw-slashed-zero: var(--tw-empty, /*!*/ /*!*/); --tw-numeric-figure: var(--tw-empty, /*!*/ /*!*/); --tw-numeric-spacing: var(--tw-empty, /*!*/ /*!*/); --tw-numeric-fraction: var(--tw-empty, /*!*/ /*!*/); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/); --tw-ring-offset-width: 10px; --tw-ring-offset-color: rainbow; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-blur: var(--tw-empty, /*!*/ /*!*/); --tw-brightness: var(--tw-empty, /*!*/ /*!*/); --tw-contrast: var(--tw-empty, /*!*/ /*!*/); --tw-grayscale: var(--tw-empty, /*!*/ /*!*/); --tw-hue-rotate: var(--tw-empty, /*!*/ /*!*/); --tw-invert: var(--tw-empty, /*!*/ /*!*/); --tw-saturate: var(--tw-empty, /*!*/ /*!*/); --tw-sepia: var(--tw-empty, /*!*/ /*!*/); --tw-drop-shadow: var(--tw-empty, /*!*/ /*!*/); --tw-backdrop-blur: var(--tw-empty, /*!*/ /*!*/); --tw-backdrop-brightness: var(--tw-empty, /*!*/ /*!*/); --tw-backdrop-contrast: var(--tw-empty, /*!*/ /*!*/); --tw-backdrop-grayscale: var(--tw-empty, /*!*/ /*!*/); --tw-backdrop-hue-rotate: var(--tw-empty, /*!*/ /*!*/); --tw-backdrop-invert: var(--tw-empty, /*!*/ /*!*/); --tw-backdrop-opacity: var(--tw-empty, /*!*/ /*!*/); --tw-backdrop-saturate: var(--tw-empty, /*!*/ /*!*/); --tw-backdrop-sepia: var(--tw-empty, /*!*/ /*!*/); } \`} /> ) import { css, Global } from '@emotion/react' const MyGlobals = () => (
<_GlobalStyles />
) `; exports[`twin.macro gradientColorStops.tsx: gradientColorStops.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/gradient-color-stops theme\`gradientColorStops\` tw\`from-inherit\` tw\`from-current\` tw\`from-transparent\` tw\`from-black\` tw\`from-white\` tw\`from-slate-50\` tw\`from-slate-100\` tw\`from-slate-200\` tw\`from-slate-300\` tw\`from-slate-400\` tw\`from-slate-500\` tw\`from-slate-600\` tw\`from-slate-700\` tw\`from-slate-800\` tw\`from-slate-900\` tw\`from-gray-50\` tw\`from-gray-100\` tw\`from-gray-200\` tw\`from-gray-300\` tw\`from-gray-400\` tw\`from-gray-500\` tw\`from-gray-600\` tw\`from-gray-700\` tw\`from-gray-800\` tw\`from-gray-900\` tw\`from-zinc-50\` tw\`from-zinc-100\` tw\`from-zinc-200\` tw\`from-zinc-300\` tw\`from-zinc-400\` tw\`from-zinc-500\` tw\`from-zinc-600\` tw\`from-zinc-700\` tw\`from-zinc-800\` tw\`from-zinc-900\` tw\`from-neutral-50\` tw\`from-neutral-100\` tw\`from-neutral-200\` tw\`from-neutral-300\` tw\`from-neutral-400\` tw\`from-neutral-500\` tw\`from-neutral-600\` tw\`from-neutral-700\` tw\`from-neutral-800\` tw\`from-neutral-900\` tw\`from-stone-50\` tw\`from-stone-100\` tw\`from-stone-200\` tw\`from-stone-300\` tw\`from-stone-400\` tw\`from-stone-500\` tw\`from-stone-600\` tw\`from-stone-700\` tw\`from-stone-800\` tw\`from-stone-900\` tw\`from-red-50\` tw\`from-red-100\` tw\`from-red-200\` tw\`from-red-300\` tw\`from-red-400\` tw\`from-red-500\` tw\`from-red-600\` tw\`from-red-700\` tw\`from-red-800\` tw\`from-red-900\` tw\`from-orange-50\` tw\`from-orange-100\` tw\`from-orange-200\` tw\`from-orange-300\` tw\`from-orange-400\` tw\`from-orange-500\` tw\`from-orange-600\` tw\`from-orange-700\` tw\`from-orange-800\` tw\`from-orange-900\` tw\`from-amber-50\` tw\`from-amber-100\` tw\`from-amber-200\` tw\`from-amber-300\` tw\`from-amber-400\` tw\`from-amber-500\` tw\`from-amber-600\` tw\`from-amber-700\` tw\`from-amber-800\` tw\`from-amber-900\` tw\`from-yellow-50\` tw\`from-yellow-100\` tw\`from-yellow-200\` tw\`from-yellow-300\` tw\`from-yellow-400\` tw\`from-yellow-500\` tw\`from-yellow-600\` tw\`from-yellow-700\` tw\`from-yellow-800\` tw\`from-yellow-900\` tw\`from-lime-50\` tw\`from-lime-100\` tw\`from-lime-200\` tw\`from-lime-300\` tw\`from-lime-400\` tw\`from-lime-500\` tw\`from-lime-600\` tw\`from-lime-700\` tw\`from-lime-800\` tw\`from-lime-900\` tw\`from-green-50\` tw\`from-green-100\` tw\`from-green-200\` tw\`from-green-300\` tw\`from-green-400\` tw\`from-green-500\` tw\`from-green-600\` tw\`from-green-700\` tw\`from-green-800\` tw\`from-green-900\` tw\`from-emerald-50\` tw\`from-emerald-100\` tw\`from-emerald-200\` tw\`from-emerald-300\` tw\`from-emerald-400\` tw\`from-emerald-500\` tw\`from-emerald-600\` tw\`from-emerald-700\` tw\`from-emerald-800\` tw\`from-emerald-900\` tw\`from-teal-50\` tw\`from-teal-100\` tw\`from-teal-200\` tw\`from-teal-300\` tw\`from-teal-400\` tw\`from-teal-500\` tw\`from-teal-600\` tw\`from-teal-700\` tw\`from-teal-800\` tw\`from-teal-900\` tw\`from-cyan-50\` tw\`from-cyan-100\` tw\`from-cyan-200\` tw\`from-cyan-300\` tw\`from-cyan-400\` tw\`from-cyan-500\` tw\`from-cyan-600\` tw\`from-cyan-700\` tw\`from-cyan-800\` tw\`from-cyan-900\` tw\`from-sky-50\` tw\`from-sky-100\` tw\`from-sky-200\` tw\`from-sky-300\` tw\`from-sky-400\` tw\`from-sky-500\` tw\`from-sky-600\` tw\`from-sky-700\` tw\`from-sky-800\` tw\`from-sky-900\` tw\`from-blue-50\` tw\`from-blue-100\` tw\`from-blue-200\` tw\`from-blue-300\` tw\`from-blue-400\` tw\`from-blue-500\` tw\`from-blue-600\` tw\`from-blue-700\` tw\`from-blue-800\` tw\`from-blue-900\` tw\`from-indigo-50\` tw\`from-indigo-100\` tw\`from-indigo-200\` tw\`from-indigo-300\` tw\`from-indigo-400\` tw\`from-indigo-500\` tw\`from-indigo-600\` tw\`from-indigo-700\` tw\`from-indigo-800\` tw\`from-indigo-900\` tw\`from-violet-50\` tw\`from-violet-100\` tw\`from-violet-200\` tw\`from-violet-300\` tw\`from-violet-400\` tw\`from-violet-500\` tw\`from-violet-600\` tw\`from-violet-700\` tw\`from-violet-800\` tw\`from-violet-900\` tw\`from-purple-50\` tw\`from-purple-100\` tw\`from-purple-200\` tw\`from-purple-300\` tw\`from-purple-400\` tw\`from-purple-500\` tw\`from-purple-600\` tw\`from-purple-700\` tw\`from-purple-800\` tw\`from-purple-900\` tw\`from-fuchsia-50\` tw\`from-fuchsia-100\` tw\`from-fuchsia-200\` tw\`from-fuchsia-300\` tw\`from-fuchsia-400\` tw\`from-fuchsia-500\` tw\`from-fuchsia-600\` tw\`from-fuchsia-700\` tw\`from-fuchsia-800\` tw\`from-fuchsia-900\` tw\`from-pink-50\` tw\`from-pink-100\` tw\`from-pink-200\` tw\`from-pink-300\` tw\`from-pink-400\` tw\`from-pink-500\` tw\`from-pink-600\` tw\`from-pink-700\` tw\`from-pink-800\` tw\`from-pink-900\` tw\`from-rose-50\` tw\`from-rose-100\` tw\`from-rose-200\` tw\`from-rose-300\` tw\`from-rose-400\` tw\`from-rose-500\` tw\`from-rose-600\` tw\`from-rose-700\` tw\`from-rose-800\` tw\`from-rose-900\` tw\`via-inherit\` tw\`via-current\` tw\`via-transparent\` tw\`via-black\` tw\`via-white\` tw\`via-slate-50\` tw\`via-slate-100\` tw\`via-slate-200\` tw\`via-slate-300\` tw\`via-slate-400\` tw\`via-slate-500\` tw\`via-slate-600\` tw\`via-slate-700\` tw\`via-slate-800\` tw\`via-slate-900\` tw\`via-gray-50\` tw\`via-gray-100\` tw\`via-gray-200\` tw\`via-gray-300\` tw\`via-gray-400\` tw\`via-gray-500\` tw\`via-gray-600\` tw\`via-gray-700\` tw\`via-gray-800\` tw\`via-gray-900\` tw\`via-zinc-50\` tw\`via-zinc-100\` tw\`via-zinc-200\` tw\`via-zinc-300\` tw\`via-zinc-400\` tw\`via-zinc-500\` tw\`via-zinc-600\` tw\`via-zinc-700\` tw\`via-zinc-800\` tw\`via-zinc-900\` tw\`via-neutral-50\` tw\`via-neutral-100\` tw\`via-neutral-200\` tw\`via-neutral-300\` tw\`via-neutral-400\` tw\`via-neutral-500\` tw\`via-neutral-600\` tw\`via-neutral-700\` tw\`via-neutral-800\` tw\`via-neutral-900\` tw\`via-stone-50\` tw\`via-stone-100\` tw\`via-stone-200\` tw\`via-stone-300\` tw\`via-stone-400\` tw\`via-stone-500\` tw\`via-stone-600\` tw\`via-stone-700\` tw\`via-stone-800\` tw\`via-stone-900\` tw\`via-red-50\` tw\`via-red-100\` tw\`via-red-200\` tw\`via-red-300\` tw\`via-red-400\` tw\`via-red-500\` tw\`via-red-600\` tw\`via-red-700\` tw\`via-red-800\` tw\`via-red-900\` tw\`via-orange-50\` tw\`via-orange-100\` tw\`via-orange-200\` tw\`via-orange-300\` tw\`via-orange-400\` tw\`via-orange-500\` tw\`via-orange-600\` tw\`via-orange-700\` tw\`via-orange-800\` tw\`via-orange-900\` tw\`via-amber-50\` tw\`via-amber-100\` tw\`via-amber-200\` tw\`via-amber-300\` tw\`via-amber-400\` tw\`via-amber-500\` tw\`via-amber-600\` tw\`via-amber-700\` tw\`via-amber-800\` tw\`via-amber-900\` tw\`via-yellow-50\` tw\`via-yellow-100\` tw\`via-yellow-200\` tw\`via-yellow-300\` tw\`via-yellow-400\` tw\`via-yellow-500\` tw\`via-yellow-600\` tw\`via-yellow-700\` tw\`via-yellow-800\` tw\`via-yellow-900\` tw\`via-lime-50\` tw\`via-lime-100\` tw\`via-lime-200\` tw\`via-lime-300\` tw\`via-lime-400\` tw\`via-lime-500\` tw\`via-lime-600\` tw\`via-lime-700\` tw\`via-lime-800\` tw\`via-lime-900\` tw\`via-green-50\` tw\`via-green-100\` tw\`via-green-200\` tw\`via-green-300\` tw\`via-green-400\` tw\`via-green-500\` tw\`via-green-600\` tw\`via-green-700\` tw\`via-green-800\` tw\`via-green-900\` tw\`via-emerald-50\` tw\`via-emerald-100\` tw\`via-emerald-200\` tw\`via-emerald-300\` tw\`via-emerald-400\` tw\`via-emerald-500\` tw\`via-emerald-600\` tw\`via-emerald-700\` tw\`via-emerald-800\` tw\`via-emerald-900\` tw\`via-teal-50\` tw\`via-teal-100\` tw\`via-teal-200\` tw\`via-teal-300\` tw\`via-teal-400\` tw\`via-teal-500\` tw\`via-teal-600\` tw\`via-teal-700\` tw\`via-teal-800\` tw\`via-teal-900\` tw\`via-cyan-50\` tw\`via-cyan-100\` tw\`via-cyan-200\` tw\`via-cyan-300\` tw\`via-cyan-400\` tw\`via-cyan-500\` tw\`via-cyan-600\` tw\`via-cyan-700\` tw\`via-cyan-800\` tw\`via-cyan-900\` tw\`via-sky-50\` tw\`via-sky-100\` tw\`via-sky-200\` tw\`via-sky-300\` tw\`via-sky-400\` tw\`via-sky-500\` tw\`via-sky-600\` tw\`via-sky-700\` tw\`via-sky-800\` tw\`via-sky-900\` tw\`via-blue-50\` tw\`via-blue-100\` tw\`via-blue-200\` tw\`via-blue-300\` tw\`via-blue-400\` tw\`via-blue-500\` tw\`via-blue-600\` tw\`via-blue-700\` tw\`via-blue-800\` tw\`via-blue-900\` tw\`via-indigo-50\` tw\`via-indigo-100\` tw\`via-indigo-200\` tw\`via-indigo-300\` tw\`via-indigo-400\` tw\`via-indigo-500\` tw\`via-indigo-600\` tw\`via-indigo-700\` tw\`via-indigo-800\` tw\`via-indigo-900\` tw\`via-violet-50\` tw\`via-violet-100\` tw\`via-violet-200\` tw\`via-violet-300\` tw\`via-violet-400\` tw\`via-violet-500\` tw\`via-violet-600\` tw\`via-violet-700\` tw\`via-violet-800\` tw\`via-violet-900\` tw\`via-purple-50\` tw\`via-purple-100\` tw\`via-purple-200\` tw\`via-purple-300\` tw\`via-purple-400\` tw\`via-purple-500\` tw\`via-purple-600\` tw\`via-purple-700\` tw\`via-purple-800\` tw\`via-purple-900\` tw\`via-fuchsia-50\` tw\`via-fuchsia-100\` tw\`via-fuchsia-200\` tw\`via-fuchsia-300\` tw\`via-fuchsia-400\` tw\`via-fuchsia-500\` tw\`via-fuchsia-600\` tw\`via-fuchsia-700\` tw\`via-fuchsia-800\` tw\`via-fuchsia-900\` tw\`via-pink-50\` tw\`via-pink-100\` tw\`via-pink-200\` tw\`via-pink-300\` tw\`via-pink-400\` tw\`via-pink-500\` tw\`via-pink-600\` tw\`via-pink-700\` tw\`via-pink-800\` tw\`via-pink-900\` tw\`via-rose-50\` tw\`via-rose-100\` tw\`via-rose-200\` tw\`via-rose-300\` tw\`via-rose-400\` tw\`via-rose-500\` tw\`via-rose-600\` tw\`via-rose-700\` tw\`via-rose-800\` tw\`via-rose-900\` tw\`to-inherit\` tw\`to-current\` tw\`to-transparent\` tw\`to-black\` tw\`to-white\` tw\`to-slate-50\` tw\`to-slate-100\` tw\`to-slate-200\` tw\`to-slate-300\` tw\`to-slate-400\` tw\`to-slate-500\` tw\`to-slate-600\` tw\`to-slate-700\` tw\`to-slate-800\` tw\`to-slate-900\` tw\`to-gray-50\` tw\`to-gray-100\` tw\`to-gray-200\` tw\`to-gray-300\` tw\`to-gray-400\` tw\`to-gray-500\` tw\`to-gray-600\` tw\`to-gray-700\` tw\`to-gray-800\` tw\`to-gray-900\` tw\`to-zinc-50\` tw\`to-zinc-100\` tw\`to-zinc-200\` tw\`to-zinc-300\` tw\`to-zinc-400\` tw\`to-zinc-500\` tw\`to-zinc-600\` tw\`to-zinc-700\` tw\`to-zinc-800\` tw\`to-zinc-900\` tw\`to-neutral-50\` tw\`to-neutral-100\` tw\`to-neutral-200\` tw\`to-neutral-300\` tw\`to-neutral-400\` tw\`to-neutral-500\` tw\`to-neutral-600\` tw\`to-neutral-700\` tw\`to-neutral-800\` tw\`to-neutral-900\` tw\`to-stone-50\` tw\`to-stone-100\` tw\`to-stone-200\` tw\`to-stone-300\` tw\`to-stone-400\` tw\`to-stone-500\` tw\`to-stone-600\` tw\`to-stone-700\` tw\`to-stone-800\` tw\`to-stone-900\` tw\`to-red-50\` tw\`to-red-100\` tw\`to-red-200\` tw\`to-red-300\` tw\`to-red-400\` tw\`to-red-500\` tw\`to-red-600\` tw\`to-red-700\` tw\`to-red-800\` tw\`to-red-900\` tw\`to-orange-50\` tw\`to-orange-100\` tw\`to-orange-200\` tw\`to-orange-300\` tw\`to-orange-400\` tw\`to-orange-500\` tw\`to-orange-600\` tw\`to-orange-700\` tw\`to-orange-800\` tw\`to-orange-900\` tw\`to-amber-50\` tw\`to-amber-100\` tw\`to-amber-200\` tw\`to-amber-300\` tw\`to-amber-400\` tw\`to-amber-500\` tw\`to-amber-600\` tw\`to-amber-700\` tw\`to-amber-800\` tw\`to-amber-900\` tw\`to-yellow-50\` tw\`to-yellow-100\` tw\`to-yellow-200\` tw\`to-yellow-300\` tw\`to-yellow-400\` tw\`to-yellow-500\` tw\`to-yellow-600\` tw\`to-yellow-700\` tw\`to-yellow-800\` tw\`to-yellow-900\` tw\`to-lime-50\` tw\`to-lime-100\` tw\`to-lime-200\` tw\`to-lime-300\` tw\`to-lime-400\` tw\`to-lime-500\` tw\`to-lime-600\` tw\`to-lime-700\` tw\`to-lime-800\` tw\`to-lime-900\` tw\`to-green-50\` tw\`to-green-100\` tw\`to-green-200\` tw\`to-green-300\` tw\`to-green-400\` tw\`to-green-500\` tw\`to-green-600\` tw\`to-green-700\` tw\`to-green-800\` tw\`to-green-900\` tw\`to-emerald-50\` tw\`to-emerald-100\` tw\`to-emerald-200\` tw\`to-emerald-300\` tw\`to-emerald-400\` tw\`to-emerald-500\` tw\`to-emerald-600\` tw\`to-emerald-700\` tw\`to-emerald-800\` tw\`to-emerald-900\` tw\`to-teal-50\` tw\`to-teal-100\` tw\`to-teal-200\` tw\`to-teal-300\` tw\`to-teal-400\` tw\`to-teal-500\` tw\`to-teal-600\` tw\`to-teal-700\` tw\`to-teal-800\` tw\`to-teal-900\` tw\`to-cyan-50\` tw\`to-cyan-100\` tw\`to-cyan-200\` tw\`to-cyan-300\` tw\`to-cyan-400\` tw\`to-cyan-500\` tw\`to-cyan-600\` tw\`to-cyan-700\` tw\`to-cyan-800\` tw\`to-cyan-900\` tw\`to-sky-50\` tw\`to-sky-100\` tw\`to-sky-200\` tw\`to-sky-300\` tw\`to-sky-400\` tw\`to-sky-500\` tw\`to-sky-600\` tw\`to-sky-700\` tw\`to-sky-800\` tw\`to-sky-900\` tw\`to-blue-50\` tw\`to-blue-100\` tw\`to-blue-200\` tw\`to-blue-300\` tw\`to-blue-400\` tw\`to-blue-500\` tw\`to-blue-600\` tw\`to-blue-700\` tw\`to-blue-800\` tw\`to-blue-900\` tw\`to-indigo-50\` tw\`to-indigo-100\` tw\`to-indigo-200\` tw\`to-indigo-300\` tw\`to-indigo-400\` tw\`to-indigo-500\` tw\`to-indigo-600\` tw\`to-indigo-700\` tw\`to-indigo-800\` tw\`to-indigo-900\` tw\`to-violet-50\` tw\`to-violet-100\` tw\`to-violet-200\` tw\`to-violet-300\` tw\`to-violet-400\` tw\`to-violet-500\` tw\`to-violet-600\` tw\`to-violet-700\` tw\`to-violet-800\` tw\`to-violet-900\` tw\`to-purple-50\` tw\`to-purple-100\` tw\`to-purple-200\` tw\`to-purple-300\` tw\`to-purple-400\` tw\`to-purple-500\` tw\`to-purple-600\` tw\`to-purple-700\` tw\`to-purple-800\` tw\`to-purple-900\` tw\`to-fuchsia-50\` tw\`to-fuchsia-100\` tw\`to-fuchsia-200\` tw\`to-fuchsia-300\` tw\`to-fuchsia-400\` tw\`to-fuchsia-500\` tw\`to-fuchsia-600\` tw\`to-fuchsia-700\` tw\`to-fuchsia-800\` tw\`to-fuchsia-900\` tw\`to-pink-50\` tw\`to-pink-100\` tw\`to-pink-200\` tw\`to-pink-300\` tw\`to-pink-400\` tw\`to-pink-500\` tw\`to-pink-600\` tw\`to-pink-700\` tw\`to-pink-800\` tw\`to-pink-900\` tw\`to-rose-50\` tw\`to-rose-100\` tw\`to-rose-200\` tw\`to-rose-300\` tw\`to-rose-400\` tw\`to-rose-500\` tw\`to-rose-600\` tw\`to-rose-700\` tw\`to-rose-800\` tw\`to-rose-900\` tw\`bg-gradient-to-t from-electric to-electric text-purple-500 text-opacity-50\` tw\`bg-gradient-to-r from-indigo-500\` tw\`bg-gradient-to-r from-cyan-500 to-blue-500\` tw\`bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500\` tw\`bg-gradient-to-r from-green-400 to-blue-500 hover:from-pink-500 hover:to-yellow-500\` tw\`bg-gradient-to-r from-purple-400 md:from-yellow-500\` tw\`from-[#da5b66] via-[#da5b66] to-[#da5b66]\` tw\`from-[var(--color)] via-[var(--color)] to-[var(--color)]\` tw\`from-red-500\` tw\`from-red-500/25\` tw\`from-red-500/fromConfig\` tw\`from-red-500/fromConfig/25\` tw\`from-red-500/fromConfig/[.555]\` tw\`from-red-500/fromConfig/[var(--myvar)]\` tw\`from-red-500/[.555]\` tw\`from-red-500/[var(--myvar)]\` tw\`from-[theme('colors.red.500')]\` tw\`from-electric\` tw\`from-electric/25\` tw\`from-electric/[.555]\` tw\`from-electric/[var(--myvar)]\` tw\`from-[theme('colors.electric')]\` tw\`via-red-500\` tw\`via-red-500/25\` tw\`via-red-500/fromConfig\` tw\`via-red-500/[.555]\` tw\`via-red-500/[var(--myvar)]\` tw\`via-[theme('colors.red.500')]\` tw\`via-electric\` tw\`via-electric/25\` tw\`via-electric/[.555]\` tw\`via-electric/[var(--myvar)]\` tw\`via-[theme('colors.electric')]\` tw\`to-red-500/25\` tw\`to-red-500/fromConfig\` tw\`to-red-500/[.555]\` tw\`to-red-500/[var(--myvar)]\` tw\`to-[theme('colors.red.500')]\` tw\`to-electric\` tw\`to-electric/25\` tw\`to-electric/[.555]\` tw\`to-electric/[var(--myvar)]\` tw\`to-[theme('colors.electric')]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/gradient-color-stops ;({ inherit: 'inherit', current: 'currentColor', transparent: 'transparent', black: '#000', white: '#fff', slate: { 50: '#f8fafc', 100: '#f1f5f9', 200: '#e2e8f0', 300: '#cbd5e1', 400: '#94a3b8', 500: '#64748b', 600: '#475569', 700: '#334155', 800: '#1e293b', 900: '#0f172a', 950: '#020617', }, gray: { 50: '#f9fafb', 100: '#f3f4f6', 200: '#e5e7eb', 300: '#d1d5db', 400: '#9ca3af', 500: '#6b7280', 600: '#4b5563', 700: '#374151', 800: '#1f2937', 900: '#111827', 950: '#030712', }, zinc: { 50: '#fafafa', 100: '#f4f4f5', 200: '#e4e4e7', 300: '#d4d4d8', 400: '#a1a1aa', 500: '#71717a', 600: '#52525b', 700: '#3f3f46', 800: '#27272a', 900: '#18181b', 950: '#09090b', }, neutral: { 50: '#fafafa', 100: '#f5f5f5', 200: '#e5e5e5', 300: '#d4d4d4', 400: '#a3a3a3', 500: '#737373', 600: '#525252', 700: '#404040', 800: '#262626', 900: '#171717', 950: '#0a0a0a', }, stone: { 50: '#fafaf9', 100: '#f5f5f4', 200: '#e7e5e4', 300: '#d6d3d1', 400: '#a8a29e', 500: '#78716c', 600: '#57534e', 700: '#44403c', 800: '#292524', 900: '#1c1917', 950: '#0c0a09', }, red: { 50: '#fef2f2', 100: '#fee2e2', 200: '#fecaca', 300: '#fca5a5', 400: '#f87171', 500: '#ef4444', 600: '#dc2626', 700: '#b91c1c', 800: '#991b1b', 900: '#7f1d1d', 950: '#450a0a', }, orange: { 50: '#fff7ed', 100: '#ffedd5', 200: '#fed7aa', 300: '#fdba74', 400: '#fb923c', 500: '#f97316', 600: '#ea580c', 700: '#c2410c', 800: '#9a3412', 900: '#7c2d12', 950: '#431407', }, amber: { 50: '#fffbeb', 100: '#fef3c7', 200: '#fde68a', 300: '#fcd34d', 400: '#fbbf24', 500: '#f59e0b', 600: '#d97706', 700: '#b45309', 800: '#92400e', 900: '#78350f', 950: '#451a03', }, yellow: { 50: '#fefce8', 100: '#fef9c3', 200: '#fef08a', 300: '#fde047', 400: '#facc15', 500: '#eab308', 600: '#ca8a04', 700: '#a16207', 800: '#854d0e', 900: '#713f12', 950: '#422006', }, lime: { 50: '#f7fee7', 100: '#ecfccb', 200: '#d9f99d', 300: '#bef264', 400: '#a3e635', 500: '#84cc16', 600: '#65a30d', 700: '#4d7c0f', 800: '#3f6212', 900: '#365314', 950: '#1a2e05', }, green: { 50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 300: '#86efac', 400: '#4ade80', 500: '#22c55e', 600: '#16a34a', 700: '#15803d', 800: '#166534', 900: '#14532d', 950: '#052e16', }, emerald: { 50: '#ecfdf5', 100: '#d1fae5', 200: '#a7f3d0', 300: '#6ee7b7', 400: '#34d399', 500: '#10b981', 600: '#059669', 700: '#047857', 800: '#065f46', 900: '#064e3b', 950: '#022c22', }, teal: { 50: '#f0fdfa', 100: '#ccfbf1', 200: '#99f6e4', 300: '#5eead4', 400: '#2dd4bf', 500: '#14b8a6', 600: '#0d9488', 700: '#0f766e', 800: '#115e59', 900: '#134e4a', 950: '#042f2e', }, cyan: { 50: '#ecfeff', 100: '#cffafe', 200: '#a5f3fc', 300: '#67e8f9', 400: '#22d3ee', 500: '#06b6d4', 600: '#0891b2', 700: '#0e7490', 800: '#155e75', 900: '#164e63', 950: '#083344', }, sky: { 50: '#f0f9ff', 100: '#e0f2fe', 200: '#bae6fd', 300: '#7dd3fc', 400: '#38bdf8', 500: '#0ea5e9', 600: '#0284c7', 700: '#0369a1', 800: '#075985', 900: '#0c4a6e', 950: '#082f49', }, blue: { 50: '#eff6ff', 100: '#dbeafe', 200: '#bfdbfe', 300: '#93c5fd', 400: '#60a5fa', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8', 800: '#1e40af', 900: '#1e3a8a', 950: '#172554', }, indigo: { 50: '#eef2ff', 100: '#e0e7ff', 200: '#c7d2fe', 300: '#a5b4fc', 400: '#818cf8', 500: '#6366f1', 600: '#4f46e5', 700: '#4338ca', 800: '#3730a3', 900: '#312e81', 950: '#1e1b4b', }, violet: { 50: '#f5f3ff', 100: '#ede9fe', 200: '#ddd6fe', 300: '#c4b5fd', 400: '#a78bfa', 500: '#8b5cf6', 600: '#7c3aed', 700: '#6d28d9', 800: '#5b21b6', 900: '#4c1d95', 950: '#2e1065', }, purple: { 50: '#faf5ff', 100: '#f3e8ff', 200: '#e9d5ff', 300: '#d8b4fe', 400: '#c084fc', 500: '#a855f7', 600: '#9333ea', 700: '#7e22ce', 800: '#6b21a8', 900: '#581c87', 950: '#3b0764', }, fuchsia: { 50: '#fdf4ff', 100: '#fae8ff', 200: '#f5d0fe', 300: '#f0abfc', 400: '#e879f9', 500: '#d946ef', 600: '#c026d3', 700: '#a21caf', 800: '#86198f', 900: '#701a75', 950: '#4a044e', }, pink: { 50: '#fdf2f8', 100: '#fce7f3', 200: '#fbcfe8', 300: '#f9a8d4', 400: '#f472b6', 500: '#ec4899', 600: '#db2777', 700: '#be185d', 800: '#9d174d', 900: '#831843', 950: '#500724', }, rose: { 50: '#fff1f2', 100: '#ffe4e6', 200: '#fecdd3', 300: '#fda4af', 400: '#fb7185', 500: '#f43f5e', 600: '#e11d48', 700: '#be123c', 800: '#9f1239', 900: '#881337', 950: '#4c0519', }, 'red-500/fromConfig': '#000', electric: void 0, }) ;({ '--tw-gradient-from': 'inherit var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(255 255 255 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': 'currentColor var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(255 255 255 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': 'transparent var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(0 0 0 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#000 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(0 0 0 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#fff var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(255 255 255 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#f8fafc var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(248 250 252 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#f1f5f9 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(241 245 249 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#e2e8f0 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(226 232 240 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#cbd5e1 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(203 213 225 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#94a3b8 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(148 163 184 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#64748b var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(100 116 139 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#475569 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(71 85 105 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#334155 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(51 65 85 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#1e293b var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(30 41 59 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#0f172a var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(15 23 42 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#f9fafb var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(249 250 251 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#f3f4f6 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(243 244 246 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#e5e7eb var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(229 231 235 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#d1d5db var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(209 213 219 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#9ca3af var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(156 163 175 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#6b7280 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(107 114 128 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#4b5563 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(75 85 99 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#374151 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(55 65 81 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#1f2937 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(31 41 55 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#111827 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(17 24 39 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#fafafa var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(250 250 250 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#f4f4f5 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(244 244 245 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#e4e4e7 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(228 228 231 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#d4d4d8 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(212 212 216 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#a1a1aa var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(161 161 170 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#71717a var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(113 113 122 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#52525b var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(82 82 91 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#3f3f46 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(63 63 70 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#27272a var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(39 39 42 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#18181b var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(24 24 27 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#fafafa var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(250 250 250 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#f5f5f5 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(245 245 245 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#e5e5e5 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(229 229 229 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#d4d4d4 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(212 212 212 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#a3a3a3 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(163 163 163 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#737373 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(115 115 115 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#525252 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(82 82 82 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#404040 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(64 64 64 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#262626 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(38 38 38 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#171717 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(23 23 23 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#fafaf9 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(250 250 249 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#f5f5f4 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(245 245 244 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#e7e5e4 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(231 229 228 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#d6d3d1 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(214 211 209 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#a8a29e var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(168 162 158 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#78716c var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(120 113 108 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#57534e var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(87 83 78 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#44403c var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(68 64 60 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#292524 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(41 37 36 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#1c1917 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(28 25 23 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#fef2f2 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(254 242 242 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#fee2e2 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(254 226 226 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#fecaca var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(254 202 202 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#fca5a5 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(252 165 165 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#f87171 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(248 113 113 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#ef4444 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(239 68 68 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#dc2626 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(220 38 38 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#b91c1c var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(185 28 28 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#991b1b var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(153 27 27 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#7f1d1d var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(127 29 29 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#fff7ed var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(255 247 237 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#ffedd5 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(255 237 213 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#fed7aa var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(254 215 170 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#fdba74 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(253 186 116 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#fb923c var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(251 146 60 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#f97316 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(249 115 22 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#ea580c var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(234 88 12 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#c2410c var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(194 65 12 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#9a3412 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(154 52 18 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#7c2d12 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(124 45 18 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#fffbeb var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(255 251 235 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#fef3c7 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(254 243 199 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#fde68a var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(253 230 138 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#fcd34d var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(252 211 77 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#fbbf24 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(251 191 36 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#f59e0b var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(245 158 11 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#d97706 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(217 119 6 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#b45309 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(180 83 9 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#92400e var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(146 64 14 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#78350f var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(120 53 15 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#fefce8 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(254 252 232 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#fef9c3 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(254 249 195 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#fef08a var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(254 240 138 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#fde047 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(253 224 71 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#facc15 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(250 204 21 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#eab308 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(234 179 8 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#ca8a04 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(202 138 4 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#a16207 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(161 98 7 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#854d0e var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(133 77 14 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#713f12 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(113 63 18 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#f7fee7 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(247 254 231 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#ecfccb var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(236 252 203 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#d9f99d var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(217 249 157 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#bef264 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(190 242 100 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#a3e635 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(163 230 53 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#84cc16 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(132 204 22 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#65a30d var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(101 163 13 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#4d7c0f var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(77 124 15 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#3f6212 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(63 98 18 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#365314 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(54 83 20 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#f0fdf4 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(240 253 244 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#dcfce7 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(220 252 231 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#bbf7d0 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(187 247 208 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#86efac var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(134 239 172 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#4ade80 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(74 222 128 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#22c55e var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(34 197 94 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#16a34a var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(22 163 74 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#15803d var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(21 128 61 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#166534 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(22 101 52 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#14532d var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(20 83 45 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#ecfdf5 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(236 253 245 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#d1fae5 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(209 250 229 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#a7f3d0 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(167 243 208 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#6ee7b7 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(110 231 183 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#34d399 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(52 211 153 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#10b981 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(16 185 129 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#059669 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(5 150 105 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#047857 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(4 120 87 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#065f46 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(6 95 70 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#064e3b var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(6 78 59 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#f0fdfa var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(240 253 250 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#ccfbf1 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(204 251 241 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#99f6e4 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(153 246 228 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#5eead4 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(94 234 212 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#2dd4bf var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(45 212 191 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#14b8a6 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(20 184 166 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#0d9488 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(13 148 136 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#0f766e var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(15 118 110 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#115e59 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(17 94 89 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#134e4a var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(19 78 74 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#ecfeff var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(236 254 255 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#cffafe var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(207 250 254 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#a5f3fc var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(165 243 252 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#67e8f9 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(103 232 249 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#22d3ee var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(34 211 238 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#06b6d4 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(6 182 212 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#0891b2 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(8 145 178 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#0e7490 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(14 116 144 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#155e75 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(21 94 117 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#164e63 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(22 78 99 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#f0f9ff var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(240 249 255 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#e0f2fe var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(224 242 254 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#bae6fd var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(186 230 253 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#7dd3fc var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(125 211 252 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#38bdf8 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(56 189 248 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#0ea5e9 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(14 165 233 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#0284c7 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(2 132 199 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#0369a1 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(3 105 161 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#075985 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(7 89 133 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#0c4a6e var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(12 74 110 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#eff6ff var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(239 246 255 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#dbeafe var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(219 234 254 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#bfdbfe var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(191 219 254 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#93c5fd var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(147 197 253 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#60a5fa var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(96 165 250 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#3b82f6 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(59 130 246 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#2563eb var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(37 99 235 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#1d4ed8 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(29 78 216 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#1e40af var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(30 64 175 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#1e3a8a var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(30 58 138 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#eef2ff var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(238 242 255 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#e0e7ff var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(224 231 255 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#c7d2fe var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(199 210 254 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#a5b4fc var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(165 180 252 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#818cf8 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(129 140 248 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#6366f1 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(99 102 241 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#4f46e5 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(79 70 229 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#4338ca var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(67 56 202 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#3730a3 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(55 48 163 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#312e81 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(49 46 129 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#f5f3ff var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(245 243 255 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#ede9fe var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(237 233 254 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#ddd6fe var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(221 214 254 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#c4b5fd var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(196 181 253 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#a78bfa var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(167 139 250 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#8b5cf6 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(139 92 246 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#7c3aed var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(124 58 237 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#6d28d9 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(109 40 217 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#5b21b6 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(91 33 182 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#4c1d95 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(76 29 149 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#faf5ff var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(250 245 255 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#f3e8ff var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(243 232 255 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#e9d5ff var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(233 213 255 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#d8b4fe var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(216 180 254 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#c084fc var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(192 132 252 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#a855f7 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(168 85 247 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#9333ea var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(147 51 234 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#7e22ce var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(126 34 206 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#6b21a8 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(107 33 168 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#581c87 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(88 28 135 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#fdf4ff var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(253 244 255 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#fae8ff var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(250 232 255 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#f5d0fe var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(245 208 254 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#f0abfc var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(240 171 252 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#e879f9 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(232 121 249 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#d946ef var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(217 70 239 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#c026d3 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(192 38 211 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#a21caf var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(162 28 175 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#86198f var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(134 25 143 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#701a75 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(112 26 117 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#fdf2f8 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(253 242 248 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#fce7f3 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(252 231 243 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#fbcfe8 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(251 207 232 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#f9a8d4 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(249 168 212 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#f472b6 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(244 114 182 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#ec4899 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(236 72 153 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#db2777 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(219 39 119 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#be185d var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(190 24 93 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#9d174d var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(157 23 77 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#831843 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(131 24 67 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#fff1f2 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(255 241 242 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#ffe4e6 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(255 228 230 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#fecdd3 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(254 205 211 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#fda4af var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(253 164 175 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#fb7185 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(251 113 133 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#f43f5e var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(244 63 94 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#e11d48 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(225 29 72 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#be123c var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(190 18 60 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#9f1239 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(159 18 57 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#881337 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(136 19 55 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(255 255 255 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), inherit var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(255 255 255 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), currentColor var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(0 0 0 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(0 0 0 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #000 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(255 255 255 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #fff var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(248 250 252 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #f8fafc var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(241 245 249 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #f1f5f9 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(226 232 240 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #e2e8f0 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(203 213 225 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #cbd5e1 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(148 163 184 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #94a3b8 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(100 116 139 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #64748b var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(71 85 105 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #475569 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(51 65 85 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #334155 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(30 41 59 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #1e293b var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(15 23 42 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #0f172a var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(249 250 251 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #f9fafb var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(243 244 246 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #f3f4f6 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(229 231 235 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #e5e7eb var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(209 213 219 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #d1d5db var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(156 163 175 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #9ca3af var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(107 114 128 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #6b7280 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(75 85 99 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #4b5563 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(55 65 81 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #374151 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(31 41 55 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #1f2937 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(17 24 39 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #111827 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(250 250 250 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #fafafa var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(244 244 245 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #f4f4f5 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(228 228 231 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #e4e4e7 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(212 212 216 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #d4d4d8 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(161 161 170 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #a1a1aa var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(113 113 122 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #71717a var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(82 82 91 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #52525b var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(63 63 70 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #3f3f46 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(39 39 42 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #27272a var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(24 24 27 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #18181b var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(250 250 250 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #fafafa var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(245 245 245 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #f5f5f5 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(229 229 229 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #e5e5e5 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(212 212 212 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #d4d4d4 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(163 163 163 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #a3a3a3 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(115 115 115 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #737373 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(82 82 82 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #525252 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(64 64 64 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #404040 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(38 38 38 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #262626 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(23 23 23 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #171717 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(250 250 249 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #fafaf9 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(245 245 244 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #f5f5f4 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(231 229 228 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #e7e5e4 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(214 211 209 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #d6d3d1 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(168 162 158 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #a8a29e var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(120 113 108 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #78716c var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(87 83 78 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #57534e var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(68 64 60 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #44403c var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(41 37 36 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #292524 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(28 25 23 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #1c1917 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(254 242 242 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #fef2f2 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(254 226 226 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #fee2e2 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(254 202 202 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #fecaca var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(252 165 165 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #fca5a5 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(248 113 113 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #f87171 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(239 68 68 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #ef4444 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(220 38 38 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #dc2626 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(185 28 28 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #b91c1c var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(153 27 27 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #991b1b var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(127 29 29 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #7f1d1d var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(255 247 237 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #fff7ed var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(255 237 213 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #ffedd5 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(254 215 170 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #fed7aa var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(253 186 116 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #fdba74 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(251 146 60 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #fb923c var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(249 115 22 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #f97316 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(234 88 12 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #ea580c var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(194 65 12 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #c2410c var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(154 52 18 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #9a3412 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(124 45 18 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #7c2d12 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(255 251 235 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #fffbeb var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(254 243 199 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #fef3c7 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(253 230 138 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #fde68a var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(252 211 77 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #fcd34d var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(251 191 36 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #fbbf24 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(245 158 11 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #f59e0b var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(217 119 6 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #d97706 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(180 83 9 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #b45309 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(146 64 14 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #92400e var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(120 53 15 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #78350f var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(254 252 232 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #fefce8 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(254 249 195 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #fef9c3 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(254 240 138 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #fef08a var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(253 224 71 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #fde047 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(250 204 21 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #facc15 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(234 179 8 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #eab308 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(202 138 4 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #ca8a04 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(161 98 7 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #a16207 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(133 77 14 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #854d0e var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(113 63 18 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #713f12 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(247 254 231 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #f7fee7 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(236 252 203 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #ecfccb var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(217 249 157 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #d9f99d var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(190 242 100 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #bef264 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(163 230 53 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #a3e635 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(132 204 22 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #84cc16 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(101 163 13 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #65a30d var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(77 124 15 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #4d7c0f var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(63 98 18 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #3f6212 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(54 83 20 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #365314 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(240 253 244 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #f0fdf4 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(220 252 231 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #dcfce7 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(187 247 208 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #bbf7d0 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(134 239 172 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #86efac var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(74 222 128 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #4ade80 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(34 197 94 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #22c55e var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(22 163 74 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #16a34a var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(21 128 61 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #15803d var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(22 101 52 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #166534 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(20 83 45 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #14532d var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(236 253 245 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #ecfdf5 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(209 250 229 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #d1fae5 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(167 243 208 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #a7f3d0 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(110 231 183 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #6ee7b7 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(52 211 153 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #34d399 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(16 185 129 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #10b981 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(5 150 105 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #059669 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(4 120 87 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #047857 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(6 95 70 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #065f46 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(6 78 59 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #064e3b var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(240 253 250 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #f0fdfa var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(204 251 241 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #ccfbf1 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(153 246 228 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #99f6e4 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(94 234 212 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #5eead4 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(45 212 191 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #2dd4bf var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(20 184 166 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #14b8a6 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(13 148 136 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #0d9488 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(15 118 110 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #0f766e var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(17 94 89 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #115e59 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(19 78 74 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #134e4a var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(236 254 255 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #ecfeff var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(207 250 254 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #cffafe var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(165 243 252 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #a5f3fc var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(103 232 249 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #67e8f9 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(34 211 238 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #22d3ee var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(6 182 212 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #06b6d4 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(8 145 178 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #0891b2 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(14 116 144 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #0e7490 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(21 94 117 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #155e75 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(22 78 99 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #164e63 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(240 249 255 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #f0f9ff var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(224 242 254 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #e0f2fe var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(186 230 253 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #bae6fd var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(125 211 252 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #7dd3fc var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(56 189 248 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #38bdf8 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(14 165 233 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #0ea5e9 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(2 132 199 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #0284c7 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(3 105 161 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #0369a1 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(7 89 133 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #075985 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(12 74 110 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #0c4a6e var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(239 246 255 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #eff6ff var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(219 234 254 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #dbeafe var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(191 219 254 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #bfdbfe var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(147 197 253 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #93c5fd var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(96 165 250 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #60a5fa var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(59 130 246 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #3b82f6 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(37 99 235 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #2563eb var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(29 78 216 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #1d4ed8 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(30 64 175 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #1e40af var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(30 58 138 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #1e3a8a var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(238 242 255 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #eef2ff var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(224 231 255 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #e0e7ff var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(199 210 254 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #c7d2fe var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(165 180 252 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #a5b4fc var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(129 140 248 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #818cf8 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(99 102 241 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #6366f1 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(79 70 229 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #4f46e5 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(67 56 202 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #4338ca var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(55 48 163 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #3730a3 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(49 46 129 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #312e81 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(245 243 255 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #f5f3ff var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(237 233 254 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #ede9fe var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(221 214 254 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #ddd6fe var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(196 181 253 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #c4b5fd var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(167 139 250 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #a78bfa var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(139 92 246 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #8b5cf6 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(124 58 237 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #7c3aed var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(109 40 217 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #6d28d9 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(91 33 182 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #5b21b6 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(76 29 149 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #4c1d95 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(250 245 255 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #faf5ff var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(243 232 255 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #f3e8ff var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(233 213 255 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #e9d5ff var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(216 180 254 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #d8b4fe var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(192 132 252 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #c084fc var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(168 85 247 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #a855f7 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(147 51 234 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #9333ea var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(126 34 206 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #7e22ce var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(107 33 168 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #6b21a8 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(88 28 135 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #581c87 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(253 244 255 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #fdf4ff var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(250 232 255 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #fae8ff var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(245 208 254 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #f5d0fe var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(240 171 252 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #f0abfc var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(232 121 249 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #e879f9 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(217 70 239 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #d946ef var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(192 38 211 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #c026d3 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(162 28 175 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #a21caf var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(134 25 143 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #86198f var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(112 26 117 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #701a75 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(253 242 248 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #fdf2f8 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(252 231 243 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #fce7f3 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(251 207 232 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #fbcfe8 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(249 168 212 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #f9a8d4 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(244 114 182 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #f472b6 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(236 72 153 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #ec4899 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(219 39 119 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #db2777 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(190 24 93 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #be185d var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(157 23 77 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #9d174d var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(131 24 67 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #831843 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(255 241 242 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #fff1f2 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(255 228 230 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #ffe4e6 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(254 205 211 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #fecdd3 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(253 164 175 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #fda4af var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(251 113 133 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #fb7185 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(244 63 94 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #f43f5e var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(225 29 72 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #e11d48 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(190 18 60 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #be123c var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(159 18 57 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #9f1239 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(136 19 55 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #881337 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-to': 'inherit var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': 'currentColor var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': 'transparent var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#000 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#fff var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#f8fafc var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#f1f5f9 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#e2e8f0 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#cbd5e1 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#94a3b8 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#64748b var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#475569 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#334155 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#1e293b var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#0f172a var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#f9fafb var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#f3f4f6 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#e5e7eb var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#d1d5db var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#9ca3af var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#6b7280 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#4b5563 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#374151 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#1f2937 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#111827 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#fafafa var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#f4f4f5 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#e4e4e7 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#d4d4d8 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#a1a1aa var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#71717a var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#52525b var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#3f3f46 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#27272a var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#18181b var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#fafafa var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#f5f5f5 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#e5e5e5 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#d4d4d4 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#a3a3a3 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#737373 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#525252 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#404040 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#262626 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#171717 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#fafaf9 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#f5f5f4 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#e7e5e4 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#d6d3d1 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#a8a29e var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#78716c var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#57534e var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#44403c var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#292524 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#1c1917 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#fef2f2 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#fee2e2 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#fecaca var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#fca5a5 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#f87171 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#ef4444 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#dc2626 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#b91c1c var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#991b1b var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#7f1d1d var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#fff7ed var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#ffedd5 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#fed7aa var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#fdba74 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#fb923c var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#f97316 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#ea580c var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#c2410c var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#9a3412 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#7c2d12 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#fffbeb var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#fef3c7 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#fde68a var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#fcd34d var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#fbbf24 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#f59e0b var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#d97706 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#b45309 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#92400e var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#78350f var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#fefce8 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#fef9c3 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#fef08a var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#fde047 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#facc15 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#eab308 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#ca8a04 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#a16207 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#854d0e var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#713f12 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#f7fee7 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#ecfccb var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#d9f99d var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#bef264 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#a3e635 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#84cc16 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#65a30d var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#4d7c0f var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#3f6212 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#365314 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#f0fdf4 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#dcfce7 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#bbf7d0 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#86efac var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#4ade80 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#22c55e var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#16a34a var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#15803d var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#166534 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#14532d var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#ecfdf5 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#d1fae5 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#a7f3d0 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#6ee7b7 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#34d399 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#10b981 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#059669 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#047857 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#065f46 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#064e3b var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#f0fdfa var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#ccfbf1 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#99f6e4 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#5eead4 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#2dd4bf var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#14b8a6 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#0d9488 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#0f766e var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#115e59 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#134e4a var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#ecfeff var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#cffafe var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#a5f3fc var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#67e8f9 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#22d3ee var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#06b6d4 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#0891b2 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#0e7490 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#155e75 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#164e63 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#f0f9ff var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#e0f2fe var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#bae6fd var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#7dd3fc var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#38bdf8 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#0ea5e9 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#0284c7 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#0369a1 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#075985 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#0c4a6e var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#eff6ff var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#dbeafe var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#bfdbfe var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#93c5fd var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#60a5fa var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#3b82f6 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#2563eb var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#1d4ed8 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#1e40af var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#1e3a8a var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#eef2ff var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#e0e7ff var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#c7d2fe var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#a5b4fc var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#818cf8 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#6366f1 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#4f46e5 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#4338ca var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#3730a3 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#312e81 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#f5f3ff var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#ede9fe var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#ddd6fe var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#c4b5fd var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#a78bfa var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#8b5cf6 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#7c3aed var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#6d28d9 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#5b21b6 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#4c1d95 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#faf5ff var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#f3e8ff var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#e9d5ff var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#d8b4fe var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#c084fc var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#a855f7 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#9333ea var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#7e22ce var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#6b21a8 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#581c87 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#fdf4ff var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#fae8ff var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#f5d0fe var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#f0abfc var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#e879f9 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#d946ef var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#c026d3 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#a21caf var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#86198f var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#701a75 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#fdf2f8 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#fce7f3 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#fbcfe8 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#f9a8d4 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#f472b6 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#ec4899 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#db2777 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#be185d var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#9d174d var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#831843 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#fff1f2 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#ffe4e6 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#fecdd3 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#fda4af var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#fb7185 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#f43f5e var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#e11d48 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#be123c var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#9f1239 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#881337 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ backgroundImage: 'linear-gradient(to top, var(--tw-gradient-stops))', '--tw-gradient-from': 'rgb(219, 0, 255) var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(219, 0, 255) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', '--tw-text-opacity': '0.5', color: 'rgb(168 85 247 / var(--tw-text-opacity))', }) ;({ backgroundImage: 'linear-gradient(to right, var(--tw-gradient-stops))', '--tw-gradient-from': '#6366f1 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(99 102 241 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ backgroundImage: 'linear-gradient(to right, var(--tw-gradient-stops))', '--tw-gradient-from': '#06b6d4 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': '#3b82f6 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ backgroundImage: 'linear-gradient(to right, var(--tw-gradient-stops))', '--tw-gradient-from': '#6366f1 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': '#ec4899 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #a855f7 var(--tw-gradient-via-position), var(--tw-gradient-to)', '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ backgroundImage: 'linear-gradient(to right, var(--tw-gradient-stops))', '--tw-gradient-from': '#4ade80 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': '#3b82f6 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', ':hover': { '--tw-gradient-from': '#ec4899 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': '#eab308 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }, }) ;({ backgroundImage: 'linear-gradient(to right, var(--tw-gradient-stops))', '--tw-gradient-from': '#c084fc var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(192 132 252 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', '@media (min-width: 768px)': { '--tw-gradient-from': '#eab308 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(234 179 8 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }, }) ;({ '--tw-gradient-from': '#da5b66 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': '#da5b66 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #da5b66 var(--tw-gradient-via-position), var(--tw-gradient-to)', '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-from': 'var(--color) var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'var(--color) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--color) var(--tw-gradient-via-position), var(--tw-gradient-to)', '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-from': '#ef4444 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(239 68 68 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': 'rgb(239 68 68 / 0.25) var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(239 68 68 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#000 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(0 0 0 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': 'rgb(0 0 0 / 0.25) var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(0 0 0 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': 'rgb(0 0 0 / .555) var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(0 0 0 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': 'rgb(0 0 0 / var(--myvar)) var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(0 0 0 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': 'rgb(239 68 68 / .555) var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(239 68 68 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': 'rgb(239 68 68 / var(--myvar)) var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(239 68 68 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': '#ef4444 var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(239 68 68 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': 'rgb(219, 0, 255) var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgba(219, 0, 255, 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': 'rgba(219, 0, 255, 0.25) var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgba(219, 0, 255, 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': 'rgba(219, 0, 255, .555) var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgba(219, 0, 255, 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': 'rgba(219, 0, 255, var(--myvar)) var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgba(219, 0, 255, 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-from': 'rgb(219, 0, 255) var(--tw-gradient-from-position)', '--tw-gradient-from-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(219 0 255 / 0) var(--tw-gradient-from-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(239 68 68 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #ef4444 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(239 68 68 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), rgb(239 68 68 / 0.25) var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(0 0 0 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #000 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(239 68 68 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), rgb(239 68 68 / .555) var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(239 68 68 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), rgb(239 68 68 / var(--myvar)) var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(239 68 68 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), #ef4444 var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgba(219, 0, 255, 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), rgb(219, 0, 255) var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgba(219, 0, 255, 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), rgba(219, 0, 255, 0.25) var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgba(219, 0, 255, 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), rgba(219, 0, 255, .555) var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgba(219, 0, 255, 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), rgba(219, 0, 255, var(--myvar)) var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-via-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-to': 'rgb(219 0 255 / 0) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-gradient-stops': 'var(--tw-gradient-from), rgb(219, 0, 255) var(--tw-gradient-via-position), var(--tw-gradient-to)', }) ;({ '--tw-gradient-to': 'rgb(239 68 68 / 0.25) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#000 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': 'rgb(239 68 68 / .555) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': 'rgb(239 68 68 / var(--myvar)) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': '#ef4444 var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': 'rgb(219, 0, 255) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': 'rgba(219, 0, 255, 0.25) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': 'rgba(219, 0, 255, .555) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': 'rgba(219, 0, 255, var(--myvar)) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) ;({ '--tw-gradient-to': 'rgb(219, 0, 255) var(--tw-gradient-to-position)', '--tw-gradient-to-position': 'var(--tw-empty,/*!*/ /*!*/)', }) `; exports[`twin.macro grayscale.tsx: grayscale.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/grayscale theme\`grayscale.\` tw\`grayscale-0\` tw\`grayscale\` tw\`grayscale-[50%]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/grayscale ;({ 0: '0', DEFAULT: '100%', }) ;({ '--tw-grayscale': 'grayscale(0)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-grayscale': 'grayscale(100%)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-grayscale': 'grayscale(50%)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) `; exports[`twin.macro gridAutoColumns.tsx: gridAutoColumns.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/grid-auto-columns theme\`gridAutoColumns\` tw\`auto-cols-auto\` tw\`auto-cols-min\` tw\`auto-cols-max\` tw\`auto-cols-fr\` tw\`auto-cols-[minmax(0, 2fr)]\` tw\`grid-cols-[200px,repeat(auto-fill,minmax(15%,100px)),300px]\` tw\`lg:grid-cols-[200px,repeat(auto-fill,minmax(15%,100px)),300px]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/grid-auto-columns ;({ auto: 'auto', min: 'min-content', max: 'max-content', fr: 'minmax(0, 1fr)', }) ;({ gridAutoColumns: 'auto', }) ;({ gridAutoColumns: 'min-content', }) ;({ gridAutoColumns: 'max-content', }) ;({ gridAutoColumns: 'minmax(0, 1fr)', }) ;({ gridAutoColumns: 'minmax(0, 2fr)', }) ;({ gridTemplateColumns: '200px repeat(auto-fill,minmax(15%,100px)) 300px', }) ;({ '@media (min-width: 1024px)': { gridTemplateColumns: '200px repeat(auto-fill,minmax(15%,100px)) 300px', }, }) `; exports[`twin.macro gridAutoFlow.tsx: gridAutoFlow.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/grid-auto-flow tw\`grid-flow-row\` tw\`grid-flow-col\` tw\`grid-flow-row-dense\` tw\`grid-flow-col-dense\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/grid-auto-flow ;({ gridAutoFlow: 'row', }) ;({ gridAutoFlow: 'column', }) ;({ gridAutoFlow: 'row dense', }) ;({ gridAutoFlow: 'column dense', }) `; exports[`twin.macro gridAutoRows.tsx: gridAutoRows.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/grid-auto-rows theme\`gridAutoRows\` tw\`auto-rows-auto\` tw\`auto-rows-min\` tw\`auto-rows-max\` tw\`auto-rows-fr\` tw\`grid-rows-[200px, repeat(auto-fill, minmax(15%, 100px)), 300px]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/grid-auto-rows ;({ auto: 'auto', min: 'min-content', max: 'max-content', fr: 'minmax(0, 1fr)', }) ;({ gridAutoRows: 'auto', }) ;({ gridAutoRows: 'min-content', }) ;({ gridAutoRows: 'max-content', }) ;({ gridAutoRows: 'minmax(0, 1fr)', }) ;({ gridTemplateRows: '200px repeat(auto-fill, minmax(15%, 100px)) 300px', }) `; exports[`twin.macro gridColumn.tsx: gridColumn.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/grid-column theme\`gridColumn\` tw\`col-auto\` tw\`col-span-1\` tw\`col-span-2\` tw\`col-span-3\` tw\`col-span-4\` tw\`col-span-5\` tw\`col-span-6\` tw\`col-span-7\` tw\`col-span-8\` tw\`col-span-9\` tw\`col-span-10\` tw\`col-span-11\` tw\`col-span-12\` tw\`col-span-full\` tw\`col-start-1\` tw\`col-start-2\` tw\`col-start-3\` tw\`col-start-4\` tw\`col-start-5\` tw\`col-start-6\` tw\`col-start-7\` tw\`col-start-8\` tw\`col-start-9\` tw\`col-start-10\` tw\`col-start-11\` tw\`col-start-12\` tw\`col-start-13\` tw\`col-start-auto\` tw\`col-end-1\` tw\`col-end-2\` tw\`col-end-3\` tw\`col-end-4\` tw\`col-end-5\` tw\`col-end-6\` tw\`col-end-7\` tw\`col-end-8\` tw\`col-end-9\` tw\`col-end-10\` tw\`col-end-11\` tw\`col-end-12\` tw\`col-end-13\` tw\`col-end-auto\` tw\`col-[7]\` tw\`col-end-[7]\` tw\`col-start-[7]\` // tw\`col-span-[span 16 / span 16]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/grid-column ;({ auto: 'auto', 'span-1': 'span 1 / span 1', 'span-2': 'span 2 / span 2', 'span-3': 'span 3 / span 3', 'span-4': 'span 4 / span 4', 'span-5': 'span 5 / span 5', 'span-6': 'span 6 / span 6', 'span-7': 'span 7 / span 7', 'span-8': 'span 8 / span 8', 'span-9': 'span 9 / span 9', 'span-10': 'span 10 / span 10', 'span-11': 'span 11 / span 11', 'span-12': 'span 12 / span 12', 'span-full': '1 / -1', }) ;({ gridColumn: 'auto', }) ;({ gridColumn: 'span 1 / span 1', }) ;({ gridColumn: 'span 2 / span 2', }) ;({ gridColumn: 'span 3 / span 3', }) ;({ gridColumn: 'span 4 / span 4', }) ;({ gridColumn: 'span 5 / span 5', }) ;({ gridColumn: 'span 6 / span 6', }) ;({ gridColumn: 'span 7 / span 7', }) ;({ gridColumn: 'span 8 / span 8', }) ;({ gridColumn: 'span 9 / span 9', }) ;({ gridColumn: 'span 10 / span 10', }) ;({ gridColumn: 'span 11 / span 11', }) ;({ gridColumn: 'span 12 / span 12', }) ;({ gridColumn: '1 / -1', }) ;({ gridColumnStart: '1', }) ;({ gridColumnStart: '2', }) ;({ gridColumnStart: '3', }) ;({ gridColumnStart: '4', }) ;({ gridColumnStart: '5', }) ;({ gridColumnStart: '6', }) ;({ gridColumnStart: '7', }) ;({ gridColumnStart: '8', }) ;({ gridColumnStart: '9', }) ;({ gridColumnStart: '10', }) ;({ gridColumnStart: '11', }) ;({ gridColumnStart: '12', }) ;({ gridColumnStart: '13', }) ;({ gridColumnStart: 'auto', }) ;({ gridColumnEnd: '1', }) ;({ gridColumnEnd: '2', }) ;({ gridColumnEnd: '3', }) ;({ gridColumnEnd: '4', }) ;({ gridColumnEnd: '5', }) ;({ gridColumnEnd: '6', }) ;({ gridColumnEnd: '7', }) ;({ gridColumnEnd: '8', }) ;({ gridColumnEnd: '9', }) ;({ gridColumnEnd: '10', }) ;({ gridColumnEnd: '11', }) ;({ gridColumnEnd: '12', }) ;({ gridColumnEnd: '13', }) ;({ gridColumnEnd: 'auto', }) ;({ gridColumn: '7', }) ;({ gridColumnEnd: '7', }) ;({ gridColumnStart: '7', }) // tw\`col-span-[span 16 / span 16]\` `; exports[`twin.macro gridRow.tsx: gridRow.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/grid-row theme\`gridRow\` tw\`row-auto\` tw\`row-span-1\` tw\`row-span-2\` tw\`row-span-3\` tw\`row-span-4\` tw\`row-span-5\` tw\`row-span-6\` tw\`row-span-full\` tw\`row-start-1\` tw\`row-start-2\` tw\`row-start-3\` tw\`row-start-4\` tw\`row-start-5\` tw\`row-start-6\` tw\`row-start-7\` tw\`row-start-auto\` tw\`row-end-1\` tw\`row-end-2\` tw\`row-end-3\` tw\`row-end-4\` tw\`row-end-5\` tw\`row-end-6\` tw\`row-end-7\` tw\`row-end-auto\` tw\`row-[span 16 / span 16]\` tw\`row-[7]\` tw\`row-end-[7]\` tw\`row-start-[7]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/grid-row ;({ auto: 'auto', 'span-1': 'span 1 / span 1', 'span-2': 'span 2 / span 2', 'span-3': 'span 3 / span 3', 'span-4': 'span 4 / span 4', 'span-5': 'span 5 / span 5', 'span-6': 'span 6 / span 6', 'span-full': '1 / -1', }) ;({ gridRow: 'auto', }) ;({ gridRow: 'span 1 / span 1', }) ;({ gridRow: 'span 2 / span 2', }) ;({ gridRow: 'span 3 / span 3', }) ;({ gridRow: 'span 4 / span 4', }) ;({ gridRow: 'span 5 / span 5', }) ;({ gridRow: 'span 6 / span 6', }) ;({ gridRow: '1 / -1', }) ;({ gridRowStart: '1', }) ;({ gridRowStart: '2', }) ;({ gridRowStart: '3', }) ;({ gridRowStart: '4', }) ;({ gridRowStart: '5', }) ;({ gridRowStart: '6', }) ;({ gridRowStart: '7', }) ;({ gridRowStart: 'auto', }) ;({ gridRowEnd: '1', }) ;({ gridRowEnd: '2', }) ;({ gridRowEnd: '3', }) ;({ gridRowEnd: '4', }) ;({ gridRowEnd: '5', }) ;({ gridRowEnd: '6', }) ;({ gridRowEnd: '7', }) ;({ gridRowEnd: 'auto', }) ;({ gridRow: 'span 16 / span 16', }) ;({ gridRow: '7', }) ;({ gridRowEnd: '7', }) ;({ gridRowStart: '7', }) `; exports[`twin.macro gridTemplateColumns.tsx: gridTemplateColumns.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/grid-template-columns theme\`gridTemplateColumns\` tw\`grid-cols-1\` tw\`grid-cols-2\` tw\`grid-cols-3\` tw\`grid-cols-4\` tw\`grid-cols-5\` tw\`grid-cols-6\` tw\`grid-cols-7\` tw\`grid-cols-8\` tw\`grid-cols-9\` tw\`grid-cols-10\` tw\`grid-cols-11\` tw\`grid-cols-12\` tw\`grid-cols-none\` tw\`grid-cols-[200px minmax(900px, 1fr) 100px]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/grid-template-columns ;({ 1: 'repeat(1, minmax(0, 1fr))', 2: 'repeat(2, minmax(0, 1fr))', 3: 'repeat(3, minmax(0, 1fr))', 4: 'repeat(4, minmax(0, 1fr))', 5: 'repeat(5, minmax(0, 1fr))', 6: 'repeat(6, minmax(0, 1fr))', 7: 'repeat(7, minmax(0, 1fr))', 8: 'repeat(8, minmax(0, 1fr))', 9: 'repeat(9, minmax(0, 1fr))', 10: 'repeat(10, minmax(0, 1fr))', 11: 'repeat(11, minmax(0, 1fr))', 12: 'repeat(12, minmax(0, 1fr))', none: 'none', }) ;({ gridTemplateColumns: 'repeat(1, minmax(0, 1fr))', }) ;({ gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', }) ;({ gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', }) ;({ gridTemplateColumns: 'repeat(4, minmax(0, 1fr))', }) ;({ gridTemplateColumns: 'repeat(5, minmax(0, 1fr))', }) ;({ gridTemplateColumns: 'repeat(6, minmax(0, 1fr))', }) ;({ gridTemplateColumns: 'repeat(7, minmax(0, 1fr))', }) ;({ gridTemplateColumns: 'repeat(8, minmax(0, 1fr))', }) ;({ gridTemplateColumns: 'repeat(9, minmax(0, 1fr))', }) ;({ gridTemplateColumns: 'repeat(10, minmax(0, 1fr))', }) ;({ gridTemplateColumns: 'repeat(11, minmax(0, 1fr))', }) ;({ gridTemplateColumns: 'repeat(12, minmax(0, 1fr))', }) ;({ gridTemplateColumns: 'none', }) ;({ gridTemplateColumns: '200px minmax(900px, 1fr) 100px', }) `; exports[`twin.macro gridTemplateRows.tsx: gridTemplateRows.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/grid-template-rows theme\`gridTemplateRows\` tw\`grid-rows-1\` tw\`grid-rows-2\` tw\`grid-rows-3\` tw\`grid-rows-4\` tw\`grid-rows-5\` tw\`grid-rows-6\` tw\`grid-rows-none\` tw\`grid-rows-[200px minmax(900px, 1fr) 100px]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/grid-template-rows ;({ 1: 'repeat(1, minmax(0, 1fr))', 2: 'repeat(2, minmax(0, 1fr))', 3: 'repeat(3, minmax(0, 1fr))', 4: 'repeat(4, minmax(0, 1fr))', 5: 'repeat(5, minmax(0, 1fr))', 6: 'repeat(6, minmax(0, 1fr))', none: 'none', }) ;({ gridTemplateRows: 'repeat(1, minmax(0, 1fr))', }) ;({ gridTemplateRows: 'repeat(2, minmax(0, 1fr))', }) ;({ gridTemplateRows: 'repeat(3, minmax(0, 1fr))', }) ;({ gridTemplateRows: 'repeat(4, minmax(0, 1fr))', }) ;({ gridTemplateRows: 'repeat(5, minmax(0, 1fr))', }) ;({ gridTemplateRows: 'repeat(6, minmax(0, 1fr))', }) ;({ gridTemplateRows: 'none', }) ;({ gridTemplateRows: '200px minmax(900px, 1fr) 100px', }) `; exports[`twin.macro group.tsx: group.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // Positional tw\`group-first:block\` tw\`group-last:block\` tw\`group-only:block\` tw\`group-odd:block\` tw\`group-even:block\` tw\`group-first-of-type:block\` tw\`group-last-of-type:block\` tw\`group-only-of-type:block\` // State tw\`group-visited:block\` tw\`group-target:block\` tw\`group-open:block\` // Forms tw\`group-default:block\` tw\`group-checked:block\` tw\`group-indeterminate:block\` tw\`group-placeholder-shown:block\` tw\`group-autofill:block\` tw\`group-optional:block\` tw\`group-required:block\` tw\`group-valid:block\` tw\`group-invalid:block\` tw\`group-in-range:block\` tw\`group-out-of-range:block\` tw\`group-read-only:block\` // Content tw\`group-empty:block\` // Interactive tw\`group-focus-within:block\` tw\`group-hover:block\` tw\`group-focus:block\` tw\`group-focus-visible:block\` tw\`group-active:block\` tw\`group-enabled:block\` tw\`group-disabled:block\` // Twin custom tw\`group-all:block\` tw\`group-all-child:block\` tw\`group-sibling:block\` tw\`group-hocus:block\` tw\`group-link:block\` tw\`group-read-write:block\` tw\`group-svg:block\` tw\`group-even-of-type:block\` tw\`group-odd-of-type:block\` // Not versions of the above // Positional tw\`group-not-first:block\` tw\`group-not-last:block\` tw\`group-not-only:block\` tw\`group-not-odd:block\` tw\`group-not-even:block\` tw\`group-not-first-of-type:block\` tw\`group-not-last-of-type:block\` tw\`group-not-only-of-type:block\` // State tw\`group-not-target:block\` tw\`group-not-open:block\` // Forms tw\`group-not-default:block\` tw\`group-not-checked:block\` tw\`group-not-indeterminate:block\` tw\`group-not-placeholder-shown:block\` tw\`group-not-autofill:block\` tw\`group-not-optional:block\` tw\`group-not-required:block\` tw\`group-not-valid:block\` tw\`group-not-invalid:block\` tw\`group-not-in-range:block\` tw\`group-not-out-of-range:block\` tw\`group-not-read-only:block\` // Content tw\`group-not-empty:block\` // Interactive tw\`group-not-focus-within:block\` tw\`group-not-hover:block\` tw\`group-not-focus:block\` tw\`group-not-focus-visible:block\` tw\`group-not-active:block\` tw\`group-not-enabled:block\` tw\`group-not-disabled:block\` // Twin custom tw\`group-not-all:block\` tw\`group-not-all-child:block\` tw\`group-not-sibling:block\` tw\`group-not-hocus:block\` tw\`group-not-link:block\` tw\`group-not-read-write:block\` tw\`group-not-svg:block\` tw\`group-not-even-of-type:block\` tw\`group-not-odd-of-type:block\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // Positional ;({ '.group:first-child &': { display: 'block', }, }) ;({ '.group:last-child &': { display: 'block', }, }) ;({ '.group:only-child &': { display: 'block', }, }) ;({ '.group:nth-child(odd) &': { display: 'block', }, }) ;({ '.group:nth-child(even) &': { display: 'block', }, }) ;({ '.group:first-of-type &': { display: 'block', }, }) ;({ '.group:last-of-type &': { display: 'block', }, }) ;({ '.group:only-of-type &': { display: 'block', }, }) // State ;({ '.group:visited &': { display: 'block', }, }) ;({ '.group:target &': { display: 'block', }, }) ;({ '.group[open] &': { display: 'block', }, }) // Forms ;({ '.group:default &': { display: 'block', }, }) ;({ '.group:checked &': { display: 'block', }, }) ;({ '.group:indeterminate &': { display: 'block', }, }) ;({ '.group:placeholder-shown &': { display: 'block', }, }) ;({ '.group:autofill &': { display: 'block', }, }) ;({ '.group:optional &': { display: 'block', }, }) ;({ '.group:required &': { display: 'block', }, }) ;({ '.group:valid &': { display: 'block', }, }) ;({ '.group:invalid &': { display: 'block', }, }) ;({ '.group:in-range &': { display: 'block', }, }) ;({ '.group:out-of-range &': { display: 'block', }, }) ;({ '.group:read-only &': { display: 'block', }, }) // Content ;({ '.group:empty &': { display: 'block', }, }) // Interactive ;({ '.group:focus-within &': { display: 'block', }, }) ;({ '.group:hover &': { display: 'block', }, }) ;({ '.group:focus &': { display: 'block', }, }) ;({ '.group:focus-visible &': { display: 'block', }, }) ;({ '.group:active &': { display: 'block', }, }) ;({ '.group:enabled &': { display: 'block', }, }) ;({ '.group:disabled &': { display: 'block', }, }) // Twin custom ;({ '.group * &': { display: 'block', }, }) ;({ '.group > * &': { display: 'block', }, }) ;({ '.group ~ * &': { display: 'block', }, }) ;({ '.group:hover &': { display: 'block', }, '.group:focus &': { display: 'block', }, }) ;({ '.group:link &': { display: 'block', }, }) ;({ '.group:read-write &': { display: 'block', }, }) ;({ '.group svg &': { display: 'block', }, }) ;({ '.group:nth-of-type(even) &': { display: 'block', }, }) ;({ '.group:nth-of-type(odd) &': { display: 'block', }, }) // Not versions of the above // Positional ;({ '.group:not(:first-child) &': { display: 'block', }, }) ;({ '.group:not(:last-child) &': { display: 'block', }, }) ;({ '.group:not(:only-child) &': { display: 'block', }, }) ;({ '.group:not(:nth-child(odd)) &': { display: 'block', }, }) ;({ '.group:not(:nth-child(even)) &': { display: 'block', }, }) ;({ '.group:not(:first-of-type) &': { display: 'block', }, }) ;({ '.group:not(:last-of-type) &': { display: 'block', }, }) ;({ '.group:not(:only-of-type) &': { display: 'block', }, }) // State ;({ '.group:not(:target) &': { display: 'block', }, }) ;({ '.group:not([open]) &': { display: 'block', }, }) // Forms ;({ '.group:not(:default) &': { display: 'block', }, }) ;({ '.group:not(:checked) &': { display: 'block', }, }) ;({ '.group:not(:indeterminate) &': { display: 'block', }, }) ;({ '.group:not(:placeholder-shown) &': { display: 'block', }, }) ;({ '.group:not(:autofill) &': { display: 'block', }, }) ;({ '.group:not(:optional) &': { display: 'block', }, }) ;({ '.group:not(:required) &': { display: 'block', }, }) ;({ '.group:not(:valid) &': { display: 'block', }, }) ;({ '.group:not(:invalid) &': { display: 'block', }, }) ;({ '.group:not(:in-range) &': { display: 'block', }, }) ;({ '.group:not(:out-of-range) &': { display: 'block', }, }) ;({ '.group:not(:read-only) &': { display: 'block', }, }) // Content ;({ '.group:not(:empty) &': { display: 'block', }, }) // Interactive ;({ '.group:not(:focus-within) &': { display: 'block', }, }) ;({ '.group:not(:hover) &': { display: 'block', }, }) ;({ '.group:not(:focus) &': { display: 'block', }, }) ;({ '.group:not(:focus-visible) &': { display: 'block', }, }) ;({ '.group:not(:active) &': { display: 'block', }, }) ;({ '.group:not(:enabled) &': { display: 'block', }, }) ;({ '.group:not(:disabled) &': { display: 'block', }, }) // Twin custom ;({ '.group:not(*) &': { display: 'block', }, }) ;({ '.group:not(> *) &': { display: 'block', }, }) ;({ '.group:not(~ *) &': { display: 'block', }, }) ;({ '.group:not(:hover) &': { display: 'block', }, '.group:not(:focus) &': { display: 'block', }, }) ;({ '.group:not(:link) &': { display: 'block', }, }) ;({ '.group:not(:read-write) &': { display: 'block', }, }) ;({ '.group:not(svg) &': { display: 'block', }, }) ;({ '.group:not(:nth-of-type(even)) &': { display: 'block', }, }) ;({ '.group:not(:nth-of-type(odd)) &': { display: 'block', }, }) `; exports[`twin.macro height.tsx: height.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/height theme\`height\` tw\`h-0\` tw\`h-px\` tw\`h-0.5\` tw\`h-1\` tw\`h-1.5\` tw\`h-2\` tw\`h-2.5\` tw\`h-3\` tw\`h-3.5\` tw\`h-4\` tw\`h-5\` tw\`h-6\` tw\`h-7\` tw\`h-8\` tw\`h-9\` tw\`h-10\` tw\`h-11\` tw\`h-12\` tw\`h-14\` tw\`h-16\` tw\`h-20\` tw\`h-24\` tw\`h-28\` tw\`h-32\` tw\`h-36\` tw\`h-40\` tw\`h-44\` tw\`h-48\` tw\`h-52\` tw\`h-56\` tw\`h-60\` tw\`h-64\` tw\`h-72\` tw\`h-80\` tw\`h-96\` tw\`h-auto\` tw\`h-1/2\` tw\`h-1/3\` tw\`h-2/3\` tw\`h-1/4\` tw\`h-2/4\` tw\`h-3/4\` tw\`h-1/5\` tw\`h-2/5\` tw\`h-3/5\` tw\`h-4/5\` tw\`h-1/6\` tw\`h-2/6\` tw\`h-3/6\` tw\`h-4/6\` tw\`h-5/6\` tw\`h-full\` tw\`h-screen\` tw\`h-min\` tw\`h-max\` tw\`h-fit\` tw\`h-[32rem]\` tw\`h-[3.23rem]\` tw\`h-[calc(100%+1rem)]\` tw\`h-[var(--height)]\` tw\`h-[calc(100%-theme('spacing.16'))]\` tw\`h-[calc(100%-theme("spacing.16"))]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/height ;({ 0: '0px', 1: '0.25rem', 2: '0.5rem', 3: '0.75rem', 4: '1rem', 5: '1.25rem', 6: '1.5rem', 7: '1.75rem', 8: '2rem', 9: '2.25rem', 10: '2.5rem', 11: '2.75rem', 12: '3rem', 14: '3.5rem', 16: '4rem', 20: '5rem', 24: '6rem', 28: '7rem', 32: '8rem', 36: '9rem', 40: '10rem', 44: '11rem', 48: '12rem', 52: '13rem', 56: '14rem', 60: '15rem', 64: '16rem', 72: '18rem', 80: '20rem', 96: '24rem', auto: 'auto', px: '1px', 0.5: '0.125rem', 1.5: '0.375rem', 2.5: '0.625rem', 3.5: '0.875rem', '1/2': '50%', '1/3': '33.333333%', '2/3': '66.666667%', '1/4': '25%', '2/4': '50%', '3/4': '75%', '1/5': '20%', '2/5': '40%', '3/5': '60%', '4/5': '80%', '1/6': '16.666667%', '2/6': '33.333333%', '3/6': '50%', '4/6': '66.666667%', '5/6': '83.333333%', full: '100%', screen: '100vh', min: 'min-content', max: 'max-content', fit: 'fit-content', }) ;({ height: '0px', }) ;({ height: '1px', }) ;({ height: '0.125rem', }) ;({ height: '0.25rem', }) ;({ height: '0.375rem', }) ;({ height: '0.5rem', }) ;({ height: '0.625rem', }) ;({ height: '0.75rem', }) ;({ height: '0.875rem', }) ;({ height: '1rem', }) ;({ height: '1.25rem', }) ;({ height: '1.5rem', }) ;({ height: '1.75rem', }) ;({ height: '2rem', }) ;({ height: '2.25rem', }) ;({ height: '2.5rem', }) ;({ height: '2.75rem', }) ;({ height: '3rem', }) ;({ height: '3.5rem', }) ;({ height: '4rem', }) ;({ height: '5rem', }) ;({ height: '6rem', }) ;({ height: '7rem', }) ;({ height: '8rem', }) ;({ height: '9rem', }) ;({ height: '10rem', }) ;({ height: '11rem', }) ;({ height: '12rem', }) ;({ height: '13rem', }) ;({ height: '14rem', }) ;({ height: '15rem', }) ;({ height: '16rem', }) ;({ height: '18rem', }) ;({ height: '20rem', }) ;({ height: '24rem', }) ;({ height: 'auto', }) ;({ height: '50%', }) ;({ height: '33.333333%', }) ;({ height: '66.666667%', }) ;({ height: '25%', }) ;({ height: '50%', }) ;({ height: '75%', }) ;({ height: '20%', }) ;({ height: '40%', }) ;({ height: '60%', }) ;({ height: '80%', }) ;({ height: '16.666667%', }) ;({ height: '33.333333%', }) ;({ height: '50%', }) ;({ height: '66.666667%', }) ;({ height: '83.333333%', }) ;({ height: '100%', }) ;({ height: '100vh', }) ;({ height: 'min-content', }) ;({ height: 'max-content', }) ;({ height: 'fit-content', }) ;({ height: '32rem', }) ;({ height: '3.23rem', }) ;({ height: 'calc(100% + 1rem)', }) ;({ height: 'var(--height)', }) ;({ height: 'calc(100% - 4rem)', }) ;({ height: 'calc(100% - 4rem)', }) `; exports[`twin.macro hueRotate.tsx: hueRotate.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/hue-rotate theme\`hueRotate\` tw\`hue-rotate-0\` tw\`hue-rotate-15\` tw\`hue-rotate-30\` tw\`hue-rotate-60\` tw\`hue-rotate-90\` tw\`hue-rotate-180\` tw\`-hue-rotate-0\` tw\`-hue-rotate-15\` tw\`-hue-rotate-30\` tw\`-hue-rotate-60\` tw\`-hue-rotate-90\` tw\`-hue-rotate-180\` tw\`hue-rotate-[270deg]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/hue-rotate ;({ 0: '0deg', 15: '15deg', 30: '30deg', 60: '60deg', 90: '90deg', 180: '180deg', }) ;({ '--tw-hue-rotate': 'hue-rotate(0deg)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-hue-rotate': 'hue-rotate(15deg)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-hue-rotate': 'hue-rotate(30deg)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-hue-rotate': 'hue-rotate(60deg)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-hue-rotate': 'hue-rotate(90deg)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-hue-rotate': 'hue-rotate(180deg)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-hue-rotate': 'hue-rotate(-0deg)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-hue-rotate': 'hue-rotate(-15deg)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-hue-rotate': 'hue-rotate(-30deg)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-hue-rotate': 'hue-rotate(-60deg)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-hue-rotate': 'hue-rotate(-90deg)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-hue-rotate': 'hue-rotate(-180deg)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-hue-rotate': 'hue-rotate(270deg)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) `; exports[`twin.macro hyphens.tsx: hyphens.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/hyphens tw\`hyphens-none\` tw\`hyphens-manual\` tw\`hyphens-auto\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/hyphens ;({ hyphens: 'none', }) ;({ hyphens: 'manual', }) ;({ hyphens: 'auto', }) `; exports[`twin.macro includeClassNames.tsx: includeClassNames.tsx 1`] = ` // @ts-nocheck import tw from '../macro' const SkipEmptyClassName =
const OnlyUppercaseConverted =
const AllConverted =
const SkippedCurlies =
const SkippedConditionals =
const SkippedGroup =
// css + className const CssPropFirst = (
) const CssPropLast = (
) // tw + className const TwPropFirst =
const TwPropLast =
// tw + css + className const TwThenCssThenClassName = (
) const TwThenClassNameThenCss = (
) const ClassNameThenTwThenCss = (
) const ClassNameThenCssThenTw = (
) const CssThenClassNameThenTw = (
) const CssThenTwThenClassName = (
) // styled + everything const Button = tw.div\`\` const StyledTwThenCssThenClassName = (
Error! Task failed successfully.
12 unread messages. Tap to see.
info
success
warning
error
Total Likes
25.6K
21% more than last month
Page Views
2.6M
21% more than last month
86%
Tasks done
31 tasks remaining
Movie

New movie is released!

Click the button to watch on Jetflix app.

Hello there

Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.

99+
  • Register
  • Choose plan
  • Purchase
  • Receive Product
  • Fly to moon
  • Shrink the moon
  • Grab the moon
  • Sit on toilet 
            npm i daisyui
          
            installing...
          
            Done!
Shoes

Shoes!

If a dog chews shoes whose shoes does he choose?

top+start top+center top+end middle+start middle+center middle+end bott0m+strt bottom+center bottom+end
content

Login now!

Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.

Congratulations random Interner user!

You've been selected for a chance to get one year of subscription to use Wikipedia for free!

) ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck ;({ '*, ::before, ::after': { boxSizing: 'border-box', borderWidth: '0', borderStyle: 'solid', borderColor: '#e5e7eb', '--tw-border-spacing-x': '0', '--tw-border-spacing-y': '0', '--tw-translate-x': '0', '--tw-translate-y': '0', '--tw-rotate': '0', '--tw-skew-x': '0', '--tw-skew-y': '0', '--tw-scale-x': '1', '--tw-scale-y': '1', '--tw-pan-x': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-pan-y': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-pinch-zoom': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-scroll-snap-strictness': 'proximity', '--tw-ordinal': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-slashed-zero': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-numeric-figure': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-numeric-spacing': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-numeric-fraction': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-ring-offset-shadow': '0 0 #0000', '--tw-ring-shadow': '0 0 #0000', '--tw-shadow': '0 0 #0000', '--tw-shadow-colored': '0 0 #0000', '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-ring-offset-width': '0px', '--tw-ring-offset-color': '#fff', '--tw-ring-color': 'rgb(59 130 246 / 0.5)', '--tw-blur': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-brightness': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-contrast': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-grayscale': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-invert': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-saturate': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-sepia': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-drop-shadow': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-blur': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-brightness': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-contrast': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-grayscale': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-invert': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-opacity': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-saturate': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-sepia': 'var(--tw-empty,/*!*/ /*!*/)', }, '::before, ::after': { '--tw-content': "''", }, html: { lineHeight: '1.5', WebkitTextSizeAdjust: '100%', MozTabSize: '4', tabSize: '4', fontFamily: 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"', fontFeatureSettings: ' normal', fontVariationSettings: ' normal', WebkitTapHighlightColor: 'transparent', }, body: { margin: '0', lineHeight: 'inherit', }, hr: { height: '0', color: 'inherit', borderTopWidth: '1px', }, 'abbr:where([title])': { textDecoration: 'underline dotted', }, 'h1, h2, h3, h4, h5, h6': { fontSize: 'inherit', fontWeight: 'inherit', }, a: { color: 'inherit', textDecoration: 'inherit', }, 'b, strong': { fontWeight: 'bolder', }, 'code, kbd, samp, pre': { fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace', fontSize: '1em', }, small: { fontSize: '80%', }, 'sub, sup': { fontSize: '75%', lineHeight: '0', position: 'relative', verticalAlign: 'baseline', }, sub: { bottom: '-0.25em', }, sup: { top: '-0.5em', }, table: { textIndent: '0', borderColor: 'inherit', borderCollapse: 'collapse', }, 'button, input, optgroup, select, textarea': { fontFamily: 'inherit', fontSize: '100%', fontWeight: 'inherit', lineHeight: 'inherit', color: 'inherit', margin: '0', padding: '0', }, 'button, select': { textTransform: 'none', }, "button, [type='button'], [type='reset'], [type='submit']": { WebkitAppearance: 'button', backgroundColor: 'transparent', backgroundImage: 'none', }, ':-moz-focusring': { outline: 'auto', }, ':-moz-ui-invalid': { boxShadow: 'none', }, progress: { verticalAlign: 'baseline', }, '::-webkit-inner-spin-button, ::-webkit-outer-spin-button': { height: 'auto', }, "[type='search']": { WebkitAppearance: 'textfield', outlineOffset: '-2px', }, '::-webkit-search-decoration': { WebkitAppearance: 'none', }, '::-webkit-file-upload-button': { WebkitAppearance: 'button', font: 'inherit', }, summary: { display: 'list-item', }, 'blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre': { margin: '0', }, fieldset: { margin: '0', padding: '0', }, legend: { padding: '0', }, 'ol, ul, menu': { listStyle: 'none', margin: '0', padding: '0', }, textarea: { resize: 'vertical', }, 'input::placeholder, textarea::placeholder': { opacity: '1', color: '#9ca3af', }, 'button, [role="button"]': { cursor: 'pointer', }, ':disabled': { cursor: 'default', }, 'img, svg, video, canvas, audio, iframe, embed, object': { display: 'block', verticalAlign: 'middle', }, 'img, video': { maxWidth: '100%', height: 'auto', }, '[hidden]': { display: 'none', }, '::backdrop': { '--tw-border-spacing-x': '0', '--tw-border-spacing-y': '0', '--tw-translate-x': '0', '--tw-translate-y': '0', '--tw-rotate': '0', '--tw-skew-x': '0', '--tw-skew-y': '0', '--tw-scale-x': '1', '--tw-scale-y': '1', '--tw-pan-x': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-pan-y': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-pinch-zoom': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-scroll-snap-strictness': 'proximity', '--tw-ordinal': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-slashed-zero': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-numeric-figure': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-numeric-spacing': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-numeric-fraction': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-ring-offset-shadow': '0 0 #0000', '--tw-ring-shadow': '0 0 #0000', '--tw-shadow': '0 0 #0000', '--tw-shadow-colored': '0 0 #0000', '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-ring-offset-width': '0px', '--tw-ring-offset-color': '#fff', '--tw-ring-color': 'rgb(59 130 246 / 0.5)', '--tw-blur': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-brightness': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-contrast': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-grayscale': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-invert': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-saturate': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-sepia': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-drop-shadow': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-blur': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-brightness': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-contrast': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-grayscale': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-invert': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-opacity': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-saturate': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-sepia': 'var(--tw-empty,/*!*/ /*!*/)', }, ':root, [data-theme]': { backgroundColor: 'hsla(var(--b1) / var(--tw-bg-opacity, 1))', color: 'hsla(var(--bc) / var(--tw-text-opacity, 1))', }, '@keyframes spin': { from: { transform: 'rotate(0deg)', }, to: { transform: 'rotate(360deg)', }, }, '@keyframes button-pop': { '0%': { transform: 'scale(var(--btn-focus-scale, 0.95))', }, '40%': { transform: 'scale(1.02)', }, '100%': { transform: 'scale(1)', }, }, '@keyframes checkmark': { '0%': { backgroundPositionY: '5px', }, '50%': { backgroundPositionY: '-2px', }, '100%': { backgroundPositionY: '0', }, }, '@keyframes progress-loading': { '50%': { left: '107%', }, }, '@keyframes radiomark': { '0%': { boxShadow: '0 0 0 12px hsl(var(--b1)) inset, 0 0 0 12px hsl(var(--b1)) inset', }, '50%': { boxShadow: '0 0 0 3px hsl(var(--b1)) inset, 0 0 0 3px hsl(var(--b1)) inset', }, '100%': { boxShadow: '0 0 0 4px hsl(var(--b1)) inset, 0 0 0 4px hsl(var(--b1)) inset', }, }, '@keyframes rating-pop': { '0%': { transform: 'translateY(-0.125em)', }, '40%': { transform: 'translateY(-0.125em)', }, '100%': { transform: 'translateY(0)', }, }, '@keyframes toast-pop': { '0%': { transform: 'scale(0.9)', opacity: '0', }, '100%': { transform: 'scale(1)', opacity: '1', }, }, ':root': { colorScheme: 'light', '--pf': '259 94% 41%', '--sf': '314 100% 38%', '--af': '174 60% 41%', '--nf': '219 14% 22%', '--in': '198 93% 60%', '--su': '158 64% 52%', '--wa': '43 96% 56%', '--er': '0 91% 71%', '--inc': '198 100% 12%', '--suc': '158 100% 10%', '--wac': '43 100% 11%', '--erc': '0 100% 14%', '--rounded-box': '1rem', '--rounded-btn': '0.5rem', '--rounded-badge': '1.9rem', '--animation-btn': '0.25s', '--animation-input': '.2s', '--btn-text-case': 'uppercase', '--btn-focus-scale': '0.95', '--border-btn': '1px', '--tab-border': '1px', '--tab-radius': '0.5rem', '--p': '259 94% 51%', '--pc': '0 0% 100%', '--s': '314 100% 47%', '--sc': '0 0% 100%', '--a': '174 60% 51%', '--ac': '175 44% 15%', '--n': '219 14% 28%', '--nc': '0 0% 100%', '--b1': '0 0% 100%', '--b2': '0 0% 95%', '--b3': '180 2% 90%', '--bc': '215 28% 17%', }, }) ;() => ( <>
:not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(0.5rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(0.5rem * var(--tw-space-y-reverse))', }, '@media (min-width: 768px)': { flexDirection: 'row', '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(0px * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(0px * var(--tw-space-y-reverse))', }, }, '> :where(*)': { display: 'flex', alignItems: 'center', gap: '0.5rem', }, '--tw-text-opacity': '1', color: 'hsl(var(--erc, var(--nc)) / var(--tw-text-opacity))', '--tw-shadow': '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)', '--tw-shadow-colored': '0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color)', boxShadow: 'var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)', }} >
Error! Task failed successfully.
:not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(0.5rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(0.5rem * var(--tw-space-y-reverse))', }, '@media (min-width: 768px)': { flexDirection: 'row', '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(0px * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(0px * var(--tw-space-y-reverse))', }, }, '> :where(*)': { display: 'flex', alignItems: 'center', gap: '0.5rem', }, '--tw-shadow': '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)', '--tw-shadow-colored': '0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color)', boxShadow: 'var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)', }} >
12 unread messages. Tap to see.
info
success
warning
error
*': { height: '1em', display: 'inline-block', overflowY: 'hidden', }, '> *:before': { position: 'relative', content: '"00\\\\A 01\\\\A 02\\\\A 03\\\\A 04\\\\A 05\\\\A 06\\\\A 07\\\\A 08\\\\A 09\\\\A 10\\\\A 11\\\\A 12\\\\A 13\\\\A 14\\\\A 15\\\\A 16\\\\A 17\\\\A 18\\\\A 19\\\\A 20\\\\A 21\\\\A 22\\\\A 23\\\\A 24\\\\A 25\\\\A 26\\\\A 27\\\\A 28\\\\A 29\\\\A 30\\\\A 31\\\\A 32\\\\A 33\\\\A 34\\\\A 35\\\\A 36\\\\A 37\\\\A 38\\\\A 39\\\\A 40\\\\A 41\\\\A 42\\\\A 43\\\\A 44\\\\A 45\\\\A 46\\\\A 47\\\\A 48\\\\A 49\\\\A 50\\\\A 51\\\\A 52\\\\A 53\\\\A 54\\\\A 55\\\\A 56\\\\A 57\\\\A 58\\\\A 59\\\\A 60\\\\A 61\\\\A 62\\\\A 63\\\\A 64\\\\A 65\\\\A 66\\\\A 67\\\\A 68\\\\A 69\\\\A 70\\\\A 71\\\\A 72\\\\A 73\\\\A 74\\\\A 75\\\\A 76\\\\A 77\\\\A 78\\\\A 79\\\\A 80\\\\A 81\\\\A 82\\\\A 83\\\\A 84\\\\A 85\\\\A 86\\\\A 87\\\\A 88\\\\A 89\\\\A 90\\\\A 91\\\\A 92\\\\A 93\\\\A 94\\\\A 95\\\\A 96\\\\A 97\\\\A 98\\\\A 99\\\\A"', whiteSpace: 'pre', top: 'calc(var(--value) * -1em)', textAlign: 'center', transition: 'all 1s cubic-bezier(1, 0, 0, 1)', }, }} >
:not([hidden]) ~ :not([hidden])': { '--tw-divide-x-reverse': '0', borderRightWidth: 'calc(1px * var(--tw-divide-x-reverse))', borderLeftWidth: 'calc(1px * calc(1 - var(--tw-divide-x-reverse)))', '--tw-divide-y-reverse': '0', borderTopWidth: 'calc(0px * calc(1 - var(--tw-divide-y-reverse)))', borderBottomWidth: 'calc(0px * var(--tw-divide-y-reverse))', }, '--tw-shadow': '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)', '--tw-shadow-colored': '0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color)', boxShadow: 'var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)', }} >
Total Likes
25.6K
21% more than last month
Page Views
2.6M
21% more than last month
div': { display: 'block', aspectRatio: '1 / 1', overflow: 'hidden', }, '& img': { height: '100%', width: '100%', objectFit: 'cover', }, '&.placeholder > div': { display: 'flex', alignItems: 'center', justifyContent: 'center', }, '.avatar-group &': { overflow: 'hidden', borderRadius: '9999px', borderWidth: '4px', '--tw-border-opacity': '1', borderColor: 'hsl(var(--b1) / var(--tw-border-opacity))', }, '&.online:before': { content: '""', position: 'absolute', zIndex: '10', display: 'block', borderRadius: '9999px', '--tw-bg-opacity': '1', backgroundColor: 'hsl(var(--su) / var(--tw-bg-opacity))', width: '15%', height: '15%', top: '7%', right: '7%', boxShadow: '0 0 0 2px hsl(var(--b1))', }, '&.offline:before': { content: '""', position: 'absolute', zIndex: '10', display: 'block', borderRadius: '9999px', '--tw-bg-opacity': '1', backgroundColor: 'hsl(var(--b3, var(--b2)) / var(--tw-bg-opacity))', width: '15%', height: '15%', top: '7%', right: '7%', boxShadow: '0 0 0 2px hsl(var(--b1))', }, }} className="online" >
86%
Tasks done
31 tasks remaining
*': { gridColumnStart: '1', gridRowStart: '1', }, '&.image-full > figure img': { height: '100%', objectFit: 'cover', }, '&.image-full > .card-body': { position: 'relative', zIndex: '20', '--tw-text-opacity': '1', color: 'hsl(var(--nc) / var(--tw-text-opacity))', }, '& :where(figure:first-child)': { overflow: 'hidden', borderTopLeftRadius: 'inherit', borderTopRightRadius: 'unset', borderBottomLeftRadius: 'inherit', borderBottomRightRadius: 'unset', }, '& :where(figure:last-child)': { overflow: 'hidden', borderTopLeftRadius: 'unset', borderTopRightRadius: 'inherit', borderBottomLeftRadius: 'unset', borderBottomRightRadius: 'inherit', }, ':focus-visible': { outline: '2px solid currentColor', outlineOffset: '2px', }, '&.bordered': { borderWidth: '1px', '--tw-border-opacity': '1', borderColor: 'hsl(var(--b2, var(--b1)) / var(--tw-border-opacity))', }, '&.compact .card-body': { padding: '1rem', fontSize: '0.875rem', lineHeight: '1.25rem', }, '&.image-full :where(figure)': { overflow: 'hidden', borderRadius: 'inherit', }, alignItems: 'stretch', '& figure > *': { maxWidth: 'unset', }, ':where(& figure > *)': { width: '100%', height: '100%', objectFit: 'cover', }, '--tw-bg-opacity': '1', backgroundColor: 'hsl(var(--b1) / var(--tw-bg-opacity))', '--tw-shadow': '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)', '--tw-shadow-colored': '0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color)', boxShadow: 'var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)', }} >
Movie
&': { position: 'relative', zIndex: '20', '--tw-text-opacity': '1', color: 'hsl(var(--nc) / var(--tw-text-opacity))', }, '.card.compact &': { padding: '1rem', fontSize: '0.875rem', lineHeight: '1.25rem', }, '.card-compact &': { padding: '1rem', fontSize: '0.875rem', lineHeight: '1.25rem', }, '.card-normal &': { padding: 'var(--padding-card, 2rem)', fontSize: '1rem', lineHeight: '1.5rem', }, }} >

New movie is released!

Click the button to watch on Jetflix app.

&': { isolation: 'isolate', borderRadius: '0px', }, '&[list]::-webkit-calendar-picker-indicator': { lineHeight: '1em', }, '&[disabled]': { cursor: 'not-allowed', '--tw-border-opacity': '1', borderColor: 'hsl(var(--b2, var(--b1)) / var(--tw-border-opacity))', '--tw-bg-opacity': '1', backgroundColor: 'hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity))', '--tw-text-opacity': '0.2', }, '&[disabled]::placeholder': { color: 'hsl(var(--bc) / var(--tw-placeholder-opacity))', '--tw-placeholder-opacity': '0.2', }, width: '100%', maxWidth: '20rem', }} />
input[type="radio"].btn': { appearance: 'none', }, '> input[type="radio"].btn:before': { content: 'attr(data-title)', }, '> input[type="radio"].btn:checked,> .btn-active': { '--tw-border-opacity': '1', borderColor: 'hsl(var(--p) / var(--tw-border-opacity))', '--tw-bg-opacity': '1', backgroundColor: 'hsl(var(--p) / var(--tw-bg-opacity))', '--tw-text-opacity': '1', color: 'hsl(var(--pc) / var(--tw-text-opacity))', }, '> input[type="radio"]:checked.btn:focus-visible,> .btn-active:focus-visible': { outline: '2px solid hsl(var(--p))', }, '& .btn:not(:first-child):not(:last-child),&.btn-group-horizontal .btn:not(:first-child):not(:last-child)': { borderTopLeftRadius: '0', borderTopRightRadius: '0', borderBottomLeftRadius: '0', borderBottomRightRadius: '0', }, '& .btn:first-child:not(:last-child),&.btn-group-horizontal .btn:first-child:not(:last-child)': { marginLeft: '-1px', marginTop: '-0px', borderTopLeftRadius: 'var(--rounded-btn, 0.5rem)', borderTopRightRadius: '0', borderBottomLeftRadius: 'var(--rounded-btn, 0.5rem)', borderBottomRightRadius: '0', }, '& .btn:last-child:not(:first-child),&.btn-group-horizontal .btn:last-child:not(:first-child)': { borderTopLeftRadius: '0', borderTopRightRadius: 'var(--rounded-btn, 0.5rem)', borderBottomLeftRadius: '0', borderBottomRightRadius: 'var(--rounded-btn, 0.5rem)', }, '&.btn-group-vertical .btn:first-child:not(:last-child)': { marginLeft: '-0px', marginTop: '-1px', borderTopLeftRadius: 'var(--rounded-btn, 0.5rem)', borderTopRightRadius: 'var(--rounded-btn, 0.5rem)', borderBottomLeftRadius: '0', borderBottomRightRadius: '0', }, '&.btn-group-vertical .btn:last-child:not(:first-child)': { borderTopLeftRadius: '0', borderTopRightRadius: '0', borderBottomLeftRadius: 'var(--rounded-btn, 0.5rem)', borderBottomRightRadius: 'var(--rounded-btn, 0.5rem)', }, }} > input[type="radio"]&': { appearance: 'none', }, '.btn-group > input[type="radio"]&:before': { content: 'attr(data-title)', }, ':active:hover,:active:focus': { animation: 'none', transform: 'scale(var(--btn-focus-scale, 0.95))', }, ':hover': { '--tw-border-opacity': '1', borderColor: 'hsl(var(--nf, var(--n)) / var(--tw-border-opacity))', '--tw-bg-opacity': '1', backgroundColor: 'hsl(var(--nf, var(--n)) / var(--tw-bg-opacity))', }, ':focus-visible': { outline: '2px solid hsl(var(--nf))', outlineOffset: '2px', }, '&.glass:hover,&.glass.btn-active': { '--glass-opacity': '25%', '--glass-border-opacity': '15%', }, '&.glass:focus-visible': { outline: '2px solid currentColor', }, '&[disabled],&[disabled]:hover': { '--tw-border-opacity': '0', backgroundColor: 'hsl(var(--n) / var(--tw-bg-opacity))', '--tw-bg-opacity': '0.2', color: 'hsl(var(--bc) / var(--tw-text-opacity))', '--tw-text-opacity': '0.2', }, '&.loading.btn-square:before,&.loading.btn-circle:before': { marginRight: '0px', }, '&.loading.btn-xl:before,&.loading.btn-lg:before': { height: '1.25rem', width: '1.25rem', }, '&.loading.btn-sm:before,&.loading.btn-xs:before': { height: '0.75rem', width: '0.75rem', }, '.btn-group > input[type="radio"]&:checked': { '--tw-border-opacity': '1', borderColor: 'hsl(var(--p) / var(--tw-border-opacity))', '--tw-bg-opacity': '1', backgroundColor: 'hsl(var(--p) / var(--tw-bg-opacity))', '--tw-text-opacity': '1', color: 'hsl(var(--pc) / var(--tw-text-opacity))', }, '&.btn-group > input[type="radio"]:checked:focus-visible': { outline: '2px solid hsl(var(--p))', }, '.btn-group &:not(:first-child):not(:last-child),.btn-group.btn-group-horizontal &:not(:first-child):not(:last-child)': { borderTopLeftRadius: '0', borderTopRightRadius: '0', borderBottomLeftRadius: '0', borderBottomRightRadius: '0', }, '.btn-group &:first-child:not(:last-child),.btn-group.btn-group-horizontal &:first-child:not(:last-child)': { marginLeft: '-1px', marginTop: '-0px', borderTopLeftRadius: 'var(--rounded-btn, 0.5rem)', borderTopRightRadius: '0', borderBottomLeftRadius: 'var(--rounded-btn, 0.5rem)', borderBottomRightRadius: '0', }, '.btn-group &:last-child:not(:first-child),.btn-group.btn-group-horizontal &:last-child:not(:first-child)': { borderTopLeftRadius: '0', borderTopRightRadius: 'var(--rounded-btn, 0.5rem)', borderBottomLeftRadius: '0', borderBottomRightRadius: 'var(--rounded-btn, 0.5rem)', }, '.btn-group.btn-group-vertical &:first-child:not(:last-child)': { marginLeft: '-0px', marginTop: '-1px', borderTopLeftRadius: 'var(--rounded-btn, 0.5rem)', borderTopRightRadius: 'var(--rounded-btn, 0.5rem)', borderBottomLeftRadius: '0', borderBottomRightRadius: '0', }, '.btn-group.btn-group-vertical &:last-child:not(:first-child)': { borderTopLeftRadius: '0', borderTopRightRadius: '0', borderBottomLeftRadius: 'var(--rounded-btn, 0.5rem)', borderBottomRightRadius: 'var(--rounded-btn, 0.5rem)', }, }} className="btn" /> input[type="radio"]&': { appearance: 'none', }, '.btn-group > input[type="radio"]&:before': { content: 'attr(data-title)', }, ':active:hover,:active:focus': { animation: 'none', transform: 'scale(var(--btn-focus-scale, 0.95))', }, ':hover': { '--tw-border-opacity': '1', borderColor: 'hsl(var(--nf, var(--n)) / var(--tw-border-opacity))', '--tw-bg-opacity': '1', backgroundColor: 'hsl(var(--nf, var(--n)) / var(--tw-bg-opacity))', }, ':focus-visible': { outline: '2px solid hsl(var(--nf))', outlineOffset: '2px', }, '&.glass:hover,&.glass.btn-active': { '--glass-opacity': '25%', '--glass-border-opacity': '15%', }, '&.glass:focus-visible': { outline: '2px solid currentColor', }, '&[disabled],&[disabled]:hover': { '--tw-border-opacity': '0', backgroundColor: 'hsl(var(--n) / var(--tw-bg-opacity))', '--tw-bg-opacity': '0.2', color: 'hsl(var(--bc) / var(--tw-text-opacity))', '--tw-text-opacity': '0.2', }, '&.loading.btn-square:before,&.loading.btn-circle:before': { marginRight: '0px', }, '&.loading.btn-xl:before,&.loading.btn-lg:before': { height: '1.25rem', width: '1.25rem', }, '&.loading.btn-sm:before,&.loading.btn-xs:before': { height: '0.75rem', width: '0.75rem', }, '.btn-group > input[type="radio"]&:checked': { '--tw-border-opacity': '1', borderColor: 'hsl(var(--p) / var(--tw-border-opacity))', '--tw-bg-opacity': '1', backgroundColor: 'hsl(var(--p) / var(--tw-bg-opacity))', '--tw-text-opacity': '1', color: 'hsl(var(--pc) / var(--tw-text-opacity))', }, '&.btn-group > input[type="radio"]:checked:focus-visible': { outline: '2px solid hsl(var(--p))', }, '.btn-group &:not(:first-child):not(:last-child),.btn-group.btn-group-horizontal &:not(:first-child):not(:last-child)': { borderTopLeftRadius: '0', borderTopRightRadius: '0', borderBottomLeftRadius: '0', borderBottomRightRadius: '0', }, '.btn-group &:first-child:not(:last-child),.btn-group.btn-group-horizontal &:first-child:not(:last-child)': { marginLeft: '-1px', marginTop: '-0px', borderTopLeftRadius: 'var(--rounded-btn, 0.5rem)', borderTopRightRadius: '0', borderBottomLeftRadius: 'var(--rounded-btn, 0.5rem)', borderBottomRightRadius: '0', }, '.btn-group &:last-child:not(:first-child),.btn-group.btn-group-horizontal &:last-child:not(:first-child)': { borderTopLeftRadius: '0', borderTopRightRadius: 'var(--rounded-btn, 0.5rem)', borderBottomLeftRadius: '0', borderBottomRightRadius: 'var(--rounded-btn, 0.5rem)', }, '.btn-group.btn-group-vertical &:first-child:not(:last-child)': { marginLeft: '-0px', marginTop: '-1px', borderTopLeftRadius: 'var(--rounded-btn, 0.5rem)', borderTopRightRadius: 'var(--rounded-btn, 0.5rem)', borderBottomLeftRadius: '0', borderBottomRightRadius: '0', }, '.btn-group.btn-group-vertical &:last-child:not(:first-child)': { borderTopLeftRadius: '0', borderTopRightRadius: '0', borderBottomLeftRadius: 'var(--rounded-btn, 0.5rem)', borderBottomRightRadius: 'var(--rounded-btn, 0.5rem)', }, }} className="btn" /> input[type="radio"]&': { appearance: 'none', }, '.btn-group > input[type="radio"]&:before': { content: 'attr(data-title)', }, ':active:hover,:active:focus': { animation: 'none', transform: 'scale(var(--btn-focus-scale, 0.95))', }, ':hover': { '--tw-border-opacity': '1', borderColor: 'hsl(var(--nf, var(--n)) / var(--tw-border-opacity))', '--tw-bg-opacity': '1', backgroundColor: 'hsl(var(--nf, var(--n)) / var(--tw-bg-opacity))', }, ':focus-visible': { outline: '2px solid hsl(var(--nf))', outlineOffset: '2px', }, '&.glass:hover,&.glass.btn-active': { '--glass-opacity': '25%', '--glass-border-opacity': '15%', }, '&.glass:focus-visible': { outline: '2px solid currentColor', }, '&[disabled],&[disabled]:hover': { '--tw-border-opacity': '0', backgroundColor: 'hsl(var(--n) / var(--tw-bg-opacity))', '--tw-bg-opacity': '0.2', color: 'hsl(var(--bc) / var(--tw-text-opacity))', '--tw-text-opacity': '0.2', }, '&.loading.btn-square:before,&.loading.btn-circle:before': { marginRight: '0px', }, '&.loading.btn-xl:before,&.loading.btn-lg:before': { height: '1.25rem', width: '1.25rem', }, '&.loading.btn-sm:before,&.loading.btn-xs:before': { height: '0.75rem', width: '0.75rem', }, '.btn-group > input[type="radio"]&:checked': { '--tw-border-opacity': '1', borderColor: 'hsl(var(--p) / var(--tw-border-opacity))', '--tw-bg-opacity': '1', backgroundColor: 'hsl(var(--p) / var(--tw-bg-opacity))', '--tw-text-opacity': '1', color: 'hsl(var(--pc) / var(--tw-text-opacity))', }, '&.btn-group > input[type="radio"]:checked:focus-visible': { outline: '2px solid hsl(var(--p))', }, '.btn-group &:not(:first-child):not(:last-child),.btn-group.btn-group-horizontal &:not(:first-child):not(:last-child)': { borderTopLeftRadius: '0', borderTopRightRadius: '0', borderBottomLeftRadius: '0', borderBottomRightRadius: '0', }, '.btn-group &:first-child:not(:last-child),.btn-group.btn-group-horizontal &:first-child:not(:last-child)': { marginLeft: '-1px', marginTop: '-0px', borderTopLeftRadius: 'var(--rounded-btn, 0.5rem)', borderTopRightRadius: '0', borderBottomLeftRadius: 'var(--rounded-btn, 0.5rem)', borderBottomRightRadius: '0', }, '.btn-group &:last-child:not(:first-child),.btn-group.btn-group-horizontal &:last-child:not(:first-child)': { borderTopLeftRadius: '0', borderTopRightRadius: 'var(--rounded-btn, 0.5rem)', borderBottomLeftRadius: '0', borderBottomRightRadius: 'var(--rounded-btn, 0.5rem)', }, '.btn-group.btn-group-vertical &:first-child:not(:last-child)': { marginLeft: '-0px', marginTop: '-1px', borderTopLeftRadius: 'var(--rounded-btn, 0.5rem)', borderTopRightRadius: 'var(--rounded-btn, 0.5rem)', borderBottomLeftRadius: '0', borderBottomRightRadius: '0', }, '.btn-group.btn-group-vertical &:last-child:not(:first-child)': { borderTopLeftRadius: '0', borderTopRightRadius: '0', borderBottomLeftRadius: 'var(--rounded-btn, 0.5rem)', borderBottomRightRadius: 'var(--rounded-btn, 0.5rem)', }, }} className="btn" /> input[type="radio"]&': { appearance: 'none', }, '.btn-group > input[type="radio"]&:before': { content: 'attr(data-title)', }, ':active:hover,:active:focus': { animation: 'none', transform: 'scale(var(--btn-focus-scale, 0.95))', }, ':hover': { '--tw-border-opacity': '1', borderColor: 'hsl(var(--nf, var(--n)) / var(--tw-border-opacity))', '--tw-bg-opacity': '1', backgroundColor: 'hsl(var(--nf, var(--n)) / var(--tw-bg-opacity))', }, ':focus-visible': { outline: '2px solid hsl(var(--nf))', outlineOffset: '2px', }, '&.glass:hover,&.glass.btn-active': { '--glass-opacity': '25%', '--glass-border-opacity': '15%', }, '&.glass:focus-visible': { outline: '2px solid currentColor', }, '&[disabled],&[disabled]:hover': { '--tw-border-opacity': '0', backgroundColor: 'hsl(var(--n) / var(--tw-bg-opacity))', '--tw-bg-opacity': '0.2', color: 'hsl(var(--bc) / var(--tw-text-opacity))', '--tw-text-opacity': '0.2', }, '&.loading.btn-square:before,&.loading.btn-circle:before': { marginRight: '0px', }, '&.loading.btn-xl:before,&.loading.btn-lg:before': { height: '1.25rem', width: '1.25rem', }, '&.loading.btn-sm:before,&.loading.btn-xs:before': { height: '0.75rem', width: '0.75rem', }, '.btn-group > input[type="radio"]&:checked': { '--tw-border-opacity': '1', borderColor: 'hsl(var(--p) / var(--tw-border-opacity))', '--tw-bg-opacity': '1', backgroundColor: 'hsl(var(--p) / var(--tw-bg-opacity))', '--tw-text-opacity': '1', color: 'hsl(var(--pc) / var(--tw-text-opacity))', }, '&.btn-group > input[type="radio"]:checked:focus-visible': { outline: '2px solid hsl(var(--p))', }, '.btn-group &:not(:first-child):not(:last-child),.btn-group.btn-group-horizontal &:not(:first-child):not(:last-child)': { borderTopLeftRadius: '0', borderTopRightRadius: '0', borderBottomLeftRadius: '0', borderBottomRightRadius: '0', }, '.btn-group &:first-child:not(:last-child),.btn-group.btn-group-horizontal &:first-child:not(:last-child)': { marginLeft: '-1px', marginTop: '-0px', borderTopLeftRadius: 'var(--rounded-btn, 0.5rem)', borderTopRightRadius: '0', borderBottomLeftRadius: 'var(--rounded-btn, 0.5rem)', borderBottomRightRadius: '0', }, '.btn-group &:last-child:not(:first-child),.btn-group.btn-group-horizontal &:last-child:not(:first-child)': { borderTopLeftRadius: '0', borderTopRightRadius: 'var(--rounded-btn, 0.5rem)', borderBottomLeftRadius: '0', borderBottomRightRadius: 'var(--rounded-btn, 0.5rem)', }, '.btn-group.btn-group-vertical &:first-child:not(:last-child)': { marginLeft: '-0px', marginTop: '-1px', borderTopLeftRadius: 'var(--rounded-btn, 0.5rem)', borderTopRightRadius: 'var(--rounded-btn, 0.5rem)', borderBottomLeftRadius: '0', borderBottomRightRadius: '0', }, '.btn-group.btn-group-vertical &:last-child:not(:first-child)': { borderTopLeftRadius: '0', borderTopRightRadius: '0', borderBottomLeftRadius: 'var(--rounded-btn, 0.5rem)', borderBottomRightRadius: 'var(--rounded-btn, 0.5rem)', }, }} className="btn" />
*': { direction: 'ltr', }, '&.drawer-end > .drawer-toggle ~ .drawer-side > .drawer-overlay + *': { '--tw-translate-x': '100%', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', justifySelf: 'end', }, '&.drawer-end > .drawer-toggle:checked ~ .drawer-side > .drawer-overlay + *': { '--tw-translate-x': '0px', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }, '[dir="rtl"] &.drawer-end > .drawer-toggle ~ .drawer-side > .drawer-overlay + *': { '--tw-translate-x': '-100%', }, '[dir="rtl"] &.drawer-end > .drawer-toggle:checked ~ .drawer-side > .drawer-overlay + *': { '--tw-translate-x': '0px', }, '[dir="rtl"] &.drawer-end > .drawer-toggle:checked ~ .drawer-content': { '--tw-translate-x': '0.5rem', }, '&.drawer-end > .drawer-toggle:checked ~ .drawer-content': { '--tw-translate-x': '-0.5rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }, }} className="drawer" > & ~ .drawer-side > .drawer-overlay + *': { '--tw-translate-x': '100%', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', justifySelf: 'end', }, '.drawer.drawer-end > &:checked ~ .drawer-side > .drawer-overlay + *': { '--tw-translate-x': '0px', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }, ':where(& ~ .drawer-content)': { height: 'inherit', }, position: 'absolute', height: '0px', width: '0px', appearance: 'none', opacity: '0', '& ~ .drawer-content': { zIndex: '0', gridColumnStart: '1', gridRowStart: '1', overflowY: 'auto', transitionProperty: 'all', transitionDuration: '300ms', transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)', }, '& ~ .drawer-side': { gridColumnStart: '1', gridRowStart: '1', display: 'grid', maxHeight: '100vh', }, '& ~ .drawer-side > .drawer-overlay': { visibility: 'hidden', gridColumnStart: '1', gridRowStart: '1', opacity: '0', cursor: 'pointer', '--tw-bg-opacity': '1', backgroundColor: 'hsl(var(--nf, var(--n)) / var(--tw-bg-opacity))', transitionProperty: 'all', transitionDuration: '300ms', transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)', }, '& ~ .drawer-side > .drawer-overlay + *': { zIndex: '10', gridColumnStart: '1', gridRowStart: '1', '--tw-translate-x': '-100%', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', transitionProperty: 'all', transitionDuration: '300ms', transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)', }, ':checked ~ .drawer-side': { overflowY: 'auto', }, ':checked ~ .drawer-side > .drawer-overlay': { visibility: 'visible', opacity: '0.999999', '--tw-bg-opacity': '0.4', }, ':checked ~ .drawer-side > .drawer-overlay + *': { '--tw-translate-x': '0px', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }, '[dir="rtl"] & ~ .drawer-side > .drawer-overlay + *': { '--tw-translate-x': '100%', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }, '[dir="rtl"] &:checked ~ .drawer-side > .drawer-overlay + *': { '--tw-translate-x': '0px', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }, '[dir="rtl"] .drawer.drawer-end > & ~ .drawer-side > .drawer-overlay + *': { '--tw-translate-x': '-100%', }, '[dir="rtl"] .drawer.drawer-end > &:checked ~ .drawer-side > .drawer-overlay + *': { '--tw-translate-x': '0px', }, '[dir="rtl"] .drawer.drawer-end > &:checked ~ .drawer-content': { '--tw-translate-x': '0.5rem', }, '@media (min-width: 1024px)': { '.drawer-mobile > & ~ .drawer-content': { height: 'auto', }, '@media (min-width: 1024px)': { '.drawer-mobile > & ~ .drawer-content': { gridColumnStart: '2', }, '.drawer-mobile > & ~ .drawer-side > .drawer-overlay': { visibility: 'visible', }, '.drawer-mobile > & ~ .drawer-side > .drawer-overlay + *': { '--tw-translate-x': '0px', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }, '.drawer-mobile.drawer-end > & ~ .drawer-content': { gridColumnStart: '1', }, '.drawer-mobile.drawer-end > & ~ .drawer-side': { gridColumnStart: '2', }, '.drawer-mobile.drawer-end > & ~ .drawer-side > .drawer-overlay': { visibility: 'visible', }, '.drawer-mobile.drawer-end > & ~ .drawer-side > .drawer-overlay + *': { '--tw-translate-x': '0px', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }, }, '.drawer-mobile > & ~ .drawer-side': { overflowY: 'auto', }, '.drawer-mobile.drawer-end > & ~ .drawer-content': { height: 'auto', }, '.drawer-mobile.drawer-end > & ~ .drawer-side': { overflowY: 'auto', }, '.drawer-mobile > &:checked ~ .drawer-content': { '--tw-translate-x': '0px', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }, }, '.drawer.drawer-end > &:checked ~ .drawer-content': { '--tw-translate-x': '-0.5rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }, ':checked ~ .drawer-content': { '--tw-translate-x': '0.5rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }, ':focus-visible ~ .drawer-content .drawer-button': { outline: '2px solid hsl(var(--nf))', outlineOffset: '2px', }, ':focus-visible ~ .drawer-content .drawer-button.btn-primary': { outline: '2px solid hsl(var(--p))', }, ':focus-visible ~ .drawer-content .drawer-button.btn-secondary': { outline: '2px solid hsl(var(--s))', }, ':focus-visible ~ .drawer-content .drawer-button.btn-accent': { outline: '2px solid hsl(var(--a))', }, ':focus-visible ~ .drawer-content .drawer-button.btn-info': { outline: '2px solid hsl(var(--in))', }, ':focus-visible ~ .drawer-content .drawer-button.btn-success': { outline: '2px solid hsl(var(--su))', }, ':focus-visible ~ .drawer-content .drawer-button.btn-warning': { outline: '2px solid hsl(var(--wa))', }, ':focus-visible ~ .drawer-content .drawer-button.btn-error': { outline: '2px solid hsl(var(--er))', }, ':focus-visible ~ .drawer-content .drawer-button.glass': { outline: '2px solid currentColor', }, ':focus-visible ~ .drawer-content .drawer-button.btn-ghost': { outline: '2px solid currentColor', }, ':focus-visible ~ .drawer-content .drawer-button.btn-link': { outline: '2px solid currentColor', }, }} />
.drawer-toggle:checked ~ &': { '--tw-translate-x': '0.5rem', }, '@media (min-width: 1024px)': { '.drawer-mobile > .drawer-toggle ~ &': { height: 'auto', }, '@media (min-width: 1024px)': { '.drawer-mobile > .drawer-toggle ~ &': { gridColumnStart: '2', }, '.drawer-mobile.drawer-end > .drawer-toggle ~ &': { gridColumnStart: '1', }, }, '.drawer-mobile.drawer-end > .drawer-toggle ~ &': { height: 'auto', }, '.drawer-mobile > .drawer-toggle:checked ~ &': { '--tw-translate-x': '0px', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }, }, '.drawer.drawer-end > .drawer-toggle:checked ~ &': { '--tw-translate-x': '-0.5rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }, '.drawer-toggle:checked ~ &': { '--tw-translate-x': '0.5rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }, '.drawer-toggle:focus-visible ~ & .drawer-button': { outline: '2px solid hsl(var(--nf))', outlineOffset: '2px', }, '.drawer-toggle:focus-visible ~ & .drawer-button.btn-primary': { outline: '2px solid hsl(var(--p))', }, '.drawer-toggle:focus-visible ~ & .drawer-button.btn-secondary': { outline: '2px solid hsl(var(--s))', }, '.drawer-toggle:focus-visible ~ & .drawer-button.btn-accent': { outline: '2px solid hsl(var(--a))', }, '.drawer-toggle:focus-visible ~ & .drawer-button.btn-info': { outline: '2px solid hsl(var(--in))', }, '.drawer-toggle:focus-visible ~ & .drawer-button.btn-success': { outline: '2px solid hsl(var(--su))', }, '.drawer-toggle:focus-visible ~ & .drawer-button.btn-warning': { outline: '2px solid hsl(var(--wa))', }, '.drawer-toggle:focus-visible ~ & .drawer-button.btn-error': { outline: '2px solid hsl(var(--er))', }, '.drawer-toggle:focus-visible ~ & .drawer-button.glass': { outline: '2px solid currentColor', }, '.drawer-toggle:focus-visible ~ & .drawer-button.btn-ghost': { outline: '2px solid currentColor', }, '.drawer-toggle:focus-visible ~ & .drawer-button.btn-link': { outline: '2px solid currentColor', }, }} className="drawer-content" >
.drawer-toggle ~ & > .drawer-overlay + *': { '--tw-translate-x': '100%', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', justifySelf: 'end', }, '.drawer.drawer-end > .drawer-toggle:checked ~ & > .drawer-overlay + *': { '--tw-translate-x': '0px', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }, '.drawer-toggle ~ &': { gridColumnStart: '1', gridRowStart: '1', display: 'grid', maxHeight: '100vh', }, '.drawer-toggle ~ & > .drawer-overlay': { visibility: 'hidden', gridColumnStart: '1', gridRowStart: '1', opacity: '0', cursor: 'pointer', '--tw-bg-opacity': '1', backgroundColor: 'hsl(var(--nf, var(--n)) / var(--tw-bg-opacity))', transitionProperty: 'all', transitionDuration: '300ms', transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)', }, '.drawer-toggle ~ & > .drawer-overlay + *': { zIndex: '10', gridColumnStart: '1', gridRowStart: '1', '--tw-translate-x': '-100%', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', transitionProperty: 'all', transitionDuration: '300ms', transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)', }, '.drawer-toggle:checked ~ &': { overflowY: 'auto', }, '.drawer-toggle:checked ~ & > .drawer-overlay': { visibility: 'visible', opacity: '0.999999', '--tw-bg-opacity': '0.4', }, '.drawer-toggle:checked ~ & > .drawer-overlay + *': { '--tw-translate-x': '0px', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }, '[dir="rtl"] .drawer-toggle ~ & > .drawer-overlay + *': { '--tw-translate-x': '100%', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }, '[dir="rtl"] .drawer-toggle:checked ~ & > .drawer-overlay + *': { '--tw-translate-x': '0px', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }, '[dir="rtl"] .drawer.drawer-end > .drawer-toggle ~ & > .drawer-overlay + *': { '--tw-translate-x': '-100%', }, '[dir="rtl"] .drawer.drawer-end > .drawer-toggle:checked ~ & > .drawer-overlay + *': { '--tw-translate-x': '0px', }, '@media (min-width: 1024px)': { '@media (min-width: 1024px)': { '.drawer-mobile > .drawer-toggle ~ & > .drawer-overlay': { visibility: 'visible', }, '.drawer-mobile > .drawer-toggle ~ & > .drawer-overlay + *': { '--tw-translate-x': '0px', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }, '.drawer-mobile.drawer-end > .drawer-toggle ~ &': { gridColumnStart: '2', }, '.drawer-mobile.drawer-end > .drawer-toggle ~ & > .drawer-overlay': { visibility: 'visible', }, '.drawer-mobile.drawer-end > .drawer-toggle ~ & > .drawer-overlay + *': { '--tw-translate-x': '0px', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }, }, '.drawer-mobile > .drawer-toggle ~ &': { overflowY: 'auto', }, '.drawer-mobile.drawer-end > .drawer-toggle ~ &': { overflowY: 'auto', }, }, }} className="drawer-side" >
    :where(*:not(ul))': { display: 'flex', }, '& :where(li:not(.disabled):not(.menu-title)) > :where(*:not(ul))': { cursor: 'pointer', WebkitUserSelect: 'none', userSelect: 'none', alignItems: 'center', outline: '2px solid transparent', outlineOffset: '2px', }, '> :where(li > *:not(ul):focus)': { outline: '2px solid transparent', outlineOffset: '2px', }, '> :where(li.disabled > *:not(ul):focus)': { cursor: 'auto', }, '> :where(li) :where(ul)': { display: 'flex', flexDirection: 'column', alignItems: 'stretch', }, '> :where(li) > :where(ul)': { position: 'absolute', display: 'none', top: 'initial', left: '100%', borderTopLeftRadius: 'inherit', borderTopRightRadius: 'inherit', borderBottomRightRadius: 'inherit', borderBottomLeftRadius: 'inherit', }, '> :where(li:hover) > :where(ul)': { display: 'flex', }, '> :where(li:focus) > :where(ul)': { display: 'flex', }, '&.horizontal li.bordered > a,&.horizontal li.bordered > button,&.horizontal li.bordered > span': { borderLeftWidth: '0px', borderBottomWidth: '4px', '--tw-border-opacity': '1', borderColor: 'hsl(var(--p) / var(--tw-border-opacity))', }, '&[class*=" p-"] li > *,&[class^="p-"] li > *': { borderRadius: 'var(--rounded-btn, 0.5rem)', }, '& :where(li.bordered > *)': { borderLeftWidth: '4px', '--tw-border-opacity': '1', borderColor: 'hsl(var(--p) / var(--tw-border-opacity))', }, '& :where(li) > :where(*:not(ul))': { gap: '0.75rem', paddingLeft: '1rem', paddingRight: '1rem', paddingTop: '0.75rem', paddingBottom: '0.75rem', color: 'currentColor', }, '& :where(li:not(.menu-title):not(:empty)) > :where(*:not(ul):focus),& :where(li:not(.menu-title):not(:empty)) > :where(*:not(ul):hover)': { backgroundColor: 'hsl(var(--bc) / var(--tw-bg-opacity))', '--tw-bg-opacity': '0.1', }, '& :where(li:not(.menu-title):not(:empty)) > :where(:not(ul).active),& :where(li:not(.menu-title):not(:empty)) > :where(*:not(ul):active)': { '--tw-bg-opacity': '1', backgroundColor: 'hsl(var(--p) / var(--tw-bg-opacity))', '--tw-text-opacity': '1', color: 'hsl(var(--pc) / var(--tw-text-opacity))', }, '& :where(li:empty)': { marginLeft: '1rem', marginRight: '1rem', marginTop: '0.5rem', marginBottom: '0.5rem', height: '1px', backgroundColor: 'hsl(var(--bc) / var(--tw-bg-opacity))', '--tw-bg-opacity': '0.1', }, '& li.disabled > *': { WebkitUserSelect: 'none', userSelect: 'none', color: 'hsl(var(--bc) / var(--tw-text-opacity))', '--tw-text-opacity': '0.2', }, '& li.disabled > *:hover': { backgroundColor: 'transparent', }, '& li.hover-bordered a': { borderLeftWidth: '4px', borderColor: 'transparent', }, '& li.hover-bordered a:hover': { '--tw-border-opacity': '1', borderColor: 'hsl(var(--p) / var(--tw-border-opacity))', }, '&.compact li > a,&.compact li > span': { paddingTop: '0.5rem', paddingBottom: '0.5rem', fontSize: '0.875rem', lineHeight: '1.25rem', }, '& .menu-title > *': { paddingTop: '0.25rem', paddingBottom: '0.25rem', fontSize: '0.75rem', lineHeight: '1rem', fontWeight: '700', color: 'hsl(var(--bc) / var(--tw-text-opacity))', '--tw-text-opacity': '0.4', }, '& :where(li:not(.disabled)) > :where(*:not(ul))': { outline: '2px solid transparent', outlineOffset: '2px', transitionProperty: 'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter', transitionDuration: '200ms', transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)', }, '> :where(li:first-child)': { borderTopLeftRadius: 'inherit', borderTopRightRadius: 'inherit', borderBottomRightRadius: 'unset', borderBottomLeftRadius: 'unset', }, '> :where(li:first-child) > :where(:not(ul))': { borderTopLeftRadius: 'inherit', borderTopRightRadius: 'inherit', borderBottomRightRadius: 'unset', borderBottomLeftRadius: 'unset', }, '> :where(li:last-child)': { borderTopLeftRadius: 'unset', borderTopRightRadius: 'unset', borderBottomRightRadius: 'inherit', borderBottomLeftRadius: 'inherit', }, '> :where(li:last-child) > :where(:not(ul))': { borderTopLeftRadius: 'unset', borderTopRightRadius: 'unset', borderBottomRightRadius: 'inherit', borderBottomLeftRadius: 'inherit', }, '> :where(li) > :where(ul) :where(li)': { width: '100%', whiteSpace: 'nowrap', }, '> :where(li) > :where(ul) :where(li) :where(ul)': { paddingLeft: '1rem', }, '> :where(li) > :where(ul) :where(li) > :where(:not(ul))': { width: '100%', whiteSpace: 'nowrap', }, '> :where(li) > :where(ul) > :where(li:first-child)': { borderTopLeftRadius: 'inherit', borderTopRightRadius: 'inherit', borderBottomRightRadius: 'unset', borderBottomLeftRadius: 'unset', }, '> :where(li) > :where(ul) > :where(li:first-child) > :where(:not(ul))': { borderTopLeftRadius: 'inherit', borderTopRightRadius: 'inherit', borderBottomRightRadius: 'unset', borderBottomLeftRadius: 'unset', }, '> :where(li) > :where(ul) > :where(li:last-child)': { borderTopLeftRadius: 'unset', borderTopRightRadius: 'unset', borderBottomRightRadius: 'inherit', borderBottomLeftRadius: 'inherit', }, '> :where(li) > :where(ul) > :where(li:last-child) > :where(:not(ul))': { borderTopLeftRadius: 'unset', borderTopRightRadius: 'unset', borderBottomRightRadius: 'inherit', borderBottomLeftRadius: 'inherit', }, width: '20rem', overflowY: 'auto', '--tw-bg-opacity': '1', backgroundColor: 'hsl(var(--b1) / var(--tw-bg-opacity))', padding: '1rem', '--tw-text-opacity': '1', color: 'hsl(var(--bc) / var(--tw-text-opacity))', }} >
  • Sidebar Item 1
  • Sidebar Item 2
*': { gridColumnStart: '1', gridRowStart: '1', }, minHeight: '100vh', '--tw-bg-opacity': '1', backgroundColor: 'hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity))', }} >

Hello there

Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.

99+
ul': { display: 'flex', alignItems: 'center', whiteSpace: 'nowrap', minHeight: 'min-content', }, '> ul > li': { display: 'flex', alignItems: 'center', }, '> ul > li > a': { display: 'flex', cursor: 'pointer', alignItems: 'center', }, '> ul > li > a:hover': { WebkitTextDecorationLine: 'underline', textDecorationLine: 'underline', }, '> ul > li > a:focus': { outline: '2px solid transparent', outlineOffset: '2px', }, '> ul > li > a:focus-visible': { outline: '2px solid currentColor', outlineOffset: '2px', }, '> ul > li + *:before': { content: '""', marginLeft: '0.5rem', marginRight: '0.75rem', display: 'block', height: '0.375rem', width: '0.375rem', '--tw-rotate': '45deg', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', opacity: '0.4', borderTop: '1px solid', borderRight: '1px solid', backgroundColor: 'transparent', }, '[dir="rtl"] &>ul>li+*:before': { '--tw-rotate': '-45deg', }, fontSize: '0.875rem', lineHeight: '1.25rem', }} >
  • Register
  • Choose plan
  • Purchase
  • Receive Product
  • Fly to moon
  • Shrink the moon
  • Grab the moon
  • Sit on toilet 
            npm i daisyui
          
            installing...
          
            Done!
*': { gridColumnStart: '1', gridRowStart: '1', }, '&.image-full > figure img': { height: '100%', objectFit: 'cover', }, '&.image-full > .card-body': { position: 'relative', zIndex: '20', '--tw-text-opacity': '1', color: 'hsl(var(--nc) / var(--tw-text-opacity))', }, '& :where(figure:first-child)': { overflow: 'hidden', borderTopLeftRadius: 'inherit', borderTopRightRadius: 'inherit', borderBottomLeftRadius: 'unset', borderBottomRightRadius: 'unset', }, '& :where(figure:last-child)': { overflow: 'hidden', borderTopLeftRadius: 'unset', borderTopRightRadius: 'unset', borderBottomLeftRadius: 'inherit', borderBottomRightRadius: 'inherit', }, ':focus-visible': { outline: '2px solid currentColor', outlineOffset: '2px', }, '&.bordered': { borderWidth: '1px', '--tw-border-opacity': '1', borderColor: 'hsl(var(--b2, var(--b1)) / var(--tw-border-opacity))', }, '&.compact .card-body': { padding: '1rem', fontSize: '0.875rem', lineHeight: '1.25rem', }, '&.image-full :where(figure)': { overflow: 'hidden', borderRadius: 'inherit', }, width: '24rem', '--tw-bg-opacity': '1', backgroundColor: 'hsl(var(--b1) / var(--tw-bg-opacity))', '--tw-shadow': '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)', '--tw-shadow-colored': '0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color)', boxShadow: 'var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)', }} >
Shoes
&': { position: 'relative', zIndex: '20', '--tw-text-opacity': '1', color: 'hsl(var(--nc) / var(--tw-text-opacity))', }, '.card.compact &': { padding: '1rem', fontSize: '0.875rem', lineHeight: '1.25rem', }, '.card-compact &': { padding: '1rem', fontSize: '0.875rem', lineHeight: '1.25rem', }, '.card-normal &': { padding: 'var(--padding-card, 2rem)', fontSize: '1rem', lineHeight: '1.5rem', }, }} >

Shoes!

If a dog chews shoes whose shoes does he choose?

input[type="radio"]&': { appearance: 'none', }, '.btn-group > input[type="radio"]&:before': { content: 'attr(data-title)', }, ':active:hover,:active:focus': { animation: 'none', transform: 'scale(var(--btn-focus-scale, 0.95))', }, ':hover': { '--tw-border-opacity': '1', borderColor: 'hsl(var(--nf, var(--n)) / var(--tw-border-opacity))', '--tw-bg-opacity': '1', backgroundColor: 'hsl(var(--nf, var(--n)) / var(--tw-bg-opacity))', }, ':focus-visible': { outline: '2px solid hsl(var(--nf))', outlineOffset: '2px', }, '&.glass:hover,&.glass.btn-active': { '--glass-opacity': '25%', '--glass-border-opacity': '15%', }, '&.glass:focus-visible': { outline: '2px solid currentColor', }, '&[disabled],&[disabled]:hover': { '--tw-border-opacity': '0', backgroundColor: 'hsl(var(--n) / var(--tw-bg-opacity))', '--tw-bg-opacity': '0.2', color: 'hsl(var(--bc) / var(--tw-text-opacity))', '--tw-text-opacity': '0.2', }, '&.loading.btn-square:before,&.loading.btn-circle:before': { marginRight: '0px', }, '&.loading.btn-xl:before,&.loading.btn-lg:before': { height: '1.25rem', width: '1.25rem', }, '&.loading.btn-sm:before,&.loading.btn-xs:before': { height: '0.75rem', width: '0.75rem', }, '.btn-group > input[type="radio"]&:checked': { '--tw-border-opacity': '1', borderColor: 'hsl(var(--p) / var(--tw-border-opacity))', '--tw-bg-opacity': '1', backgroundColor: 'hsl(var(--p) / var(--tw-bg-opacity))', '--tw-text-opacity': '1', color: 'hsl(var(--pc) / var(--tw-text-opacity))', }, '&.btn-group > input[type="radio"]:checked:focus-visible': { outline: '2px solid hsl(var(--p))', }, '.btn-group &:not(:first-child):not(:last-child),.btn-group.btn-group-horizontal &:not(:first-child):not(:last-child)': { borderTopLeftRadius: '0', borderTopRightRadius: '0', borderBottomLeftRadius: '0', borderBottomRightRadius: '0', }, '.btn-group &:first-child:not(:last-child),.btn-group.btn-group-horizontal &:first-child:not(:last-child)': { marginLeft: '-1px', marginTop: '-0px', borderTopLeftRadius: 'var(--rounded-btn, 0.5rem)', borderTopRightRadius: '0', borderBottomLeftRadius: 'var(--rounded-btn, 0.5rem)', borderBottomRightRadius: '0', }, '.btn-group &:last-child:not(:first-child),.btn-group.btn-group-horizontal &:last-child:not(:first-child)': { borderTopLeftRadius: '0', borderTopRightRadius: 'var(--rounded-btn, 0.5rem)', borderBottomLeftRadius: '0', borderBottomRightRadius: 'var(--rounded-btn, 0.5rem)', }, '.btn-group.btn-group-vertical &:first-child:not(:last-child)': { marginLeft: '-0px', marginTop: '-1px', borderTopLeftRadius: 'var(--rounded-btn, 0.5rem)', borderTopRightRadius: 'var(--rounded-btn, 0.5rem)', borderBottomLeftRadius: '0', borderBottomRightRadius: '0', }, '.btn-group.btn-group-vertical &:last-child:not(:first-child)': { borderTopLeftRadius: '0', borderTopRightRadius: '0', borderBottomLeftRadius: 'var(--rounded-btn, 0.5rem)', borderBottomRightRadius: 'var(--rounded-btn, 0.5rem)', }, }} > 1 input[type="radio"]&': { appearance: 'none', }, '.btn-group > input[type="radio"]&:before': { content: 'attr(data-title)', }, ':active:hover,:active:focus': { animation: 'none', transform: 'scale(var(--btn-focus-scale, 0.95))', }, ':hover': { '--tw-border-opacity': '1', borderColor: 'hsl(var(--nf, var(--n)) / var(--tw-border-opacity))', '--tw-bg-opacity': '1', backgroundColor: 'hsl(var(--nf, var(--n)) / var(--tw-bg-opacity))', }, ':focus-visible': { outline: '2px solid hsl(var(--nf))', outlineOffset: '2px', }, '&.glass:hover,&.glass.btn-active': { '--glass-opacity': '25%', '--glass-border-opacity': '15%', }, '&.glass:focus-visible': { outline: '2px solid currentColor', }, '&[disabled],&[disabled]:hover': { '--tw-border-opacity': '0', backgroundColor: 'hsl(var(--n) / var(--tw-bg-opacity))', '--tw-bg-opacity': '0.2', color: 'hsl(var(--bc) / var(--tw-text-opacity))', '--tw-text-opacity': '0.2', }, '&.loading.btn-square:before,&.loading.btn-circle:before': { marginRight: '0px', }, '&.loading.btn-xl:before,&.loading.btn-lg:before': { height: '1.25rem', width: '1.25rem', }, '&.loading.btn-sm:before,&.loading.btn-xs:before': { height: '0.75rem', width: '0.75rem', }, '.btn-group > input[type="radio"]&:checked': { '--tw-border-opacity': '1', borderColor: 'hsl(var(--p) / var(--tw-border-opacity))', '--tw-bg-opacity': '1', backgroundColor: 'hsl(var(--p) / var(--tw-bg-opacity))', '--tw-text-opacity': '1', color: 'hsl(var(--pc) / var(--tw-text-opacity))', }, '&.btn-group > input[type="radio"]:checked:focus-visible': { outline: '2px solid hsl(var(--p))', }, '.btn-group &:not(:first-child):not(:last-child),.btn-group.btn-group-horizontal &:not(:first-child):not(:last-child)': { borderTopLeftRadius: '0', borderTopRightRadius: '0', borderBottomLeftRadius: '0', borderBottomRightRadius: '0', }, '.btn-group &:first-child:not(:last-child),.btn-group.btn-group-horizontal &:first-child:not(:last-child)': { marginLeft: '-1px', marginTop: '-0px', borderTopLeftRadius: 'var(--rounded-btn, 0.5rem)', borderTopRightRadius: '0', borderBottomLeftRadius: 'var(--rounded-btn, 0.5rem)', borderBottomRightRadius: '0', }, '.btn-group &:last-child:not(:first-child),.btn-group.btn-group-horizontal &:last-child:not(:first-child)': { borderTopLeftRadius: '0', borderTopRightRadius: 'var(--rounded-btn, 0.5rem)', borderBottomLeftRadius: '0', borderBottomRightRadius: 'var(--rounded-btn, 0.5rem)', }, '.btn-group.btn-group-vertical &:first-child:not(:last-child)': { marginLeft: '-0px', marginTop: '-1px', borderTopLeftRadius: 'var(--rounded-btn, 0.5rem)', borderTopRightRadius: 'var(--rounded-btn, 0.5rem)', borderBottomLeftRadius: '0', borderBottomRightRadius: '0', }, '.btn-group.btn-group-vertical &:last-child:not(:first-child)': { borderTopLeftRadius: '0', borderTopRightRadius: '0', borderBottomLeftRadius: 'var(--rounded-btn, 0.5rem)', borderBottomRightRadius: 'var(--rounded-btn, 0.5rem)', }, }} > 2 input[type="radio"]&': { appearance: 'none', }, '.btn-group > input[type="radio"]&:before': { content: 'attr(data-title)', }, ':active:hover,:active:focus': { animation: 'none', transform: 'scale(var(--btn-focus-scale, 0.95))', }, ':hover': { '--tw-border-opacity': '1', borderColor: 'hsl(var(--nf, var(--n)) / var(--tw-border-opacity))', '--tw-bg-opacity': '1', backgroundColor: 'hsl(var(--nf, var(--n)) / var(--tw-bg-opacity))', }, ':focus-visible': { outline: '2px solid hsl(var(--nf))', outlineOffset: '2px', }, '&.glass:hover,&.glass.btn-active': { '--glass-opacity': '25%', '--glass-border-opacity': '15%', }, '&.glass:focus-visible': { outline: '2px solid currentColor', }, '&[disabled],&[disabled]:hover': { '--tw-border-opacity': '0', backgroundColor: 'hsl(var(--n) / var(--tw-bg-opacity))', '--tw-bg-opacity': '0.2', color: 'hsl(var(--bc) / var(--tw-text-opacity))', '--tw-text-opacity': '0.2', }, '&.loading.btn-square:before,&.loading.btn-circle:before': { marginRight: '0px', }, '&.loading.btn-xl:before,&.loading.btn-lg:before': { height: '1.25rem', width: '1.25rem', }, '&.loading.btn-sm:before,&.loading.btn-xs:before': { height: '0.75rem', width: '0.75rem', }, '.btn-group > input[type="radio"]&:checked': { '--tw-border-opacity': '1', borderColor: 'hsl(var(--p) / var(--tw-border-opacity))', '--tw-bg-opacity': '1', backgroundColor: 'hsl(var(--p) / var(--tw-bg-opacity))', '--tw-text-opacity': '1', color: 'hsl(var(--pc) / var(--tw-text-opacity))', }, '&.btn-group > input[type="radio"]:checked:focus-visible': { outline: '2px solid hsl(var(--p))', }, '.btn-group &:not(:first-child):not(:last-child),.btn-group.btn-group-horizontal &:not(:first-child):not(:last-child)': { borderTopLeftRadius: '0', borderTopRightRadius: '0', borderBottomLeftRadius: '0', borderBottomRightRadius: '0', }, '.btn-group &:first-child:not(:last-child),.btn-group.btn-group-horizontal &:first-child:not(:last-child)': { marginLeft: '-1px', marginTop: '-0px', borderTopLeftRadius: 'var(--rounded-btn, 0.5rem)', borderTopRightRadius: '0', borderBottomLeftRadius: 'var(--rounded-btn, 0.5rem)', borderBottomRightRadius: '0', }, '.btn-group &:last-child:not(:first-child),.btn-group.btn-group-horizontal &:last-child:not(:first-child)': { borderTopLeftRadius: '0', borderTopRightRadius: 'var(--rounded-btn, 0.5rem)', borderBottomLeftRadius: '0', borderBottomRightRadius: 'var(--rounded-btn, 0.5rem)', }, '.btn-group.btn-group-vertical &:first-child:not(:last-child)': { marginLeft: '-0px', marginTop: '-1px', borderTopLeftRadius: 'var(--rounded-btn, 0.5rem)', borderTopRightRadius: 'var(--rounded-btn, 0.5rem)', borderBottomLeftRadius: '0', borderBottomRightRadius: '0', }, '.btn-group.btn-group-vertical &:last-child:not(:first-child)': { borderTopLeftRadius: '0', borderTopRightRadius: '0', borderBottomLeftRadius: 'var(--rounded-btn, 0.5rem)', borderBottomRightRadius: 'var(--rounded-btn, 0.5rem)', }, }} > 3 input[type="radio"]&': { appearance: 'none', }, '.btn-group > input[type="radio"]&:before': { content: 'attr(data-title)', }, ':active:hover,:active:focus': { animation: 'none', transform: 'scale(var(--btn-focus-scale, 0.95))', }, ':hover': { '--tw-border-opacity': '1', borderColor: 'hsl(var(--nf, var(--n)) / var(--tw-border-opacity))', '--tw-bg-opacity': '1', backgroundColor: 'hsl(var(--nf, var(--n)) / var(--tw-bg-opacity))', }, ':focus-visible': { outline: '2px solid hsl(var(--nf))', outlineOffset: '2px', }, '&.glass:hover,&.glass.btn-active': { '--glass-opacity': '25%', '--glass-border-opacity': '15%', }, '&.glass:focus-visible': { outline: '2px solid currentColor', }, '&[disabled],&[disabled]:hover': { '--tw-border-opacity': '0', backgroundColor: 'hsl(var(--n) / var(--tw-bg-opacity))', '--tw-bg-opacity': '0.2', color: 'hsl(var(--bc) / var(--tw-text-opacity))', '--tw-text-opacity': '0.2', }, '&.loading.btn-square:before,&.loading.btn-circle:before': { marginRight: '0px', }, '&.loading.btn-xl:before,&.loading.btn-lg:before': { height: '1.25rem', width: '1.25rem', }, '&.loading.btn-sm:before,&.loading.btn-xs:before': { height: '0.75rem', width: '0.75rem', }, '.btn-group > input[type="radio"]&:checked': { '--tw-border-opacity': '1', borderColor: 'hsl(var(--p) / var(--tw-border-opacity))', '--tw-bg-opacity': '1', backgroundColor: 'hsl(var(--p) / var(--tw-bg-opacity))', '--tw-text-opacity': '1', color: 'hsl(var(--pc) / var(--tw-text-opacity))', }, '&.btn-group > input[type="radio"]:checked:focus-visible': { outline: '2px solid hsl(var(--p))', }, '.btn-group &:not(:first-child):not(:last-child),.btn-group.btn-group-horizontal &:not(:first-child):not(:last-child)': { borderTopLeftRadius: '0', borderTopRightRadius: '0', borderBottomLeftRadius: '0', borderBottomRightRadius: '0', }, '.btn-group &:first-child:not(:last-child),.btn-group.btn-group-horizontal &:first-child:not(:last-child)': { marginLeft: '-1px', marginTop: '-0px', borderTopLeftRadius: 'var(--rounded-btn, 0.5rem)', borderTopRightRadius: '0', borderBottomLeftRadius: 'var(--rounded-btn, 0.5rem)', borderBottomRightRadius: '0', }, '.btn-group &:last-child:not(:first-child),.btn-group.btn-group-horizontal &:last-child:not(:first-child)': { borderTopLeftRadius: '0', borderTopRightRadius: 'var(--rounded-btn, 0.5rem)', borderBottomLeftRadius: '0', borderBottomRightRadius: 'var(--rounded-btn, 0.5rem)', }, '.btn-group.btn-group-vertical &:first-child:not(:last-child)': { marginLeft: '-0px', marginTop: '-1px', borderTopLeftRadius: 'var(--rounded-btn, 0.5rem)', borderTopRightRadius: 'var(--rounded-btn, 0.5rem)', borderBottomLeftRadius: '0', borderBottomRightRadius: '0', }, '.btn-group.btn-group-vertical &:last-child:not(:first-child)': { borderTopLeftRadius: '0', borderTopRightRadius: '0', borderBottomLeftRadius: 'var(--rounded-btn, 0.5rem)', borderBottomRightRadius: 'var(--rounded-btn, 0.5rem)', }, }} > 4
top+start top+center top+end middle+start middle+center middle+end bott0m+strt bottom+center bottom+end
content
*': { gridColumnStart: '1', gridRowStart: '1', }, minHeight: '100vh', '--tw-bg-opacity': '1', backgroundColor: 'hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity))', }} >

Login now!

Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.

*': { gridColumnStart: '1', gridRowStart: '1', }, '&.image-full > figure img': { height: '100%', objectFit: 'cover', }, '&.image-full > .card-body': { position: 'relative', zIndex: '20', '--tw-text-opacity': '1', color: 'hsl(var(--nc) / var(--tw-text-opacity))', }, '& :where(figure:first-child)': { overflow: 'hidden', borderTopLeftRadius: 'inherit', borderTopRightRadius: 'inherit', borderBottomLeftRadius: 'unset', borderBottomRightRadius: 'unset', }, '& :where(figure:last-child)': { overflow: 'hidden', borderTopLeftRadius: 'unset', borderTopRightRadius: 'unset', borderBottomLeftRadius: 'inherit', borderBottomRightRadius: 'inherit', }, ':focus-visible': { outline: '2px solid currentColor', outlineOffset: '2px', }, '&.bordered': { borderWidth: '1px', '--tw-border-opacity': '1', borderColor: 'hsl(var(--b2, var(--b1)) / var(--tw-border-opacity))', }, '&.compact .card-body': { padding: '1rem', fontSize: '0.875rem', lineHeight: '1.25rem', }, '&.image-full :where(figure)': { overflow: 'hidden', borderRadius: 'inherit', }, width: '100%', maxWidth: '24rem', flexShrink: '0', '--tw-bg-opacity': '1', backgroundColor: 'hsl(var(--b1) / var(--tw-bg-opacity))', '--tw-shadow': '0 25px 50px -12px rgb(0 0 0 / 0.25)', '--tw-shadow-colored': '0 25px 50px -12px var(--tw-shadow-color)', boxShadow: 'var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)', }} >
&': { position: 'relative', zIndex: '20', '--tw-text-opacity': '1', color: 'hsl(var(--nc) / var(--tw-text-opacity))', }, '.card.compact &': { padding: '1rem', fontSize: '0.875rem', lineHeight: '1.25rem', }, '.card-compact &': { padding: '1rem', fontSize: '0.875rem', lineHeight: '1.25rem', }, '.card-normal &': { padding: 'var(--padding-card, 2rem)', fontSize: '1rem', lineHeight: '1.5rem', }, }} >
&': { isolation: 'isolate', borderRadius: '0px', }, '&[list]::-webkit-calendar-picker-indicator': { lineHeight: '1em', }, ':focus': { outline: '2px solid hsla(var(--bc) / 0.2)', outlineOffset: '2px', }, '&[disabled]': { cursor: 'not-allowed', '--tw-border-opacity': '1', borderColor: 'hsl(var(--b2, var(--b1)) / var(--tw-border-opacity))', '--tw-bg-opacity': '1', backgroundColor: 'hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity))', '--tw-text-opacity': '0.2', }, '&[disabled]::placeholder': { color: 'hsl(var(--bc) / var(--tw-placeholder-opacity))', '--tw-placeholder-opacity': '0.2', }, }} />
&': { isolation: 'isolate', borderRadius: '0px', }, '&[list]::-webkit-calendar-picker-indicator': { lineHeight: '1em', }, ':focus': { outline: '2px solid hsla(var(--bc) / 0.2)', outlineOffset: '2px', }, '&[disabled]': { cursor: 'not-allowed', '--tw-border-opacity': '1', borderColor: 'hsl(var(--b2, var(--b1)) / var(--tw-border-opacity))', '--tw-bg-opacity': '1', backgroundColor: 'hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity))', '--tw-text-opacity': '0.2', }, '&[disabled]::placeholder': { color: 'hsl(var(--bc) / var(--tw-placeholder-opacity))', '--tw-placeholder-opacity': '0.2', }, }} />

Congratulations random Interner user!

You've been selected for a chance to get one year of subscription to use Wikipedia for free!

:not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(0.5rem * var(--tw-space-x-reverse))', marginLeft: 'calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))', }, }} className="modal-action" >
) `; exports[`twin.macro pluginExamples.tsx: pluginExamples.tsx 1`] = ` // @ts-nocheck import tw, { globalStyles } from '../macro' tw\`content-auto\` tw\`content-hidden\` tw\`content-visible\` tw\`tab-1\` tw\`tab-2\` tw\`tab-4\` tw\`tab-8\` tw\`btn\` tw\`btn-blue\` tw\`btn-red\` tw\`btn btn-blue btn-red\` globalStyles tw\`test-1:block\` tw\`test-2:block\` tw\`test-3:block\` tw\`test-4:block\` tw\`potato-[yellow]:bg-yellow-200\` tw\`potato-[baked]:w-3\` tw\`tooltip-bottom:mt-5\` tw\`tooltip-top:mb-5\` tw\`alphabet-c:underline \` tw\`alphabet-a:underline \` tw\`alphabet-d:underline \` tw\`alphabet-b:underline\` tw\`test-[a,b,c]:underline\` tw\`testmin-[500px]:underline\` tw\`testmin-[700px]:italic\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck ;({ contentVisibility: 'auto', }) ;({ contentVisibility: 'hidden', }) ;({ contentVisibility: 'visible', }) ;({ tabSizeTest: '1', }) ;({ tabSizeTest: '2', }) ;({ tabSizeTest: '4', }) ;({ tabSizeTest: '8', }) ;({ padding: '.5rem 1rem', borderRadius: '.25rem', fontWeight: '600', }) ;({ backgroundColor: '#3490dc', color: '#fff', ':hover': { backgroundColor: '#2779bd', }, }) ;({ backgroundColor: '#e3342f', color: '#fff', ':hover': { backgroundColor: '#cc1f1a', }, }) ;({ padding: '.5rem 1rem', borderRadius: '.25rem', fontWeight: '600', backgroundColor: '#e3342f', color: '#fff', ':hover': { backgroundColor: '#cc1f1a', }, }) ;({ '*, ::before, ::after': { '--tw-border-spacing-x': '0', '--tw-border-spacing-y': '0', '--tw-translate-x': '0', '--tw-translate-y': '0', '--tw-rotate': '0', '--tw-skew-x': '0', '--tw-skew-y': '0', '--tw-scale-x': '1', '--tw-scale-y': '1', '--tw-pan-x': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-pan-y': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-pinch-zoom': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-scroll-snap-strictness': 'proximity', '--tw-ordinal': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-slashed-zero': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-numeric-figure': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-numeric-spacing': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-numeric-fraction': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-ring-offset-shadow': '0 0 #0000', '--tw-ring-shadow': '0 0 #0000', '--tw-shadow': '0 0 #0000', '--tw-shadow-colored': '0 0 #0000', '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-ring-offset-width': '0px', '--tw-ring-offset-color': '#fff', '--tw-ring-color': 'rgb(59 130 246 / 0.5)', '--tw-blur': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-brightness': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-contrast': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-grayscale': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-invert': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-saturate': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-sepia': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-drop-shadow': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-blur': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-brightness': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-contrast': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-grayscale': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-invert': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-opacity': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-saturate': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-sepia': 'var(--tw-empty,/*!*/ /*!*/)', }, '::backdrop': { '--tw-border-spacing-x': '0', '--tw-border-spacing-y': '0', '--tw-translate-x': '0', '--tw-translate-y': '0', '--tw-rotate': '0', '--tw-skew-x': '0', '--tw-skew-y': '0', '--tw-scale-x': '1', '--tw-scale-y': '1', '--tw-pan-x': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-pan-y': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-pinch-zoom': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-scroll-snap-strictness': 'proximity', '--tw-ordinal': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-slashed-zero': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-numeric-figure': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-numeric-spacing': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-numeric-fraction': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-ring-offset-shadow': '0 0 #0000', '--tw-ring-shadow': '0 0 #0000', '--tw-shadow': '0 0 #0000', '--tw-shadow-colored': '0 0 #0000', '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-ring-offset-width': '0px', '--tw-ring-offset-color': '#fff', '--tw-ring-color': 'rgb(59 130 246 / 0.5)', '--tw-blur': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-brightness': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-contrast': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-grayscale': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-invert': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-saturate': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-sepia': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-drop-shadow': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-blur': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-brightness': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-contrast': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-grayscale': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-invert': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-opacity': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-saturate': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-sepia': 'var(--tw-empty,/*!*/ /*!*/)', }, }) ;({ ':test1': { display: 'block', }, }) ;({ ':hover': { display: 'block', }, ':focus': { display: 'block', }, }) ;({ '@supports (display: grid)': { display: 'block', }, }) ;({ 'html.dark &.something': { display: 'block', }, }) ;({ '.potato-yellow &': { '--tw-bg-opacity': '1', backgroundColor: 'rgb(254 240 138 / var(--tw-bg-opacity))', }, }) ;({ '.potato-baked &': { width: '0.75rem', }, }) ;({ '&[data-location="bottom"]': { marginTop: '1.25rem', }, }) ;({ '&[data-location="top"]': { marginBottom: '1.25rem', }, }) ;({ '&[data-value="c"]': { textDecorationLine: 'underline', }, }) ;({ '&[data-value="a"]': { textDecorationLine: 'underline', }, }) ;({ '&[data-value="d"]': { textDecorationLine: 'underline', }, }) ;({ '&[data-value="b"]': { textDecorationLine: 'underline', }, }) ;({ '&.a > *': { textDecorationLine: 'underline', }, '&.b > *': { textDecorationLine: 'underline', }, '&.c > *': { textDecorationLine: 'underline', }, }) ;({ '@media (min-width: 500px)': { textDecorationLine: 'underline', }, }) ;({ '@media (min-width: 700px)': { fontStyle: 'italic', }, }) `; exports[`twin.macro pluginForms.tsx: pluginForms.tsx 1`] = ` // @ts-nocheck import { GlobalStyles } from '../macro' ; ↓ ↓ ↓ ↓ ↓ ↓ import { css as _css } from '@emotion/react' import { Global as _globalImport } from '@emotion/react' const _GlobalStyles = () => ( <_globalImport styles={_css\`*, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: #e5e7eb; --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: var(--tw-empty,/*!*/ /*!*/); --tw-pan-y: var(--tw-empty,/*!*/ /*!*/); --tw-pinch-zoom: var(--tw-empty,/*!*/ /*!*/); --tw-scroll-snap-strictness: proximity; --tw-ordinal: var(--tw-empty,/*!*/ /*!*/); --tw-slashed-zero: var(--tw-empty,/*!*/ /*!*/); --tw-numeric-figure: var(--tw-empty,/*!*/ /*!*/); --tw-numeric-spacing: var(--tw-empty,/*!*/ /*!*/); --tw-numeric-fraction: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-blur: var(--tw-empty,/*!*/ /*!*/); --tw-brightness: var(--tw-empty,/*!*/ /*!*/); --tw-contrast: var(--tw-empty,/*!*/ /*!*/); --tw-grayscale: var(--tw-empty,/*!*/ /*!*/); --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/); --tw-invert: var(--tw-empty,/*!*/ /*!*/); --tw-saturate: var(--tw-empty,/*!*/ /*!*/); --tw-sepia: var(--tw-empty,/*!*/ /*!*/); --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/); } ::before, ::after { --tw-content: ''; } html { line-height: 1.5; -webkit-text-size-adjust: 100%; -moz-tab-size: 4; tab-size: 4; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-feature-settings: normal; font-variation-settings: normal; } body { margin: 0; line-height: inherit; } hr { height: 0; color: inherit; border-top-width: 1px; } abbr:where([title]) { text-decoration: underline dotted; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } table { text-indent: 0; border-color: inherit; border-collapse: collapse; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; } button, select { text-transform: none; } button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; background-color: transparent; background-image: none; } :-moz-focusring { outline: auto; } :-moz-ui-invalid { box-shadow: none; } progress { vertical-align: baseline; } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } [type='search'] { -webkit-appearance: textfield; outline-offset: -2px; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } summary { display: list-item; } blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; } fieldset { margin: 0; padding: 0; } legend { padding: 0; } ol, ul, menu { list-style: none; margin: 0; padding: 0; } textarea { resize: vertical; } input::placeholder, textarea::placeholder { opacity: 1; color: #9ca3af; } button, [role="button"] { cursor: pointer; } :disabled { cursor: default; } img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; } img, video { max-width: 100%; height: auto; } [hidden] { display: none; } ::backdrop { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: var(--tw-empty,/*!*/ /*!*/); --tw-pan-y: var(--tw-empty,/*!*/ /*!*/); --tw-pinch-zoom: var(--tw-empty,/*!*/ /*!*/); --tw-scroll-snap-strictness: proximity; --tw-ordinal: var(--tw-empty,/*!*/ /*!*/); --tw-slashed-zero: var(--tw-empty,/*!*/ /*!*/); --tw-numeric-figure: var(--tw-empty,/*!*/ /*!*/); --tw-numeric-spacing: var(--tw-empty,/*!*/ /*!*/); --tw-numeric-fraction: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-blur: var(--tw-empty,/*!*/ /*!*/); --tw-brightness: var(--tw-empty,/*!*/ /*!*/); --tw-contrast: var(--tw-empty,/*!*/ /*!*/); --tw-grayscale: var(--tw-empty,/*!*/ /*!*/); --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/); --tw-invert: var(--tw-empty,/*!*/ /*!*/); --tw-saturate: var(--tw-empty,/*!*/ /*!*/); --tw-sepia: var(--tw-empty,/*!*/ /*!*/); --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/); } [type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select { appearance: none; background-color: #fff; border-color: #6b7280; border-width: 1px; border-radius: 0px; padding-top: 0.5rem; padding-right: 0.75rem; padding-bottom: 0.5rem; padding-left: 0.75rem; font-size: 1rem; line-height: 1.5rem; --tw-shadow: 0 0 #0000; } [type='text']:focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus { outline: 2px solid transparent; outline-offset: 2px; --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: #2563eb; --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); border-color: #2563eb; } input::placeholder,textarea::placeholder { color: #6b7280; opacity: 1; } ::-webkit-datetime-edit-fields-wrapper { padding: 0; } ::-webkit-date-and-time-value { min-height: 1.5em; } ::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field { padding-top: 0; padding-bottom: 0; } select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position: right 0.5rem center; background-repeat: no-repeat; background-size: 1.5em 1.5em; padding-right: 2.5rem; print-color-adjust: exact; } [multiple] { background-image: initial; background-position: initial; background-repeat: unset; background-size: initial; padding-right: 0.75rem; print-color-adjust: unset; } [type='checkbox'],[type='radio'] { appearance: none; padding: 0; print-color-adjust: exact; display: inline-block; vertical-align: middle; background-origin: border-box; user-select: none; flex-shrink: 0; height: 1rem; width: 1rem; color: #2563eb; background-color: #fff; border-color: #6b7280; border-width: 1px; --tw-shadow: 0 0 #0000; } [type='checkbox'] { border-radius: 0px; } [type='radio'] { border-radius: 100%; } [type='checkbox']:focus,[type='radio']:focus { outline: 2px solid transparent; outline-offset: 2px; --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-width: 2px; --tw-ring-offset-color: #fff; --tw-ring-color: #2563eb; --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } [type='checkbox']:checked,[type='radio']:checked { border-color: transparent; background-color: currentColor; background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } [type='checkbox']:checked { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); } [type='radio']:checked { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e"); } [type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus { border-color: transparent; background-color: currentColor; } [type='checkbox']:indeterminate { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e"); border-color: transparent; background-color: currentColor; background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } [type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus { border-color: transparent; background-color: currentColor; } [type='file'] { background: unset; border-color: inherit; border-width: 0; border-radius: 0; padding: 0; font-size: unset; line-height: inherit; } [type='file']:focus { outline: 1px auto -webkit-focus-ring-color; }\`} /> ) ;<_GlobalStyles /> `; exports[`twin.macro pluginGapFallback.tsx: pluginGapFallback.tsx 1`] = ` // @ts-nocheck import tw from '../macro' tw\`flex-gap-0\` tw\`flex-gap-3\` tw\`flex-gap-x-3\` tw\`flex-gap-y-3\` tw\`flex-gap-px\` tw\`flex-gap-x-1.5\` tw\`gap-0\` tw\`gap-3\` tw\`gap-x-3\` tw\`gap-y-3\` tw\`gap-px\` tw\`gap-x-1.5\` tw\`test-1\` tw\`test-2\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck ;({ margin: '-0px', '> *': { margin: '0px', }, }) ;({ margin: '-0.375rem', '> *': { margin: '0.375rem', }, }) ;({ marginRight: '-0.375rem', marginLeft: '-0.375rem', '> *': { marginRight: '0.375rem', marginLeft: '0.375rem', }, }) ;({ marginTop: '-0.375rem', marginBottom: '-0.375rem', '> *': { marginTop: '0.375rem', marginBottom: '0.375rem', }, }) ;({ margin: '-0.5px', '> *': { margin: '0.5px', }, }) ;({ marginRight: '-0.1875rem', marginLeft: '-0.1875rem', '> *': { marginRight: '0.1875rem', marginLeft: '0.1875rem', }, }) ;({ '.no-flex-gap &': { margin: '-0px', }, '.no-flex-gap & > *': { margin: '0px', }, gap: '0px', }) ;({ '.no-flex-gap &': { margin: '-0.375rem', }, '.no-flex-gap & > *': { margin: '0.375rem', }, gap: '0.75rem', }) ;({ '.no-flex-gap &': { marginRight: '-0.375rem', marginLeft: '-0.375rem', }, '.no-flex-gap & > *': { marginRight: '0.375rem', marginLeft: '0.375rem', }, columnGap: '0.75rem', }) ;({ '.no-flex-gap &': { marginTop: '-0.375rem', marginBottom: '-0.375rem', }, '.no-flex-gap & > *': { marginTop: '0.375rem', marginBottom: '0.375rem', }, rowGap: '0.75rem', }) ;({ '.no-flex-gap &': { margin: '-0.5px', }, '.no-flex-gap & > *': { margin: '0.5px', }, gap: '1px', }) ;({ '.no-flex-gap &': { marginRight: '-0.1875rem', marginLeft: '-0.1875rem', }, '.no-flex-gap & > *': { marginRight: '0.1875rem', marginLeft: '0.1875rem', }, columnGap: '0.375rem', }) ;({ background: '5px', '.a-class & .some-class': { margin: '10px', }, '.a-class & > *': { margin: '20px', }, }) ;({ '.a-class & .some-class': { margin: '10px', }, '.a-class & > *': { margin: '20px', }, }) `; exports[`twin.macro pluginTypography.tsx: pluginTypography.tsx 1`] = ` // @ts-nocheck import tw from '../macro' tw\`form-radio\` tw\`form-select\` tw\`form-checkbox\` tw\`form-input\` tw\`form-textarea\` tw\`form-multiselect\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck ;({ appearance: 'none', padding: '0', printColorAdjust: 'exact', display: 'inline-block', verticalAlign: 'middle', backgroundOrigin: 'border-box', userSelect: 'none', flexShrink: '0', height: '1rem', width: '1rem', color: '#2563eb', backgroundColor: '#fff', borderColor: '#6b7280', borderWidth: '1px', '--tw-shadow': '0 0 #0000', borderRadius: '100%', ':focus': { outline: '2px solid transparent', outlineOffset: '2px', '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-ring-offset-width': '2px', '--tw-ring-offset-color': '#fff', '--tw-ring-color': '#2563eb', '--tw-ring-offset-shadow': 'var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)', '--tw-ring-shadow': 'var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)', boxShadow: 'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)', }, ':checked': { borderColor: 'transparent', backgroundColor: 'currentColor', backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat', backgroundImage: "url(\\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e\\")", }, ':checked:hover,:checked:focus': { borderColor: 'transparent', backgroundColor: 'currentColor', }, }) ;({ appearance: 'none', backgroundColor: '#fff', borderColor: '#6b7280', borderWidth: '1px', borderRadius: '0px', paddingTop: '0.5rem', paddingRight: '2.5rem', paddingBottom: '0.5rem', paddingLeft: '0.75rem', fontSize: '1rem', lineHeight: '1.5rem', '--tw-shadow': '0 0 #0000', ':focus': { outline: '2px solid transparent', outlineOffset: '2px', '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-ring-offset-width': '0px', '--tw-ring-offset-color': '#fff', '--tw-ring-color': '#2563eb', '--tw-ring-offset-shadow': 'var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)', '--tw-ring-shadow': 'var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)', boxShadow: 'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)', borderColor: '#2563eb', }, backgroundImage: "url(\\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e\\")", backgroundPosition: 'right 0.5rem center', backgroundRepeat: 'no-repeat', backgroundSize: '1.5em 1.5em', printColorAdjust: 'exact', }) ;({ appearance: 'none', padding: '0', printColorAdjust: 'exact', display: 'inline-block', verticalAlign: 'middle', backgroundOrigin: 'border-box', userSelect: 'none', flexShrink: '0', height: '1rem', width: '1rem', color: '#2563eb', backgroundColor: '#fff', borderColor: '#6b7280', borderWidth: '1px', '--tw-shadow': '0 0 #0000', borderRadius: '0px', ':focus': { outline: '2px solid transparent', outlineOffset: '2px', '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-ring-offset-width': '2px', '--tw-ring-offset-color': '#fff', '--tw-ring-color': '#2563eb', '--tw-ring-offset-shadow': 'var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)', '--tw-ring-shadow': 'var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)', boxShadow: 'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)', }, ':checked': { borderColor: 'transparent', backgroundColor: 'currentColor', backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat', backgroundImage: "url(\\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e\\")", }, ':checked:hover,:checked:focus': { borderColor: 'transparent', backgroundColor: 'currentColor', }, ':indeterminate': { backgroundImage: "url(\\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e\\")", borderColor: 'transparent', backgroundColor: 'currentColor', backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat', }, ':indeterminate:hover,:indeterminate:focus': { borderColor: 'transparent', backgroundColor: 'currentColor', }, }) ;({ appearance: 'none', backgroundColor: '#fff', borderColor: '#6b7280', borderWidth: '1px', borderRadius: '0px', paddingTop: '0.5rem', paddingRight: '0.75rem', paddingBottom: '0.5rem', paddingLeft: '0.75rem', fontSize: '1rem', lineHeight: '1.5rem', '--tw-shadow': '0 0 #0000', ':focus': { outline: '2px solid transparent', outlineOffset: '2px', '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-ring-offset-width': '0px', '--tw-ring-offset-color': '#fff', '--tw-ring-color': '#2563eb', '--tw-ring-offset-shadow': 'var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)', '--tw-ring-shadow': 'var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)', boxShadow: 'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)', borderColor: '#2563eb', }, '::placeholder': { color: '#6b7280', opacity: '1', }, '::-webkit-datetime-edit-fields-wrapper': { padding: '0', }, '::-webkit-date-and-time-value': { minHeight: '1.5em', }, '::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field': { paddingTop: '0', paddingBottom: '0', }, }) ;({ appearance: 'none', backgroundColor: '#fff', borderColor: '#6b7280', borderWidth: '1px', borderRadius: '0px', paddingTop: '0.5rem', paddingRight: '0.75rem', paddingBottom: '0.5rem', paddingLeft: '0.75rem', fontSize: '1rem', lineHeight: '1.5rem', '--tw-shadow': '0 0 #0000', ':focus': { outline: '2px solid transparent', outlineOffset: '2px', '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-ring-offset-width': '0px', '--tw-ring-offset-color': '#fff', '--tw-ring-color': '#2563eb', '--tw-ring-offset-shadow': 'var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)', '--tw-ring-shadow': 'var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)', boxShadow: 'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)', borderColor: '#2563eb', }, '::placeholder': { color: '#6b7280', opacity: '1', }, }) ;({ appearance: 'none', backgroundColor: '#fff', borderColor: '#6b7280', borderWidth: '1px', borderRadius: '0px', paddingTop: '0.5rem', paddingRight: '0.75rem', paddingBottom: '0.5rem', paddingLeft: '0.75rem', fontSize: '1rem', lineHeight: '1.5rem', '--tw-shadow': '0 0 #0000', ':focus': { outline: '2px solid transparent', outlineOffset: '2px', '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-ring-offset-width': '0px', '--tw-ring-offset-color': '#fff', '--tw-ring-color': '#2563eb', '--tw-ring-offset-shadow': 'var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)', '--tw-ring-shadow': 'var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)', boxShadow: 'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)', borderColor: '#2563eb', }, }) `; exports[`twin.macro pluginTypography.tsx: pluginTypography.tsx 2`] = ` // @ts-nocheck import tw from '../macro' // From @tailwindcss/typography tw\`prose sm:prose-sm lg:prose-lg xl:prose-xl\` // From tailwindcss-typography tw\`rich-text\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // From @tailwindcss/typography ;({ color: 'var(--tw-prose-body)', maxWidth: '65ch', '& :where([class~="lead"]):not(:where([class~="not-prose"] *))': { color: 'var(--tw-prose-lead)', fontSize: '1.25em', lineHeight: '1.6', marginTop: '1.2em', marginBottom: '1.2em', }, '& :where(a):not(:where([class~="not-prose"] *))': { color: 'var(--tw-prose-links)', textDecoration: 'underline', fontWeight: '500', }, '& :where(strong):not(:where([class~="not-prose"] *))': { color: 'var(--tw-prose-bold)', fontWeight: '600', }, '& :where(a strong):not(:where([class~="not-prose"] *))': { color: 'inherit', }, '& :where(blockquote strong):not(:where([class~="not-prose"] *))': { color: 'inherit', }, '& :where(thead th strong):not(:where([class~="not-prose"] *))': { color: 'inherit', }, '& :where(ol):not(:where([class~="not-prose"] *))': { listStyleType: 'decimal', marginTop: '1.25em', marginBottom: '1.25em', paddingLeft: '1.625em', }, '& :where(ol[type="A"]):not(:where([class~="not-prose"] *))': { listStyleType: 'upper-alpha', }, '& :where(ol[type="a"]):not(:where([class~="not-prose"] *))': { listStyleType: 'lower-alpha', }, '& :where(ol[type="A" s]):not(:where([class~="not-prose"] *))': { listStyleType: 'upper-alpha', }, '& :where(ol[type="a" s]):not(:where([class~="not-prose"] *))': { listStyleType: 'lower-alpha', }, '& :where(ol[type="I"]):not(:where([class~="not-prose"] *))': { listStyleType: 'upper-roman', }, '& :where(ol[type="i"]):not(:where([class~="not-prose"] *))': { listStyleType: 'lower-roman', }, '& :where(ol[type="I" s]):not(:where([class~="not-prose"] *))': { listStyleType: 'upper-roman', }, '& :where(ol[type="i" s]):not(:where([class~="not-prose"] *))': { listStyleType: 'lower-roman', }, '& :where(ol[type="1"]):not(:where([class~="not-prose"] *))': { listStyleType: 'decimal', }, '& :where(ul):not(:where([class~="not-prose"] *))': { listStyleType: 'disc', marginTop: '1.25em', marginBottom: '1.25em', paddingLeft: '1.625em', }, '& :where(ol > li):not(:where([class~="not-prose"] *))::marker': { fontWeight: '400', color: 'var(--tw-prose-counters)', }, '& :where(ul > li):not(:where([class~="not-prose"] *))::marker': { color: 'var(--tw-prose-bullets)', }, '& :where(hr):not(:where([class~="not-prose"] *))': { borderColor: 'var(--tw-prose-hr)', borderTopWidth: '1px', marginTop: '3em', marginBottom: '3em', }, '& :where(blockquote):not(:where([class~="not-prose"] *))': { fontWeight: '500', fontStyle: 'italic', color: 'var(--tw-prose-quotes)', borderLeftWidth: '0.25rem', borderLeftColor: 'var(--tw-prose-quote-borders)', quotes: '"\\\\201C""\\\\201D""\\\\2018""\\\\2019"', marginTop: '1.6em', marginBottom: '1.6em', paddingLeft: '1em', }, '& :where(blockquote p:first-of-type):not(:where([class~="not-prose"] *))::before': { content: 'open-quote', }, '& :where(blockquote p:last-of-type):not(:where([class~="not-prose"] *))::after': { content: 'close-quote', }, '& :where(h1):not(:where([class~="not-prose"] *))': { color: 'var(--tw-prose-headings)', fontWeight: '800', fontSize: '2.25em', marginTop: '0', marginBottom: '0.8888889em', lineHeight: '1.1111111', }, '& :where(h1 strong):not(:where([class~="not-prose"] *))': { fontWeight: '900', color: 'inherit', }, '& :where(h2):not(:where([class~="not-prose"] *))': { color: 'var(--tw-prose-headings)', fontWeight: '700', fontSize: '1.5em', marginTop: '2em', marginBottom: '1em', lineHeight: '1.3333333', }, '& :where(h2 strong):not(:where([class~="not-prose"] *))': { fontWeight: '800', color: 'inherit', }, '& :where(h3):not(:where([class~="not-prose"] *))': { color: 'var(--tw-prose-headings)', fontWeight: '600', fontSize: '1.25em', marginTop: '1.6em', marginBottom: '0.6em', lineHeight: '1.6', }, '& :where(h3 strong):not(:where([class~="not-prose"] *))': { fontWeight: '700', color: 'inherit', }, '& :where(h4):not(:where([class~="not-prose"] *))': { color: 'var(--tw-prose-headings)', fontWeight: '600', marginTop: '1.5em', marginBottom: '0.5em', lineHeight: '1.5', }, '& :where(h4 strong):not(:where([class~="not-prose"] *))': { fontWeight: '700', color: 'inherit', }, '& :where(img):not(:where([class~="not-prose"] *))': { marginTop: '2em', marginBottom: '2em', }, '& :where(figure > *):not(:where([class~="not-prose"] *))': { marginTop: '0', marginBottom: '0', }, '& :where(figcaption):not(:where([class~="not-prose"] *))': { color: 'var(--tw-prose-captions)', fontSize: '0.875em', lineHeight: '1.4285714', marginTop: '0.8571429em', }, '& :where(code):not(:where([class~="not-prose"] *))': { color: 'var(--tw-prose-code)', fontWeight: '600', fontSize: '0.875em', }, '& :where(code):not(:where([class~="not-prose"] *))::before': { content: '"\`"', }, '& :where(code):not(:where([class~="not-prose"] *))::after': { content: '"\`"', }, '& :where(a code):not(:where([class~="not-prose"] *))': { color: 'inherit', }, '& :where(h1 code):not(:where([class~="not-prose"] *))': { color: 'inherit', }, '& :where(h2 code):not(:where([class~="not-prose"] *))': { color: 'inherit', fontSize: '0.875em', }, '& :where(h3 code):not(:where([class~="not-prose"] *))': { color: 'inherit', fontSize: '0.9em', }, '& :where(h4 code):not(:where([class~="not-prose"] *))': { color: 'inherit', }, '& :where(blockquote code):not(:where([class~="not-prose"] *))': { color: 'inherit', }, '& :where(thead th code):not(:where([class~="not-prose"] *))': { color: 'inherit', }, '& :where(pre):not(:where([class~="not-prose"] *))': { color: 'var(--tw-prose-pre-code)', backgroundColor: 'var(--tw-prose-pre-bg)', overflowX: 'auto', fontWeight: '400', fontSize: '0.875em', lineHeight: '1.7142857', marginTop: '1.7142857em', marginBottom: '1.7142857em', borderRadius: '0.375rem', paddingTop: '0.8571429em', paddingRight: '1.1428571em', paddingBottom: '0.8571429em', paddingLeft: '1.1428571em', }, '& :where(pre code):not(:where([class~="not-prose"] *))': { backgroundColor: 'transparent', borderWidth: '0', borderRadius: '0', padding: '0', fontWeight: 'inherit', color: 'inherit', fontSize: 'inherit', fontFamily: 'inherit', lineHeight: 'inherit', }, '& :where(pre code):not(:where([class~="not-prose"] *))::before': { content: 'none', }, '& :where(pre code):not(:where([class~="not-prose"] *))::after': { content: 'none', }, '& :where(table):not(:where([class~="not-prose"] *))': { width: '100%', tableLayout: 'auto', textAlign: 'left', marginTop: '2em', marginBottom: '2em', fontSize: '0.875em', lineHeight: '1.7142857', }, '& :where(thead):not(:where([class~="not-prose"] *))': { borderBottomWidth: '1px', borderBottomColor: 'var(--tw-prose-th-borders)', }, '& :where(thead th):not(:where([class~="not-prose"] *))': { color: 'var(--tw-prose-headings)', fontWeight: '600', verticalAlign: 'bottom', paddingRight: '0.5714286em', paddingBottom: '0.5714286em', paddingLeft: '0.5714286em', }, '& :where(tbody tr):not(:where([class~="not-prose"] *))': { borderBottomWidth: '1px', borderBottomColor: 'var(--tw-prose-td-borders)', }, '& :where(tbody tr:last-child):not(:where([class~="not-prose"] *))': { borderBottomWidth: '0', }, '& :where(tbody td):not(:where([class~="not-prose"] *))': { verticalAlign: 'baseline', }, '& :where(tfoot):not(:where([class~="not-prose"] *))': { borderTopWidth: '1px', borderTopColor: 'var(--tw-prose-th-borders)', }, '& :where(tfoot td):not(:where([class~="not-prose"] *))': { verticalAlign: 'top', }, '--tw-prose-body': '#374151', '--tw-prose-headings': '#111827', '--tw-prose-lead': '#4b5563', '--tw-prose-links': '#111827', '--tw-prose-bold': '#111827', '--tw-prose-counters': '#6b7280', '--tw-prose-bullets': '#d1d5db', '--tw-prose-hr': '#e5e7eb', '--tw-prose-quotes': '#111827', '--tw-prose-quote-borders': '#e5e7eb', '--tw-prose-captions': '#6b7280', '--tw-prose-code': '#111827', '--tw-prose-pre-code': '#e5e7eb', '--tw-prose-pre-bg': '#1f2937', '--tw-prose-th-borders': '#d1d5db', '--tw-prose-td-borders': '#e5e7eb', '--tw-prose-invert-body': '#d1d5db', '--tw-prose-invert-headings': '#fff', '--tw-prose-invert-lead': '#9ca3af', '--tw-prose-invert-links': '#fff', '--tw-prose-invert-bold': '#fff', '--tw-prose-invert-counters': '#9ca3af', '--tw-prose-invert-bullets': '#4b5563', '--tw-prose-invert-hr': '#374151', '--tw-prose-invert-quotes': '#f3f4f6', '--tw-prose-invert-quote-borders': '#374151', '--tw-prose-invert-captions': '#9ca3af', '--tw-prose-invert-code': '#fff', '--tw-prose-invert-pre-code': '#d1d5db', '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)', '--tw-prose-invert-th-borders': '#4b5563', '--tw-prose-invert-td-borders': '#374151', fontSize: '1rem', lineHeight: '1.75', '& :where(p):not(:where([class~="not-prose"] *))': { marginTop: '1.25em', marginBottom: '1.25em', }, '& :where(video):not(:where([class~="not-prose"] *))': { marginTop: '2em', marginBottom: '2em', }, '& :where(figure):not(:where([class~="not-prose"] *))': { marginTop: '2em', marginBottom: '2em', }, '& :where(li):not(:where([class~="not-prose"] *))': { marginTop: '0.5em', marginBottom: '0.5em', }, '& :where(ol > li):not(:where([class~="not-prose"] *))': { paddingLeft: '0.375em', }, '& :where(ul > li):not(:where([class~="not-prose"] *))': { paddingLeft: '0.375em', }, '& :where(.prose > ul > li p):not(:where([class~="not-prose"] *))': { marginTop: '0.75em', marginBottom: '0.75em', }, '& :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *))': { marginTop: '1.25em', }, '& :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *))': { marginBottom: '1.25em', }, '& :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *))': { marginTop: '1.25em', }, '& :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *))': { marginBottom: '1.25em', }, '& :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"] *))': { marginTop: '0.75em', marginBottom: '0.75em', }, '& :where(hr + *):not(:where([class~="not-prose"] *))': { marginTop: '0', }, '& :where(h2 + *):not(:where([class~="not-prose"] *))': { marginTop: '0', }, '& :where(h3 + *):not(:where([class~="not-prose"] *))': { marginTop: '0', }, '& :where(h4 + *):not(:where([class~="not-prose"] *))': { marginTop: '0', }, '& :where(thead th:first-child):not(:where([class~="not-prose"] *))': { paddingLeft: '0', }, '& :where(thead th:last-child):not(:where([class~="not-prose"] *))': { paddingRight: '0', }, '& :where(tbody td, tfoot td):not(:where([class~="not-prose"] *))': { paddingTop: '0.5714286em', paddingRight: '0.5714286em', paddingBottom: '0.5714286em', paddingLeft: '0.5714286em', }, '& :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"] *))': { paddingLeft: '0', }, '& :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"] *))': { paddingRight: '0', }, '& :where(.prose > :first-child):not(:where([class~="not-prose"] *))': { marginTop: '0', }, '& :where(.prose > :last-child):not(:where([class~="not-prose"] *))': { marginBottom: '0', }, '.prose-sm :where(& > ul > li p):not(:where([class~="not-prose"] *))': { marginTop: '0.5714286em', marginBottom: '0.5714286em', }, '.prose-sm :where(& > ul > li > *:first-child):not(:where([class~="not-prose"] *))': { marginTop: '1.1428571em', }, '.prose-sm :where(& > ul > li > *:last-child):not(:where([class~="not-prose"] *))': { marginBottom: '1.1428571em', }, '.prose-sm :where(& > ol > li > *:first-child):not(:where([class~="not-prose"] *))': { marginTop: '1.1428571em', }, '.prose-sm :where(& > ol > li > *:last-child):not(:where([class~="not-prose"] *))': { marginBottom: '1.1428571em', }, '.prose-sm :where(& > :first-child):not(:where([class~="not-prose"] *))': { marginTop: '0', }, '.prose-sm :where(& > :last-child):not(:where([class~="not-prose"] *))': { marginBottom: '0', }, '.prose-base :where(& > ul > li p):not(:where([class~="not-prose"] *))': { marginTop: '0.75em', marginBottom: '0.75em', }, '.prose-base :where(& > ul > li > *:first-child):not(:where([class~="not-prose"] *))': { marginTop: '1.25em', }, '.prose-base :where(& > ul > li > *:last-child):not(:where([class~="not-prose"] *))': { marginBottom: '1.25em', }, '.prose-base :where(& > ol > li > *:first-child):not(:where([class~="not-prose"] *))': { marginTop: '1.25em', }, '.prose-base :where(& > ol > li > *:last-child):not(:where([class~="not-prose"] *))': { marginBottom: '1.25em', }, '.prose-base :where(& > :first-child):not(:where([class~="not-prose"] *))': { marginTop: '0', }, '.prose-base :where(& > :last-child):not(:where([class~="not-prose"] *))': { marginBottom: '0', }, '.prose-lg :where(& > ul > li p):not(:where([class~="not-prose"] *))': { marginTop: '0.8888889em', marginBottom: '0.8888889em', }, '.prose-lg :where(& > ul > li > *:first-child):not(:where([class~="not-prose"] *))': { marginTop: '1.3333333em', }, '.prose-lg :where(& > ul > li > *:last-child):not(:where([class~="not-prose"] *))': { marginBottom: '1.3333333em', }, '.prose-lg :where(& > ol > li > *:first-child):not(:where([class~="not-prose"] *))': { marginTop: '1.3333333em', }, '.prose-lg :where(& > ol > li > *:last-child):not(:where([class~="not-prose"] *))': { marginBottom: '1.3333333em', }, '.prose-lg :where(& > :first-child):not(:where([class~="not-prose"] *))': { marginTop: '0', }, '.prose-lg :where(& > :last-child):not(:where([class~="not-prose"] *))': { marginBottom: '0', }, '.prose-xl :where(& > ul > li p):not(:where([class~="not-prose"] *))': { marginTop: '0.8em', marginBottom: '0.8em', }, '.prose-xl :where(& > ul > li > *:first-child):not(:where([class~="not-prose"] *))': { marginTop: '1.2em', }, '.prose-xl :where(& > ul > li > *:last-child):not(:where([class~="not-prose"] *))': { marginBottom: '1.2em', }, '.prose-xl :where(& > ol > li > *:first-child):not(:where([class~="not-prose"] *))': { marginTop: '1.2em', }, '.prose-xl :where(& > ol > li > *:last-child):not(:where([class~="not-prose"] *))': { marginBottom: '1.2em', }, '.prose-xl :where(& > :first-child):not(:where([class~="not-prose"] *))': { marginTop: '0', }, '.prose-xl :where(& > :last-child):not(:where([class~="not-prose"] *))': { marginBottom: '0', }, '.prose-2xl :where(& > ul > li p):not(:where([class~="not-prose"] *))': { marginTop: '0.8333333em', marginBottom: '0.8333333em', }, '.prose-2xl :where(& > ul > li > *:first-child):not(:where([class~="not-prose"] *))': { marginTop: '1.3333333em', }, '.prose-2xl :where(& > ul > li > *:last-child):not(:where([class~="not-prose"] *))': { marginBottom: '1.3333333em', }, '.prose-2xl :where(& > ol > li > *:first-child):not(:where([class~="not-prose"] *))': { marginTop: '1.3333333em', }, '.prose-2xl :where(& > ol > li > *:last-child):not(:where([class~="not-prose"] *))': { marginBottom: '1.3333333em', }, '.prose-2xl :where(& > :first-child):not(:where([class~="not-prose"] *))': { marginTop: '0', }, '.prose-2xl :where(& > :last-child):not(:where([class~="not-prose"] *))': { marginBottom: '0', }, '@media (min-width: 640px)': { fontSize: '0.875rem', lineHeight: '1.7142857', '& :where(p):not(:where([class~="not-prose"] *))': { marginTop: '1.1428571em', marginBottom: '1.1428571em', }, '& :where([class~="lead"]):not(:where([class~="not-prose"] *))': { fontSize: '1.2857143em', lineHeight: '1.5555556', marginTop: '0.8888889em', marginBottom: '0.8888889em', }, '& :where(blockquote):not(:where([class~="not-prose"] *))': { marginTop: '1.3333333em', marginBottom: '1.3333333em', paddingLeft: '1.1111111em', }, '& :where(h1):not(:where([class~="not-prose"] *))': { fontSize: '2.1428571em', marginTop: '0', marginBottom: '0.8em', lineHeight: '1.2', }, '& :where(h2):not(:where([class~="not-prose"] *))': { fontSize: '1.4285714em', marginTop: '1.6em', marginBottom: '0.8em', lineHeight: '1.4', }, '& :where(h3):not(:where([class~="not-prose"] *))': { fontSize: '1.2857143em', marginTop: '1.5555556em', marginBottom: '0.4444444em', lineHeight: '1.5555556', }, '& :where(h4):not(:where([class~="not-prose"] *))': { marginTop: '1.4285714em', marginBottom: '0.5714286em', lineHeight: '1.4285714', }, '& :where(img):not(:where([class~="not-prose"] *))': { marginTop: '1.7142857em', marginBottom: '1.7142857em', }, '& :where(video):not(:where([class~="not-prose"] *))': { marginTop: '1.7142857em', marginBottom: '1.7142857em', }, '& :where(figure):not(:where([class~="not-prose"] *))': { marginTop: '1.7142857em', marginBottom: '1.7142857em', }, '& :where(figure > *):not(:where([class~="not-prose"] *))': { marginTop: '0', marginBottom: '0', }, '& :where(figcaption):not(:where([class~="not-prose"] *))': { fontSize: '0.8571429em', lineHeight: '1.3333333', marginTop: '0.6666667em', }, '& :where(code):not(:where([class~="not-prose"] *))': { fontSize: '0.8571429em', }, '& :where(h2 code):not(:where([class~="not-prose"] *))': { fontSize: '0.9em', }, '& :where(h3 code):not(:where([class~="not-prose"] *))': { fontSize: '0.8888889em', }, '& :where(pre):not(:where([class~="not-prose"] *))': { fontSize: '0.8571429em', lineHeight: '1.6666667', marginTop: '1.6666667em', marginBottom: '1.6666667em', borderRadius: '0.25rem', paddingTop: '0.6666667em', paddingRight: '1em', paddingBottom: '0.6666667em', paddingLeft: '1em', }, '& :where(ol):not(:where([class~="not-prose"] *))': { marginTop: '1.1428571em', marginBottom: '1.1428571em', paddingLeft: '1.5714286em', }, '& :where(ul):not(:where([class~="not-prose"] *))': { marginTop: '1.1428571em', marginBottom: '1.1428571em', paddingLeft: '1.5714286em', }, '& :where(li):not(:where([class~="not-prose"] *))': { marginTop: '0.2857143em', marginBottom: '0.2857143em', }, '& :where(ol > li):not(:where([class~="not-prose"] *))': { paddingLeft: '0.4285714em', }, '& :where(ul > li):not(:where([class~="not-prose"] *))': { paddingLeft: '0.4285714em', }, '& :where(.prose > ul > li p):not(:where([class~="not-prose"] *))': { marginTop: '0.5714286em', marginBottom: '0.5714286em', }, '& :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *))': { marginTop: '1.1428571em', }, '& :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *))': { marginBottom: '1.1428571em', }, '& :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *))': { marginTop: '1.1428571em', }, '& :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *))': { marginBottom: '1.1428571em', }, '& :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"] *))': { marginTop: '0.5714286em', marginBottom: '0.5714286em', }, '& :where(hr):not(:where([class~="not-prose"] *))': { marginTop: '2.8571429em', marginBottom: '2.8571429em', }, '& :where(hr + *):not(:where([class~="not-prose"] *))': { marginTop: '0', }, '& :where(h2 + *):not(:where([class~="not-prose"] *))': { marginTop: '0', }, '& :where(h3 + *):not(:where([class~="not-prose"] *))': { marginTop: '0', }, '& :where(h4 + *):not(:where([class~="not-prose"] *))': { marginTop: '0', }, '& :where(table):not(:where([class~="not-prose"] *))': { fontSize: '0.8571429em', lineHeight: '1.5', }, '& :where(thead th):not(:where([class~="not-prose"] *))': { paddingRight: '1em', paddingBottom: '0.6666667em', paddingLeft: '1em', }, '& :where(thead th:first-child):not(:where([class~="not-prose"] *))': { paddingLeft: '0', }, '& :where(thead th:last-child):not(:where([class~="not-prose"] *))': { paddingRight: '0', }, '& :where(tbody td, tfoot td):not(:where([class~="not-prose"] *))': { paddingTop: '0.6666667em', paddingRight: '1em', paddingBottom: '0.6666667em', paddingLeft: '1em', }, '& :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"] *))': { paddingLeft: '0', }, '& :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"] *))': { paddingRight: '0', }, '& :where(.prose > :first-child):not(:where([class~="not-prose"] *))': { marginTop: '0', }, '& :where(.prose > :last-child):not(:where([class~="not-prose"] *))': { marginBottom: '0', }, }, '@media (min-width: 1024px)': { fontSize: '1.125rem', lineHeight: '1.7777778', '& :where(p):not(:where([class~="not-prose"] *))': { marginTop: '1.3333333em', marginBottom: '1.3333333em', }, '& :where([class~="lead"]):not(:where([class~="not-prose"] *))': { fontSize: '1.2222222em', lineHeight: '1.4545455', marginTop: '1.0909091em', marginBottom: '1.0909091em', }, '& :where(blockquote):not(:where([class~="not-prose"] *))': { marginTop: '1.6666667em', marginBottom: '1.6666667em', paddingLeft: '1em', }, '& :where(h1):not(:where([class~="not-prose"] *))': { fontSize: '2.6666667em', marginTop: '0', marginBottom: '0.8333333em', lineHeight: '1', }, '& :where(h2):not(:where([class~="not-prose"] *))': { fontSize: '1.6666667em', marginTop: '1.8666667em', marginBottom: '1.0666667em', lineHeight: '1.3333333', }, '& :where(h3):not(:where([class~="not-prose"] *))': { fontSize: '1.3333333em', marginTop: '1.6666667em', marginBottom: '0.6666667em', lineHeight: '1.5', }, '& :where(h4):not(:where([class~="not-prose"] *))': { marginTop: '1.7777778em', marginBottom: '0.4444444em', lineHeight: '1.5555556', }, '& :where(img):not(:where([class~="not-prose"] *))': { marginTop: '1.7777778em', marginBottom: '1.7777778em', }, '& :where(video):not(:where([class~="not-prose"] *))': { marginTop: '1.7777778em', marginBottom: '1.7777778em', }, '& :where(figure):not(:where([class~="not-prose"] *))': { marginTop: '1.7777778em', marginBottom: '1.7777778em', }, '& :where(figure > *):not(:where([class~="not-prose"] *))': { marginTop: '0', marginBottom: '0', }, '& :where(figcaption):not(:where([class~="not-prose"] *))': { fontSize: '0.8888889em', lineHeight: '1.5', marginTop: '1em', }, '& :where(code):not(:where([class~="not-prose"] *))': { fontSize: '0.8888889em', }, '& :where(h2 code):not(:where([class~="not-prose"] *))': { fontSize: '0.8666667em', }, '& :where(h3 code):not(:where([class~="not-prose"] *))': { fontSize: '0.875em', }, '& :where(pre):not(:where([class~="not-prose"] *))': { fontSize: '0.8888889em', lineHeight: '1.75', marginTop: '2em', marginBottom: '2em', borderRadius: '0.375rem', paddingTop: '1em', paddingRight: '1.5em', paddingBottom: '1em', paddingLeft: '1.5em', }, '& :where(ol):not(:where([class~="not-prose"] *))': { marginTop: '1.3333333em', marginBottom: '1.3333333em', paddingLeft: '1.5555556em', }, '& :where(ul):not(:where([class~="not-prose"] *))': { marginTop: '1.3333333em', marginBottom: '1.3333333em', paddingLeft: '1.5555556em', }, '& :where(li):not(:where([class~="not-prose"] *))': { marginTop: '0.6666667em', marginBottom: '0.6666667em', }, '& :where(ol > li):not(:where([class~="not-prose"] *))': { paddingLeft: '0.4444444em', }, '& :where(ul > li):not(:where([class~="not-prose"] *))': { paddingLeft: '0.4444444em', }, '& :where(.prose > ul > li p):not(:where([class~="not-prose"] *))': { marginTop: '0.8888889em', marginBottom: '0.8888889em', }, '& :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *))': { marginTop: '1.3333333em', }, '& :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *))': { marginBottom: '1.3333333em', }, '& :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *))': { marginTop: '1.3333333em', }, '& :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *))': { marginBottom: '1.3333333em', }, '& :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"] *))': { marginTop: '0.8888889em', marginBottom: '0.8888889em', }, '& :where(hr):not(:where([class~="not-prose"] *))': { marginTop: '3.1111111em', marginBottom: '3.1111111em', }, '& :where(hr + *):not(:where([class~="not-prose"] *))': { marginTop: '0', }, '& :where(h2 + *):not(:where([class~="not-prose"] *))': { marginTop: '0', }, '& :where(h3 + *):not(:where([class~="not-prose"] *))': { marginTop: '0', }, '& :where(h4 + *):not(:where([class~="not-prose"] *))': { marginTop: '0', }, '& :where(table):not(:where([class~="not-prose"] *))': { fontSize: '0.8888889em', lineHeight: '1.5', }, '& :where(thead th):not(:where([class~="not-prose"] *))': { paddingRight: '0.75em', paddingBottom: '0.75em', paddingLeft: '0.75em', }, '& :where(thead th:first-child):not(:where([class~="not-prose"] *))': { paddingLeft: '0', }, '& :where(thead th:last-child):not(:where([class~="not-prose"] *))': { paddingRight: '0', }, '& :where(tbody td, tfoot td):not(:where([class~="not-prose"] *))': { paddingTop: '0.75em', paddingRight: '0.75em', paddingBottom: '0.75em', paddingLeft: '0.75em', }, '& :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"] *))': { paddingLeft: '0', }, '& :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"] *))': { paddingRight: '0', }, '& :where(.prose > :first-child):not(:where([class~="not-prose"] *))': { marginTop: '0', }, '& :where(.prose > :last-child):not(:where([class~="not-prose"] *))': { marginBottom: '0', }, }, '@media (min-width: 1280px)': { fontSize: '1.25rem', lineHeight: '1.8', '& :where(p):not(:where([class~="not-prose"] *))': { marginTop: '1.2em', marginBottom: '1.2em', }, '& :where([class~="lead"]):not(:where([class~="not-prose"] *))': { fontSize: '1.2em', lineHeight: '1.5', marginTop: '1em', marginBottom: '1em', }, '& :where(blockquote):not(:where([class~="not-prose"] *))': { marginTop: '1.6em', marginBottom: '1.6em', paddingLeft: '1.0666667em', }, '& :where(h1):not(:where([class~="not-prose"] *))': { fontSize: '2.8em', marginTop: '0', marginBottom: '0.8571429em', lineHeight: '1', }, '& :where(h2):not(:where([class~="not-prose"] *))': { fontSize: '1.8em', marginTop: '1.5555556em', marginBottom: '0.8888889em', lineHeight: '1.1111111', }, '& :where(h3):not(:where([class~="not-prose"] *))': { fontSize: '1.5em', marginTop: '1.6em', marginBottom: '0.6666667em', lineHeight: '1.3333333', }, '& :where(h4):not(:where([class~="not-prose"] *))': { marginTop: '1.8em', marginBottom: '0.6em', lineHeight: '1.6', }, '& :where(img):not(:where([class~="not-prose"] *))': { marginTop: '2em', marginBottom: '2em', }, '& :where(video):not(:where([class~="not-prose"] *))': { marginTop: '2em', marginBottom: '2em', }, '& :where(figure):not(:where([class~="not-prose"] *))': { marginTop: '2em', marginBottom: '2em', }, '& :where(figure > *):not(:where([class~="not-prose"] *))': { marginTop: '0', marginBottom: '0', }, '& :where(figcaption):not(:where([class~="not-prose"] *))': { fontSize: '0.9em', lineHeight: '1.5555556', marginTop: '1em', }, '& :where(code):not(:where([class~="not-prose"] *))': { fontSize: '0.9em', }, '& :where(h2 code):not(:where([class~="not-prose"] *))': { fontSize: '0.8611111em', }, '& :where(h3 code):not(:where([class~="not-prose"] *))': { fontSize: '0.9em', }, '& :where(pre):not(:where([class~="not-prose"] *))': { fontSize: '0.9em', lineHeight: '1.7777778', marginTop: '2em', marginBottom: '2em', borderRadius: '0.5rem', paddingTop: '1.1111111em', paddingRight: '1.3333333em', paddingBottom: '1.1111111em', paddingLeft: '1.3333333em', }, '& :where(ol):not(:where([class~="not-prose"] *))': { marginTop: '1.2em', marginBottom: '1.2em', paddingLeft: '1.6em', }, '& :where(ul):not(:where([class~="not-prose"] *))': { marginTop: '1.2em', marginBottom: '1.2em', paddingLeft: '1.6em', }, '& :where(li):not(:where([class~="not-prose"] *))': { marginTop: '0.6em', marginBottom: '0.6em', }, '& :where(ol > li):not(:where([class~="not-prose"] *))': { paddingLeft: '0.4em', }, '& :where(ul > li):not(:where([class~="not-prose"] *))': { paddingLeft: '0.4em', }, '& :where(.prose > ul > li p):not(:where([class~="not-prose"] *))': { marginTop: '0.8em', marginBottom: '0.8em', }, '& :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *))': { marginTop: '1.2em', }, '& :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *))': { marginBottom: '1.2em', }, '& :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *))': { marginTop: '1.2em', }, '& :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *))': { marginBottom: '1.2em', }, '& :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"] *))': { marginTop: '0.8em', marginBottom: '0.8em', }, '& :where(hr):not(:where([class~="not-prose"] *))': { marginTop: '2.8em', marginBottom: '2.8em', }, '& :where(hr + *):not(:where([class~="not-prose"] *))': { marginTop: '0', }, '& :where(h2 + *):not(:where([class~="not-prose"] *))': { marginTop: '0', }, '& :where(h3 + *):not(:where([class~="not-prose"] *))': { marginTop: '0', }, '& :where(h4 + *):not(:where([class~="not-prose"] *))': { marginTop: '0', }, '& :where(table):not(:where([class~="not-prose"] *))': { fontSize: '0.9em', lineHeight: '1.5555556', }, '& :where(thead th):not(:where([class~="not-prose"] *))': { paddingRight: '0.6666667em', paddingBottom: '0.8888889em', paddingLeft: '0.6666667em', }, '& :where(thead th:first-child):not(:where([class~="not-prose"] *))': { paddingLeft: '0', }, '& :where(thead th:last-child):not(:where([class~="not-prose"] *))': { paddingRight: '0', }, '& :where(tbody td, tfoot td):not(:where([class~="not-prose"] *))': { paddingTop: '0.8888889em', paddingRight: '0.6666667em', paddingBottom: '0.8888889em', paddingLeft: '0.6666667em', }, '& :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"] *))': { paddingLeft: '0', }, '& :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"] *))': { paddingRight: '0', }, '& :where(.prose > :first-child):not(:where([class~="not-prose"] *))': { marginTop: '0', }, '& :where(.prose > :last-child):not(:where([class~="not-prose"] *))': { marginBottom: '0', }, }, }) // From tailwindcss-typography ;({ fontWeight: '400', fontSize: '1rem', lineHeight: '1.625', '> * + *': { marginTop: '1em', }, '& h1': { fontWeight: '700', fontSize: '3rem', }, '& h1 lineHeight': { lineHeight: '1', }, '@media (min-width: 640px)': { '& h1': { fontSize: '3.75rem', }, '& h1 lineHeight': { lineHeight: '1', }, }, '& a': { fontWeight: '700', color: '#60a5fa', }, '& a:hover,& a:focus': { color: '#2563eb', textDecoration: 'underline', }, '& a:active': { color: '#ea580c', }, '& b,& strong': { fontWeight: '700', }, '& i,& em': { fontStyle: 'italic', }, }) `; exports[`twin.macro pluginUserParentSelector.tsx: pluginUserParentSelector.tsx 1`] = ` // @ts-nocheck import tw from '../macro' tw\`my-class1\` tw\`my-class2\` tw\`my-class3\` tw\`my-class4\` tw\`my-class5\` tw\`my-class6\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck ;({ backgroundColor: 'black', '& h2': { backgroundColor: 'red', }, }) ;({ backgroundColor: 'green', 'h2 &': { backgroundColor: 'yellow', }, }) ;({ backgroundColor: 'green', '.dark &:hover': { backgroundColor: 'yellow', }, }) ;({ '.test & :hover': { backgroundColor: 'orange', }, }) ;({ backgroundColor: 'brown', ':hover': { backgroundColor: 'pink', }, }) ;({ backgroundColor: 'blue', '& :hover': { backgroundColor: 'orange', }, }) `; exports[`twin.macro plugins.tsx: plugins.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // Tailwind plugin tests tw\`type-sm\` const addUtilitiesTest = tw\`type-sm text-red-500 lg:type-sm md:type-sm!\` const addUtilitiesTest2 = tw\`skew-15deg\` const addUtilitiesTest2Important = tw\`skew-15deg! type-sm!\` const addUtilitiesTest2Media = tw\`sm:skew-15deg lg:type-sm\` const addUtilitiesTest2Variants = tw\`hover:active:skew-15deg even:visited:skew-15deg\` const addComponentsTest = tw\`btn btn-blue btn-red\` const addComponentsTestMedia = tw\`xl:btn sm:btn-blue lg:btn-red\` const addComponentsTestVariants = tw\`hover:active:btn hocus:before:btn-blue even:visited:btn-red\` const addComponentsTestElementPrefixes = tw\`prefixes\` const addComponentsTestElementScreenReplacements = tw\`screenies\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // Tailwind plugin tests ;({ fontSize: '0.875rem', fontWeight: '500', lineHeight: '1.25', }) const addUtilitiesTest = { '--tw-text-opacity': '1', color: 'rgb(239 68 68 / var(--tw-text-opacity))', fontSize: '0.875rem', fontWeight: '500', lineHeight: '1.25', '@media (min-width: 768px)': { fontSize: '0.875rem !important', fontWeight: '500 !important', lineHeight: '1.25 !important', }, '@media (min-width: 1024px)': { fontSize: '0.875rem', fontWeight: '500', lineHeight: '1.25', }, } const addUtilitiesTest2 = { transform: 'skewY(-15deg)', } const addUtilitiesTest2Important = { fontSize: '0.875rem !important', fontWeight: '500 !important', lineHeight: '1.25 !important', transform: 'skewY(-15deg) !important', } const addUtilitiesTest2Media = { '@media (min-width: 640px)': { transform: 'skewY(-15deg)', }, '@media (min-width: 1024px)': { fontSize: '0.875rem', fontWeight: '500', lineHeight: '1.25', }, } const addUtilitiesTest2Variants = { ':nth-child(even):visited': { transform: 'skewY(-15deg)', }, ':hover:active': { transform: 'skewY(-15deg)', }, } const addComponentsTest = { padding: '.5rem 1rem', borderRadius: '.25rem', fontWeight: '600', backgroundColor: '#e3342f', color: '#fff', ':hover': { backgroundColor: '#cc1f1a', }, } const addComponentsTestMedia = { '@media (min-width: 640px)': { backgroundColor: '#3490dc', color: '#fff', ':hover': { backgroundColor: '#2779bd', }, }, '@media (min-width: 1024px)': { backgroundColor: '#e3342f', color: '#fff', ':hover': { backgroundColor: '#cc1f1a', }, }, '@media (min-width: 1280px)': { padding: '.5rem 1rem', borderRadius: '.25rem', fontWeight: '600', }, } const addComponentsTestVariants = { ':nth-child(even):visited': { backgroundColor: '#e3342f', color: '#fff', }, ':nth-child(even):visited:hover': { backgroundColor: '#cc1f1a', }, ':hover:active': { padding: '.5rem 1rem', borderRadius: '.25rem', fontWeight: '600', }, ':hover::before': { content: 'var(--tw-content)', backgroundColor: '#3490dc', color: '#fff', }, ':focus::before': { content: 'var(--tw-content)', backgroundColor: '#3490dc', color: '#fff', }, ':hover:hover::before': { content: 'var(--tw-content)', backgroundColor: '#2779bd', }, ':focus:hover::before': { content: 'var(--tw-content)', backgroundColor: '#2779bd', }, } const addComponentsTestElementPrefixes = { '& h1': { margin: 'auto', marginRight: '10px', }, '& h2:hover': { color: 'red', }, '& h3:hover,& h3:active': { color: 'green', }, '& :focus': { display: 'none', }, } const addComponentsTestElementScreenReplacements = { '@media (min-width: 640px)': { display: 'block', }, '@media (min-width: 1024px)': { display: 'inline-block', }, '@media (min-width: 768px)': { display: 'flex', }, '@media (min-width: 1280px)': { '& h1': { marginTop: '50px', }, '& h1:hover,& h1:focus': { color: 'blue', }, }, } `; exports[`twin.macro pointerEvents.tsx: pointerEvents.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/pointer-events tw\`pointer-events-none\` tw\`pointer-events-auto\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/pointer-events ;({ pointerEvents: 'none', }) ;({ pointerEvents: 'auto', }) `; exports[`twin.macro position.tsx: position.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/position tw\`static\` tw\`fixed\` tw\`absolute\` tw\`relative\` tw\`sticky\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/position ;({ position: 'static', }) ;({ position: 'fixed', }) ;({ position: 'absolute', }) ;({ position: 'relative', }) ;({ position: 'sticky', }) `; exports[`twin.macro prefix.tsx: prefix.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // tw prop prefix ;
// tw import prefix ;
// tw prop + import prefix ;
// tw import + short css ;
// tw import + arbitrary property ;
// className should be ignored without the prefix ;
// className should be converted with a prefix ;
// group ;
;
;
;
;
;
// custom plugin classes ;
;
;
↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck ;
// tw import prefix ;
// tw prop + import prefix ;
// tw import + short css ;
// tw import + arbitrary property ;
// className should be ignored without the prefix ;
// className should be converted with a prefix ;
// group ;
;
;
;
;
;
// custom plugin classes ;
;
*': { margin: '20px', }, }} data-tw="tw-test-1" /> ;
*': { margin: '20px', }, }} data-tw="tw-test-2" /> `; exports[`twin.macro preflight.tsx: preflight.tsx 1`] = ` // @ts-nocheck import { globalStyles } from '../macro' globalStyles ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck ;({ '*, ::before, ::after': { '--tw-border-spacing-x': '0', '--tw-border-spacing-y': '0', '--tw-translate-x': '0', '--tw-translate-y': '0', '--tw-rotate': '0', '--tw-skew-x': '0', '--tw-skew-y': '0', '--tw-scale-x': '1', '--tw-scale-y': '1', '--tw-pan-x': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-pan-y': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-pinch-zoom': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-scroll-snap-strictness': 'proximity', '--tw-ordinal': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-slashed-zero': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-numeric-figure': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-numeric-spacing': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-numeric-fraction': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-ring-offset-shadow': '0 0 #0000', '--tw-ring-shadow': '0 0 #0000', '--tw-shadow': '0 0 #0000', '--tw-shadow-colored': '0 0 #0000', '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-ring-offset-width': '0px', '--tw-ring-offset-color': '#fff', '--tw-ring-color': 'rgb(59 130 246 / 0.5)', '--tw-blur': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-brightness': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-contrast': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-grayscale': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-invert': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-saturate': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-sepia': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-drop-shadow': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-blur': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-brightness': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-contrast': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-grayscale': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-invert': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-opacity': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-saturate': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-sepia': 'var(--tw-empty,/*!*/ /*!*/)', }, '::backdrop': { '--tw-border-spacing-x': '0', '--tw-border-spacing-y': '0', '--tw-translate-x': '0', '--tw-translate-y': '0', '--tw-rotate': '0', '--tw-skew-x': '0', '--tw-skew-y': '0', '--tw-scale-x': '1', '--tw-scale-y': '1', '--tw-pan-x': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-pan-y': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-pinch-zoom': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-scroll-snap-strictness': 'proximity', '--tw-ordinal': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-slashed-zero': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-numeric-figure': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-numeric-spacing': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-numeric-fraction': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-ring-offset-shadow': '0 0 #0000', '--tw-ring-shadow': '0 0 #0000', '--tw-shadow': '0 0 #0000', '--tw-shadow-colored': '0 0 #0000', '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-ring-offset-width': '0px', '--tw-ring-offset-color': '#fff', '--tw-ring-color': 'rgb(59 130 246 / 0.5)', '--tw-blur': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-brightness': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-contrast': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-grayscale': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-invert': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-saturate': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-sepia': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-drop-shadow': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-blur': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-brightness': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-contrast': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-grayscale': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-invert': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-opacity': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-saturate': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-sepia': 'var(--tw-empty,/*!*/ /*!*/)', }, }) `; exports[`twin.macro presets.tsx: presets.tsx 1`] = ` // @ts-nocheck import tw from '../macro' tw\`text-badass\` tw\`text-banana\` tw\`text-hamburger\` tw\`active:text-white\` tw\`hocus:text-black\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck ;({ '--tw-text-opacity': '1', color: 'rgb(186 218 85 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(255 255 0 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(165 42 42 / var(--tw-text-opacity))', }) ;({ ':active': { '--tw-text-opacity': '1', color: 'rgb(255 255 255 / var(--tw-text-opacity))', }, }) ;({ ':hover': { '--tw-text-opacity': '1', color: 'rgb(0 0 0 / var(--tw-text-opacity))', }, ':focus': { '--tw-text-opacity': '1', color: 'rgb(0 0 0 / var(--tw-text-opacity))', }, }) `; exports[`twin.macro resize.tsx: resize.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/resize tw\`resize-none\` tw\`resize-y\` tw\`resize-x\` tw\`resize\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/resize ;({ resize: 'none', }) ;({ resize: 'vertical', }) ;({ resize: 'horizontal', }) ;({ resize: 'both', }) `; exports[`twin.macro ringColor.tsx: ringColor.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/ring-color theme\`ringColor.\` tw\`ring-inherit\` tw\`ring-current\` tw\`ring-transparent\` tw\`ring-black\` tw\`ring-white\` tw\`ring-slate-50\` tw\`ring-slate-100\` tw\`ring-slate-200\` tw\`ring-slate-300\` tw\`ring-slate-400\` tw\`ring-slate-500\` tw\`ring-slate-600\` tw\`ring-slate-700\` tw\`ring-slate-800\` tw\`ring-slate-900\` tw\`ring-gray-50\` tw\`ring-gray-100\` tw\`ring-gray-200\` tw\`ring-gray-300\` tw\`ring-gray-400\` tw\`ring-gray-500\` tw\`ring-gray-600\` tw\`ring-gray-700\` tw\`ring-gray-800\` tw\`ring-gray-900\` tw\`ring-zinc-50\` tw\`ring-zinc-100\` tw\`ring-zinc-200\` tw\`ring-zinc-300\` tw\`ring-zinc-400\` tw\`ring-zinc-500\` tw\`ring-zinc-600\` tw\`ring-zinc-700\` tw\`ring-zinc-800\` tw\`ring-zinc-900\` tw\`ring-neutral-50\` tw\`ring-neutral-100\` tw\`ring-neutral-200\` tw\`ring-neutral-300\` tw\`ring-neutral-400\` tw\`ring-neutral-500\` tw\`ring-neutral-600\` tw\`ring-neutral-700\` tw\`ring-neutral-800\` tw\`ring-neutral-900\` tw\`ring-stone-50\` tw\`ring-stone-100\` tw\`ring-stone-200\` tw\`ring-stone-300\` tw\`ring-stone-400\` tw\`ring-stone-500\` tw\`ring-stone-600\` tw\`ring-stone-700\` tw\`ring-stone-800\` tw\`ring-stone-900\` tw\`ring-red-50\` tw\`ring-red-100\` tw\`ring-red-200\` tw\`ring-red-300\` tw\`ring-red-400\` tw\`ring-red-500\` tw\`ring-red-600\` tw\`ring-red-700\` tw\`ring-red-800\` tw\`ring-red-900\` tw\`ring-orange-50\` tw\`ring-orange-100\` tw\`ring-orange-200\` tw\`ring-orange-300\` tw\`ring-orange-400\` tw\`ring-orange-500\` tw\`ring-orange-600\` tw\`ring-orange-700\` tw\`ring-orange-800\` tw\`ring-orange-900\` tw\`ring-amber-50\` tw\`ring-amber-100\` tw\`ring-amber-200\` tw\`ring-amber-300\` tw\`ring-amber-400\` tw\`ring-amber-500\` tw\`ring-amber-600\` tw\`ring-amber-700\` tw\`ring-amber-800\` tw\`ring-amber-900\` tw\`ring-yellow-50\` tw\`ring-yellow-100\` tw\`ring-yellow-200\` tw\`ring-yellow-300\` tw\`ring-yellow-400\` tw\`ring-yellow-500\` tw\`ring-yellow-600\` tw\`ring-yellow-700\` tw\`ring-yellow-800\` tw\`ring-yellow-900\` tw\`ring-lime-50\` tw\`ring-lime-100\` tw\`ring-lime-200\` tw\`ring-lime-300\` tw\`ring-lime-400\` tw\`ring-lime-500\` tw\`ring-lime-600\` tw\`ring-lime-700\` tw\`ring-lime-800\` tw\`ring-lime-900\` tw\`ring-green-50\` tw\`ring-green-100\` tw\`ring-green-200\` tw\`ring-green-300\` tw\`ring-green-400\` tw\`ring-green-500\` tw\`ring-green-600\` tw\`ring-green-700\` tw\`ring-green-800\` tw\`ring-green-900\` tw\`ring-emerald-50\` tw\`ring-emerald-100\` tw\`ring-emerald-200\` tw\`ring-emerald-300\` tw\`ring-emerald-400\` tw\`ring-emerald-500\` tw\`ring-emerald-600\` tw\`ring-emerald-700\` tw\`ring-emerald-800\` tw\`ring-emerald-900\` tw\`ring-teal-50\` tw\`ring-teal-100\` tw\`ring-teal-200\` tw\`ring-teal-300\` tw\`ring-teal-400\` tw\`ring-teal-500\` tw\`ring-teal-600\` tw\`ring-teal-700\` tw\`ring-teal-800\` tw\`ring-teal-900\` tw\`ring-cyan-50\` tw\`ring-cyan-100\` tw\`ring-cyan-200\` tw\`ring-cyan-300\` tw\`ring-cyan-400\` tw\`ring-cyan-500\` tw\`ring-cyan-600\` tw\`ring-cyan-700\` tw\`ring-cyan-800\` tw\`ring-cyan-900\` tw\`ring-sky-50\` tw\`ring-sky-100\` tw\`ring-sky-200\` tw\`ring-sky-300\` tw\`ring-sky-400\` tw\`ring-sky-500\` tw\`ring-sky-600\` tw\`ring-sky-700\` tw\`ring-sky-800\` tw\`ring-sky-900\` tw\`ring-blue-50\` tw\`ring-blue-100\` tw\`ring-blue-200\` tw\`ring-blue-300\` tw\`ring-blue-400\` tw\`ring-blue-500\` tw\`ring-blue-600\` tw\`ring-blue-700\` tw\`ring-blue-800\` tw\`ring-blue-900\` tw\`ring-indigo-50\` tw\`ring-indigo-100\` tw\`ring-indigo-200\` tw\`ring-indigo-300\` tw\`ring-indigo-400\` tw\`ring-indigo-500\` tw\`ring-indigo-600\` tw\`ring-indigo-700\` tw\`ring-indigo-800\` tw\`ring-indigo-900\` tw\`ring-violet-50\` tw\`ring-violet-100\` tw\`ring-violet-200\` tw\`ring-violet-300\` tw\`ring-violet-400\` tw\`ring-violet-500\` tw\`ring-violet-600\` tw\`ring-violet-700\` tw\`ring-violet-800\` tw\`ring-violet-900\` tw\`ring-purple-50\` tw\`ring-purple-100\` tw\`ring-purple-200\` tw\`ring-purple-300\` tw\`ring-purple-400\` tw\`ring-purple-500\` tw\`ring-purple-600\` tw\`ring-purple-700\` tw\`ring-purple-800\` tw\`ring-purple-900\` tw\`ring-fuchsia-50\` tw\`ring-fuchsia-100\` tw\`ring-fuchsia-200\` tw\`ring-fuchsia-300\` tw\`ring-fuchsia-400\` tw\`ring-fuchsia-500\` tw\`ring-fuchsia-600\` tw\`ring-fuchsia-700\` tw\`ring-fuchsia-800\` tw\`ring-fuchsia-900\` tw\`ring-pink-50\` tw\`ring-pink-100\` tw\`ring-pink-200\` tw\`ring-pink-300\` tw\`ring-pink-400\` tw\`ring-pink-500\` tw\`ring-pink-600\` tw\`ring-pink-700\` tw\`ring-pink-800\` tw\`ring-pink-900\` tw\`ring-rose-50\` tw\`ring-rose-100\` tw\`ring-rose-200\` tw\`ring-rose-300\` tw\`ring-rose-400\` tw\`ring-rose-500\` tw\`ring-rose-600\` tw\`ring-rose-700\` tw\`ring-rose-800\` tw\`ring-rose-900\` tw\`ring-blue-500/50\` tw\`ring-blue-500/[.55]\` tw\`ring-[#50d71e]\` tw\`ring-red-500\` tw\`ring-red-500/25\` tw\`ring-red-500/fromConfig\` tw\`ring-red-500/fromConfig/25\` tw\`ring-red-500/fromConfig/[.555]\` tw\`ring-red-500/fromConfig/[var(--myvar)]\` tw\`ring-red-500/[.555]\` tw\`ring-red-500/[var(--myvar)]\` tw\`ring-[theme('colors.red.500')]\` tw\`ring-[theme('colors.red.500')]/20\` tw\`ring-electric\` tw\`ring-electric/25\` tw\`ring-electric/[.555]\` tw\`ring-electric/[var(--myvar)]\` tw\`ring-[theme('colors.electric')]\` tw\`ring-[theme('colors.electric')]/20\` tw\`ring-[color:green]\` tw\`ring-[color:rgba(255, 255, 255, .45)]\` tw\`ring-[length:10px]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/ring-color ;({ DEFAULT: '#3b82f6', inherit: 'inherit', current: 'currentColor', transparent: 'transparent', black: '#000', white: '#fff', slate: { 50: '#f8fafc', 100: '#f1f5f9', 200: '#e2e8f0', 300: '#cbd5e1', 400: '#94a3b8', 500: '#64748b', 600: '#475569', 700: '#334155', 800: '#1e293b', 900: '#0f172a', 950: '#020617', }, gray: { 50: '#f9fafb', 100: '#f3f4f6', 200: '#e5e7eb', 300: '#d1d5db', 400: '#9ca3af', 500: '#6b7280', 600: '#4b5563', 700: '#374151', 800: '#1f2937', 900: '#111827', 950: '#030712', }, zinc: { 50: '#fafafa', 100: '#f4f4f5', 200: '#e4e4e7', 300: '#d4d4d8', 400: '#a1a1aa', 500: '#71717a', 600: '#52525b', 700: '#3f3f46', 800: '#27272a', 900: '#18181b', 950: '#09090b', }, neutral: { 50: '#fafafa', 100: '#f5f5f5', 200: '#e5e5e5', 300: '#d4d4d4', 400: '#a3a3a3', 500: '#737373', 600: '#525252', 700: '#404040', 800: '#262626', 900: '#171717', 950: '#0a0a0a', }, stone: { 50: '#fafaf9', 100: '#f5f5f4', 200: '#e7e5e4', 300: '#d6d3d1', 400: '#a8a29e', 500: '#78716c', 600: '#57534e', 700: '#44403c', 800: '#292524', 900: '#1c1917', 950: '#0c0a09', }, red: { 50: '#fef2f2', 100: '#fee2e2', 200: '#fecaca', 300: '#fca5a5', 400: '#f87171', 500: '#ef4444', 600: '#dc2626', 700: '#b91c1c', 800: '#991b1b', 900: '#7f1d1d', 950: '#450a0a', }, orange: { 50: '#fff7ed', 100: '#ffedd5', 200: '#fed7aa', 300: '#fdba74', 400: '#fb923c', 500: '#f97316', 600: '#ea580c', 700: '#c2410c', 800: '#9a3412', 900: '#7c2d12', 950: '#431407', }, amber: { 50: '#fffbeb', 100: '#fef3c7', 200: '#fde68a', 300: '#fcd34d', 400: '#fbbf24', 500: '#f59e0b', 600: '#d97706', 700: '#b45309', 800: '#92400e', 900: '#78350f', 950: '#451a03', }, yellow: { 50: '#fefce8', 100: '#fef9c3', 200: '#fef08a', 300: '#fde047', 400: '#facc15', 500: '#eab308', 600: '#ca8a04', 700: '#a16207', 800: '#854d0e', 900: '#713f12', 950: '#422006', }, lime: { 50: '#f7fee7', 100: '#ecfccb', 200: '#d9f99d', 300: '#bef264', 400: '#a3e635', 500: '#84cc16', 600: '#65a30d', 700: '#4d7c0f', 800: '#3f6212', 900: '#365314', 950: '#1a2e05', }, green: { 50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 300: '#86efac', 400: '#4ade80', 500: '#22c55e', 600: '#16a34a', 700: '#15803d', 800: '#166534', 900: '#14532d', 950: '#052e16', }, emerald: { 50: '#ecfdf5', 100: '#d1fae5', 200: '#a7f3d0', 300: '#6ee7b7', 400: '#34d399', 500: '#10b981', 600: '#059669', 700: '#047857', 800: '#065f46', 900: '#064e3b', 950: '#022c22', }, teal: { 50: '#f0fdfa', 100: '#ccfbf1', 200: '#99f6e4', 300: '#5eead4', 400: '#2dd4bf', 500: '#14b8a6', 600: '#0d9488', 700: '#0f766e', 800: '#115e59', 900: '#134e4a', 950: '#042f2e', }, cyan: { 50: '#ecfeff', 100: '#cffafe', 200: '#a5f3fc', 300: '#67e8f9', 400: '#22d3ee', 500: '#06b6d4', 600: '#0891b2', 700: '#0e7490', 800: '#155e75', 900: '#164e63', 950: '#083344', }, sky: { 50: '#f0f9ff', 100: '#e0f2fe', 200: '#bae6fd', 300: '#7dd3fc', 400: '#38bdf8', 500: '#0ea5e9', 600: '#0284c7', 700: '#0369a1', 800: '#075985', 900: '#0c4a6e', 950: '#082f49', }, blue: { 50: '#eff6ff', 100: '#dbeafe', 200: '#bfdbfe', 300: '#93c5fd', 400: '#60a5fa', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8', 800: '#1e40af', 900: '#1e3a8a', 950: '#172554', }, indigo: { 50: '#eef2ff', 100: '#e0e7ff', 200: '#c7d2fe', 300: '#a5b4fc', 400: '#818cf8', 500: '#6366f1', 600: '#4f46e5', 700: '#4338ca', 800: '#3730a3', 900: '#312e81', 950: '#1e1b4b', }, violet: { 50: '#f5f3ff', 100: '#ede9fe', 200: '#ddd6fe', 300: '#c4b5fd', 400: '#a78bfa', 500: '#8b5cf6', 600: '#7c3aed', 700: '#6d28d9', 800: '#5b21b6', 900: '#4c1d95', 950: '#2e1065', }, purple: { 50: '#faf5ff', 100: '#f3e8ff', 200: '#e9d5ff', 300: '#d8b4fe', 400: '#c084fc', 500: '#a855f7', 600: '#9333ea', 700: '#7e22ce', 800: '#6b21a8', 900: '#581c87', 950: '#3b0764', }, fuchsia: { 50: '#fdf4ff', 100: '#fae8ff', 200: '#f5d0fe', 300: '#f0abfc', 400: '#e879f9', 500: '#d946ef', 600: '#c026d3', 700: '#a21caf', 800: '#86198f', 900: '#701a75', 950: '#4a044e', }, pink: { 50: '#fdf2f8', 100: '#fce7f3', 200: '#fbcfe8', 300: '#f9a8d4', 400: '#f472b6', 500: '#ec4899', 600: '#db2777', 700: '#be185d', 800: '#9d174d', 900: '#831843', 950: '#500724', }, rose: { 50: '#fff1f2', 100: '#ffe4e6', 200: '#fecdd3', 300: '#fda4af', 400: '#fb7185', 500: '#f43f5e', 600: '#e11d48', 700: '#be123c', 800: '#9f1239', 900: '#881337', 950: '#4c0519', }, 'red-500/fromConfig': '#000', electric: void 0, }) ;({ '--tw-ring-color': 'inherit', }) ;({ '--tw-ring-color': 'currentColor', }) ;({ '--tw-ring-color': 'transparent', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(0 0 0 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(255 255 255 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(248 250 252 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(241 245 249 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(226 232 240 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(203 213 225 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(148 163 184 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(100 116 139 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(71 85 105 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(51 65 85 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(30 41 59 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(15 23 42 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(249 250 251 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(243 244 246 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(229 231 235 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(209 213 219 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(156 163 175 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(107 114 128 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(75 85 99 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(55 65 81 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(31 41 55 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(17 24 39 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(250 250 250 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(244 244 245 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(228 228 231 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(212 212 216 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(161 161 170 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(113 113 122 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(82 82 91 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(63 63 70 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(39 39 42 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(24 24 27 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(250 250 250 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(245 245 245 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(229 229 229 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(212 212 212 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(163 163 163 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(115 115 115 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(82 82 82 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(64 64 64 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(38 38 38 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(23 23 23 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(250 250 249 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(245 245 244 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(231 229 228 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(214 211 209 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(168 162 158 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(120 113 108 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(87 83 78 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(68 64 60 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(41 37 36 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(28 25 23 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(254 242 242 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(254 226 226 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(254 202 202 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(252 165 165 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(248 113 113 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(239 68 68 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(220 38 38 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(185 28 28 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(153 27 27 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(127 29 29 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(255 247 237 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(255 237 213 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(254 215 170 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(253 186 116 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(251 146 60 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(249 115 22 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(234 88 12 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(194 65 12 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(154 52 18 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(124 45 18 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(255 251 235 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(254 243 199 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(253 230 138 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(252 211 77 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(251 191 36 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(245 158 11 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(217 119 6 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(180 83 9 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(146 64 14 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(120 53 15 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(254 252 232 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(254 249 195 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(254 240 138 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(253 224 71 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(250 204 21 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(234 179 8 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(202 138 4 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(161 98 7 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(133 77 14 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(113 63 18 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(247 254 231 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(236 252 203 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(217 249 157 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(190 242 100 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(163 230 53 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(132 204 22 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(101 163 13 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(77 124 15 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(63 98 18 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(54 83 20 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(240 253 244 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(220 252 231 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(187 247 208 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(134 239 172 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(74 222 128 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(34 197 94 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(22 163 74 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(21 128 61 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(22 101 52 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(20 83 45 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(236 253 245 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(209 250 229 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(167 243 208 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(110 231 183 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(52 211 153 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(16 185 129 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(5 150 105 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(4 120 87 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(6 95 70 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(6 78 59 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(240 253 250 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(204 251 241 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(153 246 228 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(94 234 212 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(45 212 191 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(20 184 166 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(13 148 136 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(15 118 110 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(17 94 89 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(19 78 74 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(236 254 255 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(207 250 254 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(165 243 252 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(103 232 249 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(34 211 238 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(6 182 212 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(8 145 178 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(14 116 144 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(21 94 117 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(22 78 99 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(240 249 255 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(224 242 254 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(186 230 253 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(125 211 252 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(56 189 248 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(14 165 233 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(2 132 199 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(3 105 161 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(7 89 133 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(12 74 110 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(239 246 255 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(219 234 254 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(191 219 254 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(147 197 253 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(96 165 250 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(59 130 246 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(37 99 235 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(29 78 216 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(30 64 175 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(30 58 138 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(238 242 255 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(224 231 255 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(199 210 254 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(165 180 252 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(129 140 248 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(99 102 241 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(79 70 229 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(67 56 202 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(55 48 163 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(49 46 129 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(245 243 255 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(237 233 254 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(221 214 254 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(196 181 253 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(167 139 250 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(139 92 246 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(124 58 237 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(109 40 217 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(91 33 182 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(76 29 149 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(250 245 255 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(243 232 255 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(233 213 255 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(216 180 254 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(192 132 252 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(168 85 247 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(147 51 234 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(126 34 206 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(107 33 168 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(88 28 135 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(253 244 255 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(250 232 255 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(245 208 254 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(240 171 252 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(232 121 249 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(217 70 239 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(192 38 211 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(162 28 175 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(134 25 143 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(112 26 117 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(253 242 248 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(252 231 243 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(251 207 232 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(249 168 212 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(244 114 182 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(236 72 153 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(219 39 119 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(190 24 93 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(157 23 77 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(131 24 67 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(255 241 242 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(255 228 230 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(254 205 211 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(253 164 175 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(251 113 133 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(244 63 94 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(225 29 72 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(190 18 60 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(159 18 57 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(136 19 55 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-color': 'rgb(59 130 246 / 0.5)', }) ;({ '--tw-ring-color': 'rgb(59 130 246 / .55)', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(80 215 30 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(239 68 68 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-color': 'rgb(239 68 68 / 0.25)', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(0 0 0 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-color': 'rgb(0 0 0 / 0.25)', }) ;({ '--tw-ring-color': 'rgb(0 0 0 / .555)', }) ;({ '--tw-ring-color': 'rgb(0 0 0 / var(--myvar))', }) ;({ '--tw-ring-color': 'rgb(239 68 68 / .555)', }) ;({ '--tw-ring-color': 'rgb(239 68 68 / var(--myvar))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(239 68 68 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-color': 'rgb(239 68 68 / 0.2)', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgba(219, 0, 255, var(--tw-ring-opacity))', }) ;({ '--tw-ring-color': 'rgba(219, 0, 255, 0.25)', }) ;({ '--tw-ring-color': 'rgba(219, 0, 255, .555)', }) ;({ '--tw-ring-color': 'rgba(219, 0, 255, var(--myvar))', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(219 0 255 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-color': 'rgb(219 0 255 / 0.2)', }) ;({ '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(0 128 0 / var(--tw-ring-opacity))', }) ;({ '--tw-ring-color': 'rgba(255, 255, 255, .45)', }) ;({ '--tw-ring-offset-shadow': 'var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)', '--tw-ring-shadow': 'var(--tw-ring-inset) 0 0 0 calc(10px + var(--tw-ring-offset-width)) var(--tw-ring-color)', boxShadow: 'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)', }) `; exports[`twin.macro ringMisc.tsx: ringMisc.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // Combined ring classes tw\`ring ring-inset ring-purple-500 ring-offset-black ring-offset-4 ring-opacity-50\` tw\`ring ring-inset ring-purple-500 ring-offset-black ring-offset-4\` tw\`ring ring-purple-500 ring-offset-black ring-offset-4\` tw\`ring ring-offset-black ring-offset-4\` tw\`ring ring-offset-4\` // Test the ring-opacity ordering - 'ring-opacity-x' should be moved to the end // https://github.com/ben-rogerson/twin.macro/issues/374 tw\`ring-4 ring-opacity-20 ring-green-500\` tw\`mt-5 md:(ring-opacity-20 ring-4 ring-green-500) mb-5\` tw\`ring-[10px]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // Combined ring classes ;({ '--tw-ring-offset-shadow': 'var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)', '--tw-ring-shadow': 'var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)', boxShadow: 'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)', '--tw-ring-inset': 'inset', '--tw-ring-opacity': '0.5', '--tw-ring-color': 'rgb(168 85 247 / var(--tw-ring-opacity))', '--tw-ring-offset-width': '4px', '--tw-ring-offset-color': '#000', }) ;({ '--tw-ring-offset-shadow': 'var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)', '--tw-ring-shadow': 'var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)', boxShadow: 'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)', '--tw-ring-inset': 'inset', '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(168 85 247 / var(--tw-ring-opacity))', '--tw-ring-offset-width': '4px', '--tw-ring-offset-color': '#000', }) ;({ '--tw-ring-offset-shadow': 'var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)', '--tw-ring-shadow': 'var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)', boxShadow: 'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)', '--tw-ring-opacity': '1', '--tw-ring-color': 'rgb(168 85 247 / var(--tw-ring-opacity))', '--tw-ring-offset-width': '4px', '--tw-ring-offset-color': '#000', }) ;({ '--tw-ring-offset-shadow': 'var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)', '--tw-ring-shadow': 'var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)', boxShadow: 'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)', '--tw-ring-offset-width': '4px', '--tw-ring-offset-color': '#000', }) ;({ '--tw-ring-offset-shadow': 'var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)', '--tw-ring-shadow': 'var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)', boxShadow: 'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)', '--tw-ring-offset-width': '4px', }) // Test the ring-opacity ordering - 'ring-opacity-x' should be moved to the end // https://github.com/ben-rogerson/twin.macro/issues/374 ;({ '--tw-ring-offset-shadow': 'var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)', '--tw-ring-shadow': 'var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color)', boxShadow: 'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)', '--tw-ring-opacity': '0.2', '--tw-ring-color': 'rgb(34 197 94 / var(--tw-ring-opacity))', }) ;({ marginBottom: '1.25rem', marginTop: '1.25rem', '@media (min-width: 768px)': { '--tw-ring-offset-shadow': 'var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)', '--tw-ring-shadow': 'var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color)', boxShadow: 'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)', '--tw-ring-opacity': '0.2', '--tw-ring-color': 'rgb(34 197 94 / var(--tw-ring-opacity))', }, }) ;({ '--tw-ring-offset-shadow': 'var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)', '--tw-ring-shadow': 'var(--tw-ring-inset) 0 0 0 calc(10px + var(--tw-ring-offset-width)) var(--tw-ring-color)', boxShadow: 'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)', }) `; exports[`twin.macro ringOffsetColor.tsx: ringOffsetColor.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/ring-offset-color theme\`ringOffsetColor\` tw\`ring-offset-inherit\` tw\`ring-offset-current\` tw\`ring-offset-transparent\` tw\`ring-offset-black\` tw\`ring-offset-white\` tw\`ring-offset-slate-50\` tw\`ring-offset-slate-100\` tw\`ring-offset-slate-200\` tw\`ring-offset-slate-300\` tw\`ring-offset-slate-400\` tw\`ring-offset-slate-500\` tw\`ring-offset-slate-600\` tw\`ring-offset-slate-700\` tw\`ring-offset-slate-800\` tw\`ring-offset-slate-900\` tw\`ring-offset-gray-50\` tw\`ring-offset-gray-100\` tw\`ring-offset-gray-200\` tw\`ring-offset-gray-300\` tw\`ring-offset-gray-400\` tw\`ring-offset-gray-500\` tw\`ring-offset-gray-600\` tw\`ring-offset-gray-700\` tw\`ring-offset-gray-800\` tw\`ring-offset-gray-900\` tw\`ring-offset-zinc-50\` tw\`ring-offset-zinc-100\` tw\`ring-offset-zinc-200\` tw\`ring-offset-zinc-300\` tw\`ring-offset-zinc-400\` tw\`ring-offset-zinc-500\` tw\`ring-offset-zinc-600\` tw\`ring-offset-zinc-700\` tw\`ring-offset-zinc-800\` tw\`ring-offset-zinc-900\` tw\`ring-offset-neutral-50\` tw\`ring-offset-neutral-100\` tw\`ring-offset-neutral-200\` tw\`ring-offset-neutral-300\` tw\`ring-offset-neutral-400\` tw\`ring-offset-neutral-500\` tw\`ring-offset-neutral-600\` tw\`ring-offset-neutral-700\` tw\`ring-offset-neutral-800\` tw\`ring-offset-neutral-900\` tw\`ring-offset-stone-50\` tw\`ring-offset-stone-100\` tw\`ring-offset-stone-200\` tw\`ring-offset-stone-300\` tw\`ring-offset-stone-400\` tw\`ring-offset-stone-500\` tw\`ring-offset-stone-600\` tw\`ring-offset-stone-700\` tw\`ring-offset-stone-800\` tw\`ring-offset-stone-900\` tw\`ring-offset-red-50\` tw\`ring-offset-red-100\` tw\`ring-offset-red-200\` tw\`ring-offset-red-300\` tw\`ring-offset-red-400\` tw\`ring-offset-red-500\` tw\`ring-offset-red-600\` tw\`ring-offset-red-700\` tw\`ring-offset-red-800\` tw\`ring-offset-red-900\` tw\`ring-offset-orange-50\` tw\`ring-offset-orange-100\` tw\`ring-offset-orange-200\` tw\`ring-offset-orange-300\` tw\`ring-offset-orange-400\` tw\`ring-offset-orange-500\` tw\`ring-offset-orange-600\` tw\`ring-offset-orange-700\` tw\`ring-offset-orange-800\` tw\`ring-offset-orange-900\` tw\`ring-offset-amber-50\` tw\`ring-offset-amber-100\` tw\`ring-offset-amber-200\` tw\`ring-offset-amber-300\` tw\`ring-offset-amber-400\` tw\`ring-offset-amber-500\` tw\`ring-offset-amber-600\` tw\`ring-offset-amber-700\` tw\`ring-offset-amber-800\` tw\`ring-offset-amber-900\` tw\`ring-offset-yellow-50\` tw\`ring-offset-yellow-100\` tw\`ring-offset-yellow-200\` tw\`ring-offset-yellow-300\` tw\`ring-offset-yellow-400\` tw\`ring-offset-yellow-500\` tw\`ring-offset-yellow-600\` tw\`ring-offset-yellow-700\` tw\`ring-offset-yellow-800\` tw\`ring-offset-yellow-900\` tw\`ring-offset-lime-50\` tw\`ring-offset-lime-100\` tw\`ring-offset-lime-200\` tw\`ring-offset-lime-300\` tw\`ring-offset-lime-400\` tw\`ring-offset-lime-500\` tw\`ring-offset-lime-600\` tw\`ring-offset-lime-700\` tw\`ring-offset-lime-800\` tw\`ring-offset-lime-900\` tw\`ring-offset-green-50\` tw\`ring-offset-green-100\` tw\`ring-offset-green-200\` tw\`ring-offset-green-300\` tw\`ring-offset-green-400\` tw\`ring-offset-green-500\` tw\`ring-offset-green-600\` tw\`ring-offset-green-700\` tw\`ring-offset-green-800\` tw\`ring-offset-green-900\` tw\`ring-offset-emerald-50\` tw\`ring-offset-emerald-100\` tw\`ring-offset-emerald-200\` tw\`ring-offset-emerald-300\` tw\`ring-offset-emerald-400\` tw\`ring-offset-emerald-500\` tw\`ring-offset-emerald-600\` tw\`ring-offset-emerald-700\` tw\`ring-offset-emerald-800\` tw\`ring-offset-emerald-900\` tw\`ring-offset-teal-50\` tw\`ring-offset-teal-100\` tw\`ring-offset-teal-200\` tw\`ring-offset-teal-300\` tw\`ring-offset-teal-400\` tw\`ring-offset-teal-500\` tw\`ring-offset-teal-600\` tw\`ring-offset-teal-700\` tw\`ring-offset-teal-800\` tw\`ring-offset-teal-900\` tw\`ring-offset-cyan-50\` tw\`ring-offset-cyan-100\` tw\`ring-offset-cyan-200\` tw\`ring-offset-cyan-300\` tw\`ring-offset-cyan-400\` tw\`ring-offset-cyan-500\` tw\`ring-offset-cyan-600\` tw\`ring-offset-cyan-700\` tw\`ring-offset-cyan-800\` tw\`ring-offset-cyan-900\` tw\`ring-offset-sky-50\` tw\`ring-offset-sky-100\` tw\`ring-offset-sky-200\` tw\`ring-offset-sky-300\` tw\`ring-offset-sky-400\` tw\`ring-offset-sky-500\` tw\`ring-offset-sky-600\` tw\`ring-offset-sky-700\` tw\`ring-offset-sky-800\` tw\`ring-offset-sky-900\` tw\`ring-offset-blue-50\` tw\`ring-offset-blue-100\` tw\`ring-offset-blue-200\` tw\`ring-offset-blue-300\` tw\`ring-offset-blue-400\` tw\`ring-offset-blue-500\` tw\`ring-offset-blue-600\` tw\`ring-offset-blue-700\` tw\`ring-offset-blue-800\` tw\`ring-offset-blue-900\` tw\`ring-offset-indigo-50\` tw\`ring-offset-indigo-100\` tw\`ring-offset-indigo-200\` tw\`ring-offset-indigo-300\` tw\`ring-offset-indigo-400\` tw\`ring-offset-indigo-500\` tw\`ring-offset-indigo-600\` tw\`ring-offset-indigo-700\` tw\`ring-offset-indigo-800\` tw\`ring-offset-indigo-900\` tw\`ring-offset-violet-50\` tw\`ring-offset-violet-100\` tw\`ring-offset-violet-200\` tw\`ring-offset-violet-300\` tw\`ring-offset-violet-400\` tw\`ring-offset-violet-500\` tw\`ring-offset-violet-600\` tw\`ring-offset-violet-700\` tw\`ring-offset-violet-800\` tw\`ring-offset-violet-900\` tw\`ring-offset-purple-50\` tw\`ring-offset-purple-100\` tw\`ring-offset-purple-200\` tw\`ring-offset-purple-300\` tw\`ring-offset-purple-400\` tw\`ring-offset-purple-500\` tw\`ring-offset-purple-600\` tw\`ring-offset-purple-700\` tw\`ring-offset-purple-800\` tw\`ring-offset-purple-900\` tw\`ring-offset-fuchsia-50\` tw\`ring-offset-fuchsia-100\` tw\`ring-offset-fuchsia-200\` tw\`ring-offset-fuchsia-300\` tw\`ring-offset-fuchsia-400\` tw\`ring-offset-fuchsia-500\` tw\`ring-offset-fuchsia-600\` tw\`ring-offset-fuchsia-700\` tw\`ring-offset-fuchsia-800\` tw\`ring-offset-fuchsia-900\` tw\`ring-offset-pink-50\` tw\`ring-offset-pink-100\` tw\`ring-offset-pink-200\` tw\`ring-offset-pink-300\` tw\`ring-offset-pink-400\` tw\`ring-offset-pink-500\` tw\`ring-offset-pink-600\` tw\`ring-offset-pink-700\` tw\`ring-offset-pink-800\` tw\`ring-offset-pink-900\` tw\`ring-offset-rose-50\` tw\`ring-offset-rose-100\` tw\`ring-offset-rose-200\` tw\`ring-offset-rose-300\` tw\`ring-offset-rose-400\` tw\`ring-offset-rose-500\` tw\`ring-offset-rose-600\` tw\`ring-offset-rose-700\` tw\`ring-offset-rose-800\` tw\`ring-offset-rose-900\` tw\`ring-offset-rose-900/50\` tw\`ring-offset-rose-900/[.50]\` tw\`ring-offset-[#50d71e]\` tw\`ring-offset-red-500\` tw\`ring-offset-red-500/25\` tw\`ring-offset-red-500/fromConfig\` tw\`ring-offset-red-500/fromConfig/25\` tw\`ring-offset-red-500/fromConfig/[.555]\` tw\`ring-offset-red-500/fromConfig/[var(--myvar)]\` tw\`ring-offset-red-500/[.555]\` tw\`ring-offset-red-500/[var(--myvar)]\` tw\`ring-offset-[theme('colors.red.500')]\` tw\`ring-offset-[theme('colors.red.500')]/20\` tw\`ring-offset-electric\` tw\`ring-offset-electric/25\` tw\`ring-offset-electric/[.555]\` tw\`ring-offset-electric/[var(--myvar)]\` tw\`ring-offset-[theme('colors.electric')]\` tw\`ring-offset-[theme('colors.electric')]/20\` tw\`ring-offset-[color:green]\` tw\`ring-offset-[color:rgba(255, 255, 255, .45)]\` tw\`ring-offset-[length:10px]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/ring-offset-color ;({ inherit: 'inherit', current: 'currentColor', transparent: 'transparent', black: '#000', white: '#fff', slate: { 50: '#f8fafc', 100: '#f1f5f9', 200: '#e2e8f0', 300: '#cbd5e1', 400: '#94a3b8', 500: '#64748b', 600: '#475569', 700: '#334155', 800: '#1e293b', 900: '#0f172a', 950: '#020617', }, gray: { 50: '#f9fafb', 100: '#f3f4f6', 200: '#e5e7eb', 300: '#d1d5db', 400: '#9ca3af', 500: '#6b7280', 600: '#4b5563', 700: '#374151', 800: '#1f2937', 900: '#111827', 950: '#030712', }, zinc: { 50: '#fafafa', 100: '#f4f4f5', 200: '#e4e4e7', 300: '#d4d4d8', 400: '#a1a1aa', 500: '#71717a', 600: '#52525b', 700: '#3f3f46', 800: '#27272a', 900: '#18181b', 950: '#09090b', }, neutral: { 50: '#fafafa', 100: '#f5f5f5', 200: '#e5e5e5', 300: '#d4d4d4', 400: '#a3a3a3', 500: '#737373', 600: '#525252', 700: '#404040', 800: '#262626', 900: '#171717', 950: '#0a0a0a', }, stone: { 50: '#fafaf9', 100: '#f5f5f4', 200: '#e7e5e4', 300: '#d6d3d1', 400: '#a8a29e', 500: '#78716c', 600: '#57534e', 700: '#44403c', 800: '#292524', 900: '#1c1917', 950: '#0c0a09', }, red: { 50: '#fef2f2', 100: '#fee2e2', 200: '#fecaca', 300: '#fca5a5', 400: '#f87171', 500: '#ef4444', 600: '#dc2626', 700: '#b91c1c', 800: '#991b1b', 900: '#7f1d1d', 950: '#450a0a', }, orange: { 50: '#fff7ed', 100: '#ffedd5', 200: '#fed7aa', 300: '#fdba74', 400: '#fb923c', 500: '#f97316', 600: '#ea580c', 700: '#c2410c', 800: '#9a3412', 900: '#7c2d12', 950: '#431407', }, amber: { 50: '#fffbeb', 100: '#fef3c7', 200: '#fde68a', 300: '#fcd34d', 400: '#fbbf24', 500: '#f59e0b', 600: '#d97706', 700: '#b45309', 800: '#92400e', 900: '#78350f', 950: '#451a03', }, yellow: { 50: '#fefce8', 100: '#fef9c3', 200: '#fef08a', 300: '#fde047', 400: '#facc15', 500: '#eab308', 600: '#ca8a04', 700: '#a16207', 800: '#854d0e', 900: '#713f12', 950: '#422006', }, lime: { 50: '#f7fee7', 100: '#ecfccb', 200: '#d9f99d', 300: '#bef264', 400: '#a3e635', 500: '#84cc16', 600: '#65a30d', 700: '#4d7c0f', 800: '#3f6212', 900: '#365314', 950: '#1a2e05', }, green: { 50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 300: '#86efac', 400: '#4ade80', 500: '#22c55e', 600: '#16a34a', 700: '#15803d', 800: '#166534', 900: '#14532d', 950: '#052e16', }, emerald: { 50: '#ecfdf5', 100: '#d1fae5', 200: '#a7f3d0', 300: '#6ee7b7', 400: '#34d399', 500: '#10b981', 600: '#059669', 700: '#047857', 800: '#065f46', 900: '#064e3b', 950: '#022c22', }, teal: { 50: '#f0fdfa', 100: '#ccfbf1', 200: '#99f6e4', 300: '#5eead4', 400: '#2dd4bf', 500: '#14b8a6', 600: '#0d9488', 700: '#0f766e', 800: '#115e59', 900: '#134e4a', 950: '#042f2e', }, cyan: { 50: '#ecfeff', 100: '#cffafe', 200: '#a5f3fc', 300: '#67e8f9', 400: '#22d3ee', 500: '#06b6d4', 600: '#0891b2', 700: '#0e7490', 800: '#155e75', 900: '#164e63', 950: '#083344', }, sky: { 50: '#f0f9ff', 100: '#e0f2fe', 200: '#bae6fd', 300: '#7dd3fc', 400: '#38bdf8', 500: '#0ea5e9', 600: '#0284c7', 700: '#0369a1', 800: '#075985', 900: '#0c4a6e', 950: '#082f49', }, blue: { 50: '#eff6ff', 100: '#dbeafe', 200: '#bfdbfe', 300: '#93c5fd', 400: '#60a5fa', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8', 800: '#1e40af', 900: '#1e3a8a', 950: '#172554', }, indigo: { 50: '#eef2ff', 100: '#e0e7ff', 200: '#c7d2fe', 300: '#a5b4fc', 400: '#818cf8', 500: '#6366f1', 600: '#4f46e5', 700: '#4338ca', 800: '#3730a3', 900: '#312e81', 950: '#1e1b4b', }, violet: { 50: '#f5f3ff', 100: '#ede9fe', 200: '#ddd6fe', 300: '#c4b5fd', 400: '#a78bfa', 500: '#8b5cf6', 600: '#7c3aed', 700: '#6d28d9', 800: '#5b21b6', 900: '#4c1d95', 950: '#2e1065', }, purple: { 50: '#faf5ff', 100: '#f3e8ff', 200: '#e9d5ff', 300: '#d8b4fe', 400: '#c084fc', 500: '#a855f7', 600: '#9333ea', 700: '#7e22ce', 800: '#6b21a8', 900: '#581c87', 950: '#3b0764', }, fuchsia: { 50: '#fdf4ff', 100: '#fae8ff', 200: '#f5d0fe', 300: '#f0abfc', 400: '#e879f9', 500: '#d946ef', 600: '#c026d3', 700: '#a21caf', 800: '#86198f', 900: '#701a75', 950: '#4a044e', }, pink: { 50: '#fdf2f8', 100: '#fce7f3', 200: '#fbcfe8', 300: '#f9a8d4', 400: '#f472b6', 500: '#ec4899', 600: '#db2777', 700: '#be185d', 800: '#9d174d', 900: '#831843', 950: '#500724', }, rose: { 50: '#fff1f2', 100: '#ffe4e6', 200: '#fecdd3', 300: '#fda4af', 400: '#fb7185', 500: '#f43f5e', 600: '#e11d48', 700: '#be123c', 800: '#9f1239', 900: '#881337', 950: '#4c0519', }, 'red-500/fromConfig': '#000', electric: void 0, }) ;({ '--tw-ring-offset-color': 'inherit', }) ;({ '--tw-ring-offset-color': 'currentColor', }) ;({ '--tw-ring-offset-color': 'transparent', }) ;({ '--tw-ring-offset-color': '#000', }) ;({ '--tw-ring-offset-color': '#fff', }) ;({ '--tw-ring-offset-color': '#f8fafc', }) ;({ '--tw-ring-offset-color': '#f1f5f9', }) ;({ '--tw-ring-offset-color': '#e2e8f0', }) ;({ '--tw-ring-offset-color': '#cbd5e1', }) ;({ '--tw-ring-offset-color': '#94a3b8', }) ;({ '--tw-ring-offset-color': '#64748b', }) ;({ '--tw-ring-offset-color': '#475569', }) ;({ '--tw-ring-offset-color': '#334155', }) ;({ '--tw-ring-offset-color': '#1e293b', }) ;({ '--tw-ring-offset-color': '#0f172a', }) ;({ '--tw-ring-offset-color': '#f9fafb', }) ;({ '--tw-ring-offset-color': '#f3f4f6', }) ;({ '--tw-ring-offset-color': '#e5e7eb', }) ;({ '--tw-ring-offset-color': '#d1d5db', }) ;({ '--tw-ring-offset-color': '#9ca3af', }) ;({ '--tw-ring-offset-color': '#6b7280', }) ;({ '--tw-ring-offset-color': '#4b5563', }) ;({ '--tw-ring-offset-color': '#374151', }) ;({ '--tw-ring-offset-color': '#1f2937', }) ;({ '--tw-ring-offset-color': '#111827', }) ;({ '--tw-ring-offset-color': '#fafafa', }) ;({ '--tw-ring-offset-color': '#f4f4f5', }) ;({ '--tw-ring-offset-color': '#e4e4e7', }) ;({ '--tw-ring-offset-color': '#d4d4d8', }) ;({ '--tw-ring-offset-color': '#a1a1aa', }) ;({ '--tw-ring-offset-color': '#71717a', }) ;({ '--tw-ring-offset-color': '#52525b', }) ;({ '--tw-ring-offset-color': '#3f3f46', }) ;({ '--tw-ring-offset-color': '#27272a', }) ;({ '--tw-ring-offset-color': '#18181b', }) ;({ '--tw-ring-offset-color': '#fafafa', }) ;({ '--tw-ring-offset-color': '#f5f5f5', }) ;({ '--tw-ring-offset-color': '#e5e5e5', }) ;({ '--tw-ring-offset-color': '#d4d4d4', }) ;({ '--tw-ring-offset-color': '#a3a3a3', }) ;({ '--tw-ring-offset-color': '#737373', }) ;({ '--tw-ring-offset-color': '#525252', }) ;({ '--tw-ring-offset-color': '#404040', }) ;({ '--tw-ring-offset-color': '#262626', }) ;({ '--tw-ring-offset-color': '#171717', }) ;({ '--tw-ring-offset-color': '#fafaf9', }) ;({ '--tw-ring-offset-color': '#f5f5f4', }) ;({ '--tw-ring-offset-color': '#e7e5e4', }) ;({ '--tw-ring-offset-color': '#d6d3d1', }) ;({ '--tw-ring-offset-color': '#a8a29e', }) ;({ '--tw-ring-offset-color': '#78716c', }) ;({ '--tw-ring-offset-color': '#57534e', }) ;({ '--tw-ring-offset-color': '#44403c', }) ;({ '--tw-ring-offset-color': '#292524', }) ;({ '--tw-ring-offset-color': '#1c1917', }) ;({ '--tw-ring-offset-color': '#fef2f2', }) ;({ '--tw-ring-offset-color': '#fee2e2', }) ;({ '--tw-ring-offset-color': '#fecaca', }) ;({ '--tw-ring-offset-color': '#fca5a5', }) ;({ '--tw-ring-offset-color': '#f87171', }) ;({ '--tw-ring-offset-color': '#ef4444', }) ;({ '--tw-ring-offset-color': '#dc2626', }) ;({ '--tw-ring-offset-color': '#b91c1c', }) ;({ '--tw-ring-offset-color': '#991b1b', }) ;({ '--tw-ring-offset-color': '#7f1d1d', }) ;({ '--tw-ring-offset-color': '#fff7ed', }) ;({ '--tw-ring-offset-color': '#ffedd5', }) ;({ '--tw-ring-offset-color': '#fed7aa', }) ;({ '--tw-ring-offset-color': '#fdba74', }) ;({ '--tw-ring-offset-color': '#fb923c', }) ;({ '--tw-ring-offset-color': '#f97316', }) ;({ '--tw-ring-offset-color': '#ea580c', }) ;({ '--tw-ring-offset-color': '#c2410c', }) ;({ '--tw-ring-offset-color': '#9a3412', }) ;({ '--tw-ring-offset-color': '#7c2d12', }) ;({ '--tw-ring-offset-color': '#fffbeb', }) ;({ '--tw-ring-offset-color': '#fef3c7', }) ;({ '--tw-ring-offset-color': '#fde68a', }) ;({ '--tw-ring-offset-color': '#fcd34d', }) ;({ '--tw-ring-offset-color': '#fbbf24', }) ;({ '--tw-ring-offset-color': '#f59e0b', }) ;({ '--tw-ring-offset-color': '#d97706', }) ;({ '--tw-ring-offset-color': '#b45309', }) ;({ '--tw-ring-offset-color': '#92400e', }) ;({ '--tw-ring-offset-color': '#78350f', }) ;({ '--tw-ring-offset-color': '#fefce8', }) ;({ '--tw-ring-offset-color': '#fef9c3', }) ;({ '--tw-ring-offset-color': '#fef08a', }) ;({ '--tw-ring-offset-color': '#fde047', }) ;({ '--tw-ring-offset-color': '#facc15', }) ;({ '--tw-ring-offset-color': '#eab308', }) ;({ '--tw-ring-offset-color': '#ca8a04', }) ;({ '--tw-ring-offset-color': '#a16207', }) ;({ '--tw-ring-offset-color': '#854d0e', }) ;({ '--tw-ring-offset-color': '#713f12', }) ;({ '--tw-ring-offset-color': '#f7fee7', }) ;({ '--tw-ring-offset-color': '#ecfccb', }) ;({ '--tw-ring-offset-color': '#d9f99d', }) ;({ '--tw-ring-offset-color': '#bef264', }) ;({ '--tw-ring-offset-color': '#a3e635', }) ;({ '--tw-ring-offset-color': '#84cc16', }) ;({ '--tw-ring-offset-color': '#65a30d', }) ;({ '--tw-ring-offset-color': '#4d7c0f', }) ;({ '--tw-ring-offset-color': '#3f6212', }) ;({ '--tw-ring-offset-color': '#365314', }) ;({ '--tw-ring-offset-color': '#f0fdf4', }) ;({ '--tw-ring-offset-color': '#dcfce7', }) ;({ '--tw-ring-offset-color': '#bbf7d0', }) ;({ '--tw-ring-offset-color': '#86efac', }) ;({ '--tw-ring-offset-color': '#4ade80', }) ;({ '--tw-ring-offset-color': '#22c55e', }) ;({ '--tw-ring-offset-color': '#16a34a', }) ;({ '--tw-ring-offset-color': '#15803d', }) ;({ '--tw-ring-offset-color': '#166534', }) ;({ '--tw-ring-offset-color': '#14532d', }) ;({ '--tw-ring-offset-color': '#ecfdf5', }) ;({ '--tw-ring-offset-color': '#d1fae5', }) ;({ '--tw-ring-offset-color': '#a7f3d0', }) ;({ '--tw-ring-offset-color': '#6ee7b7', }) ;({ '--tw-ring-offset-color': '#34d399', }) ;({ '--tw-ring-offset-color': '#10b981', }) ;({ '--tw-ring-offset-color': '#059669', }) ;({ '--tw-ring-offset-color': '#047857', }) ;({ '--tw-ring-offset-color': '#065f46', }) ;({ '--tw-ring-offset-color': '#064e3b', }) ;({ '--tw-ring-offset-color': '#f0fdfa', }) ;({ '--tw-ring-offset-color': '#ccfbf1', }) ;({ '--tw-ring-offset-color': '#99f6e4', }) ;({ '--tw-ring-offset-color': '#5eead4', }) ;({ '--tw-ring-offset-color': '#2dd4bf', }) ;({ '--tw-ring-offset-color': '#14b8a6', }) ;({ '--tw-ring-offset-color': '#0d9488', }) ;({ '--tw-ring-offset-color': '#0f766e', }) ;({ '--tw-ring-offset-color': '#115e59', }) ;({ '--tw-ring-offset-color': '#134e4a', }) ;({ '--tw-ring-offset-color': '#ecfeff', }) ;({ '--tw-ring-offset-color': '#cffafe', }) ;({ '--tw-ring-offset-color': '#a5f3fc', }) ;({ '--tw-ring-offset-color': '#67e8f9', }) ;({ '--tw-ring-offset-color': '#22d3ee', }) ;({ '--tw-ring-offset-color': '#06b6d4', }) ;({ '--tw-ring-offset-color': '#0891b2', }) ;({ '--tw-ring-offset-color': '#0e7490', }) ;({ '--tw-ring-offset-color': '#155e75', }) ;({ '--tw-ring-offset-color': '#164e63', }) ;({ '--tw-ring-offset-color': '#f0f9ff', }) ;({ '--tw-ring-offset-color': '#e0f2fe', }) ;({ '--tw-ring-offset-color': '#bae6fd', }) ;({ '--tw-ring-offset-color': '#7dd3fc', }) ;({ '--tw-ring-offset-color': '#38bdf8', }) ;({ '--tw-ring-offset-color': '#0ea5e9', }) ;({ '--tw-ring-offset-color': '#0284c7', }) ;({ '--tw-ring-offset-color': '#0369a1', }) ;({ '--tw-ring-offset-color': '#075985', }) ;({ '--tw-ring-offset-color': '#0c4a6e', }) ;({ '--tw-ring-offset-color': '#eff6ff', }) ;({ '--tw-ring-offset-color': '#dbeafe', }) ;({ '--tw-ring-offset-color': '#bfdbfe', }) ;({ '--tw-ring-offset-color': '#93c5fd', }) ;({ '--tw-ring-offset-color': '#60a5fa', }) ;({ '--tw-ring-offset-color': '#3b82f6', }) ;({ '--tw-ring-offset-color': '#2563eb', }) ;({ '--tw-ring-offset-color': '#1d4ed8', }) ;({ '--tw-ring-offset-color': '#1e40af', }) ;({ '--tw-ring-offset-color': '#1e3a8a', }) ;({ '--tw-ring-offset-color': '#eef2ff', }) ;({ '--tw-ring-offset-color': '#e0e7ff', }) ;({ '--tw-ring-offset-color': '#c7d2fe', }) ;({ '--tw-ring-offset-color': '#a5b4fc', }) ;({ '--tw-ring-offset-color': '#818cf8', }) ;({ '--tw-ring-offset-color': '#6366f1', }) ;({ '--tw-ring-offset-color': '#4f46e5', }) ;({ '--tw-ring-offset-color': '#4338ca', }) ;({ '--tw-ring-offset-color': '#3730a3', }) ;({ '--tw-ring-offset-color': '#312e81', }) ;({ '--tw-ring-offset-color': '#f5f3ff', }) ;({ '--tw-ring-offset-color': '#ede9fe', }) ;({ '--tw-ring-offset-color': '#ddd6fe', }) ;({ '--tw-ring-offset-color': '#c4b5fd', }) ;({ '--tw-ring-offset-color': '#a78bfa', }) ;({ '--tw-ring-offset-color': '#8b5cf6', }) ;({ '--tw-ring-offset-color': '#7c3aed', }) ;({ '--tw-ring-offset-color': '#6d28d9', }) ;({ '--tw-ring-offset-color': '#5b21b6', }) ;({ '--tw-ring-offset-color': '#4c1d95', }) ;({ '--tw-ring-offset-color': '#faf5ff', }) ;({ '--tw-ring-offset-color': '#f3e8ff', }) ;({ '--tw-ring-offset-color': '#e9d5ff', }) ;({ '--tw-ring-offset-color': '#d8b4fe', }) ;({ '--tw-ring-offset-color': '#c084fc', }) ;({ '--tw-ring-offset-color': '#a855f7', }) ;({ '--tw-ring-offset-color': '#9333ea', }) ;({ '--tw-ring-offset-color': '#7e22ce', }) ;({ '--tw-ring-offset-color': '#6b21a8', }) ;({ '--tw-ring-offset-color': '#581c87', }) ;({ '--tw-ring-offset-color': '#fdf4ff', }) ;({ '--tw-ring-offset-color': '#fae8ff', }) ;({ '--tw-ring-offset-color': '#f5d0fe', }) ;({ '--tw-ring-offset-color': '#f0abfc', }) ;({ '--tw-ring-offset-color': '#e879f9', }) ;({ '--tw-ring-offset-color': '#d946ef', }) ;({ '--tw-ring-offset-color': '#c026d3', }) ;({ '--tw-ring-offset-color': '#a21caf', }) ;({ '--tw-ring-offset-color': '#86198f', }) ;({ '--tw-ring-offset-color': '#701a75', }) ;({ '--tw-ring-offset-color': '#fdf2f8', }) ;({ '--tw-ring-offset-color': '#fce7f3', }) ;({ '--tw-ring-offset-color': '#fbcfe8', }) ;({ '--tw-ring-offset-color': '#f9a8d4', }) ;({ '--tw-ring-offset-color': '#f472b6', }) ;({ '--tw-ring-offset-color': '#ec4899', }) ;({ '--tw-ring-offset-color': '#db2777', }) ;({ '--tw-ring-offset-color': '#be185d', }) ;({ '--tw-ring-offset-color': '#9d174d', }) ;({ '--tw-ring-offset-color': '#831843', }) ;({ '--tw-ring-offset-color': '#fff1f2', }) ;({ '--tw-ring-offset-color': '#ffe4e6', }) ;({ '--tw-ring-offset-color': '#fecdd3', }) ;({ '--tw-ring-offset-color': '#fda4af', }) ;({ '--tw-ring-offset-color': '#fb7185', }) ;({ '--tw-ring-offset-color': '#f43f5e', }) ;({ '--tw-ring-offset-color': '#e11d48', }) ;({ '--tw-ring-offset-color': '#be123c', }) ;({ '--tw-ring-offset-color': '#9f1239', }) ;({ '--tw-ring-offset-color': '#881337', }) ;({ '--tw-ring-offset-color': 'rgb(136 19 55 / 0.5)', }) ;({ '--tw-ring-offset-color': 'rgb(136 19 55 / .50)', }) ;({ '--tw-ring-offset-color': '#50d71e', }) ;({ '--tw-ring-offset-color': '#ef4444', }) ;({ '--tw-ring-offset-color': 'rgb(239 68 68 / 0.25)', }) ;({ '--tw-ring-offset-color': '#000', }) ;({ '--tw-ring-offset-color': 'rgb(0 0 0 / 0.25)', }) ;({ '--tw-ring-offset-color': 'rgb(0 0 0 / .555)', }) ;({ '--tw-ring-offset-color': 'rgb(0 0 0 / var(--myvar))', }) ;({ '--tw-ring-offset-color': 'rgb(239 68 68 / .555)', }) ;({ '--tw-ring-offset-color': 'rgb(239 68 68 / var(--myvar))', }) ;({ '--tw-ring-offset-color': '#ef4444', }) ;({ '--tw-ring-offset-color': 'rgb(239 68 68 / 0.2)', }) ;({ '--tw-ring-offset-color': 'rgb(219, 0, 255)', }) ;({ '--tw-ring-offset-color': 'rgba(219, 0, 255, 0.25)', }) ;({ '--tw-ring-offset-color': 'rgba(219, 0, 255, .555)', }) ;({ '--tw-ring-offset-color': 'rgba(219, 0, 255, var(--myvar))', }) ;({ '--tw-ring-offset-color': 'rgb(219, 0, 255)', }) ;({ '--tw-ring-offset-color': 'rgb(219 0 255 / 0.2)', }) ;({ '--tw-ring-offset-color': 'green', }) ;({ '--tw-ring-offset-color': 'rgba(255, 255, 255, .45)', }) ;({ '--tw-ring-offset-width': '10px', }) `; exports[`twin.macro ringOffsetWidth.tsx: ringOffsetWidth.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/ring-offset-width theme\`ringOffsetWidth\` tw\`ring-offset-0\` tw\`ring-offset-1\` tw\`ring-offset-2\` tw\`ring-offset-4\` tw\`ring-offset-8\` tw\`ring-offset-[3px]\` tw\`ring-offset-[19rem]\` tw\`ring-offset-[#76ad65]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/ring-offset-width ;({ 0: '0px', 1: '1px', 2: '2px', 4: '4px', 8: '8px', }) ;({ '--tw-ring-offset-width': '0px', }) ;({ '--tw-ring-offset-width': '1px', }) ;({ '--tw-ring-offset-width': '2px', }) ;({ '--tw-ring-offset-width': '4px', }) ;({ '--tw-ring-offset-width': '8px', }) ;({ '--tw-ring-offset-width': '3px', }) ;({ '--tw-ring-offset-width': '19rem', }) ;({ '--tw-ring-offset-color': '#76ad65', }) `; exports[`twin.macro ringOpacity.tsx: ringOpacity.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/ring-opacity // Deprecated in favor of slash opacity syntax tw\`ring-opacity-0\` tw\`ring-opacity-5\` tw\`ring-opacity-10\` tw\`ring-opacity-20\` tw\`ring-opacity-25\` tw\`ring-opacity-30\` tw\`ring-opacity-40\` tw\`ring-opacity-50\` tw\`ring-opacity-60\` tw\`ring-opacity-70\` tw\`ring-opacity-75\` tw\`ring-opacity-80\` tw\`ring-opacity-90\` tw\`ring-opacity-95\` tw\`ring-opacity-100\` tw\`ring-opacity-[var(--ring-opacity)]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/ring-opacity // Deprecated in favor of slash opacity syntax ;({ '--tw-ring-opacity': '0', }) ;({ '--tw-ring-opacity': '0.05', }) ;({ '--tw-ring-opacity': '0.1', }) ;({ '--tw-ring-opacity': '0.2', }) ;({ '--tw-ring-opacity': '0.25', }) ;({ '--tw-ring-opacity': '0.3', }) ;({ '--tw-ring-opacity': '0.4', }) ;({ '--tw-ring-opacity': '0.5', }) ;({ '--tw-ring-opacity': '0.6', }) ;({ '--tw-ring-opacity': '0.7', }) ;({ '--tw-ring-opacity': '0.75', }) ;({ '--tw-ring-opacity': '0.8', }) ;({ '--tw-ring-opacity': '0.9', }) ;({ '--tw-ring-opacity': '0.95', }) ;({ '--tw-ring-opacity': '1', }) ;({ '--tw-ring-opacity': 'var(--ring-opacity)', }) `; exports[`twin.macro ringWidth.tsx: ringWidth.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/ring-width theme\`ringWidth.\` tw\`ring-0\` tw\`ring-1\` tw\`ring-2\` tw\`ring\` tw\`ring-4\` tw\`ring-8\` tw\`ring-inset\` tw\`ring-[10px]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/ring-width ;({ 0: '0px', 1: '1px', 2: '2px', 4: '4px', 8: '8px', DEFAULT: '3px', }) ;({ '--tw-ring-offset-shadow': 'var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)', '--tw-ring-shadow': 'var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color)', boxShadow: 'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)', }) ;({ '--tw-ring-offset-shadow': 'var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)', '--tw-ring-shadow': 'var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)', boxShadow: 'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)', }) ;({ '--tw-ring-offset-shadow': 'var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)', '--tw-ring-shadow': 'var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)', boxShadow: 'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)', }) ;({ '--tw-ring-offset-shadow': 'var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)', '--tw-ring-shadow': 'var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)', boxShadow: 'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)', }) ;({ '--tw-ring-offset-shadow': 'var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)', '--tw-ring-shadow': 'var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color)', boxShadow: 'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)', }) ;({ '--tw-ring-offset-shadow': 'var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)', '--tw-ring-shadow': 'var(--tw-ring-inset) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color)', boxShadow: 'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)', }) ;({ '--tw-ring-inset': 'inset', }) ;({ '--tw-ring-offset-shadow': 'var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)', '--tw-ring-shadow': 'var(--tw-ring-inset) 0 0 0 calc(10px + var(--tw-ring-offset-width)) var(--tw-ring-color)', boxShadow: 'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)', }) `; exports[`twin.macro rotate.tsx: rotate.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/rotate theme\`rotate\` tw\`rotate-0\` tw\`rotate-1\` tw\`rotate-2\` tw\`rotate-3\` tw\`rotate-6\` tw\`rotate-12\` tw\`rotate-45\` tw\`rotate-90\` tw\`rotate-180\` tw\`-rotate-1\` tw\`-rotate-2\` tw\`-rotate-3\` tw\`-rotate-6\` tw\`-rotate-12\` tw\`-rotate-45\` tw\`-rotate-90\` tw\`-rotate-180\` tw\`rotate-[17deg]\` tw\`rotate-[23deg] rotate-[2.3rad] rotate-[401grad] rotate-[1.5turn]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/rotate ;({ 0: '0deg', 1: '1deg', 2: '2deg', 3: '3deg', 6: '6deg', 12: '12deg', 45: '45deg', 90: '90deg', 180: '180deg', }) ;({ '--tw-rotate': '0deg', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-rotate': '1deg', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-rotate': '2deg', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-rotate': '3deg', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-rotate': '6deg', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-rotate': '12deg', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-rotate': '45deg', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-rotate': '90deg', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-rotate': '180deg', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-rotate': '-1deg', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-rotate': '-2deg', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-rotate': '-3deg', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-rotate': '-6deg', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-rotate': '-12deg', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-rotate': '-45deg', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-rotate': '-90deg', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-rotate': '-180deg', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-rotate': '17deg', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-rotate': '401grad', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) `; exports[`twin.macro sassyPseudo.tsx: sassyPseudo.tsx 1`] = ` // @ts-nocheck import tw from '../macro' tw\`hover:block first:mt-2 last-of-type:max-width[20px]\` tw\`hover:block first:mt-2 last-of-type:[max-width:20px]\` tw\`my-class1\` tw\`my-class2\` tw\`my-class3\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck ;({ '&:first-child': { marginTop: '0.5rem', }, '&:last-of-type': { maxWidth: '20px', }, '&:hover': { display: 'block', }, }) ;({ '&:first-child': { marginTop: '0.5rem', }, '&:last-of-type': { maxWidth: '20px', }, '&:hover': { display: 'block', }, }) ;({ '&:hover': { backgroundColor: 'pink', }, }) ;({ '& :hover': { backgroundColor: 'orange', }, }) ;({ '.test & :hover': { backgroundColor: 'orange', }, }) `; exports[`twin.macro saturate.tsx: saturate.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/saturate theme\`saturate\` tw\`saturate-0\` tw\`saturate-50\` tw\`saturate-100\` tw\`saturate-150\` tw\`saturate-200\` tw\`saturate-[.25]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/saturate ;({ 0: '0', 50: '.5', 100: '1', 150: '1.5', 200: '2', }) ;({ '--tw-saturate': 'saturate(0)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-saturate': 'saturate(.5)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-saturate': 'saturate(1)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-saturate': 'saturate(1.5)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-saturate': 'saturate(2)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-saturate': 'saturate(.25)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) `; exports[`twin.macro scale.tsx: scale.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/scale theme\`scale\` tw\`scale-0\` tw\`scale-x-0\` tw\`scale-y-0\` tw\`scale-50\` tw\`scale-x-50\` tw\`scale-y-50\` tw\`scale-75\` tw\`scale-x-75\` tw\`scale-y-75\` tw\`scale-90\` tw\`scale-x-90\` tw\`scale-y-90\` tw\`scale-95\` tw\`scale-x-95\` tw\`scale-y-95\` tw\`scale-100\` tw\`scale-x-100\` tw\`scale-y-100\` tw\`scale-105\` tw\`scale-x-105\` tw\`scale-y-105\` tw\`scale-110\` tw\`scale-x-110\` tw\`scale-y-110\` tw\`scale-125\` tw\`scale-x-125\` tw\`scale-y-125\` tw\`scale-150\` tw\`scale-x-150\` tw\`scale-y-150\` tw\`scale-[1.7]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/scale ;({ 0: '0', 50: '.5', 75: '.75', 90: '.9', 95: '.95', 100: '1', 105: '1.05', 110: '1.1', 125: '1.25', 150: '1.5', }) ;({ '--tw-scale-x': '0', '--tw-scale-y': '0', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-scale-x': '0', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-scale-y': '0', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-scale-x': '.5', '--tw-scale-y': '.5', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-scale-x': '.5', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-scale-y': '.5', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-scale-x': '.75', '--tw-scale-y': '.75', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-scale-x': '.75', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-scale-y': '.75', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-scale-x': '.9', '--tw-scale-y': '.9', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-scale-x': '.9', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-scale-y': '.9', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-scale-x': '.95', '--tw-scale-y': '.95', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-scale-x': '.95', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-scale-y': '.95', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-scale-x': '1', '--tw-scale-y': '1', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-scale-x': '1', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-scale-y': '1', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-scale-x': '1.05', '--tw-scale-y': '1.05', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-scale-x': '1.05', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-scale-y': '1.05', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-scale-x': '1.1', '--tw-scale-y': '1.1', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-scale-x': '1.1', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-scale-y': '1.1', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-scale-x': '1.25', '--tw-scale-y': '1.25', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-scale-x': '1.25', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-scale-y': '1.25', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-scale-x': '1.5', '--tw-scale-y': '1.5', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-scale-x': '1.5', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-scale-y': '1.5', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-scale-x': '1.7', '--tw-scale-y': '1.7', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) `; exports[`twin.macro screenImport.tsx: screenImport.tsx 1`] = ` // @ts-nocheck import tw, { styled, screen } from '../macro' // Media query only screen\`sm\` screen.md // Can't work with screen values that begin with a number, eg: screen.2xl screen('lg') screen(\`xl\`) // Constructed media queries ;\` \${screen\`sm\`} { display: block; \${tw\`inline\`} } \` ;({ [screen\`sm\`]: \`display: block; \${tw\`inline\`}\` }) ;({ [screen\`sm\`]: { display: 'block', ...tw\`inline\` } }) // Media queries with styles screen.sm({ color: \`red\` }) screen\`md\`({ color: \`red\` }) screen('lg')({ color: \`red\` }) screen(\`xl\`)({ color: \`red\` }) screen.sm\`color: red;\` screen\`md\`\`color: red;\` screen('lg')\`color: red;\` screen(\`xl\`)\`color: red;\` screen.xl(tw\`inline\`) screen.xl({ ...tw\`inline\` }) screen.xl({ ...tw\`inline\`, display: 'block' }) screen.xl\` \${tw\`inline\`} display: block; \` screen.xl\`color: \${true && 'blue'};\` // Within template literals ;\`\${screen.lg}\` ;\`\${screen\`xl\`}\` ;\`\${screen(\`xl\`)}\` ;\`\${screen('xl')}\` // Screen keys ;
;
;
;
styled.div\` \${{ [screen.xl]: { color: 'red' } }} \` styled.div([{ [screen.xl]: { color: 'red' } }]) // Logical expressions ;
styled.div([{ [true && screen.xl]: { color: 'red' } }]) // Conditional expressions ;
styled.div\` \${{ // eslint-disable-next-line no-constant-condition [true ? screen.xl : screen.sm]: { color: 'red' }, }} \` // Screen with values ;
;
;
;
;
;
↓ ↓ ↓ ↓ ↓ ↓ import _styled from '@emotion/styled' // Media query only ;('@media (min-width: 100px)') ;('@media (min-width: 200px)') // Can't work with screen values that begin with a number, eg: screen.2xl ;('@media (min-width: 300px)') ;('@media (min-width: 400px)') // Constructed media queries ;\` \${'@media (min-width: 100px)'} { display: block; \${{ display: 'inline', }} } \` ;({ '@media (min-width: 100px)': \`display: block; \${{ display: 'inline', }}\`, }) ;({ '@media (min-width: 100px)': { display: 'block', ...{ display: 'inline', }, }, }) // Media queries with styles ;({ '@media (min-width: 100px)': { color: \`red\`, }, }) ;({ '@media (min-width: 200px)': { color: \`red\`, }, }) ;({ '@media (min-width: 300px)': { color: \`red\`, }, }) ;({ '@media (min-width: 400px)': { color: \`red\`, }, }) ;\`@media (min-width: 100px) { \${\`color: red;\`} }\` ;\`@media (min-width: 200px) { \${\`color: red;\`} }\` ;\`@media (min-width: 300px) { \${\`color: red;\`} }\` ;\`@media (min-width: 400px) { \${\`color: red;\`} }\` ;({ '@media (min-width: 400px)': { display: 'inline', }, }) ;({ '@media (min-width: 400px)': { ...{ display: 'inline', }, }, }) ;({ '@media (min-width: 400px)': { ...{ display: 'inline', }, display: 'block', }, }) ;\`@media (min-width: 400px) { \${\` \${{ display: 'inline', }} display: block; \`} }\` ;\`@media (min-width: 400px) { \${\`color: \${true && 'blue'};\`} }\` // Within template literals ;\`\${'@media (min-width: 300px)'}\` ;\`\${'@media (min-width: 400px)'}\` ;\`\${'@media (min-width: 400px)'}\` ;\`\${'@media (min-width: 400px)'}\` // Screen keys ;
;
;
;
_styled.div\` \${{ '@media (min-width: 400px)': { color: 'red', }, }} \` _styled.div([ { '@media (min-width: 400px)': { color: 'red', }, }, ]) // Logical expressions ;
_styled.div([ { [true && '@media (min-width: 400px)']: { color: 'red', }, }, ]) // Conditional expressions ;
_styled.div\` \${{ // eslint-disable-next-line no-constant-condition [true ? '@media (min-width: 400px)' : '@media (min-width: 100px)']: { color: 'red', }, }} \` // Screen with values ;
;
;
;
;
;
`; exports[`twin.macro screenReaders.tsx: screenReaders.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/screen-readers tw\`sr-only\` tw\`not-sr-only\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/screen-readers ;({ position: 'absolute', width: '1px', height: '1px', padding: '0', margin: '-1px', overflow: 'hidden', clip: 'rect(0, 0, 0, 0)', whiteSpace: 'nowrap', borderWidth: '0', }) ;({ position: 'static', width: 'auto', height: 'auto', padding: '0', margin: '0', overflow: 'visible', clip: 'auto', whiteSpace: 'normal', }) `; exports[`twin.macro screens.tsx: screens.tsx 1`] = ` // @ts-nocheck import tw from '../macro' tw\`sm:block\` tw\`md:block\` tw\`lg:block\` tw\`xl:block\` tw\`2xl:block\` tw\`:font-bold\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck ;({ '@media (min-width: 640px)': { display: 'block', }, }) ;({ '@media (min-width: 768px)': { display: 'block', }, }) ;({ '@media (min-width: 1024px)': { display: 'block', }, }) ;({ '@media (min-width: 1280px)': { display: 'block', }, }) ;({ '@media (min-width: 1536px)': { display: 'block', }, }) ;({ '@media (max-width: 399px)': { textDecorationLine: 'underline', }, '@media (min-width: 500px)': { fontWeight: '700', }, }) `; exports[`twin.macro scrollBehavior.tsx: scrollBehavior.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/scroll-behavior tw\`scroll-auto\` tw\`scroll-smooth\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/scroll-behavior ;({ scrollBehavior: 'auto', }) ;({ scrollBehavior: 'smooth', }) `; exports[`twin.macro scrollMargin.tsx: scrollMargin.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/scroll-margin theme\`scrollMargin\` tw\`scroll-m-0\` tw\`scroll-mx-0\` tw\`scroll-my-0\` tw\`scroll-mt-0\` tw\`scroll-mr-0\` tw\`scroll-mb-0\` tw\`scroll-ml-0\` tw\`scroll-m-px\` tw\`scroll-mx-px\` tw\`scroll-my-px\` tw\`scroll-mt-px\` tw\`scroll-mr-px\` tw\`scroll-mb-px\` tw\`scroll-ml-px\` tw\`scroll-m-0\` tw\`scroll-mx-0\` tw\`scroll-my-0\` tw\`scroll-mt-0\` tw\`scroll-mr-0\` tw\`scroll-mb-0\` tw\`scroll-ml-0\` tw\`scroll-m-1\` tw\`scroll-mx-1\` tw\`scroll-my-1\` tw\`scroll-mt-1\` tw\`scroll-mr-1\` tw\`scroll-mb-1\` tw\`scroll-ml-1\` tw\`scroll-m-1\` tw\`scroll-mx-1\` tw\`scroll-my-1\` tw\`scroll-mt-1\` tw\`scroll-mr-1\` tw\`scroll-mb-1\` tw\`scroll-ml-1\` tw\`scroll-m-2\` tw\`scroll-mx-2\` tw\`scroll-my-2\` tw\`scroll-mt-2\` tw\`scroll-mr-2\` tw\`scroll-mb-2\` tw\`scroll-ml-2\` tw\`scroll-m-2\` tw\`scroll-mx-2\` tw\`scroll-my-2\` tw\`scroll-mt-2\` tw\`scroll-mr-2\` tw\`scroll-mb-2\` tw\`scroll-ml-2\` tw\`scroll-m-3\` tw\`scroll-mx-3\` tw\`scroll-my-3\` tw\`scroll-mt-3\` tw\`scroll-mr-3\` tw\`scroll-mb-3\` tw\`scroll-ml-3\` tw\`scroll-m-3\` tw\`scroll-mx-3\` tw\`scroll-my-3\` tw\`scroll-mt-3\` tw\`scroll-mr-3\` tw\`scroll-mb-3\` tw\`scroll-ml-3\` tw\`scroll-m-4\` tw\`scroll-mx-4\` tw\`scroll-my-4\` tw\`scroll-mt-4\` tw\`scroll-mr-4\` tw\`scroll-mb-4\` tw\`scroll-ml-4\` tw\`scroll-m-5\` tw\`scroll-mx-5\` tw\`scroll-my-5\` tw\`scroll-mt-5\` tw\`scroll-mr-5\` tw\`scroll-mb-5\` tw\`scroll-ml-5\` tw\`scroll-m-6\` tw\`scroll-mx-6\` tw\`scroll-my-6\` tw\`scroll-mt-6\` tw\`scroll-mr-6\` tw\`scroll-mb-6\` tw\`scroll-ml-6\` tw\`scroll-m-7\` tw\`scroll-mx-7\` tw\`scroll-my-7\` tw\`scroll-mt-7\` tw\`scroll-mr-7\` tw\`scroll-mb-7\` tw\`scroll-ml-7\` tw\`scroll-m-8\` tw\`scroll-mx-8\` tw\`scroll-my-8\` tw\`scroll-mt-8\` tw\`scroll-mr-8\` tw\`scroll-mb-8\` tw\`scroll-ml-8\` tw\`scroll-m-9\` tw\`scroll-mx-9\` tw\`scroll-my-9\` tw\`scroll-mt-9\` tw\`scroll-mr-9\` tw\`scroll-mb-9\` tw\`scroll-ml-9\` tw\`scroll-m-10\` tw\`scroll-mx-10\` tw\`scroll-my-10\` tw\`scroll-mt-10\` tw\`scroll-mr-10\` tw\`scroll-mb-10\` tw\`scroll-ml-10\` tw\`scroll-m-11\` tw\`scroll-mx-11\` tw\`scroll-my-11\` tw\`scroll-mt-11\` tw\`scroll-mr-11\` tw\`scroll-mb-11\` tw\`scroll-ml-11\` tw\`scroll-m-12\` tw\`scroll-mx-12\` tw\`scroll-my-12\` tw\`scroll-mt-12\` tw\`scroll-mr-12\` tw\`scroll-mb-12\` tw\`scroll-ml-12\` tw\`scroll-m-14\` tw\`scroll-mx-14\` tw\`scroll-my-14\` tw\`scroll-mt-14\` tw\`scroll-mr-14\` tw\`scroll-mb-14\` tw\`scroll-ml-14\` tw\`scroll-m-16\` tw\`scroll-mx-16\` tw\`scroll-my-16\` tw\`scroll-mt-16\` tw\`scroll-mr-16\` tw\`scroll-mb-16\` tw\`scroll-ml-16\` tw\`scroll-m-20\` tw\`scroll-mx-20\` tw\`scroll-my-20\` tw\`scroll-mt-20\` tw\`scroll-mr-20\` tw\`scroll-mb-20\` tw\`scroll-ml-20\` tw\`scroll-m-24\` tw\`scroll-mx-24\` tw\`scroll-my-24\` tw\`scroll-mt-24\` tw\`scroll-mr-24\` tw\`scroll-mb-24\` tw\`scroll-ml-24\` tw\`scroll-m-28\` tw\`scroll-mx-28\` tw\`scroll-my-28\` tw\`scroll-mt-28\` tw\`scroll-mr-28\` tw\`scroll-mb-28\` tw\`scroll-ml-28\` tw\`scroll-m-32\` tw\`scroll-mx-32\` tw\`scroll-my-32\` tw\`scroll-mt-32\` tw\`scroll-mr-32\` tw\`scroll-mb-32\` tw\`scroll-ml-32\` tw\`scroll-m-36\` tw\`scroll-mx-36\` tw\`scroll-my-36\` tw\`scroll-mt-36\` tw\`scroll-mr-36\` tw\`scroll-mb-36\` tw\`scroll-ml-36\` tw\`scroll-m-40\` tw\`scroll-mx-40\` tw\`scroll-my-40\` tw\`scroll-mt-40\` tw\`scroll-mr-40\` tw\`scroll-mb-40\` tw\`scroll-ml-40\` tw\`scroll-m-44\` tw\`scroll-mx-44\` tw\`scroll-my-44\` tw\`scroll-mt-44\` tw\`scroll-mr-44\` tw\`scroll-mb-44\` tw\`scroll-ml-44\` tw\`scroll-m-48\` tw\`scroll-mx-48\` tw\`scroll-my-48\` tw\`scroll-mt-48\` tw\`scroll-mr-48\` tw\`scroll-mb-48\` tw\`scroll-ml-48\` tw\`scroll-m-52\` tw\`scroll-mx-52\` tw\`scroll-my-52\` tw\`scroll-mt-52\` tw\`scroll-mr-52\` tw\`scroll-mb-52\` tw\`scroll-ml-52\` tw\`scroll-m-56\` tw\`scroll-mx-56\` tw\`scroll-my-56\` tw\`scroll-mt-56\` tw\`scroll-mr-56\` tw\`scroll-mb-56\` tw\`scroll-ml-56\` tw\`scroll-m-60\` tw\`scroll-mx-60\` tw\`scroll-my-60\` tw\`scroll-mt-60\` tw\`scroll-mr-60\` tw\`scroll-mb-60\` tw\`scroll-ml-60\` tw\`scroll-m-64\` tw\`scroll-mx-64\` tw\`scroll-my-64\` tw\`scroll-mt-64\` tw\`scroll-mr-64\` tw\`scroll-mb-64\` tw\`scroll-ml-64\` tw\`scroll-m-72\` tw\`scroll-mx-72\` tw\`scroll-my-72\` tw\`scroll-mt-72\` tw\`scroll-mr-72\` tw\`scroll-mb-72\` tw\`scroll-ml-72\` tw\`scroll-m-80\` tw\`scroll-mx-80\` tw\`scroll-my-80\` tw\`scroll-mt-80\` tw\`scroll-mr-80\` tw\`scroll-mb-80\` tw\`scroll-ml-80\` tw\`scroll-m-96\` tw\`scroll-mx-96\` tw\`scroll-my-96\` tw\`scroll-mt-96\` tw\`scroll-mr-96\` tw\`scroll-mb-96\` tw\`scroll-ml-96\` tw\`-scroll-m-96\` tw\`-scroll-mx-96\` tw\`-scroll-my-96\` tw\`-scroll-mt-96\` tw\`-scroll-mr-96\` tw\`-scroll-mb-96\` tw\`-scroll-ml-96\` tw\`-scroll-m-[24rem]\` tw\`scroll-m-[24rem]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/scroll-margin ;({ 0: '0px', 1: '0.25rem', 2: '0.5rem', 3: '0.75rem', 4: '1rem', 5: '1.25rem', 6: '1.5rem', 7: '1.75rem', 8: '2rem', 9: '2.25rem', 10: '2.5rem', 11: '2.75rem', 12: '3rem', 14: '3.5rem', 16: '4rem', 20: '5rem', 24: '6rem', 28: '7rem', 32: '8rem', 36: '9rem', 40: '10rem', 44: '11rem', 48: '12rem', 52: '13rem', 56: '14rem', 60: '15rem', 64: '16rem', 72: '18rem', 80: '20rem', 96: '24rem', px: '1px', 0.5: '0.125rem', 1.5: '0.375rem', 2.5: '0.625rem', 3.5: '0.875rem', }) ;({ scrollMargin: '0px', }) ;({ scrollMarginLeft: '0px', scrollMarginRight: '0px', }) ;({ scrollMarginTop: '0px', scrollMarginBottom: '0px', }) ;({ scrollMarginTop: '0px', }) ;({ scrollMarginRight: '0px', }) ;({ scrollMarginBottom: '0px', }) ;({ scrollMarginLeft: '0px', }) ;({ scrollMargin: '1px', }) ;({ scrollMarginLeft: '1px', scrollMarginRight: '1px', }) ;({ scrollMarginTop: '1px', scrollMarginBottom: '1px', }) ;({ scrollMarginTop: '1px', }) ;({ scrollMarginRight: '1px', }) ;({ scrollMarginBottom: '1px', }) ;({ scrollMarginLeft: '1px', }) ;({ scrollMargin: '0px', }) ;({ scrollMarginLeft: '0px', scrollMarginRight: '0px', }) ;({ scrollMarginTop: '0px', scrollMarginBottom: '0px', }) ;({ scrollMarginTop: '0px', }) ;({ scrollMarginRight: '0px', }) ;({ scrollMarginBottom: '0px', }) ;({ scrollMarginLeft: '0px', }) ;({ scrollMargin: '0.25rem', }) ;({ scrollMarginLeft: '0.25rem', scrollMarginRight: '0.25rem', }) ;({ scrollMarginTop: '0.25rem', scrollMarginBottom: '0.25rem', }) ;({ scrollMarginTop: '0.25rem', }) ;({ scrollMarginRight: '0.25rem', }) ;({ scrollMarginBottom: '0.25rem', }) ;({ scrollMarginLeft: '0.25rem', }) ;({ scrollMargin: '0.25rem', }) ;({ scrollMarginLeft: '0.25rem', scrollMarginRight: '0.25rem', }) ;({ scrollMarginTop: '0.25rem', scrollMarginBottom: '0.25rem', }) ;({ scrollMarginTop: '0.25rem', }) ;({ scrollMarginRight: '0.25rem', }) ;({ scrollMarginBottom: '0.25rem', }) ;({ scrollMarginLeft: '0.25rem', }) ;({ scrollMargin: '0.5rem', }) ;({ scrollMarginLeft: '0.5rem', scrollMarginRight: '0.5rem', }) ;({ scrollMarginTop: '0.5rem', scrollMarginBottom: '0.5rem', }) ;({ scrollMarginTop: '0.5rem', }) ;({ scrollMarginRight: '0.5rem', }) ;({ scrollMarginBottom: '0.5rem', }) ;({ scrollMarginLeft: '0.5rem', }) ;({ scrollMargin: '0.5rem', }) ;({ scrollMarginLeft: '0.5rem', scrollMarginRight: '0.5rem', }) ;({ scrollMarginTop: '0.5rem', scrollMarginBottom: '0.5rem', }) ;({ scrollMarginTop: '0.5rem', }) ;({ scrollMarginRight: '0.5rem', }) ;({ scrollMarginBottom: '0.5rem', }) ;({ scrollMarginLeft: '0.5rem', }) ;({ scrollMargin: '0.75rem', }) ;({ scrollMarginLeft: '0.75rem', scrollMarginRight: '0.75rem', }) ;({ scrollMarginTop: '0.75rem', scrollMarginBottom: '0.75rem', }) ;({ scrollMarginTop: '0.75rem', }) ;({ scrollMarginRight: '0.75rem', }) ;({ scrollMarginBottom: '0.75rem', }) ;({ scrollMarginLeft: '0.75rem', }) ;({ scrollMargin: '0.75rem', }) ;({ scrollMarginLeft: '0.75rem', scrollMarginRight: '0.75rem', }) ;({ scrollMarginTop: '0.75rem', scrollMarginBottom: '0.75rem', }) ;({ scrollMarginTop: '0.75rem', }) ;({ scrollMarginRight: '0.75rem', }) ;({ scrollMarginBottom: '0.75rem', }) ;({ scrollMarginLeft: '0.75rem', }) ;({ scrollMargin: '1rem', }) ;({ scrollMarginLeft: '1rem', scrollMarginRight: '1rem', }) ;({ scrollMarginTop: '1rem', scrollMarginBottom: '1rem', }) ;({ scrollMarginTop: '1rem', }) ;({ scrollMarginRight: '1rem', }) ;({ scrollMarginBottom: '1rem', }) ;({ scrollMarginLeft: '1rem', }) ;({ scrollMargin: '1.25rem', }) ;({ scrollMarginLeft: '1.25rem', scrollMarginRight: '1.25rem', }) ;({ scrollMarginTop: '1.25rem', scrollMarginBottom: '1.25rem', }) ;({ scrollMarginTop: '1.25rem', }) ;({ scrollMarginRight: '1.25rem', }) ;({ scrollMarginBottom: '1.25rem', }) ;({ scrollMarginLeft: '1.25rem', }) ;({ scrollMargin: '1.5rem', }) ;({ scrollMarginLeft: '1.5rem', scrollMarginRight: '1.5rem', }) ;({ scrollMarginTop: '1.5rem', scrollMarginBottom: '1.5rem', }) ;({ scrollMarginTop: '1.5rem', }) ;({ scrollMarginRight: '1.5rem', }) ;({ scrollMarginBottom: '1.5rem', }) ;({ scrollMarginLeft: '1.5rem', }) ;({ scrollMargin: '1.75rem', }) ;({ scrollMarginLeft: '1.75rem', scrollMarginRight: '1.75rem', }) ;({ scrollMarginTop: '1.75rem', scrollMarginBottom: '1.75rem', }) ;({ scrollMarginTop: '1.75rem', }) ;({ scrollMarginRight: '1.75rem', }) ;({ scrollMarginBottom: '1.75rem', }) ;({ scrollMarginLeft: '1.75rem', }) ;({ scrollMargin: '2rem', }) ;({ scrollMarginLeft: '2rem', scrollMarginRight: '2rem', }) ;({ scrollMarginTop: '2rem', scrollMarginBottom: '2rem', }) ;({ scrollMarginTop: '2rem', }) ;({ scrollMarginRight: '2rem', }) ;({ scrollMarginBottom: '2rem', }) ;({ scrollMarginLeft: '2rem', }) ;({ scrollMargin: '2.25rem', }) ;({ scrollMarginLeft: '2.25rem', scrollMarginRight: '2.25rem', }) ;({ scrollMarginTop: '2.25rem', scrollMarginBottom: '2.25rem', }) ;({ scrollMarginTop: '2.25rem', }) ;({ scrollMarginRight: '2.25rem', }) ;({ scrollMarginBottom: '2.25rem', }) ;({ scrollMarginLeft: '2.25rem', }) ;({ scrollMargin: '2.5rem', }) ;({ scrollMarginLeft: '2.5rem', scrollMarginRight: '2.5rem', }) ;({ scrollMarginTop: '2.5rem', scrollMarginBottom: '2.5rem', }) ;({ scrollMarginTop: '2.5rem', }) ;({ scrollMarginRight: '2.5rem', }) ;({ scrollMarginBottom: '2.5rem', }) ;({ scrollMarginLeft: '2.5rem', }) ;({ scrollMargin: '2.75rem', }) ;({ scrollMarginLeft: '2.75rem', scrollMarginRight: '2.75rem', }) ;({ scrollMarginTop: '2.75rem', scrollMarginBottom: '2.75rem', }) ;({ scrollMarginTop: '2.75rem', }) ;({ scrollMarginRight: '2.75rem', }) ;({ scrollMarginBottom: '2.75rem', }) ;({ scrollMarginLeft: '2.75rem', }) ;({ scrollMargin: '3rem', }) ;({ scrollMarginLeft: '3rem', scrollMarginRight: '3rem', }) ;({ scrollMarginTop: '3rem', scrollMarginBottom: '3rem', }) ;({ scrollMarginTop: '3rem', }) ;({ scrollMarginRight: '3rem', }) ;({ scrollMarginBottom: '3rem', }) ;({ scrollMarginLeft: '3rem', }) ;({ scrollMargin: '3.5rem', }) ;({ scrollMarginLeft: '3.5rem', scrollMarginRight: '3.5rem', }) ;({ scrollMarginTop: '3.5rem', scrollMarginBottom: '3.5rem', }) ;({ scrollMarginTop: '3.5rem', }) ;({ scrollMarginRight: '3.5rem', }) ;({ scrollMarginBottom: '3.5rem', }) ;({ scrollMarginLeft: '3.5rem', }) ;({ scrollMargin: '4rem', }) ;({ scrollMarginLeft: '4rem', scrollMarginRight: '4rem', }) ;({ scrollMarginTop: '4rem', scrollMarginBottom: '4rem', }) ;({ scrollMarginTop: '4rem', }) ;({ scrollMarginRight: '4rem', }) ;({ scrollMarginBottom: '4rem', }) ;({ scrollMarginLeft: '4rem', }) ;({ scrollMargin: '5rem', }) ;({ scrollMarginLeft: '5rem', scrollMarginRight: '5rem', }) ;({ scrollMarginTop: '5rem', scrollMarginBottom: '5rem', }) ;({ scrollMarginTop: '5rem', }) ;({ scrollMarginRight: '5rem', }) ;({ scrollMarginBottom: '5rem', }) ;({ scrollMarginLeft: '5rem', }) ;({ scrollMargin: '6rem', }) ;({ scrollMarginLeft: '6rem', scrollMarginRight: '6rem', }) ;({ scrollMarginTop: '6rem', scrollMarginBottom: '6rem', }) ;({ scrollMarginTop: '6rem', }) ;({ scrollMarginRight: '6rem', }) ;({ scrollMarginBottom: '6rem', }) ;({ scrollMarginLeft: '6rem', }) ;({ scrollMargin: '7rem', }) ;({ scrollMarginLeft: '7rem', scrollMarginRight: '7rem', }) ;({ scrollMarginTop: '7rem', scrollMarginBottom: '7rem', }) ;({ scrollMarginTop: '7rem', }) ;({ scrollMarginRight: '7rem', }) ;({ scrollMarginBottom: '7rem', }) ;({ scrollMarginLeft: '7rem', }) ;({ scrollMargin: '8rem', }) ;({ scrollMarginLeft: '8rem', scrollMarginRight: '8rem', }) ;({ scrollMarginTop: '8rem', scrollMarginBottom: '8rem', }) ;({ scrollMarginTop: '8rem', }) ;({ scrollMarginRight: '8rem', }) ;({ scrollMarginBottom: '8rem', }) ;({ scrollMarginLeft: '8rem', }) ;({ scrollMargin: '9rem', }) ;({ scrollMarginLeft: '9rem', scrollMarginRight: '9rem', }) ;({ scrollMarginTop: '9rem', scrollMarginBottom: '9rem', }) ;({ scrollMarginTop: '9rem', }) ;({ scrollMarginRight: '9rem', }) ;({ scrollMarginBottom: '9rem', }) ;({ scrollMarginLeft: '9rem', }) ;({ scrollMargin: '10rem', }) ;({ scrollMarginLeft: '10rem', scrollMarginRight: '10rem', }) ;({ scrollMarginTop: '10rem', scrollMarginBottom: '10rem', }) ;({ scrollMarginTop: '10rem', }) ;({ scrollMarginRight: '10rem', }) ;({ scrollMarginBottom: '10rem', }) ;({ scrollMarginLeft: '10rem', }) ;({ scrollMargin: '11rem', }) ;({ scrollMarginLeft: '11rem', scrollMarginRight: '11rem', }) ;({ scrollMarginTop: '11rem', scrollMarginBottom: '11rem', }) ;({ scrollMarginTop: '11rem', }) ;({ scrollMarginRight: '11rem', }) ;({ scrollMarginBottom: '11rem', }) ;({ scrollMarginLeft: '11rem', }) ;({ scrollMargin: '12rem', }) ;({ scrollMarginLeft: '12rem', scrollMarginRight: '12rem', }) ;({ scrollMarginTop: '12rem', scrollMarginBottom: '12rem', }) ;({ scrollMarginTop: '12rem', }) ;({ scrollMarginRight: '12rem', }) ;({ scrollMarginBottom: '12rem', }) ;({ scrollMarginLeft: '12rem', }) ;({ scrollMargin: '13rem', }) ;({ scrollMarginLeft: '13rem', scrollMarginRight: '13rem', }) ;({ scrollMarginTop: '13rem', scrollMarginBottom: '13rem', }) ;({ scrollMarginTop: '13rem', }) ;({ scrollMarginRight: '13rem', }) ;({ scrollMarginBottom: '13rem', }) ;({ scrollMarginLeft: '13rem', }) ;({ scrollMargin: '14rem', }) ;({ scrollMarginLeft: '14rem', scrollMarginRight: '14rem', }) ;({ scrollMarginTop: '14rem', scrollMarginBottom: '14rem', }) ;({ scrollMarginTop: '14rem', }) ;({ scrollMarginRight: '14rem', }) ;({ scrollMarginBottom: '14rem', }) ;({ scrollMarginLeft: '14rem', }) ;({ scrollMargin: '15rem', }) ;({ scrollMarginLeft: '15rem', scrollMarginRight: '15rem', }) ;({ scrollMarginTop: '15rem', scrollMarginBottom: '15rem', }) ;({ scrollMarginTop: '15rem', }) ;({ scrollMarginRight: '15rem', }) ;({ scrollMarginBottom: '15rem', }) ;({ scrollMarginLeft: '15rem', }) ;({ scrollMargin: '16rem', }) ;({ scrollMarginLeft: '16rem', scrollMarginRight: '16rem', }) ;({ scrollMarginTop: '16rem', scrollMarginBottom: '16rem', }) ;({ scrollMarginTop: '16rem', }) ;({ scrollMarginRight: '16rem', }) ;({ scrollMarginBottom: '16rem', }) ;({ scrollMarginLeft: '16rem', }) ;({ scrollMargin: '18rem', }) ;({ scrollMarginLeft: '18rem', scrollMarginRight: '18rem', }) ;({ scrollMarginTop: '18rem', scrollMarginBottom: '18rem', }) ;({ scrollMarginTop: '18rem', }) ;({ scrollMarginRight: '18rem', }) ;({ scrollMarginBottom: '18rem', }) ;({ scrollMarginLeft: '18rem', }) ;({ scrollMargin: '20rem', }) ;({ scrollMarginLeft: '20rem', scrollMarginRight: '20rem', }) ;({ scrollMarginTop: '20rem', scrollMarginBottom: '20rem', }) ;({ scrollMarginTop: '20rem', }) ;({ scrollMarginRight: '20rem', }) ;({ scrollMarginBottom: '20rem', }) ;({ scrollMarginLeft: '20rem', }) ;({ scrollMargin: '24rem', }) ;({ scrollMarginLeft: '24rem', scrollMarginRight: '24rem', }) ;({ scrollMarginTop: '24rem', scrollMarginBottom: '24rem', }) ;({ scrollMarginTop: '24rem', }) ;({ scrollMarginRight: '24rem', }) ;({ scrollMarginBottom: '24rem', }) ;({ scrollMarginLeft: '24rem', }) ;({ scrollMargin: '-24rem', }) ;({ scrollMarginLeft: '-24rem', scrollMarginRight: '-24rem', }) ;({ scrollMarginTop: '-24rem', scrollMarginBottom: '-24rem', }) ;({ scrollMarginTop: '-24rem', }) ;({ scrollMarginRight: '-24rem', }) ;({ scrollMarginBottom: '-24rem', }) ;({ scrollMarginLeft: '-24rem', }) ;({ scrollMargin: '-24rem', }) ;({ scrollMargin: '24rem', }) `; exports[`twin.macro scrollPadding.tsx: scrollPadding.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/scroll-padding theme\`scrollPadding\` tw\`scroll-p-0\` tw\`scroll-px-0\` tw\`scroll-py-0\` tw\`scroll-pt-0\` tw\`scroll-pr-0\` tw\`scroll-pb-0\` tw\`scroll-pl-0\` tw\`scroll-p-px\` tw\`scroll-px-px\` tw\`scroll-py-px\` tw\`scroll-pt-px\` tw\`scroll-pr-px\` tw\`scroll-pb-px\` tw\`scroll-pl-px\` tw\`scroll-p-0\` tw\`scroll-px-0\` tw\`scroll-py-0\` tw\`scroll-pt-0\` tw\`scroll-pr-0\` tw\`scroll-pb-0\` tw\`scroll-pl-0\` tw\`scroll-p-1\` tw\`scroll-px-1\` tw\`scroll-py-1\` tw\`scroll-pt-1\` tw\`scroll-pr-1\` tw\`scroll-pb-1\` tw\`scroll-pl-1\` tw\`scroll-p-1\` tw\`scroll-px-1\` tw\`scroll-py-1\` tw\`scroll-pt-1\` tw\`scroll-pr-1\` tw\`scroll-pb-1\` tw\`scroll-pl-1\` tw\`scroll-p-2\` tw\`scroll-px-2\` tw\`scroll-py-2\` tw\`scroll-pt-2\` tw\`scroll-pr-2\` tw\`scroll-pb-2\` tw\`scroll-pl-2\` tw\`scroll-p-2\` tw\`scroll-px-2\` tw\`scroll-py-2\` tw\`scroll-pt-2\` tw\`scroll-pr-2\` tw\`scroll-pb-2\` tw\`scroll-pl-2\` tw\`scroll-p-3\` tw\`scroll-px-3\` tw\`scroll-py-3\` tw\`scroll-pt-3\` tw\`scroll-pr-3\` tw\`scroll-pb-3\` tw\`scroll-pl-3\` tw\`scroll-p-3\` tw\`scroll-px-3\` tw\`scroll-py-3\` tw\`scroll-pt-3\` tw\`scroll-pr-3\` tw\`scroll-pb-3\` tw\`scroll-pl-3\` tw\`scroll-p-4\` tw\`scroll-px-4\` tw\`scroll-py-4\` tw\`scroll-pt-4\` tw\`scroll-pr-4\` tw\`scroll-pb-4\` tw\`scroll-pl-4\` tw\`scroll-p-5\` tw\`scroll-px-5\` tw\`scroll-py-5\` tw\`scroll-pt-5\` tw\`scroll-pr-5\` tw\`scroll-pb-5\` tw\`scroll-pl-5\` tw\`scroll-p-6\` tw\`scroll-px-6\` tw\`scroll-py-6\` tw\`scroll-pt-6\` tw\`scroll-pr-6\` tw\`scroll-pb-6\` tw\`scroll-pl-6\` tw\`scroll-p-7\` tw\`scroll-px-7\` tw\`scroll-py-7\` tw\`scroll-pt-7\` tw\`scroll-pr-7\` tw\`scroll-pb-7\` tw\`scroll-pl-7\` tw\`scroll-p-8\` tw\`scroll-px-8\` tw\`scroll-py-8\` tw\`scroll-pt-8\` tw\`scroll-pr-8\` tw\`scroll-pb-8\` tw\`scroll-pl-8\` tw\`scroll-p-9\` tw\`scroll-px-9\` tw\`scroll-py-9\` tw\`scroll-pt-9\` tw\`scroll-pr-9\` tw\`scroll-pb-9\` tw\`scroll-pl-9\` tw\`scroll-p-10\` tw\`scroll-px-10\` tw\`scroll-py-10\` tw\`scroll-pt-10\` tw\`scroll-pr-10\` tw\`scroll-pb-10\` tw\`scroll-pl-10\` tw\`scroll-p-11\` tw\`scroll-px-11\` tw\`scroll-py-11\` tw\`scroll-pt-11\` tw\`scroll-pr-11\` tw\`scroll-pb-11\` tw\`scroll-pl-11\` tw\`scroll-p-12\` tw\`scroll-px-12\` tw\`scroll-py-12\` tw\`scroll-pt-12\` tw\`scroll-pr-12\` tw\`scroll-pb-12\` tw\`scroll-pl-12\` tw\`scroll-p-14\` tw\`scroll-px-14\` tw\`scroll-py-14\` tw\`scroll-pt-14\` tw\`scroll-pr-14\` tw\`scroll-pb-14\` tw\`scroll-pl-14\` tw\`scroll-p-16\` tw\`scroll-px-16\` tw\`scroll-py-16\` tw\`scroll-pt-16\` tw\`scroll-pr-16\` tw\`scroll-pb-16\` tw\`scroll-pl-16\` tw\`scroll-p-20\` tw\`scroll-px-20\` tw\`scroll-py-20\` tw\`scroll-pt-20\` tw\`scroll-pr-20\` tw\`scroll-pb-20\` tw\`scroll-pl-20\` tw\`scroll-p-24\` tw\`scroll-px-24\` tw\`scroll-py-24\` tw\`scroll-pt-24\` tw\`scroll-pr-24\` tw\`scroll-pb-24\` tw\`scroll-pl-24\` tw\`scroll-p-28\` tw\`scroll-px-28\` tw\`scroll-py-28\` tw\`scroll-pt-28\` tw\`scroll-pr-28\` tw\`scroll-pb-28\` tw\`scroll-pl-28\` tw\`scroll-p-32\` tw\`scroll-px-32\` tw\`scroll-py-32\` tw\`scroll-pt-32\` tw\`scroll-pr-32\` tw\`scroll-pb-32\` tw\`scroll-pl-32\` tw\`scroll-p-36\` tw\`scroll-px-36\` tw\`scroll-py-36\` tw\`scroll-pt-36\` tw\`scroll-pr-36\` tw\`scroll-pb-36\` tw\`scroll-pl-36\` tw\`scroll-p-40\` tw\`scroll-px-40\` tw\`scroll-py-40\` tw\`scroll-pt-40\` tw\`scroll-pr-40\` tw\`scroll-pb-40\` tw\`scroll-pl-40\` tw\`scroll-p-44\` tw\`scroll-px-44\` tw\`scroll-py-44\` tw\`scroll-pt-44\` tw\`scroll-pr-44\` tw\`scroll-pb-44\` tw\`scroll-pl-44\` tw\`scroll-p-48\` tw\`scroll-px-48\` tw\`scroll-py-48\` tw\`scroll-pt-48\` tw\`scroll-pr-48\` tw\`scroll-pb-48\` tw\`scroll-pl-48\` tw\`scroll-p-52\` tw\`scroll-px-52\` tw\`scroll-py-52\` tw\`scroll-pt-52\` tw\`scroll-pr-52\` tw\`scroll-pb-52\` tw\`scroll-pl-52\` tw\`scroll-p-56\` tw\`scroll-px-56\` tw\`scroll-py-56\` tw\`scroll-pt-56\` tw\`scroll-pr-56\` tw\`scroll-pb-56\` tw\`scroll-pl-56\` tw\`scroll-p-60\` tw\`scroll-px-60\` tw\`scroll-py-60\` tw\`scroll-pt-60\` tw\`scroll-pr-60\` tw\`scroll-pb-60\` tw\`scroll-pl-60\` tw\`scroll-p-64\` tw\`scroll-px-64\` tw\`scroll-py-64\` tw\`scroll-pt-64\` tw\`scroll-pr-64\` tw\`scroll-pb-64\` tw\`scroll-pl-64\` tw\`scroll-p-72\` tw\`scroll-px-72\` tw\`scroll-py-72\` tw\`scroll-pt-72\` tw\`scroll-pr-72\` tw\`scroll-pb-72\` tw\`scroll-pl-72\` tw\`scroll-p-80\` tw\`scroll-px-80\` tw\`scroll-py-80\` tw\`scroll-pt-80\` tw\`scroll-pr-80\` tw\`scroll-pb-80\` tw\`scroll-pl-80\` tw\`scroll-p-96\` tw\`scroll-px-96\` tw\`scroll-py-96\` tw\`scroll-pt-96\` tw\`scroll-pr-96\` tw\`scroll-pb-96\` tw\`scroll-pl-96\` tw\`scroll-p-[24rem]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/scroll-padding ;({ 0: '0px', 1: '0.25rem', 2: '0.5rem', 3: '0.75rem', 4: '1rem', 5: '1.25rem', 6: '1.5rem', 7: '1.75rem', 8: '2rem', 9: '2.25rem', 10: '2.5rem', 11: '2.75rem', 12: '3rem', 14: '3.5rem', 16: '4rem', 20: '5rem', 24: '6rem', 28: '7rem', 32: '8rem', 36: '9rem', 40: '10rem', 44: '11rem', 48: '12rem', 52: '13rem', 56: '14rem', 60: '15rem', 64: '16rem', 72: '18rem', 80: '20rem', 96: '24rem', px: '1px', 0.5: '0.125rem', 1.5: '0.375rem', 2.5: '0.625rem', 3.5: '0.875rem', }) ;({ scrollPadding: '0px', }) ;({ scrollPaddingLeft: '0px', scrollPaddingRight: '0px', }) ;({ scrollPaddingTop: '0px', scrollPaddingBottom: '0px', }) ;({ scrollPaddingTop: '0px', }) ;({ scrollPaddingRight: '0px', }) ;({ scrollPaddingBottom: '0px', }) ;({ scrollPaddingLeft: '0px', }) ;({ scrollPadding: '1px', }) ;({ scrollPaddingLeft: '1px', scrollPaddingRight: '1px', }) ;({ scrollPaddingTop: '1px', scrollPaddingBottom: '1px', }) ;({ scrollPaddingTop: '1px', }) ;({ scrollPaddingRight: '1px', }) ;({ scrollPaddingBottom: '1px', }) ;({ scrollPaddingLeft: '1px', }) ;({ scrollPadding: '0px', }) ;({ scrollPaddingLeft: '0px', scrollPaddingRight: '0px', }) ;({ scrollPaddingTop: '0px', scrollPaddingBottom: '0px', }) ;({ scrollPaddingTop: '0px', }) ;({ scrollPaddingRight: '0px', }) ;({ scrollPaddingBottom: '0px', }) ;({ scrollPaddingLeft: '0px', }) ;({ scrollPadding: '0.25rem', }) ;({ scrollPaddingLeft: '0.25rem', scrollPaddingRight: '0.25rem', }) ;({ scrollPaddingTop: '0.25rem', scrollPaddingBottom: '0.25rem', }) ;({ scrollPaddingTop: '0.25rem', }) ;({ scrollPaddingRight: '0.25rem', }) ;({ scrollPaddingBottom: '0.25rem', }) ;({ scrollPaddingLeft: '0.25rem', }) ;({ scrollPadding: '0.25rem', }) ;({ scrollPaddingLeft: '0.25rem', scrollPaddingRight: '0.25rem', }) ;({ scrollPaddingTop: '0.25rem', scrollPaddingBottom: '0.25rem', }) ;({ scrollPaddingTop: '0.25rem', }) ;({ scrollPaddingRight: '0.25rem', }) ;({ scrollPaddingBottom: '0.25rem', }) ;({ scrollPaddingLeft: '0.25rem', }) ;({ scrollPadding: '0.5rem', }) ;({ scrollPaddingLeft: '0.5rem', scrollPaddingRight: '0.5rem', }) ;({ scrollPaddingTop: '0.5rem', scrollPaddingBottom: '0.5rem', }) ;({ scrollPaddingTop: '0.5rem', }) ;({ scrollPaddingRight: '0.5rem', }) ;({ scrollPaddingBottom: '0.5rem', }) ;({ scrollPaddingLeft: '0.5rem', }) ;({ scrollPadding: '0.5rem', }) ;({ scrollPaddingLeft: '0.5rem', scrollPaddingRight: '0.5rem', }) ;({ scrollPaddingTop: '0.5rem', scrollPaddingBottom: '0.5rem', }) ;({ scrollPaddingTop: '0.5rem', }) ;({ scrollPaddingRight: '0.5rem', }) ;({ scrollPaddingBottom: '0.5rem', }) ;({ scrollPaddingLeft: '0.5rem', }) ;({ scrollPadding: '0.75rem', }) ;({ scrollPaddingLeft: '0.75rem', scrollPaddingRight: '0.75rem', }) ;({ scrollPaddingTop: '0.75rem', scrollPaddingBottom: '0.75rem', }) ;({ scrollPaddingTop: '0.75rem', }) ;({ scrollPaddingRight: '0.75rem', }) ;({ scrollPaddingBottom: '0.75rem', }) ;({ scrollPaddingLeft: '0.75rem', }) ;({ scrollPadding: '0.75rem', }) ;({ scrollPaddingLeft: '0.75rem', scrollPaddingRight: '0.75rem', }) ;({ scrollPaddingTop: '0.75rem', scrollPaddingBottom: '0.75rem', }) ;({ scrollPaddingTop: '0.75rem', }) ;({ scrollPaddingRight: '0.75rem', }) ;({ scrollPaddingBottom: '0.75rem', }) ;({ scrollPaddingLeft: '0.75rem', }) ;({ scrollPadding: '1rem', }) ;({ scrollPaddingLeft: '1rem', scrollPaddingRight: '1rem', }) ;({ scrollPaddingTop: '1rem', scrollPaddingBottom: '1rem', }) ;({ scrollPaddingTop: '1rem', }) ;({ scrollPaddingRight: '1rem', }) ;({ scrollPaddingBottom: '1rem', }) ;({ scrollPaddingLeft: '1rem', }) ;({ scrollPadding: '1.25rem', }) ;({ scrollPaddingLeft: '1.25rem', scrollPaddingRight: '1.25rem', }) ;({ scrollPaddingTop: '1.25rem', scrollPaddingBottom: '1.25rem', }) ;({ scrollPaddingTop: '1.25rem', }) ;({ scrollPaddingRight: '1.25rem', }) ;({ scrollPaddingBottom: '1.25rem', }) ;({ scrollPaddingLeft: '1.25rem', }) ;({ scrollPadding: '1.5rem', }) ;({ scrollPaddingLeft: '1.5rem', scrollPaddingRight: '1.5rem', }) ;({ scrollPaddingTop: '1.5rem', scrollPaddingBottom: '1.5rem', }) ;({ scrollPaddingTop: '1.5rem', }) ;({ scrollPaddingRight: '1.5rem', }) ;({ scrollPaddingBottom: '1.5rem', }) ;({ scrollPaddingLeft: '1.5rem', }) ;({ scrollPadding: '1.75rem', }) ;({ scrollPaddingLeft: '1.75rem', scrollPaddingRight: '1.75rem', }) ;({ scrollPaddingTop: '1.75rem', scrollPaddingBottom: '1.75rem', }) ;({ scrollPaddingTop: '1.75rem', }) ;({ scrollPaddingRight: '1.75rem', }) ;({ scrollPaddingBottom: '1.75rem', }) ;({ scrollPaddingLeft: '1.75rem', }) ;({ scrollPadding: '2rem', }) ;({ scrollPaddingLeft: '2rem', scrollPaddingRight: '2rem', }) ;({ scrollPaddingTop: '2rem', scrollPaddingBottom: '2rem', }) ;({ scrollPaddingTop: '2rem', }) ;({ scrollPaddingRight: '2rem', }) ;({ scrollPaddingBottom: '2rem', }) ;({ scrollPaddingLeft: '2rem', }) ;({ scrollPadding: '2.25rem', }) ;({ scrollPaddingLeft: '2.25rem', scrollPaddingRight: '2.25rem', }) ;({ scrollPaddingTop: '2.25rem', scrollPaddingBottom: '2.25rem', }) ;({ scrollPaddingTop: '2.25rem', }) ;({ scrollPaddingRight: '2.25rem', }) ;({ scrollPaddingBottom: '2.25rem', }) ;({ scrollPaddingLeft: '2.25rem', }) ;({ scrollPadding: '2.5rem', }) ;({ scrollPaddingLeft: '2.5rem', scrollPaddingRight: '2.5rem', }) ;({ scrollPaddingTop: '2.5rem', scrollPaddingBottom: '2.5rem', }) ;({ scrollPaddingTop: '2.5rem', }) ;({ scrollPaddingRight: '2.5rem', }) ;({ scrollPaddingBottom: '2.5rem', }) ;({ scrollPaddingLeft: '2.5rem', }) ;({ scrollPadding: '2.75rem', }) ;({ scrollPaddingLeft: '2.75rem', scrollPaddingRight: '2.75rem', }) ;({ scrollPaddingTop: '2.75rem', scrollPaddingBottom: '2.75rem', }) ;({ scrollPaddingTop: '2.75rem', }) ;({ scrollPaddingRight: '2.75rem', }) ;({ scrollPaddingBottom: '2.75rem', }) ;({ scrollPaddingLeft: '2.75rem', }) ;({ scrollPadding: '3rem', }) ;({ scrollPaddingLeft: '3rem', scrollPaddingRight: '3rem', }) ;({ scrollPaddingTop: '3rem', scrollPaddingBottom: '3rem', }) ;({ scrollPaddingTop: '3rem', }) ;({ scrollPaddingRight: '3rem', }) ;({ scrollPaddingBottom: '3rem', }) ;({ scrollPaddingLeft: '3rem', }) ;({ scrollPadding: '3.5rem', }) ;({ scrollPaddingLeft: '3.5rem', scrollPaddingRight: '3.5rem', }) ;({ scrollPaddingTop: '3.5rem', scrollPaddingBottom: '3.5rem', }) ;({ scrollPaddingTop: '3.5rem', }) ;({ scrollPaddingRight: '3.5rem', }) ;({ scrollPaddingBottom: '3.5rem', }) ;({ scrollPaddingLeft: '3.5rem', }) ;({ scrollPadding: '4rem', }) ;({ scrollPaddingLeft: '4rem', scrollPaddingRight: '4rem', }) ;({ scrollPaddingTop: '4rem', scrollPaddingBottom: '4rem', }) ;({ scrollPaddingTop: '4rem', }) ;({ scrollPaddingRight: '4rem', }) ;({ scrollPaddingBottom: '4rem', }) ;({ scrollPaddingLeft: '4rem', }) ;({ scrollPadding: '5rem', }) ;({ scrollPaddingLeft: '5rem', scrollPaddingRight: '5rem', }) ;({ scrollPaddingTop: '5rem', scrollPaddingBottom: '5rem', }) ;({ scrollPaddingTop: '5rem', }) ;({ scrollPaddingRight: '5rem', }) ;({ scrollPaddingBottom: '5rem', }) ;({ scrollPaddingLeft: '5rem', }) ;({ scrollPadding: '6rem', }) ;({ scrollPaddingLeft: '6rem', scrollPaddingRight: '6rem', }) ;({ scrollPaddingTop: '6rem', scrollPaddingBottom: '6rem', }) ;({ scrollPaddingTop: '6rem', }) ;({ scrollPaddingRight: '6rem', }) ;({ scrollPaddingBottom: '6rem', }) ;({ scrollPaddingLeft: '6rem', }) ;({ scrollPadding: '7rem', }) ;({ scrollPaddingLeft: '7rem', scrollPaddingRight: '7rem', }) ;({ scrollPaddingTop: '7rem', scrollPaddingBottom: '7rem', }) ;({ scrollPaddingTop: '7rem', }) ;({ scrollPaddingRight: '7rem', }) ;({ scrollPaddingBottom: '7rem', }) ;({ scrollPaddingLeft: '7rem', }) ;({ scrollPadding: '8rem', }) ;({ scrollPaddingLeft: '8rem', scrollPaddingRight: '8rem', }) ;({ scrollPaddingTop: '8rem', scrollPaddingBottom: '8rem', }) ;({ scrollPaddingTop: '8rem', }) ;({ scrollPaddingRight: '8rem', }) ;({ scrollPaddingBottom: '8rem', }) ;({ scrollPaddingLeft: '8rem', }) ;({ scrollPadding: '9rem', }) ;({ scrollPaddingLeft: '9rem', scrollPaddingRight: '9rem', }) ;({ scrollPaddingTop: '9rem', scrollPaddingBottom: '9rem', }) ;({ scrollPaddingTop: '9rem', }) ;({ scrollPaddingRight: '9rem', }) ;({ scrollPaddingBottom: '9rem', }) ;({ scrollPaddingLeft: '9rem', }) ;({ scrollPadding: '10rem', }) ;({ scrollPaddingLeft: '10rem', scrollPaddingRight: '10rem', }) ;({ scrollPaddingTop: '10rem', scrollPaddingBottom: '10rem', }) ;({ scrollPaddingTop: '10rem', }) ;({ scrollPaddingRight: '10rem', }) ;({ scrollPaddingBottom: '10rem', }) ;({ scrollPaddingLeft: '10rem', }) ;({ scrollPadding: '11rem', }) ;({ scrollPaddingLeft: '11rem', scrollPaddingRight: '11rem', }) ;({ scrollPaddingTop: '11rem', scrollPaddingBottom: '11rem', }) ;({ scrollPaddingTop: '11rem', }) ;({ scrollPaddingRight: '11rem', }) ;({ scrollPaddingBottom: '11rem', }) ;({ scrollPaddingLeft: '11rem', }) ;({ scrollPadding: '12rem', }) ;({ scrollPaddingLeft: '12rem', scrollPaddingRight: '12rem', }) ;({ scrollPaddingTop: '12rem', scrollPaddingBottom: '12rem', }) ;({ scrollPaddingTop: '12rem', }) ;({ scrollPaddingRight: '12rem', }) ;({ scrollPaddingBottom: '12rem', }) ;({ scrollPaddingLeft: '12rem', }) ;({ scrollPadding: '13rem', }) ;({ scrollPaddingLeft: '13rem', scrollPaddingRight: '13rem', }) ;({ scrollPaddingTop: '13rem', scrollPaddingBottom: '13rem', }) ;({ scrollPaddingTop: '13rem', }) ;({ scrollPaddingRight: '13rem', }) ;({ scrollPaddingBottom: '13rem', }) ;({ scrollPaddingLeft: '13rem', }) ;({ scrollPadding: '14rem', }) ;({ scrollPaddingLeft: '14rem', scrollPaddingRight: '14rem', }) ;({ scrollPaddingTop: '14rem', scrollPaddingBottom: '14rem', }) ;({ scrollPaddingTop: '14rem', }) ;({ scrollPaddingRight: '14rem', }) ;({ scrollPaddingBottom: '14rem', }) ;({ scrollPaddingLeft: '14rem', }) ;({ scrollPadding: '15rem', }) ;({ scrollPaddingLeft: '15rem', scrollPaddingRight: '15rem', }) ;({ scrollPaddingTop: '15rem', scrollPaddingBottom: '15rem', }) ;({ scrollPaddingTop: '15rem', }) ;({ scrollPaddingRight: '15rem', }) ;({ scrollPaddingBottom: '15rem', }) ;({ scrollPaddingLeft: '15rem', }) ;({ scrollPadding: '16rem', }) ;({ scrollPaddingLeft: '16rem', scrollPaddingRight: '16rem', }) ;({ scrollPaddingTop: '16rem', scrollPaddingBottom: '16rem', }) ;({ scrollPaddingTop: '16rem', }) ;({ scrollPaddingRight: '16rem', }) ;({ scrollPaddingBottom: '16rem', }) ;({ scrollPaddingLeft: '16rem', }) ;({ scrollPadding: '18rem', }) ;({ scrollPaddingLeft: '18rem', scrollPaddingRight: '18rem', }) ;({ scrollPaddingTop: '18rem', scrollPaddingBottom: '18rem', }) ;({ scrollPaddingTop: '18rem', }) ;({ scrollPaddingRight: '18rem', }) ;({ scrollPaddingBottom: '18rem', }) ;({ scrollPaddingLeft: '18rem', }) ;({ scrollPadding: '20rem', }) ;({ scrollPaddingLeft: '20rem', scrollPaddingRight: '20rem', }) ;({ scrollPaddingTop: '20rem', scrollPaddingBottom: '20rem', }) ;({ scrollPaddingTop: '20rem', }) ;({ scrollPaddingRight: '20rem', }) ;({ scrollPaddingBottom: '20rem', }) ;({ scrollPaddingLeft: '20rem', }) ;({ scrollPadding: '24rem', }) ;({ scrollPaddingLeft: '24rem', scrollPaddingRight: '24rem', }) ;({ scrollPaddingTop: '24rem', scrollPaddingBottom: '24rem', }) ;({ scrollPaddingTop: '24rem', }) ;({ scrollPaddingRight: '24rem', }) ;({ scrollPaddingBottom: '24rem', }) ;({ scrollPaddingLeft: '24rem', }) ;({ scrollPadding: '24rem', }) `; exports[`twin.macro scrollSnapAlign.tsx: scrollSnapAlign.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/scroll-snap-align tw\`snap-start\` tw\`snap-end\` tw\`snap-center\` tw\`snap-align-none\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/scroll-snap-align ;({ scrollSnapAlign: 'start', }) ;({ scrollSnapAlign: 'end', }) ;({ scrollSnapAlign: 'center', }) ;({ scrollSnapAlign: 'none', }) `; exports[`twin.macro scrollSnapStop.tsx: scrollSnapStop.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/scroll-snap-stop tw\`snap-normal\` tw\`snap-always\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/scroll-snap-stop ;({ scrollSnapStop: 'normal', }) ;({ scrollSnapStop: 'always', }) `; exports[`twin.macro scrollSnapType.tsx: scrollSnapType.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/scroll-snap-type tw\`snap-none\` tw\`snap-x\` tw\`snap-y\` tw\`snap-both\` tw\`snap-mandatory\` tw\`snap-proximity\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/scroll-snap-type ;({ scrollSnapType: 'none', }) ;({ scrollSnapType: 'x var(--tw-scroll-snap-strictness)', }) ;({ scrollSnapType: 'y var(--tw-scroll-snap-strictness)', }) ;({ scrollSnapType: 'both var(--tw-scroll-snap-strictness)', }) ;({ '--tw-scroll-snap-strictness': 'mandatory', }) ;({ '--tw-scroll-snap-strictness': 'proximity', }) `; exports[`twin.macro separator.tsx: separator.tsx 1`] = ` // @ts-nocheck import tw from '../macro' tw\`[&[data-foo][data-bar]:not([data-baz])]__underline\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck ;({ '&[data-foo][data-bar]:not([data-baz])': { textDecorationLine: 'underline', }, }) `; exports[`twin.macro sepia.tsx: sepia.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/sepia theme\`sepia.\` tw\`sepia-0\` tw\`sepia\` tw\`sepia-[.25]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/sepia ;({ 0: '0', DEFAULT: '100%', }) ;({ '--tw-sepia': 'sepia(0)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-sepia': 'sepia(100%)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) ;({ '--tw-sepia': 'sepia(.25)', filter: 'var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)', }) `; exports[`twin.macro shortCss.tsx: shortCss.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // within cs prop ;
;
;
;
;
;
;
// within tw prop ;
;
;
;
;
;
;
// within css prop ;
// within tw import tw\`maxWidth[100vw - 2rem]\` tw\`maxWidth[100vw - 2rem] block\` tw\`md:maxWidth[100vw - 2rem]\` tw\`hover:(maxWidth[100vw - 2rem] width[2rem])\` tw\`hover:(maxWidth[100vw - 2rem] before:content['test'])\` tw\`hover:(maxWidth[100vw - 2rem] before:content['test'])!\` tw\`hover:(maxWidth[100vw - 2rem]! before:content['test'])\` // prop ordering ;
// Setting css variables tw\`--css-prop[true] md:--css-prop[false]\` // Using css variables tw\`max-width[var(--css-react)] md:max-width[var(--css-react-md)]\` // Browser vendor prefixes tw\`-webkit-gradient[gradient here] md:-webkit-gradient[gradient here md]\` // Grid template tw\`grid-template-columns[[main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end]] md:grid-template-columns[[main-start-md] 1fr [content-start-md] 1fr [content-end-md] 1fr [main-end-md]]\` // Short css trumps core plugins tw\`transition-property[margin]\` // Crazy calcs tw\`padding[calc((2em * -1) + var(--myVar))]\` // Multiline tw\`padding[ calc((2em * -1) + var(--myVar)) ]\` tw\`padding[ calc((2em * -1) + var(--myVar)) ]\` // Theme value tw\`--color[theme(colors.red.500)]\` tw\`--color[this theme(colors.red.500) that]\` // Automatic '' value tw\`touch-action[]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck ;
;
;
;
;
;
;
// within tw prop ;
;
;
;
;
;
;
// within css prop ;
// within tw import ;({ maxWidth: '100vw - 2rem', }) ;({ display: 'block', maxWidth: '100vw - 2rem', }) ;({ '@media (min-width: 768px)': { maxWidth: '100vw - 2rem', }, }) ;({ ':hover': { maxWidth: '100vw - 2rem', width: '2rem', }, }) ;({ ':hover': { maxWidth: '100vw - 2rem', }, ':hover::before': { content: "'test'", }, }) ;({ ':hover': { maxWidth: '100vw - 2rem !important', }, ':hover::before': { content: "'test' !important", }, }) ;({ ':hover': { maxWidth: '100vw - 2rem !important', }, ':hover::before': { content: "'test'", }, }) // prop ordering ;
// Setting css variables ;({ '--css-prop': 'true', '@media (min-width: 768px)': { '--css-prop': 'false', }, }) // Using css variables ;({ maxWidth: 'var(--css-react)', '@media (min-width: 768px)': { maxWidth: 'var(--css-react-md)', }, }) // Browser vendor prefixes ;({ WebkitGradient: 'gradient here', '@media (min-width: 768px)': { WebkitGradient: 'gradient here md', }, }) // Grid template ;({ gridTemplateColumns: '[main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end]', '@media (min-width: 768px)': { gridTemplateColumns: '[main-start-md] 1fr [content-start-md] 1fr [content-end-md] 1fr [main-end-md]', }, }) // Short css trumps core plugins ;({ transitionProperty: 'margin', }) // Crazy calcs ;({ padding: 'calc((2em * -1) + var(--myVar))', }) // Multiline ;({ padding: 'calc((2em * -1) + var(--myVar))', }) ;({ padding: 'calc((2em * -1) + var(--myVar))', }) // Theme value ;({ '--color': '#ef4444', }) ;({ '--color': 'this #ef4444 that', }) // Automatic '' value ;({ touchAction: "''", }) `; exports[`twin.macro skew.tsx: skew.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/skew theme\`skew\` tw\`skew-x-0\` tw\`skew-y-0\` tw\`skew-x-1\` tw\`skew-y-1\` tw\`skew-x-2\` tw\`skew-y-2\` tw\`skew-x-3\` tw\`skew-y-3\` tw\`skew-x-6\` tw\`skew-y-6\` tw\`skew-x-12\` tw\`skew-y-12\` tw\`-skew-x-1\` tw\`-skew-y-1\` tw\`-skew-x-2\` tw\`-skew-y-2\` tw\`-skew-x-3\` tw\`-skew-y-3\` tw\`-skew-x-6\` tw\`-skew-y-6\` tw\`-skew-x-12\` tw\`-skew-y-12\` tw\`skew-x-[17deg]\` tw\`-skew-x-[17deg]\` tw\`skew-y-[17deg]\` tw\`-skew-y-[17deg]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/skew ;({ 0: '0deg', 1: '1deg', 2: '2deg', 3: '3deg', 6: '6deg', 12: '12deg', }) ;({ '--tw-skew-x': '0deg', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-skew-y': '0deg', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-skew-x': '1deg', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-skew-y': '1deg', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-skew-x': '2deg', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-skew-y': '2deg', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-skew-x': '3deg', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-skew-y': '3deg', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-skew-x': '6deg', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-skew-y': '6deg', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-skew-x': '12deg', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-skew-y': '12deg', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-skew-x': '-1deg', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-skew-y': '-1deg', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-skew-x': '-2deg', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-skew-y': '-2deg', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-skew-x': '-3deg', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-skew-y': '-3deg', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-skew-x': '-6deg', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-skew-y': '-6deg', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-skew-x': '-12deg', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-skew-y': '-12deg', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-skew-x': '17deg', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-skew-x': '-17deg', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-skew-y': '17deg', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-skew-y': '-17deg', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) `; exports[`twin.macro spaceBetween.tsx: spaceBetween.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/space theme\`space\` tw\`space-x-0\` tw\`space-x-0.5\` tw\`space-x-1\` tw\`space-x-1.5\` tw\`space-x-2\` tw\`space-x-2.5\` tw\`space-x-3\` tw\`space-x-3.5\` tw\`space-x-4\` tw\`space-x-5\` tw\`space-x-6\` tw\`space-x-7\` tw\`space-x-8\` tw\`space-x-9\` tw\`space-x-10\` tw\`space-x-11\` tw\`space-x-12\` tw\`space-x-14\` tw\`space-x-16\` tw\`space-x-20\` tw\`space-x-24\` tw\`space-x-28\` tw\`space-x-32\` tw\`space-x-36\` tw\`space-x-40\` tw\`space-x-44\` tw\`space-x-48\` tw\`space-x-52\` tw\`space-x-56\` tw\`space-x-60\` tw\`space-x-64\` tw\`space-x-72\` tw\`space-x-80\` tw\`space-x-96\` tw\`space-x-px\` tw\`space-y-0\` tw\`space-y-0.5\` tw\`space-y-1\` tw\`space-y-1.5\` tw\`space-y-2\` tw\`space-y-2.5\` tw\`space-y-3\` tw\`space-y-3.5\` tw\`space-y-4\` tw\`space-y-5\` tw\`space-y-6\` tw\`space-y-7\` tw\`space-y-8\` tw\`space-y-9\` tw\`space-y-10\` tw\`space-y-12\` tw\`space-y-14\` tw\`space-y-16\` tw\`space-y-20\` tw\`space-y-24\` tw\`space-y-28\` tw\`space-y-32\` tw\`space-y-36\` tw\`space-y-40\` tw\`space-y-44\` tw\`space-y-48\` tw\`space-y-52\` tw\`space-y-56\` tw\`space-y-60\` tw\`space-y-64\` tw\`space-y-72\` tw\`space-y-80\` tw\`space-y-px\` tw\`-space-x-0\` tw\`-space-x-0.5\` tw\`-space-x-1\` tw\`-space-x-1.5\` tw\`-space-x-2\` tw\`-space-x-2.5\` tw\`-space-x-3\` tw\`-space-x-3.5\` tw\`-space-x-4\` tw\`-space-x-5\` tw\`-space-x-6\` tw\`-space-x-7\` tw\`-space-x-8\` tw\`-space-x-9\` tw\`-space-x-10\` tw\`-space-x-12\` tw\`-space-x-14\` tw\`-space-x-16\` tw\`-space-x-20\` tw\`-space-x-24\` tw\`-space-x-28\` tw\`-space-x-32\` tw\`-space-x-36\` tw\`-space-x-40\` tw\`-space-x-44\` tw\`-space-x-48\` tw\`-space-x-52\` tw\`-space-x-56\` tw\`-space-x-60\` tw\`-space-x-64\` tw\`-space-x-72\` tw\`-space-x-80\` tw\`-space-x-96\` tw\`-space-x-px\` tw\`-space-y-0\` tw\`-space-y-0.5\` tw\`-space-y-1\` tw\`-space-y-1.5\` tw\`-space-y-2\` tw\`-space-y-2.5\` tw\`-space-y-3\` tw\`-space-y-3.5\` tw\`-space-y-4\` tw\`-space-y-5\` tw\`-space-y-6\` tw\`-space-y-7\` tw\`-space-y-8\` tw\`-space-y-9\` tw\`-space-y-10\` tw\`-space-y-12\` tw\`-space-y-14\` tw\`-space-y-16\` tw\`-space-y-20\` tw\`-space-y-24\` tw\`-space-y-28\` tw\`-space-y-32\` tw\`-space-y-36\` tw\`-space-y-40\` tw\`-space-y-44\` tw\`-space-y-48\` tw\`-space-y-52\` tw\`-space-y-56\` tw\`-space-y-60\` tw\`-space-y-64\` tw\`-space-y-72\` tw\`-space-y-80\` tw\`-space-y-96\` tw\`-space-y-px\` tw\`space-x-reverse\` tw\`space-y-reverse\` tw\`space-x-[5px]\` tw\`space-y-[5px]\` tw\`-space-x-[5px]\` tw\`-space-y-[5px]\` tw\`space-x-reverse space-x-0\` tw\`space-x-0 space-x-reverse\` tw\`space-y-reverse space-y-0\` tw\`space-y-0 space-y-reverse\` tw\`space-x-reverse space-x-32\` tw\`space-x-32 space-x-reverse\` tw\`space-y-reverse space-y-32\` tw\`space-y-32 space-y-reverse\` tw\`space-x-reverse space-x-px\` tw\`space-x-px space-x-reverse\` tw\`space-y-reverse space-y-px\` tw\`space-y-px space-y-reverse\` tw\`space-x-reverse space-x-12\` tw\`space-x-12 space-x-reverse\` tw\`space-y-reverse space-y-12\` tw\`space-y-12 space-y-reverse\` tw\`space-x-[20cm]\` tw\`space-x-[calc(20%-1cm)]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/space ;({ 0: '0px', 1: '0.25rem', 2: '0.5rem', 3: '0.75rem', 4: '1rem', 5: '1.25rem', 6: '1.5rem', 7: '1.75rem', 8: '2rem', 9: '2.25rem', 10: '2.5rem', 11: '2.75rem', 12: '3rem', 14: '3.5rem', 16: '4rem', 20: '5rem', 24: '6rem', 28: '7rem', 32: '8rem', 36: '9rem', 40: '10rem', 44: '11rem', 48: '12rem', 52: '13rem', 56: '14rem', 60: '15rem', 64: '16rem', 72: '18rem', 80: '20rem', 96: '24rem', px: '1px', 0.5: '0.125rem', 1.5: '0.375rem', 2.5: '0.625rem', 3.5: '0.875rem', }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(0px * var(--tw-space-x-reverse))', marginLeft: 'calc(0px * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(0.125rem * var(--tw-space-x-reverse))', marginLeft: 'calc(0.125rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(0.25rem * var(--tw-space-x-reverse))', marginLeft: 'calc(0.25rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(0.375rem * var(--tw-space-x-reverse))', marginLeft: 'calc(0.375rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(0.5rem * var(--tw-space-x-reverse))', marginLeft: 'calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(0.625rem * var(--tw-space-x-reverse))', marginLeft: 'calc(0.625rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(0.75rem * var(--tw-space-x-reverse))', marginLeft: 'calc(0.75rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(0.875rem * var(--tw-space-x-reverse))', marginLeft: 'calc(0.875rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(1rem * var(--tw-space-x-reverse))', marginLeft: 'calc(1rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(1.25rem * var(--tw-space-x-reverse))', marginLeft: 'calc(1.25rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(1.5rem * var(--tw-space-x-reverse))', marginLeft: 'calc(1.5rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(1.75rem * var(--tw-space-x-reverse))', marginLeft: 'calc(1.75rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(2rem * var(--tw-space-x-reverse))', marginLeft: 'calc(2rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(2.25rem * var(--tw-space-x-reverse))', marginLeft: 'calc(2.25rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(2.5rem * var(--tw-space-x-reverse))', marginLeft: 'calc(2.5rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(2.75rem * var(--tw-space-x-reverse))', marginLeft: 'calc(2.75rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(3rem * var(--tw-space-x-reverse))', marginLeft: 'calc(3rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(3.5rem * var(--tw-space-x-reverse))', marginLeft: 'calc(3.5rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(4rem * var(--tw-space-x-reverse))', marginLeft: 'calc(4rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(5rem * var(--tw-space-x-reverse))', marginLeft: 'calc(5rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(6rem * var(--tw-space-x-reverse))', marginLeft: 'calc(6rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(7rem * var(--tw-space-x-reverse))', marginLeft: 'calc(7rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(8rem * var(--tw-space-x-reverse))', marginLeft: 'calc(8rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(9rem * var(--tw-space-x-reverse))', marginLeft: 'calc(9rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(10rem * var(--tw-space-x-reverse))', marginLeft: 'calc(10rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(11rem * var(--tw-space-x-reverse))', marginLeft: 'calc(11rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(12rem * var(--tw-space-x-reverse))', marginLeft: 'calc(12rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(13rem * var(--tw-space-x-reverse))', marginLeft: 'calc(13rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(14rem * var(--tw-space-x-reverse))', marginLeft: 'calc(14rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(15rem * var(--tw-space-x-reverse))', marginLeft: 'calc(15rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(16rem * var(--tw-space-x-reverse))', marginLeft: 'calc(16rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(18rem * var(--tw-space-x-reverse))', marginLeft: 'calc(18rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(20rem * var(--tw-space-x-reverse))', marginLeft: 'calc(20rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(24rem * var(--tw-space-x-reverse))', marginLeft: 'calc(24rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(1px * var(--tw-space-x-reverse))', marginLeft: 'calc(1px * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(0px * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(0px * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(0.125rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(0.125rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(0.25rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(0.25rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(0.375rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(0.375rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(0.5rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(0.5rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(0.625rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(0.625rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(0.75rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(0.75rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(0.875rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(0.875rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(1rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(1rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(1.25rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(1.25rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(1.5rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(1.5rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(1.75rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(1.75rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(2rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(2rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(2.25rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(2.25rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(2.5rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(2.5rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(3rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(3rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(3.5rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(3.5rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(4rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(4rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(5rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(5rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(6rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(6rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(7rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(7rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(8rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(8rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(9rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(9rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(10rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(10rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(11rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(11rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(12rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(12rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(13rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(13rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(14rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(14rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(15rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(15rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(16rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(16rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(18rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(18rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(20rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(20rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(1px * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(1px * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(-0px * var(--tw-space-x-reverse))', marginLeft: 'calc(-0px * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(-0.125rem * var(--tw-space-x-reverse))', marginLeft: 'calc(-0.125rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(-0.25rem * var(--tw-space-x-reverse))', marginLeft: 'calc(-0.25rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(-0.375rem * var(--tw-space-x-reverse))', marginLeft: 'calc(-0.375rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(-0.5rem * var(--tw-space-x-reverse))', marginLeft: 'calc(-0.5rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(-0.625rem * var(--tw-space-x-reverse))', marginLeft: 'calc(-0.625rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(-0.75rem * var(--tw-space-x-reverse))', marginLeft: 'calc(-0.75rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(-0.875rem * var(--tw-space-x-reverse))', marginLeft: 'calc(-0.875rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(-1rem * var(--tw-space-x-reverse))', marginLeft: 'calc(-1rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(-1.25rem * var(--tw-space-x-reverse))', marginLeft: 'calc(-1.25rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(-1.5rem * var(--tw-space-x-reverse))', marginLeft: 'calc(-1.5rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(-1.75rem * var(--tw-space-x-reverse))', marginLeft: 'calc(-1.75rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(-2rem * var(--tw-space-x-reverse))', marginLeft: 'calc(-2rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(-2.25rem * var(--tw-space-x-reverse))', marginLeft: 'calc(-2.25rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(-2.5rem * var(--tw-space-x-reverse))', marginLeft: 'calc(-2.5rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(-3rem * var(--tw-space-x-reverse))', marginLeft: 'calc(-3rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(-3.5rem * var(--tw-space-x-reverse))', marginLeft: 'calc(-3.5rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(-4rem * var(--tw-space-x-reverse))', marginLeft: 'calc(-4rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(-5rem * var(--tw-space-x-reverse))', marginLeft: 'calc(-5rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(-6rem * var(--tw-space-x-reverse))', marginLeft: 'calc(-6rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(-7rem * var(--tw-space-x-reverse))', marginLeft: 'calc(-7rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(-8rem * var(--tw-space-x-reverse))', marginLeft: 'calc(-8rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(-9rem * var(--tw-space-x-reverse))', marginLeft: 'calc(-9rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(-10rem * var(--tw-space-x-reverse))', marginLeft: 'calc(-10rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(-11rem * var(--tw-space-x-reverse))', marginLeft: 'calc(-11rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(-12rem * var(--tw-space-x-reverse))', marginLeft: 'calc(-12rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(-13rem * var(--tw-space-x-reverse))', marginLeft: 'calc(-13rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(-14rem * var(--tw-space-x-reverse))', marginLeft: 'calc(-14rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(-15rem * var(--tw-space-x-reverse))', marginLeft: 'calc(-15rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(-16rem * var(--tw-space-x-reverse))', marginLeft: 'calc(-16rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(-18rem * var(--tw-space-x-reverse))', marginLeft: 'calc(-18rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(-20rem * var(--tw-space-x-reverse))', marginLeft: 'calc(-20rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(-24rem * var(--tw-space-x-reverse))', marginLeft: 'calc(-24rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(-1px * var(--tw-space-x-reverse))', marginLeft: 'calc(-1px * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(-0px * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(-0px * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(-0.125rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(-0.125rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(-0.25rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(-0.25rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(-0.375rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(-0.375rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(-0.5rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(-0.5rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(-0.625rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(-0.625rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(-0.75rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(-0.75rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(-0.875rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(-0.875rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(-1rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(-1rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(-1.25rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(-1.25rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(-1.5rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(-1.5rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(-1.75rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(-1.75rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(-2rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(-2rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(-2.25rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(-2.25rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(-2.5rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(-2.5rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(-3rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(-3rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(-3.5rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(-3.5rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(-4rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(-4rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(-5rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(-5rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(-6rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(-6rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(-7rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(-7rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(-8rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(-8rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(-9rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(-9rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(-10rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(-10rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(-11rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(-11rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(-12rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(-12rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(-13rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(-13rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(-14rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(-14rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(-15rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(-15rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(-16rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(-16rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(-18rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(-18rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(-20rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(-20rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(-24rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(-24rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(-1px * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(-1px * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '1', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '1', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(5px * var(--tw-space-x-reverse))', marginLeft: 'calc(5px * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(5px * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(5px * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(-5px * var(--tw-space-x-reverse))', marginLeft: 'calc(-5px * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '0', marginTop: 'calc(-5px * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(-5px * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '1', marginRight: 'calc(0px * var(--tw-space-x-reverse))', marginLeft: 'calc(0px * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '1', marginRight: 'calc(0px * var(--tw-space-x-reverse))', marginLeft: 'calc(0px * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '1', marginTop: 'calc(0px * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(0px * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '1', marginTop: 'calc(0px * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(0px * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '1', marginRight: 'calc(8rem * var(--tw-space-x-reverse))', marginLeft: 'calc(8rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '1', marginRight: 'calc(8rem * var(--tw-space-x-reverse))', marginLeft: 'calc(8rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '1', marginTop: 'calc(8rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(8rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '1', marginTop: 'calc(8rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(8rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '1', marginRight: 'calc(1px * var(--tw-space-x-reverse))', marginLeft: 'calc(1px * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '1', marginRight: 'calc(1px * var(--tw-space-x-reverse))', marginLeft: 'calc(1px * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '1', marginTop: 'calc(1px * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(1px * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '1', marginTop: 'calc(1px * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(1px * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '1', marginRight: 'calc(3rem * var(--tw-space-x-reverse))', marginLeft: 'calc(3rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '1', marginRight: 'calc(3rem * var(--tw-space-x-reverse))', marginLeft: 'calc(3rem * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '1', marginTop: 'calc(3rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(3rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '1', marginTop: 'calc(3rem * calc(1 - var(--tw-space-y-reverse)))', marginBottom: 'calc(3rem * var(--tw-space-y-reverse))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(20cm * var(--tw-space-x-reverse))', marginLeft: 'calc(20cm * calc(1 - var(--tw-space-x-reverse)))', }, }) ;({ '> :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', marginRight: 'calc(calc(20% - 1cm) * var(--tw-space-x-reverse))', marginLeft: 'calc(calc(20% - 1cm) * calc(1 - var(--tw-space-x-reverse)))', }, }) `; exports[`twin.macro stitchesDotSyntax.tsx: stitchesDotSyntax.tsx 1`] = ` // @ts-nocheck import tw, { styled } from '../macro' tw.div\`block\` styled.div(tw\`block\`) styled.div({ display: 'block' }) // Classic syntax styled('div', tw\`block\`) ↓ ↓ ↓ ↓ ↓ ↓ import { styled as _styled } from '__fixtures__/stitches/stitches.config.js' _styled('div', { display: 'block', }) _styled('div', { display: 'block', }) _styled('div', { display: 'block', }) // Classic syntax _styled('div', { display: 'block', }) `; exports[`twin.macro stitchesGlobals.tsx: stitchesGlobals.tsx 1`] = ` // @ts-nocheck import { globalStyles } from '../macro' import { global } from './stitches.config' const globals = global(globalStyles) export function App() { globals() // ... } ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck import { global } from './stitches.config' const globals = global({ '*, ::before, ::after': { boxSizing: 'border-box', borderWidth: '0', borderStyle: 'solid', borderColor: '#e5e7eb', '--tw-border-spacing-x': '0', '--tw-border-spacing-y': '0', '--tw-translate-x': '0', '--tw-translate-y': '0', '--tw-rotate': '0', '--tw-skew-x': '0', '--tw-skew-y': '0', '--tw-scale-x': '1', '--tw-scale-y': '1', '--tw-pan-x': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-pan-y': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-pinch-zoom': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-scroll-snap-strictness': 'proximity', '--tw-ordinal': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-slashed-zero': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-numeric-figure': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-numeric-spacing': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-numeric-fraction': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-ring-offset-shadow': '0 0 #0000', '--tw-ring-shadow': '0 0 #0000', '--tw-shadow': '0 0 #0000', '--tw-shadow-colored': '0 0 #0000', '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-ring-offset-width': '0px', '--tw-ring-offset-color': '#fff', '--tw-ring-color': 'rgb(59 130 246 / 0.5)', '--tw-blur': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-brightness': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-contrast': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-grayscale': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-invert': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-saturate': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-sepia': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-drop-shadow': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-blur': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-brightness': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-contrast': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-grayscale': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-invert': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-opacity': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-saturate': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-sepia': 'var(--tw-empty,/*!*/ /*!*/)', }, '::before, ::after': { '--tw-content': "''", }, html: { lineHeight: '1.5', WebkitTextSizeAdjust: '100%', MozTabSize: '4', tabSize: '4', fontFamily: 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"', fontFeatureSettings: ' normal', fontVariationSettings: ' normal', }, body: { margin: '0', lineHeight: 'inherit', }, hr: { height: '0', color: 'inherit', borderTopWidth: '1px', }, 'abbr:where([title])': { textDecoration: 'underline dotted', }, 'h1, h2, h3, h4, h5, h6': { fontSize: 'inherit', fontWeight: 'inherit', }, a: { color: 'inherit', textDecoration: 'inherit', }, 'b, strong': { fontWeight: 'bolder', }, 'code, kbd, samp, pre': { fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace', fontSize: '1em', }, small: { fontSize: '80%', }, 'sub, sup': { fontSize: '75%', lineHeight: '0', position: 'relative', verticalAlign: 'baseline', }, sub: { bottom: '-0.25em', }, sup: { top: '-0.5em', }, table: { textIndent: '0', borderColor: 'inherit', borderCollapse: 'collapse', }, 'button, input, optgroup, select, textarea': { fontFamily: 'inherit', fontSize: '100%', fontWeight: 'inherit', lineHeight: 'inherit', color: 'inherit', margin: '0', padding: '0', }, 'button, select': { textTransform: 'none', }, "button, [type='button'], [type='reset'], [type='submit']": { WebkitAppearance: 'button', backgroundColor: 'transparent', backgroundImage: 'none', }, ':-moz-focusring': { outline: 'auto', }, ':-moz-ui-invalid': { boxShadow: 'none', }, progress: { verticalAlign: 'baseline', }, '::-webkit-inner-spin-button, ::-webkit-outer-spin-button': { height: 'auto', }, "[type='search']": { WebkitAppearance: 'textfield', outlineOffset: '-2px', }, '::-webkit-search-decoration': { WebkitAppearance: 'none', }, '::-webkit-file-upload-button': { WebkitAppearance: 'button', font: 'inherit', }, summary: { display: 'list-item', }, 'blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre': { margin: '0', }, fieldset: { margin: '0', padding: '0', }, legend: { padding: '0', }, 'ol, ul, menu': { listStyle: 'none', margin: '0', padding: '0', }, textarea: { resize: 'vertical', }, 'input::placeholder, textarea::placeholder': { opacity: '1', color: '#9ca3af', }, 'button, [role="button"]': { cursor: 'pointer', }, ':disabled': { cursor: 'default', }, 'img, svg, video, canvas, audio, iframe, embed, object': { display: 'block', verticalAlign: 'middle', }, 'img, video': { maxWidth: '100%', height: 'auto', }, '[hidden]': { display: 'none', }, '::backdrop': { '--tw-border-spacing-x': '0', '--tw-border-spacing-y': '0', '--tw-translate-x': '0', '--tw-translate-y': '0', '--tw-rotate': '0', '--tw-skew-x': '0', '--tw-skew-y': '0', '--tw-scale-x': '1', '--tw-scale-y': '1', '--tw-pan-x': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-pan-y': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-pinch-zoom': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-scroll-snap-strictness': 'proximity', '--tw-ordinal': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-slashed-zero': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-numeric-figure': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-numeric-spacing': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-numeric-fraction': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-ring-offset-shadow': '0 0 #0000', '--tw-ring-shadow': '0 0 #0000', '--tw-shadow': '0 0 #0000', '--tw-shadow-colored': '0 0 #0000', '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-ring-offset-width': '0px', '--tw-ring-offset-color': '#fff', '--tw-ring-color': 'rgb(59 130 246 / 0.5)', '--tw-blur': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-brightness': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-contrast': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-grayscale': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-invert': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-saturate': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-sepia': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-drop-shadow': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-blur': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-brightness': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-contrast': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-grayscale': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-invert': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-opacity': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-saturate': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-sepia': 'var(--tw-empty,/*!*/ /*!*/)', }, '@keyframes spin': { to: { transform: 'rotate(360deg)', }, }, '@keyframes ping': { '75%, 100%': { transform: 'scale(2)', opacity: '0', }, }, '@keyframes pulse': { '50%': { opacity: '.5', }, }, '@keyframes bounce': { '0%, 100%': { transform: 'translateY(-25%)', animationTimingFunction: 'cubic-bezier(0.8,0,1,1)', }, '50%': { transform: 'none', animationTimingFunction: 'cubic-bezier(0,0,0.2,1)', }, }, }) export function App() { globals() // ... } `; exports[`twin.macro stitchesImports.tsx: stitchesImports.tsx 1`] = ` // @ts-nocheck import tw, { css, styled } from '../macro' css(tw\`block\`) tw.div\`block\` styled.div(tw\`block\`) ↓ ↓ ↓ ↓ ↓ ↓ import { css as _css } from '__fixtures__/stitches/stitches.config.js' import { styled as _styled } from '__fixtures__/stitches/stitches.config.js' _css({ display: 'block', }) _styled('div', { display: 'block', }) _styled('div', { display: 'block', }) `; exports[`twin.macro stitchesProps.tsx: stitchesProps.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // tw prop ;
// tw + css prop ;
;
;
;
// Extracted styles const styles = { container: ({ isInline }) => ({ ...tw\`block\`, ...(isInline && tw\`inline\`) }), } ;
// Dot syntax const Component = { Sub: () => [] } ; ; ↓ ↓ ↓ ↓ ↓ ↓ import { styled as _styled } from '__fixtures__/stitches/stitches.config.js' const _TwComponent = _styled('div', { display: 'block', }) ;<_TwComponent /> // tw + css prop const _TwComponent2 = _styled('div', { display: 'block', }) const _TwComponent3 = _styled(_TwComponent2, {}) ;<_TwComponent3 css={{ color: 'black', }} /> const _TwComponent4 = _styled('div', { display: 'block', }) const _TwComponent5 = _styled(_TwComponent4, {}) ;<_TwComponent5 css={{ '--tw-text-opacity': '1', color: 'rgb(0 0 0 / var(--tw-text-opacity))', }} /> const _TwComponent6 = _styled('div', { display: 'block', }) const _TwComponent7 = _styled(_TwComponent6, {}) ;<_TwComponent7 css={{ color: 'black', }} /> const _TwComponent8 = _styled('div', { display: 'block', }) const _TwComponent9 = _styled(_TwComponent8, {}) ;<_TwComponent9 css={{ color: 'black', }} thisShouldBePreserved="yup" /> // Extracted styles const styles = { container: ({ isInline }) => ({ ...{ display: 'block', }, ...(isInline && { display: 'inline', }), }), } const _TwComponent10 = _styled('div', {}) ;<_TwComponent10 css={styles.container({ isInline: true, })} /> // Dot syntax const Component = { Sub: () => [], } const _TwComponent11 = _styled(Component.Sub, {}) ;<_TwComponent11 css={{ position: 'fixed', }} /> const _TwComponent12 = _styled(Component.Sub, { animation: 'spin 1s linear infinite', }) ;<_TwComponent12 /> `; exports[`twin.macro stroke.tsx: stroke.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/stroke theme\`stroke\` tw\`stroke-none\` tw\`stroke-inherit\` tw\`stroke-current\` tw\`stroke-transparent\` tw\`stroke-black\` tw\`stroke-white\` tw\`stroke-slate-50\` tw\`stroke-slate-100\` tw\`stroke-slate-200\` tw\`stroke-slate-300\` tw\`stroke-slate-400\` tw\`stroke-slate-500\` tw\`stroke-slate-600\` tw\`stroke-slate-700\` tw\`stroke-slate-800\` tw\`stroke-slate-900\` tw\`stroke-gray-50\` tw\`stroke-gray-100\` tw\`stroke-gray-200\` tw\`stroke-gray-300\` tw\`stroke-gray-400\` tw\`stroke-gray-500\` tw\`stroke-gray-600\` tw\`stroke-gray-700\` tw\`stroke-gray-800\` tw\`stroke-gray-900\` tw\`stroke-zinc-50\` tw\`stroke-zinc-100\` tw\`stroke-zinc-200\` tw\`stroke-zinc-300\` tw\`stroke-zinc-400\` tw\`stroke-zinc-500\` tw\`stroke-zinc-600\` tw\`stroke-zinc-700\` tw\`stroke-zinc-800\` tw\`stroke-zinc-900\` tw\`stroke-neutral-50\` tw\`stroke-neutral-100\` tw\`stroke-neutral-200\` tw\`stroke-neutral-300\` tw\`stroke-neutral-400\` tw\`stroke-neutral-500\` tw\`stroke-neutral-600\` tw\`stroke-neutral-700\` tw\`stroke-neutral-800\` tw\`stroke-neutral-900\` tw\`stroke-stone-50\` tw\`stroke-stone-100\` tw\`stroke-stone-200\` tw\`stroke-stone-300\` tw\`stroke-stone-400\` tw\`stroke-stone-500\` tw\`stroke-stone-600\` tw\`stroke-stone-700\` tw\`stroke-stone-800\` tw\`stroke-stone-900\` tw\`stroke-red-50\` tw\`stroke-red-100\` tw\`stroke-red-200\` tw\`stroke-red-300\` tw\`stroke-red-400\` tw\`stroke-red-500\` tw\`stroke-red-600\` tw\`stroke-red-700\` tw\`stroke-red-800\` tw\`stroke-red-900\` tw\`stroke-orange-50\` tw\`stroke-orange-100\` tw\`stroke-orange-200\` tw\`stroke-orange-300\` tw\`stroke-orange-400\` tw\`stroke-orange-500\` tw\`stroke-orange-600\` tw\`stroke-orange-700\` tw\`stroke-orange-800\` tw\`stroke-orange-900\` tw\`stroke-amber-50\` tw\`stroke-amber-100\` tw\`stroke-amber-200\` tw\`stroke-amber-300\` tw\`stroke-amber-400\` tw\`stroke-amber-500\` tw\`stroke-amber-600\` tw\`stroke-amber-700\` tw\`stroke-amber-800\` tw\`stroke-amber-900\` tw\`stroke-yellow-50\` tw\`stroke-yellow-100\` tw\`stroke-yellow-200\` tw\`stroke-yellow-300\` tw\`stroke-yellow-400\` tw\`stroke-yellow-500\` tw\`stroke-yellow-600\` tw\`stroke-yellow-700\` tw\`stroke-yellow-800\` tw\`stroke-yellow-900\` tw\`stroke-lime-50\` tw\`stroke-lime-100\` tw\`stroke-lime-200\` tw\`stroke-lime-300\` tw\`stroke-lime-400\` tw\`stroke-lime-500\` tw\`stroke-lime-600\` tw\`stroke-lime-700\` tw\`stroke-lime-800\` tw\`stroke-lime-900\` tw\`stroke-green-50\` tw\`stroke-green-100\` tw\`stroke-green-200\` tw\`stroke-green-300\` tw\`stroke-green-400\` tw\`stroke-green-500\` tw\`stroke-green-600\` tw\`stroke-green-700\` tw\`stroke-green-800\` tw\`stroke-green-900\` tw\`stroke-emerald-50\` tw\`stroke-emerald-100\` tw\`stroke-emerald-200\` tw\`stroke-emerald-300\` tw\`stroke-emerald-400\` tw\`stroke-emerald-500\` tw\`stroke-emerald-600\` tw\`stroke-emerald-700\` tw\`stroke-emerald-800\` tw\`stroke-emerald-900\` tw\`stroke-teal-50\` tw\`stroke-teal-100\` tw\`stroke-teal-200\` tw\`stroke-teal-300\` tw\`stroke-teal-400\` tw\`stroke-teal-500\` tw\`stroke-teal-600\` tw\`stroke-teal-700\` tw\`stroke-teal-800\` tw\`stroke-teal-900\` tw\`stroke-cyan-50\` tw\`stroke-cyan-100\` tw\`stroke-cyan-200\` tw\`stroke-cyan-300\` tw\`stroke-cyan-400\` tw\`stroke-cyan-500\` tw\`stroke-cyan-600\` tw\`stroke-cyan-700\` tw\`stroke-cyan-800\` tw\`stroke-cyan-900\` tw\`stroke-sky-50\` tw\`stroke-sky-100\` tw\`stroke-sky-200\` tw\`stroke-sky-300\` tw\`stroke-sky-400\` tw\`stroke-sky-500\` tw\`stroke-sky-600\` tw\`stroke-sky-700\` tw\`stroke-sky-800\` tw\`stroke-sky-900\` tw\`stroke-blue-50\` tw\`stroke-blue-100\` tw\`stroke-blue-200\` tw\`stroke-blue-300\` tw\`stroke-blue-400\` tw\`stroke-blue-500\` tw\`stroke-blue-600\` tw\`stroke-blue-700\` tw\`stroke-blue-800\` tw\`stroke-blue-900\` tw\`stroke-indigo-50\` tw\`stroke-indigo-100\` tw\`stroke-indigo-200\` tw\`stroke-indigo-300\` tw\`stroke-indigo-400\` tw\`stroke-indigo-500\` tw\`stroke-indigo-600\` tw\`stroke-indigo-700\` tw\`stroke-indigo-800\` tw\`stroke-indigo-900\` tw\`stroke-violet-50\` tw\`stroke-violet-100\` tw\`stroke-violet-200\` tw\`stroke-violet-300\` tw\`stroke-violet-400\` tw\`stroke-violet-500\` tw\`stroke-violet-600\` tw\`stroke-violet-700\` tw\`stroke-violet-800\` tw\`stroke-violet-900\` tw\`stroke-purple-50\` tw\`stroke-purple-100\` tw\`stroke-purple-200\` tw\`stroke-purple-300\` tw\`stroke-purple-400\` tw\`stroke-purple-500\` tw\`stroke-purple-600\` tw\`stroke-purple-700\` tw\`stroke-purple-800\` tw\`stroke-purple-900\` tw\`stroke-fuchsia-50\` tw\`stroke-fuchsia-100\` tw\`stroke-fuchsia-200\` tw\`stroke-fuchsia-300\` tw\`stroke-fuchsia-400\` tw\`stroke-fuchsia-500\` tw\`stroke-fuchsia-600\` tw\`stroke-fuchsia-700\` tw\`stroke-fuchsia-800\` tw\`stroke-fuchsia-900\` tw\`stroke-pink-50\` tw\`stroke-pink-100\` tw\`stroke-pink-200\` tw\`stroke-pink-300\` tw\`stroke-pink-400\` tw\`stroke-pink-500\` tw\`stroke-pink-600\` tw\`stroke-pink-700\` tw\`stroke-pink-800\` tw\`stroke-pink-900\` tw\`stroke-rose-50\` tw\`stroke-rose-100\` tw\`stroke-rose-200\` tw\`stroke-rose-300\` tw\`stroke-rose-400\` tw\`stroke-rose-500\` tw\`stroke-rose-600\` tw\`stroke-rose-700\` tw\`stroke-rose-800\` tw\`stroke-rose-900\` tw\`stroke-[#243c5a]\` tw\`stroke-red-500\` tw\`stroke-red-500/25\` tw\`stroke-red-500/fromConfig\` tw\`stroke-red-500/fromConfig/25\` tw\`stroke-red-500/fromConfig/[.555]\` tw\`stroke-red-500/fromConfig/[var(--myvar)]\` tw\`stroke-red-500/[.555]\` tw\`stroke-red-500/[var(--myvar)]\` tw\`stroke-[theme('colors.red.500')]\` tw\`stroke-[theme('colors.red.500')]/20\` tw\`stroke-electric\` tw\`stroke-electric/25\` tw\`stroke-electric/[.555]\` tw\`stroke-electric/[var(--myvar)]\` tw\`stroke-[theme('colors.electric')]\` tw\`stroke-[theme('colors.electric')]/20\` tw\`stroke-[color:green]\` tw\`stroke-[color:rgba(255, 255, 255, .45)]\` tw\`stroke-[length:10px]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/stroke ;({ none: 'none', inherit: 'inherit', current: 'currentColor', transparent: 'transparent', black: '#000', white: '#fff', slate: { 50: '#f8fafc', 100: '#f1f5f9', 200: '#e2e8f0', 300: '#cbd5e1', 400: '#94a3b8', 500: '#64748b', 600: '#475569', 700: '#334155', 800: '#1e293b', 900: '#0f172a', 950: '#020617', }, gray: { 50: '#f9fafb', 100: '#f3f4f6', 200: '#e5e7eb', 300: '#d1d5db', 400: '#9ca3af', 500: '#6b7280', 600: '#4b5563', 700: '#374151', 800: '#1f2937', 900: '#111827', 950: '#030712', }, zinc: { 50: '#fafafa', 100: '#f4f4f5', 200: '#e4e4e7', 300: '#d4d4d8', 400: '#a1a1aa', 500: '#71717a', 600: '#52525b', 700: '#3f3f46', 800: '#27272a', 900: '#18181b', 950: '#09090b', }, neutral: { 50: '#fafafa', 100: '#f5f5f5', 200: '#e5e5e5', 300: '#d4d4d4', 400: '#a3a3a3', 500: '#737373', 600: '#525252', 700: '#404040', 800: '#262626', 900: '#171717', 950: '#0a0a0a', }, stone: { 50: '#fafaf9', 100: '#f5f5f4', 200: '#e7e5e4', 300: '#d6d3d1', 400: '#a8a29e', 500: '#78716c', 600: '#57534e', 700: '#44403c', 800: '#292524', 900: '#1c1917', 950: '#0c0a09', }, red: { 50: '#fef2f2', 100: '#fee2e2', 200: '#fecaca', 300: '#fca5a5', 400: '#f87171', 500: '#ef4444', 600: '#dc2626', 700: '#b91c1c', 800: '#991b1b', 900: '#7f1d1d', 950: '#450a0a', }, orange: { 50: '#fff7ed', 100: '#ffedd5', 200: '#fed7aa', 300: '#fdba74', 400: '#fb923c', 500: '#f97316', 600: '#ea580c', 700: '#c2410c', 800: '#9a3412', 900: '#7c2d12', 950: '#431407', }, amber: { 50: '#fffbeb', 100: '#fef3c7', 200: '#fde68a', 300: '#fcd34d', 400: '#fbbf24', 500: '#f59e0b', 600: '#d97706', 700: '#b45309', 800: '#92400e', 900: '#78350f', 950: '#451a03', }, yellow: { 50: '#fefce8', 100: '#fef9c3', 200: '#fef08a', 300: '#fde047', 400: '#facc15', 500: '#eab308', 600: '#ca8a04', 700: '#a16207', 800: '#854d0e', 900: '#713f12', 950: '#422006', }, lime: { 50: '#f7fee7', 100: '#ecfccb', 200: '#d9f99d', 300: '#bef264', 400: '#a3e635', 500: '#84cc16', 600: '#65a30d', 700: '#4d7c0f', 800: '#3f6212', 900: '#365314', 950: '#1a2e05', }, green: { 50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 300: '#86efac', 400: '#4ade80', 500: '#22c55e', 600: '#16a34a', 700: '#15803d', 800: '#166534', 900: '#14532d', 950: '#052e16', }, emerald: { 50: '#ecfdf5', 100: '#d1fae5', 200: '#a7f3d0', 300: '#6ee7b7', 400: '#34d399', 500: '#10b981', 600: '#059669', 700: '#047857', 800: '#065f46', 900: '#064e3b', 950: '#022c22', }, teal: { 50: '#f0fdfa', 100: '#ccfbf1', 200: '#99f6e4', 300: '#5eead4', 400: '#2dd4bf', 500: '#14b8a6', 600: '#0d9488', 700: '#0f766e', 800: '#115e59', 900: '#134e4a', 950: '#042f2e', }, cyan: { 50: '#ecfeff', 100: '#cffafe', 200: '#a5f3fc', 300: '#67e8f9', 400: '#22d3ee', 500: '#06b6d4', 600: '#0891b2', 700: '#0e7490', 800: '#155e75', 900: '#164e63', 950: '#083344', }, sky: { 50: '#f0f9ff', 100: '#e0f2fe', 200: '#bae6fd', 300: '#7dd3fc', 400: '#38bdf8', 500: '#0ea5e9', 600: '#0284c7', 700: '#0369a1', 800: '#075985', 900: '#0c4a6e', 950: '#082f49', }, blue: { 50: '#eff6ff', 100: '#dbeafe', 200: '#bfdbfe', 300: '#93c5fd', 400: '#60a5fa', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8', 800: '#1e40af', 900: '#1e3a8a', 950: '#172554', }, indigo: { 50: '#eef2ff', 100: '#e0e7ff', 200: '#c7d2fe', 300: '#a5b4fc', 400: '#818cf8', 500: '#6366f1', 600: '#4f46e5', 700: '#4338ca', 800: '#3730a3', 900: '#312e81', 950: '#1e1b4b', }, violet: { 50: '#f5f3ff', 100: '#ede9fe', 200: '#ddd6fe', 300: '#c4b5fd', 400: '#a78bfa', 500: '#8b5cf6', 600: '#7c3aed', 700: '#6d28d9', 800: '#5b21b6', 900: '#4c1d95', 950: '#2e1065', }, purple: { 50: '#faf5ff', 100: '#f3e8ff', 200: '#e9d5ff', 300: '#d8b4fe', 400: '#c084fc', 500: '#a855f7', 600: '#9333ea', 700: '#7e22ce', 800: '#6b21a8', 900: '#581c87', 950: '#3b0764', }, fuchsia: { 50: '#fdf4ff', 100: '#fae8ff', 200: '#f5d0fe', 300: '#f0abfc', 400: '#e879f9', 500: '#d946ef', 600: '#c026d3', 700: '#a21caf', 800: '#86198f', 900: '#701a75', 950: '#4a044e', }, pink: { 50: '#fdf2f8', 100: '#fce7f3', 200: '#fbcfe8', 300: '#f9a8d4', 400: '#f472b6', 500: '#ec4899', 600: '#db2777', 700: '#be185d', 800: '#9d174d', 900: '#831843', 950: '#500724', }, rose: { 50: '#fff1f2', 100: '#ffe4e6', 200: '#fecdd3', 300: '#fda4af', 400: '#fb7185', 500: '#f43f5e', 600: '#e11d48', 700: '#be123c', 800: '#9f1239', 900: '#881337', 950: '#4c0519', }, 'red-500/fromConfig': '#000', electric: void 0, }) ;({ stroke: 'none', }) ;({ stroke: 'inherit', }) ;({ stroke: 'currentColor', }) ;({ stroke: 'transparent', }) ;({ stroke: '#000', }) ;({ stroke: '#fff', }) ;({ stroke: '#f8fafc', }) ;({ stroke: '#f1f5f9', }) ;({ stroke: '#e2e8f0', }) ;({ stroke: '#cbd5e1', }) ;({ stroke: '#94a3b8', }) ;({ stroke: '#64748b', }) ;({ stroke: '#475569', }) ;({ stroke: '#334155', }) ;({ stroke: '#1e293b', }) ;({ stroke: '#0f172a', }) ;({ stroke: '#f9fafb', }) ;({ stroke: '#f3f4f6', }) ;({ stroke: '#e5e7eb', }) ;({ stroke: '#d1d5db', }) ;({ stroke: '#9ca3af', }) ;({ stroke: '#6b7280', }) ;({ stroke: '#4b5563', }) ;({ stroke: '#374151', }) ;({ stroke: '#1f2937', }) ;({ stroke: '#111827', }) ;({ stroke: '#fafafa', }) ;({ stroke: '#f4f4f5', }) ;({ stroke: '#e4e4e7', }) ;({ stroke: '#d4d4d8', }) ;({ stroke: '#a1a1aa', }) ;({ stroke: '#71717a', }) ;({ stroke: '#52525b', }) ;({ stroke: '#3f3f46', }) ;({ stroke: '#27272a', }) ;({ stroke: '#18181b', }) ;({ stroke: '#fafafa', }) ;({ stroke: '#f5f5f5', }) ;({ stroke: '#e5e5e5', }) ;({ stroke: '#d4d4d4', }) ;({ stroke: '#a3a3a3', }) ;({ stroke: '#737373', }) ;({ stroke: '#525252', }) ;({ stroke: '#404040', }) ;({ stroke: '#262626', }) ;({ stroke: '#171717', }) ;({ stroke: '#fafaf9', }) ;({ stroke: '#f5f5f4', }) ;({ stroke: '#e7e5e4', }) ;({ stroke: '#d6d3d1', }) ;({ stroke: '#a8a29e', }) ;({ stroke: '#78716c', }) ;({ stroke: '#57534e', }) ;({ stroke: '#44403c', }) ;({ stroke: '#292524', }) ;({ stroke: '#1c1917', }) ;({ stroke: '#fef2f2', }) ;({ stroke: '#fee2e2', }) ;({ stroke: '#fecaca', }) ;({ stroke: '#fca5a5', }) ;({ stroke: '#f87171', }) ;({ stroke: '#ef4444', }) ;({ stroke: '#dc2626', }) ;({ stroke: '#b91c1c', }) ;({ stroke: '#991b1b', }) ;({ stroke: '#7f1d1d', }) ;({ stroke: '#fff7ed', }) ;({ stroke: '#ffedd5', }) ;({ stroke: '#fed7aa', }) ;({ stroke: '#fdba74', }) ;({ stroke: '#fb923c', }) ;({ stroke: '#f97316', }) ;({ stroke: '#ea580c', }) ;({ stroke: '#c2410c', }) ;({ stroke: '#9a3412', }) ;({ stroke: '#7c2d12', }) ;({ stroke: '#fffbeb', }) ;({ stroke: '#fef3c7', }) ;({ stroke: '#fde68a', }) ;({ stroke: '#fcd34d', }) ;({ stroke: '#fbbf24', }) ;({ stroke: '#f59e0b', }) ;({ stroke: '#d97706', }) ;({ stroke: '#b45309', }) ;({ stroke: '#92400e', }) ;({ stroke: '#78350f', }) ;({ stroke: '#fefce8', }) ;({ stroke: '#fef9c3', }) ;({ stroke: '#fef08a', }) ;({ stroke: '#fde047', }) ;({ stroke: '#facc15', }) ;({ stroke: '#eab308', }) ;({ stroke: '#ca8a04', }) ;({ stroke: '#a16207', }) ;({ stroke: '#854d0e', }) ;({ stroke: '#713f12', }) ;({ stroke: '#f7fee7', }) ;({ stroke: '#ecfccb', }) ;({ stroke: '#d9f99d', }) ;({ stroke: '#bef264', }) ;({ stroke: '#a3e635', }) ;({ stroke: '#84cc16', }) ;({ stroke: '#65a30d', }) ;({ stroke: '#4d7c0f', }) ;({ stroke: '#3f6212', }) ;({ stroke: '#365314', }) ;({ stroke: '#f0fdf4', }) ;({ stroke: '#dcfce7', }) ;({ stroke: '#bbf7d0', }) ;({ stroke: '#86efac', }) ;({ stroke: '#4ade80', }) ;({ stroke: '#22c55e', }) ;({ stroke: '#16a34a', }) ;({ stroke: '#15803d', }) ;({ stroke: '#166534', }) ;({ stroke: '#14532d', }) ;({ stroke: '#ecfdf5', }) ;({ stroke: '#d1fae5', }) ;({ stroke: '#a7f3d0', }) ;({ stroke: '#6ee7b7', }) ;({ stroke: '#34d399', }) ;({ stroke: '#10b981', }) ;({ stroke: '#059669', }) ;({ stroke: '#047857', }) ;({ stroke: '#065f46', }) ;({ stroke: '#064e3b', }) ;({ stroke: '#f0fdfa', }) ;({ stroke: '#ccfbf1', }) ;({ stroke: '#99f6e4', }) ;({ stroke: '#5eead4', }) ;({ stroke: '#2dd4bf', }) ;({ stroke: '#14b8a6', }) ;({ stroke: '#0d9488', }) ;({ stroke: '#0f766e', }) ;({ stroke: '#115e59', }) ;({ stroke: '#134e4a', }) ;({ stroke: '#ecfeff', }) ;({ stroke: '#cffafe', }) ;({ stroke: '#a5f3fc', }) ;({ stroke: '#67e8f9', }) ;({ stroke: '#22d3ee', }) ;({ stroke: '#06b6d4', }) ;({ stroke: '#0891b2', }) ;({ stroke: '#0e7490', }) ;({ stroke: '#155e75', }) ;({ stroke: '#164e63', }) ;({ stroke: '#f0f9ff', }) ;({ stroke: '#e0f2fe', }) ;({ stroke: '#bae6fd', }) ;({ stroke: '#7dd3fc', }) ;({ stroke: '#38bdf8', }) ;({ stroke: '#0ea5e9', }) ;({ stroke: '#0284c7', }) ;({ stroke: '#0369a1', }) ;({ stroke: '#075985', }) ;({ stroke: '#0c4a6e', }) ;({ stroke: '#eff6ff', }) ;({ stroke: '#dbeafe', }) ;({ stroke: '#bfdbfe', }) ;({ stroke: '#93c5fd', }) ;({ stroke: '#60a5fa', }) ;({ stroke: '#3b82f6', }) ;({ stroke: '#2563eb', }) ;({ stroke: '#1d4ed8', }) ;({ stroke: '#1e40af', }) ;({ stroke: '#1e3a8a', }) ;({ stroke: '#eef2ff', }) ;({ stroke: '#e0e7ff', }) ;({ stroke: '#c7d2fe', }) ;({ stroke: '#a5b4fc', }) ;({ stroke: '#818cf8', }) ;({ stroke: '#6366f1', }) ;({ stroke: '#4f46e5', }) ;({ stroke: '#4338ca', }) ;({ stroke: '#3730a3', }) ;({ stroke: '#312e81', }) ;({ stroke: '#f5f3ff', }) ;({ stroke: '#ede9fe', }) ;({ stroke: '#ddd6fe', }) ;({ stroke: '#c4b5fd', }) ;({ stroke: '#a78bfa', }) ;({ stroke: '#8b5cf6', }) ;({ stroke: '#7c3aed', }) ;({ stroke: '#6d28d9', }) ;({ stroke: '#5b21b6', }) ;({ stroke: '#4c1d95', }) ;({ stroke: '#faf5ff', }) ;({ stroke: '#f3e8ff', }) ;({ stroke: '#e9d5ff', }) ;({ stroke: '#d8b4fe', }) ;({ stroke: '#c084fc', }) ;({ stroke: '#a855f7', }) ;({ stroke: '#9333ea', }) ;({ stroke: '#7e22ce', }) ;({ stroke: '#6b21a8', }) ;({ stroke: '#581c87', }) ;({ stroke: '#fdf4ff', }) ;({ stroke: '#fae8ff', }) ;({ stroke: '#f5d0fe', }) ;({ stroke: '#f0abfc', }) ;({ stroke: '#e879f9', }) ;({ stroke: '#d946ef', }) ;({ stroke: '#c026d3', }) ;({ stroke: '#a21caf', }) ;({ stroke: '#86198f', }) ;({ stroke: '#701a75', }) ;({ stroke: '#fdf2f8', }) ;({ stroke: '#fce7f3', }) ;({ stroke: '#fbcfe8', }) ;({ stroke: '#f9a8d4', }) ;({ stroke: '#f472b6', }) ;({ stroke: '#ec4899', }) ;({ stroke: '#db2777', }) ;({ stroke: '#be185d', }) ;({ stroke: '#9d174d', }) ;({ stroke: '#831843', }) ;({ stroke: '#fff1f2', }) ;({ stroke: '#ffe4e6', }) ;({ stroke: '#fecdd3', }) ;({ stroke: '#fda4af', }) ;({ stroke: '#fb7185', }) ;({ stroke: '#f43f5e', }) ;({ stroke: '#e11d48', }) ;({ stroke: '#be123c', }) ;({ stroke: '#9f1239', }) ;({ stroke: '#881337', }) ;({ stroke: '#243c5a', }) ;({ stroke: '#ef4444', }) ;({ stroke: 'rgb(239 68 68 / 0.25)', }) ;({ stroke: '#000', }) ;({ stroke: 'rgb(0 0 0 / 0.25)', }) ;({ stroke: 'rgb(0 0 0 / .555)', }) ;({ stroke: 'rgb(0 0 0 / var(--myvar))', }) ;({ stroke: 'rgb(239 68 68 / .555)', }) ;({ stroke: 'rgb(239 68 68 / var(--myvar))', }) ;({ stroke: '#ef4444', }) ;({ stroke: 'rgb(239 68 68 / 0.2)', }) ;({ stroke: 'rgb(219, 0, 255)', }) ;({ stroke: 'rgba(219, 0, 255, 0.25)', }) ;({ stroke: 'rgba(219, 0, 255, .555)', }) ;({ stroke: 'rgba(219, 0, 255, var(--myvar))', }) ;({ stroke: 'rgb(219, 0, 255)', }) ;({ stroke: 'rgb(219 0 255 / 0.2)', }) ;({ stroke: 'green', }) ;({ stroke: 'rgba(255, 255, 255, .45)', }) ;({ strokeWidth: '10px', }) `; exports[`twin.macro strokeWidth.tsx: strokeWidth.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/stroke-width theme\`strokeWidth\` tw\`stroke-0\` tw\`stroke-1\` tw\`stroke-2\` tw\`stroke-[2px]\` tw\`stroke-[color:red]\` tw\`stroke-[length:2px]\` tw\`stroke-[number:10]\` tw\`stroke-[percentage:10%]\` tw\`stroke-[url:url(hand.cur)_2_2, pointer]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/stroke-width ;({ 0: '0', 1: '1', 2: '2', }) ;({ strokeWidth: '0', }) ;({ strokeWidth: '1', }) ;({ strokeWidth: '2', }) ;({ strokeWidth: '2px', }) ;({ stroke: 'red', }) ;({ strokeWidth: '2px', }) ;({ strokeWidth: '10', }) ;({ strokeWidth: '10%', }) ;({ stroke: 'url(hand.cur) 2 2, pointer', }) `; exports[`twin.macro tableLayout.tsx: tableLayout.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/table-layout tw\`table-auto\` tw\`table-fixed\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/table-layout ;({ tableLayout: 'auto', }) ;({ tableLayout: 'fixed', }) `; exports[`twin.macro textAlign.tsx: textAlign.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/text-align tw\`text-left\` tw\`text-center\` tw\`text-right\` tw\`text-justify\` tw\`text-start\` tw\`text-end\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/text-align ;({ textAlign: 'left', }) ;({ textAlign: 'center', }) ;({ textAlign: 'right', }) ;({ textAlign: 'justify', }) ;({ textAlign: 'start', }) ;({ textAlign: 'end', }) `; exports[`twin.macro textColor.tsx: textColor.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/text-color theme\`textColor\` tw\`text-inherit\` tw\`text-current\` tw\`text-transparent\` tw\`text-black\` tw\`text-white\` tw\`text-slate-50\` tw\`text-slate-100\` tw\`text-slate-200\` tw\`text-slate-300\` tw\`text-slate-400\` tw\`text-slate-500\` tw\`text-slate-600\` tw\`text-slate-700\` tw\`text-slate-800\` tw\`text-slate-900\` tw\`text-gray-50\` tw\`text-gray-100\` tw\`text-gray-200\` tw\`text-gray-300\` tw\`text-gray-400\` tw\`text-gray-500\` tw\`text-gray-600\` tw\`text-gray-700\` tw\`text-gray-800\` tw\`text-gray-900\` tw\`text-zinc-50\` tw\`text-zinc-100\` tw\`text-zinc-200\` tw\`text-zinc-300\` tw\`text-zinc-400\` tw\`text-zinc-500\` tw\`text-zinc-600\` tw\`text-zinc-700\` tw\`text-zinc-800\` tw\`text-zinc-900\` tw\`text-neutral-50\` tw\`text-neutral-100\` tw\`text-neutral-200\` tw\`text-neutral-300\` tw\`text-neutral-400\` tw\`text-neutral-500\` tw\`text-neutral-600\` tw\`text-neutral-700\` tw\`text-neutral-800\` tw\`text-neutral-900\` tw\`text-stone-50\` tw\`text-stone-100\` tw\`text-stone-200\` tw\`text-stone-300\` tw\`text-stone-400\` tw\`text-stone-500\` tw\`text-stone-600\` tw\`text-stone-700\` tw\`text-stone-800\` tw\`text-stone-900\` tw\`text-red-50\` tw\`text-red-100\` tw\`text-red-200\` tw\`text-red-300\` tw\`text-red-400\` tw\`text-red-500\` tw\`text-red-600\` tw\`text-red-700\` tw\`text-red-800\` tw\`text-red-900\` tw\`text-orange-50\` tw\`text-orange-100\` tw\`text-orange-200\` tw\`text-orange-300\` tw\`text-orange-400\` tw\`text-orange-500\` tw\`text-orange-600\` tw\`text-orange-700\` tw\`text-orange-800\` tw\`text-orange-900\` tw\`text-amber-50\` tw\`text-amber-100\` tw\`text-amber-200\` tw\`text-amber-300\` tw\`text-amber-400\` tw\`text-amber-500\` tw\`text-amber-600\` tw\`text-amber-700\` tw\`text-amber-800\` tw\`text-amber-900\` tw\`text-yellow-50\` tw\`text-yellow-100\` tw\`text-yellow-200\` tw\`text-yellow-300\` tw\`text-yellow-400\` tw\`text-yellow-500\` tw\`text-yellow-600\` tw\`text-yellow-700\` tw\`text-yellow-800\` tw\`text-yellow-900\` tw\`text-lime-50\` tw\`text-lime-100\` tw\`text-lime-200\` tw\`text-lime-300\` tw\`text-lime-400\` tw\`text-lime-500\` tw\`text-lime-600\` tw\`text-lime-700\` tw\`text-lime-800\` tw\`text-lime-900\` tw\`text-green-50\` tw\`text-green-100\` tw\`text-green-200\` tw\`text-green-300\` tw\`text-green-400\` tw\`text-green-500\` tw\`text-green-600\` tw\`text-green-700\` tw\`text-green-800\` tw\`text-green-900\` tw\`text-emerald-50\` tw\`text-emerald-100\` tw\`text-emerald-200\` tw\`text-emerald-300\` tw\`text-emerald-400\` tw\`text-emerald-500\` tw\`text-emerald-600\` tw\`text-emerald-700\` tw\`text-emerald-800\` tw\`text-emerald-900\` tw\`text-teal-50\` tw\`text-teal-100\` tw\`text-teal-200\` tw\`text-teal-300\` tw\`text-teal-400\` tw\`text-teal-500\` tw\`text-teal-600\` tw\`text-teal-700\` tw\`text-teal-800\` tw\`text-teal-900\` tw\`text-cyan-50\` tw\`text-cyan-100\` tw\`text-cyan-200\` tw\`text-cyan-300\` tw\`text-cyan-400\` tw\`text-cyan-500\` tw\`text-cyan-600\` tw\`text-cyan-700\` tw\`text-cyan-800\` tw\`text-cyan-900\` tw\`text-sky-50\` tw\`text-sky-100\` tw\`text-sky-200\` tw\`text-sky-300\` tw\`text-sky-400\` tw\`text-sky-500\` tw\`text-sky-600\` tw\`text-sky-700\` tw\`text-sky-800\` tw\`text-sky-900\` tw\`text-blue-50\` tw\`text-blue-100\` tw\`text-blue-200\` tw\`text-blue-300\` tw\`text-blue-400\` tw\`text-blue-500\` tw\`text-blue-600\` tw\`text-blue-700\` tw\`text-blue-800\` tw\`text-blue-900\` tw\`text-indigo-50\` tw\`text-indigo-100\` tw\`text-indigo-200\` tw\`text-indigo-300\` tw\`text-indigo-400\` tw\`text-indigo-500\` tw\`text-indigo-600\` tw\`text-indigo-700\` tw\`text-indigo-800\` tw\`text-indigo-900\` tw\`text-violet-50\` tw\`text-violet-100\` tw\`text-violet-200\` tw\`text-violet-300\` tw\`text-violet-400\` tw\`text-violet-500\` tw\`text-violet-600\` tw\`text-violet-700\` tw\`text-violet-800\` tw\`text-violet-900\` tw\`text-purple-50\` tw\`text-purple-100\` tw\`text-purple-200\` tw\`text-purple-300\` tw\`text-purple-400\` tw\`text-purple-500\` tw\`text-purple-600\` tw\`text-purple-700\` tw\`text-purple-800\` tw\`text-purple-900\` tw\`text-fuchsia-50\` tw\`text-fuchsia-100\` tw\`text-fuchsia-200\` tw\`text-fuchsia-300\` tw\`text-fuchsia-400\` tw\`text-fuchsia-500\` tw\`text-fuchsia-600\` tw\`text-fuchsia-700\` tw\`text-fuchsia-800\` tw\`text-fuchsia-900\` tw\`text-pink-50\` tw\`text-pink-100\` tw\`text-pink-200\` tw\`text-pink-300\` tw\`text-pink-400\` tw\`text-pink-500\` tw\`text-pink-600\` tw\`text-pink-700\` tw\`text-pink-800\` tw\`text-pink-900\` tw\`text-rose-50\` tw\`text-rose-100\` tw\`text-rose-200\` tw\`text-rose-300\` tw\`text-rose-400\` tw\`text-rose-500\` tw\`text-rose-600\` tw\`text-rose-700\` tw\`text-rose-800\` tw\`text-rose-900\` tw\`text-blue-600/50\` tw\`text-blue-600/[.5]\` tw\`text-[#50d71e]\` tw\`text-[color:var(--color)]\` tw\`text-red-500\` tw\`text-red-500/25\` tw\`text-red-500/fromConfig\` tw\`text-red-500/fromConfig/25\` tw\`text-red-500/fromConfig/[.555]\` tw\`text-red-500/fromConfig/[var(--myvar)]\` tw\`text-red-500/[.555]\` tw\`text-red-500/[var(--myvar)]\` tw\`text-[theme('colors.red.500')]\` tw\`text-[theme('colors.red.500')]/20\` tw\`text-electric\` tw\`text-electric/25\` tw\`text-electric/[.555]\` tw\`text-electric/[var(--myvar)]\` tw\`text-[theme('colors.electric')]\` tw\`text-[theme('colors.electric')]/20\` tw\`text-[color:green]\` tw\`text-[color:rgba(255, 255, 255, .45)]\` tw\`text-[absolute-size:medium]\` tw\`text-[relative-size:larger]\` tw\`text-[length:10px]\` tw\`text-[percentage:10%]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/text-color ;({ inherit: 'inherit', current: 'currentColor', transparent: 'transparent', black: '#000', white: '#fff', slate: { 50: '#f8fafc', 100: '#f1f5f9', 200: '#e2e8f0', 300: '#cbd5e1', 400: '#94a3b8', 500: '#64748b', 600: '#475569', 700: '#334155', 800: '#1e293b', 900: '#0f172a', 950: '#020617', }, gray: { 50: '#f9fafb', 100: '#f3f4f6', 200: '#e5e7eb', 300: '#d1d5db', 400: '#9ca3af', 500: '#6b7280', 600: '#4b5563', 700: '#374151', 800: '#1f2937', 900: '#111827', 950: '#030712', }, zinc: { 50: '#fafafa', 100: '#f4f4f5', 200: '#e4e4e7', 300: '#d4d4d8', 400: '#a1a1aa', 500: '#71717a', 600: '#52525b', 700: '#3f3f46', 800: '#27272a', 900: '#18181b', 950: '#09090b', }, neutral: { 50: '#fafafa', 100: '#f5f5f5', 200: '#e5e5e5', 300: '#d4d4d4', 400: '#a3a3a3', 500: '#737373', 600: '#525252', 700: '#404040', 800: '#262626', 900: '#171717', 950: '#0a0a0a', }, stone: { 50: '#fafaf9', 100: '#f5f5f4', 200: '#e7e5e4', 300: '#d6d3d1', 400: '#a8a29e', 500: '#78716c', 600: '#57534e', 700: '#44403c', 800: '#292524', 900: '#1c1917', 950: '#0c0a09', }, red: { 50: '#fef2f2', 100: '#fee2e2', 200: '#fecaca', 300: '#fca5a5', 400: '#f87171', 500: '#ef4444', 600: '#dc2626', 700: '#b91c1c', 800: '#991b1b', 900: '#7f1d1d', 950: '#450a0a', }, orange: { 50: '#fff7ed', 100: '#ffedd5', 200: '#fed7aa', 300: '#fdba74', 400: '#fb923c', 500: '#f97316', 600: '#ea580c', 700: '#c2410c', 800: '#9a3412', 900: '#7c2d12', 950: '#431407', }, amber: { 50: '#fffbeb', 100: '#fef3c7', 200: '#fde68a', 300: '#fcd34d', 400: '#fbbf24', 500: '#f59e0b', 600: '#d97706', 700: '#b45309', 800: '#92400e', 900: '#78350f', 950: '#451a03', }, yellow: { 50: '#fefce8', 100: '#fef9c3', 200: '#fef08a', 300: '#fde047', 400: '#facc15', 500: '#eab308', 600: '#ca8a04', 700: '#a16207', 800: '#854d0e', 900: '#713f12', 950: '#422006', }, lime: { 50: '#f7fee7', 100: '#ecfccb', 200: '#d9f99d', 300: '#bef264', 400: '#a3e635', 500: '#84cc16', 600: '#65a30d', 700: '#4d7c0f', 800: '#3f6212', 900: '#365314', 950: '#1a2e05', }, green: { 50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 300: '#86efac', 400: '#4ade80', 500: '#22c55e', 600: '#16a34a', 700: '#15803d', 800: '#166534', 900: '#14532d', 950: '#052e16', }, emerald: { 50: '#ecfdf5', 100: '#d1fae5', 200: '#a7f3d0', 300: '#6ee7b7', 400: '#34d399', 500: '#10b981', 600: '#059669', 700: '#047857', 800: '#065f46', 900: '#064e3b', 950: '#022c22', }, teal: { 50: '#f0fdfa', 100: '#ccfbf1', 200: '#99f6e4', 300: '#5eead4', 400: '#2dd4bf', 500: '#14b8a6', 600: '#0d9488', 700: '#0f766e', 800: '#115e59', 900: '#134e4a', 950: '#042f2e', }, cyan: { 50: '#ecfeff', 100: '#cffafe', 200: '#a5f3fc', 300: '#67e8f9', 400: '#22d3ee', 500: '#06b6d4', 600: '#0891b2', 700: '#0e7490', 800: '#155e75', 900: '#164e63', 950: '#083344', }, sky: { 50: '#f0f9ff', 100: '#e0f2fe', 200: '#bae6fd', 300: '#7dd3fc', 400: '#38bdf8', 500: '#0ea5e9', 600: '#0284c7', 700: '#0369a1', 800: '#075985', 900: '#0c4a6e', 950: '#082f49', }, blue: { 50: '#eff6ff', 100: '#dbeafe', 200: '#bfdbfe', 300: '#93c5fd', 400: '#60a5fa', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8', 800: '#1e40af', 900: '#1e3a8a', 950: '#172554', }, indigo: { 50: '#eef2ff', 100: '#e0e7ff', 200: '#c7d2fe', 300: '#a5b4fc', 400: '#818cf8', 500: '#6366f1', 600: '#4f46e5', 700: '#4338ca', 800: '#3730a3', 900: '#312e81', 950: '#1e1b4b', }, violet: { 50: '#f5f3ff', 100: '#ede9fe', 200: '#ddd6fe', 300: '#c4b5fd', 400: '#a78bfa', 500: '#8b5cf6', 600: '#7c3aed', 700: '#6d28d9', 800: '#5b21b6', 900: '#4c1d95', 950: '#2e1065', }, purple: { 50: '#faf5ff', 100: '#f3e8ff', 200: '#e9d5ff', 300: '#d8b4fe', 400: '#c084fc', 500: '#a855f7', 600: '#9333ea', 700: '#7e22ce', 800: '#6b21a8', 900: '#581c87', 950: '#3b0764', }, fuchsia: { 50: '#fdf4ff', 100: '#fae8ff', 200: '#f5d0fe', 300: '#f0abfc', 400: '#e879f9', 500: '#d946ef', 600: '#c026d3', 700: '#a21caf', 800: '#86198f', 900: '#701a75', 950: '#4a044e', }, pink: { 50: '#fdf2f8', 100: '#fce7f3', 200: '#fbcfe8', 300: '#f9a8d4', 400: '#f472b6', 500: '#ec4899', 600: '#db2777', 700: '#be185d', 800: '#9d174d', 900: '#831843', 950: '#500724', }, rose: { 50: '#fff1f2', 100: '#ffe4e6', 200: '#fecdd3', 300: '#fda4af', 400: '#fb7185', 500: '#f43f5e', 600: '#e11d48', 700: '#be123c', 800: '#9f1239', 900: '#881337', 950: '#4c0519', }, 'red-500/fromConfig': '#000', electric: void 0, }) ;({ color: 'inherit', }) ;({ color: 'currentColor', }) ;({ color: 'transparent', }) ;({ '--tw-text-opacity': '1', color: 'rgb(0 0 0 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(255 255 255 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(248 250 252 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(241 245 249 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(226 232 240 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(203 213 225 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(148 163 184 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(100 116 139 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(71 85 105 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(51 65 85 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(30 41 59 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(15 23 42 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(249 250 251 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(243 244 246 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(229 231 235 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(209 213 219 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(156 163 175 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(107 114 128 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(75 85 99 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(55 65 81 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(31 41 55 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(17 24 39 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(250 250 250 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(244 244 245 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(228 228 231 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(212 212 216 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(161 161 170 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(113 113 122 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(82 82 91 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(63 63 70 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(39 39 42 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(24 24 27 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(250 250 250 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(245 245 245 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(229 229 229 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(212 212 212 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(163 163 163 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(115 115 115 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(82 82 82 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(64 64 64 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(38 38 38 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(23 23 23 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(250 250 249 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(245 245 244 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(231 229 228 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(214 211 209 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(168 162 158 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(120 113 108 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(87 83 78 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(68 64 60 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(41 37 36 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(28 25 23 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(254 242 242 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(254 226 226 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(254 202 202 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(252 165 165 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(248 113 113 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(239 68 68 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(220 38 38 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(185 28 28 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(153 27 27 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(127 29 29 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(255 247 237 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(255 237 213 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(254 215 170 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(253 186 116 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(251 146 60 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(249 115 22 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(234 88 12 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(194 65 12 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(154 52 18 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(124 45 18 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(255 251 235 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(254 243 199 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(253 230 138 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(252 211 77 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(251 191 36 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(245 158 11 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(217 119 6 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(180 83 9 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(146 64 14 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(120 53 15 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(254 252 232 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(254 249 195 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(254 240 138 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(253 224 71 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(250 204 21 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(234 179 8 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(202 138 4 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(161 98 7 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(133 77 14 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(113 63 18 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(247 254 231 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(236 252 203 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(217 249 157 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(190 242 100 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(163 230 53 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(132 204 22 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(101 163 13 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(77 124 15 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(63 98 18 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(54 83 20 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(240 253 244 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(220 252 231 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(187 247 208 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(134 239 172 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(74 222 128 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(34 197 94 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(22 163 74 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(21 128 61 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(22 101 52 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(20 83 45 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(236 253 245 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(209 250 229 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(167 243 208 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(110 231 183 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(52 211 153 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(16 185 129 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(5 150 105 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(4 120 87 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(6 95 70 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(6 78 59 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(240 253 250 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(204 251 241 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(153 246 228 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(94 234 212 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(45 212 191 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(20 184 166 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(13 148 136 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(15 118 110 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(17 94 89 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(19 78 74 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(236 254 255 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(207 250 254 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(165 243 252 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(103 232 249 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(34 211 238 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(6 182 212 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(8 145 178 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(14 116 144 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(21 94 117 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(22 78 99 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(240 249 255 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(224 242 254 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(186 230 253 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(125 211 252 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(56 189 248 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(14 165 233 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(2 132 199 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(3 105 161 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(7 89 133 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(12 74 110 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(239 246 255 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(219 234 254 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(191 219 254 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(147 197 253 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(96 165 250 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(59 130 246 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(37 99 235 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(29 78 216 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(30 64 175 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(30 58 138 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(238 242 255 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(224 231 255 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(199 210 254 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(165 180 252 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(129 140 248 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(99 102 241 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(79 70 229 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(67 56 202 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(55 48 163 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(49 46 129 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(245 243 255 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(237 233 254 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(221 214 254 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(196 181 253 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(167 139 250 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(139 92 246 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(124 58 237 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(109 40 217 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(91 33 182 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(76 29 149 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(250 245 255 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(243 232 255 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(233 213 255 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(216 180 254 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(192 132 252 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(168 85 247 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(147 51 234 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(126 34 206 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(107 33 168 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(88 28 135 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(253 244 255 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(250 232 255 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(245 208 254 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(240 171 252 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(232 121 249 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(217 70 239 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(192 38 211 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(162 28 175 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(134 25 143 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(112 26 117 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(253 242 248 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(252 231 243 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(251 207 232 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(249 168 212 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(244 114 182 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(236 72 153 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(219 39 119 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(190 24 93 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(157 23 77 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(131 24 67 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(255 241 242 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(255 228 230 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(254 205 211 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(253 164 175 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(251 113 133 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(244 63 94 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(225 29 72 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(190 18 60 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(159 18 57 / var(--tw-text-opacity))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(136 19 55 / var(--tw-text-opacity))', }) ;({ color: 'rgb(37 99 235 / 0.5)', }) ;({ color: 'rgb(37 99 235 / .5)', }) ;({ '--tw-text-opacity': '1', color: 'rgb(80 215 30 / var(--tw-text-opacity))', }) ;({ color: 'var(--color)', }) ;({ '--tw-text-opacity': '1', color: 'rgb(239 68 68 / var(--tw-text-opacity))', }) ;({ color: 'rgb(239 68 68 / 0.25)', }) ;({ '--tw-text-opacity': '1', color: 'rgb(0 0 0 / var(--tw-text-opacity))', }) ;({ color: 'rgb(0 0 0 / 0.25)', }) ;({ color: 'rgb(0 0 0 / .555)', }) ;({ color: 'rgb(0 0 0 / var(--myvar))', }) ;({ color: 'rgb(239 68 68 / .555)', }) ;({ color: 'rgb(239 68 68 / var(--myvar))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(239 68 68 / var(--tw-text-opacity))', }) ;({ color: 'rgb(239 68 68 / 0.2)', }) ;({ '--tw-text-opacity': '1', color: 'rgba(219, 0, 255, var(--tw-text-opacity))', }) ;({ color: 'rgba(219, 0, 255, 0.25)', }) ;({ color: 'rgba(219, 0, 255, .555)', }) ;({ color: 'rgba(219, 0, 255, var(--myvar))', }) ;({ '--tw-text-opacity': '1', color: 'rgb(219 0 255 / var(--tw-text-opacity))', }) ;({ color: 'rgb(219 0 255 / 0.2)', }) ;({ '--tw-text-opacity': '1', color: 'rgb(0 128 0 / var(--tw-text-opacity))', }) ;({ color: 'rgba(255, 255, 255, .45)', }) ;({ fontSize: 'medium', }) ;({ fontSize: 'larger', }) ;({ fontSize: '10px', }) ;({ fontSize: '10%', }) `; exports[`twin.macro textDecoration.tsx: textDecoration.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/text-decoration tw\`underline\` tw\`overline\` tw\`line-through\` tw\`no-underline\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/text-decoration ;({ textDecorationLine: 'underline', }) ;({ textDecorationLine: 'overline', }) ;({ textDecorationLine: 'line-through', }) ;({ textDecorationLine: 'none', }) `; exports[`twin.macro textDecorationColor.tsx: textDecorationColor.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/text-decoration-color theme\`textDecorationColor\` tw\`decoration-inherit\` tw\`decoration-current\` tw\`decoration-transparent\` tw\`decoration-black\` tw\`decoration-white\` tw\`decoration-slate-50\` tw\`decoration-slate-100\` tw\`decoration-slate-200\` tw\`decoration-slate-300\` tw\`decoration-slate-400\` tw\`decoration-slate-500\` tw\`decoration-slate-600\` tw\`decoration-slate-700\` tw\`decoration-slate-800\` tw\`decoration-slate-900\` tw\`decoration-gray-50\` tw\`decoration-gray-100\` tw\`decoration-gray-200\` tw\`decoration-gray-300\` tw\`decoration-gray-400\` tw\`decoration-gray-500\` tw\`decoration-gray-600\` tw\`decoration-gray-700\` tw\`decoration-gray-800\` tw\`decoration-gray-900\` tw\`decoration-zinc-50\` tw\`decoration-zinc-100\` tw\`decoration-zinc-200\` tw\`decoration-zinc-300\` tw\`decoration-zinc-400\` tw\`decoration-zinc-500\` tw\`decoration-zinc-600\` tw\`decoration-zinc-700\` tw\`decoration-zinc-800\` tw\`decoration-zinc-900\` tw\`decoration-neutral-50\` tw\`decoration-neutral-100\` tw\`decoration-neutral-200\` tw\`decoration-neutral-300\` tw\`decoration-neutral-400\` tw\`decoration-neutral-500\` tw\`decoration-neutral-600\` tw\`decoration-neutral-700\` tw\`decoration-neutral-800\` tw\`decoration-neutral-900\` tw\`decoration-stone-50\` tw\`decoration-stone-100\` tw\`decoration-stone-200\` tw\`decoration-stone-300\` tw\`decoration-stone-400\` tw\`decoration-stone-500\` tw\`decoration-stone-600\` tw\`decoration-stone-700\` tw\`decoration-stone-800\` tw\`decoration-stone-900\` tw\`decoration-red-50\` tw\`decoration-red-100\` tw\`decoration-red-200\` tw\`decoration-red-300\` tw\`decoration-red-400\` tw\`decoration-red-500\` tw\`decoration-red-600\` tw\`decoration-red-700\` tw\`decoration-red-800\` tw\`decoration-red-900\` tw\`decoration-orange-50\` tw\`decoration-orange-100\` tw\`decoration-orange-200\` tw\`decoration-orange-300\` tw\`decoration-orange-400\` tw\`decoration-orange-500\` tw\`decoration-orange-600\` tw\`decoration-orange-700\` tw\`decoration-orange-800\` tw\`decoration-orange-900\` tw\`decoration-amber-50\` tw\`decoration-amber-100\` tw\`decoration-amber-200\` tw\`decoration-amber-300\` tw\`decoration-amber-400\` tw\`decoration-amber-500\` tw\`decoration-amber-600\` tw\`decoration-amber-700\` tw\`decoration-amber-800\` tw\`decoration-amber-900\` tw\`decoration-yellow-50\` tw\`decoration-yellow-100\` tw\`decoration-yellow-200\` tw\`decoration-yellow-300\` tw\`decoration-yellow-400\` tw\`decoration-yellow-500\` tw\`decoration-yellow-600\` tw\`decoration-yellow-700\` tw\`decoration-yellow-800\` tw\`decoration-yellow-900\` tw\`decoration-lime-50\` tw\`decoration-lime-100\` tw\`decoration-lime-200\` tw\`decoration-lime-300\` tw\`decoration-lime-400\` tw\`decoration-lime-500\` tw\`decoration-lime-600\` tw\`decoration-lime-700\` tw\`decoration-lime-800\` tw\`decoration-lime-900\` tw\`decoration-green-50\` tw\`decoration-green-100\` tw\`decoration-green-200\` tw\`decoration-green-300\` tw\`decoration-green-400\` tw\`decoration-green-500\` tw\`decoration-green-600\` tw\`decoration-green-700\` tw\`decoration-green-800\` tw\`decoration-green-900\` tw\`decoration-emerald-50\` tw\`decoration-emerald-100\` tw\`decoration-emerald-200\` tw\`decoration-emerald-300\` tw\`decoration-emerald-400\` tw\`decoration-emerald-500\` tw\`decoration-emerald-600\` tw\`decoration-emerald-700\` tw\`decoration-emerald-800\` tw\`decoration-emerald-900\` tw\`decoration-teal-50\` tw\`decoration-teal-100\` tw\`decoration-teal-200\` tw\`decoration-teal-300\` tw\`decoration-teal-400\` tw\`decoration-teal-500\` tw\`decoration-teal-600\` tw\`decoration-teal-700\` tw\`decoration-teal-800\` tw\`decoration-teal-900\` tw\`decoration-cyan-50\` tw\`decoration-cyan-100\` tw\`decoration-cyan-200\` tw\`decoration-cyan-300\` tw\`decoration-cyan-400\` tw\`decoration-cyan-500\` tw\`decoration-cyan-600\` tw\`decoration-cyan-700\` tw\`decoration-cyan-800\` tw\`decoration-cyan-900\` tw\`decoration-sky-50\` tw\`decoration-sky-100\` tw\`decoration-sky-200\` tw\`decoration-sky-300\` tw\`decoration-sky-400\` tw\`decoration-sky-500\` tw\`decoration-sky-600\` tw\`decoration-sky-700\` tw\`decoration-sky-800\` tw\`decoration-sky-900\` tw\`decoration-blue-50\` tw\`decoration-blue-100\` tw\`decoration-blue-200\` tw\`decoration-blue-300\` tw\`decoration-blue-400\` tw\`decoration-blue-500\` tw\`decoration-blue-600\` tw\`decoration-blue-700\` tw\`decoration-blue-800\` tw\`decoration-blue-900\` tw\`decoration-indigo-50\` tw\`decoration-indigo-100\` tw\`decoration-indigo-200\` tw\`decoration-indigo-300\` tw\`decoration-indigo-400\` tw\`decoration-indigo-500\` tw\`decoration-indigo-600\` tw\`decoration-indigo-700\` tw\`decoration-indigo-800\` tw\`decoration-indigo-900\` tw\`decoration-violet-50\` tw\`decoration-violet-100\` tw\`decoration-violet-200\` tw\`decoration-violet-300\` tw\`decoration-violet-400\` tw\`decoration-violet-500\` tw\`decoration-violet-600\` tw\`decoration-violet-700\` tw\`decoration-violet-800\` tw\`decoration-violet-900\` tw\`decoration-purple-50\` tw\`decoration-purple-100\` tw\`decoration-purple-200\` tw\`decoration-purple-300\` tw\`decoration-purple-400\` tw\`decoration-purple-500\` tw\`decoration-purple-600\` tw\`decoration-purple-700\` tw\`decoration-purple-800\` tw\`decoration-purple-900\` tw\`decoration-fuchsia-50\` tw\`decoration-fuchsia-100\` tw\`decoration-fuchsia-200\` tw\`decoration-fuchsia-300\` tw\`decoration-fuchsia-400\` tw\`decoration-fuchsia-500\` tw\`decoration-fuchsia-600\` tw\`decoration-fuchsia-700\` tw\`decoration-fuchsia-800\` tw\`decoration-fuchsia-900\` tw\`decoration-pink-50\` tw\`decoration-pink-100\` tw\`decoration-pink-200\` tw\`decoration-pink-300\` tw\`decoration-pink-400\` tw\`decoration-pink-500\` tw\`decoration-pink-600\` tw\`decoration-pink-700\` tw\`decoration-pink-800\` tw\`decoration-pink-900\` tw\`decoration-rose-50\` tw\`decoration-rose-100\` tw\`decoration-rose-200\` tw\`decoration-rose-300\` tw\`decoration-rose-400\` tw\`decoration-rose-500\` tw\`decoration-rose-600\` tw\`decoration-rose-700\` tw\`decoration-rose-800\` tw\`decoration-rose-900\` tw\`decoration-red-600\` tw\`decoration-[#50d71e]\` tw\`decoration-[black]\` tw\`decoration-[rgb(123,123,123)]\` tw\`decoration-[rgb(123,_123,_123)]\` tw\`decoration-[rgb(123_123_123)]\` tw\`decoration-[black]/20\` // \`decoration-[rgb(123_123_123)]/20\` unsupported tw\`decoration-[black]/[20]\` // \`decoration-[rgb(123_123_123)]/[20]\` unsupported tw\`decoration-[color:#50d71e]\` tw\`decoration-[color:var(--color)]\` // \`decoration-[var(--color)]\` unsupported ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/text-decoration-color ;({ inherit: 'inherit', current: 'currentColor', transparent: 'transparent', black: '#000', white: '#fff', slate: { 50: '#f8fafc', 100: '#f1f5f9', 200: '#e2e8f0', 300: '#cbd5e1', 400: '#94a3b8', 500: '#64748b', 600: '#475569', 700: '#334155', 800: '#1e293b', 900: '#0f172a', 950: '#020617', }, gray: { 50: '#f9fafb', 100: '#f3f4f6', 200: '#e5e7eb', 300: '#d1d5db', 400: '#9ca3af', 500: '#6b7280', 600: '#4b5563', 700: '#374151', 800: '#1f2937', 900: '#111827', 950: '#030712', }, zinc: { 50: '#fafafa', 100: '#f4f4f5', 200: '#e4e4e7', 300: '#d4d4d8', 400: '#a1a1aa', 500: '#71717a', 600: '#52525b', 700: '#3f3f46', 800: '#27272a', 900: '#18181b', 950: '#09090b', }, neutral: { 50: '#fafafa', 100: '#f5f5f5', 200: '#e5e5e5', 300: '#d4d4d4', 400: '#a3a3a3', 500: '#737373', 600: '#525252', 700: '#404040', 800: '#262626', 900: '#171717', 950: '#0a0a0a', }, stone: { 50: '#fafaf9', 100: '#f5f5f4', 200: '#e7e5e4', 300: '#d6d3d1', 400: '#a8a29e', 500: '#78716c', 600: '#57534e', 700: '#44403c', 800: '#292524', 900: '#1c1917', 950: '#0c0a09', }, red: { 50: '#fef2f2', 100: '#fee2e2', 200: '#fecaca', 300: '#fca5a5', 400: '#f87171', 500: '#ef4444', 600: '#dc2626', 700: '#b91c1c', 800: '#991b1b', 900: '#7f1d1d', 950: '#450a0a', }, orange: { 50: '#fff7ed', 100: '#ffedd5', 200: '#fed7aa', 300: '#fdba74', 400: '#fb923c', 500: '#f97316', 600: '#ea580c', 700: '#c2410c', 800: '#9a3412', 900: '#7c2d12', 950: '#431407', }, amber: { 50: '#fffbeb', 100: '#fef3c7', 200: '#fde68a', 300: '#fcd34d', 400: '#fbbf24', 500: '#f59e0b', 600: '#d97706', 700: '#b45309', 800: '#92400e', 900: '#78350f', 950: '#451a03', }, yellow: { 50: '#fefce8', 100: '#fef9c3', 200: '#fef08a', 300: '#fde047', 400: '#facc15', 500: '#eab308', 600: '#ca8a04', 700: '#a16207', 800: '#854d0e', 900: '#713f12', 950: '#422006', }, lime: { 50: '#f7fee7', 100: '#ecfccb', 200: '#d9f99d', 300: '#bef264', 400: '#a3e635', 500: '#84cc16', 600: '#65a30d', 700: '#4d7c0f', 800: '#3f6212', 900: '#365314', 950: '#1a2e05', }, green: { 50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 300: '#86efac', 400: '#4ade80', 500: '#22c55e', 600: '#16a34a', 700: '#15803d', 800: '#166534', 900: '#14532d', 950: '#052e16', }, emerald: { 50: '#ecfdf5', 100: '#d1fae5', 200: '#a7f3d0', 300: '#6ee7b7', 400: '#34d399', 500: '#10b981', 600: '#059669', 700: '#047857', 800: '#065f46', 900: '#064e3b', 950: '#022c22', }, teal: { 50: '#f0fdfa', 100: '#ccfbf1', 200: '#99f6e4', 300: '#5eead4', 400: '#2dd4bf', 500: '#14b8a6', 600: '#0d9488', 700: '#0f766e', 800: '#115e59', 900: '#134e4a', 950: '#042f2e', }, cyan: { 50: '#ecfeff', 100: '#cffafe', 200: '#a5f3fc', 300: '#67e8f9', 400: '#22d3ee', 500: '#06b6d4', 600: '#0891b2', 700: '#0e7490', 800: '#155e75', 900: '#164e63', 950: '#083344', }, sky: { 50: '#f0f9ff', 100: '#e0f2fe', 200: '#bae6fd', 300: '#7dd3fc', 400: '#38bdf8', 500: '#0ea5e9', 600: '#0284c7', 700: '#0369a1', 800: '#075985', 900: '#0c4a6e', 950: '#082f49', }, blue: { 50: '#eff6ff', 100: '#dbeafe', 200: '#bfdbfe', 300: '#93c5fd', 400: '#60a5fa', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8', 800: '#1e40af', 900: '#1e3a8a', 950: '#172554', }, indigo: { 50: '#eef2ff', 100: '#e0e7ff', 200: '#c7d2fe', 300: '#a5b4fc', 400: '#818cf8', 500: '#6366f1', 600: '#4f46e5', 700: '#4338ca', 800: '#3730a3', 900: '#312e81', 950: '#1e1b4b', }, violet: { 50: '#f5f3ff', 100: '#ede9fe', 200: '#ddd6fe', 300: '#c4b5fd', 400: '#a78bfa', 500: '#8b5cf6', 600: '#7c3aed', 700: '#6d28d9', 800: '#5b21b6', 900: '#4c1d95', 950: '#2e1065', }, purple: { 50: '#faf5ff', 100: '#f3e8ff', 200: '#e9d5ff', 300: '#d8b4fe', 400: '#c084fc', 500: '#a855f7', 600: '#9333ea', 700: '#7e22ce', 800: '#6b21a8', 900: '#581c87', 950: '#3b0764', }, fuchsia: { 50: '#fdf4ff', 100: '#fae8ff', 200: '#f5d0fe', 300: '#f0abfc', 400: '#e879f9', 500: '#d946ef', 600: '#c026d3', 700: '#a21caf', 800: '#86198f', 900: '#701a75', 950: '#4a044e', }, pink: { 50: '#fdf2f8', 100: '#fce7f3', 200: '#fbcfe8', 300: '#f9a8d4', 400: '#f472b6', 500: '#ec4899', 600: '#db2777', 700: '#be185d', 800: '#9d174d', 900: '#831843', 950: '#500724', }, rose: { 50: '#fff1f2', 100: '#ffe4e6', 200: '#fecdd3', 300: '#fda4af', 400: '#fb7185', 500: '#f43f5e', 600: '#e11d48', 700: '#be123c', 800: '#9f1239', 900: '#881337', 950: '#4c0519', }, 'red-500/fromConfig': '#000', electric: void 0, }) ;({ textDecorationColor: 'inherit', }) ;({ textDecorationColor: 'currentColor', }) ;({ textDecorationColor: 'transparent', }) ;({ textDecorationColor: '#000', }) ;({ textDecorationColor: '#fff', }) ;({ textDecorationColor: '#f8fafc', }) ;({ textDecorationColor: '#f1f5f9', }) ;({ textDecorationColor: '#e2e8f0', }) ;({ textDecorationColor: '#cbd5e1', }) ;({ textDecorationColor: '#94a3b8', }) ;({ textDecorationColor: '#64748b', }) ;({ textDecorationColor: '#475569', }) ;({ textDecorationColor: '#334155', }) ;({ textDecorationColor: '#1e293b', }) ;({ textDecorationColor: '#0f172a', }) ;({ textDecorationColor: '#f9fafb', }) ;({ textDecorationColor: '#f3f4f6', }) ;({ textDecorationColor: '#e5e7eb', }) ;({ textDecorationColor: '#d1d5db', }) ;({ textDecorationColor: '#9ca3af', }) ;({ textDecorationColor: '#6b7280', }) ;({ textDecorationColor: '#4b5563', }) ;({ textDecorationColor: '#374151', }) ;({ textDecorationColor: '#1f2937', }) ;({ textDecorationColor: '#111827', }) ;({ textDecorationColor: '#fafafa', }) ;({ textDecorationColor: '#f4f4f5', }) ;({ textDecorationColor: '#e4e4e7', }) ;({ textDecorationColor: '#d4d4d8', }) ;({ textDecorationColor: '#a1a1aa', }) ;({ textDecorationColor: '#71717a', }) ;({ textDecorationColor: '#52525b', }) ;({ textDecorationColor: '#3f3f46', }) ;({ textDecorationColor: '#27272a', }) ;({ textDecorationColor: '#18181b', }) ;({ textDecorationColor: '#fafafa', }) ;({ textDecorationColor: '#f5f5f5', }) ;({ textDecorationColor: '#e5e5e5', }) ;({ textDecorationColor: '#d4d4d4', }) ;({ textDecorationColor: '#a3a3a3', }) ;({ textDecorationColor: '#737373', }) ;({ textDecorationColor: '#525252', }) ;({ textDecorationColor: '#404040', }) ;({ textDecorationColor: '#262626', }) ;({ textDecorationColor: '#171717', }) ;({ textDecorationColor: '#fafaf9', }) ;({ textDecorationColor: '#f5f5f4', }) ;({ textDecorationColor: '#e7e5e4', }) ;({ textDecorationColor: '#d6d3d1', }) ;({ textDecorationColor: '#a8a29e', }) ;({ textDecorationColor: '#78716c', }) ;({ textDecorationColor: '#57534e', }) ;({ textDecorationColor: '#44403c', }) ;({ textDecorationColor: '#292524', }) ;({ textDecorationColor: '#1c1917', }) ;({ textDecorationColor: '#fef2f2', }) ;({ textDecorationColor: '#fee2e2', }) ;({ textDecorationColor: '#fecaca', }) ;({ textDecorationColor: '#fca5a5', }) ;({ textDecorationColor: '#f87171', }) ;({ textDecorationColor: '#ef4444', }) ;({ textDecorationColor: '#dc2626', }) ;({ textDecorationColor: '#b91c1c', }) ;({ textDecorationColor: '#991b1b', }) ;({ textDecorationColor: '#7f1d1d', }) ;({ textDecorationColor: '#fff7ed', }) ;({ textDecorationColor: '#ffedd5', }) ;({ textDecorationColor: '#fed7aa', }) ;({ textDecorationColor: '#fdba74', }) ;({ textDecorationColor: '#fb923c', }) ;({ textDecorationColor: '#f97316', }) ;({ textDecorationColor: '#ea580c', }) ;({ textDecorationColor: '#c2410c', }) ;({ textDecorationColor: '#9a3412', }) ;({ textDecorationColor: '#7c2d12', }) ;({ textDecorationColor: '#fffbeb', }) ;({ textDecorationColor: '#fef3c7', }) ;({ textDecorationColor: '#fde68a', }) ;({ textDecorationColor: '#fcd34d', }) ;({ textDecorationColor: '#fbbf24', }) ;({ textDecorationColor: '#f59e0b', }) ;({ textDecorationColor: '#d97706', }) ;({ textDecorationColor: '#b45309', }) ;({ textDecorationColor: '#92400e', }) ;({ textDecorationColor: '#78350f', }) ;({ textDecorationColor: '#fefce8', }) ;({ textDecorationColor: '#fef9c3', }) ;({ textDecorationColor: '#fef08a', }) ;({ textDecorationColor: '#fde047', }) ;({ textDecorationColor: '#facc15', }) ;({ textDecorationColor: '#eab308', }) ;({ textDecorationColor: '#ca8a04', }) ;({ textDecorationColor: '#a16207', }) ;({ textDecorationColor: '#854d0e', }) ;({ textDecorationColor: '#713f12', }) ;({ textDecorationColor: '#f7fee7', }) ;({ textDecorationColor: '#ecfccb', }) ;({ textDecorationColor: '#d9f99d', }) ;({ textDecorationColor: '#bef264', }) ;({ textDecorationColor: '#a3e635', }) ;({ textDecorationColor: '#84cc16', }) ;({ textDecorationColor: '#65a30d', }) ;({ textDecorationColor: '#4d7c0f', }) ;({ textDecorationColor: '#3f6212', }) ;({ textDecorationColor: '#365314', }) ;({ textDecorationColor: '#f0fdf4', }) ;({ textDecorationColor: '#dcfce7', }) ;({ textDecorationColor: '#bbf7d0', }) ;({ textDecorationColor: '#86efac', }) ;({ textDecorationColor: '#4ade80', }) ;({ textDecorationColor: '#22c55e', }) ;({ textDecorationColor: '#16a34a', }) ;({ textDecorationColor: '#15803d', }) ;({ textDecorationColor: '#166534', }) ;({ textDecorationColor: '#14532d', }) ;({ textDecorationColor: '#ecfdf5', }) ;({ textDecorationColor: '#d1fae5', }) ;({ textDecorationColor: '#a7f3d0', }) ;({ textDecorationColor: '#6ee7b7', }) ;({ textDecorationColor: '#34d399', }) ;({ textDecorationColor: '#10b981', }) ;({ textDecorationColor: '#059669', }) ;({ textDecorationColor: '#047857', }) ;({ textDecorationColor: '#065f46', }) ;({ textDecorationColor: '#064e3b', }) ;({ textDecorationColor: '#f0fdfa', }) ;({ textDecorationColor: '#ccfbf1', }) ;({ textDecorationColor: '#99f6e4', }) ;({ textDecorationColor: '#5eead4', }) ;({ textDecorationColor: '#2dd4bf', }) ;({ textDecorationColor: '#14b8a6', }) ;({ textDecorationColor: '#0d9488', }) ;({ textDecorationColor: '#0f766e', }) ;({ textDecorationColor: '#115e59', }) ;({ textDecorationColor: '#134e4a', }) ;({ textDecorationColor: '#ecfeff', }) ;({ textDecorationColor: '#cffafe', }) ;({ textDecorationColor: '#a5f3fc', }) ;({ textDecorationColor: '#67e8f9', }) ;({ textDecorationColor: '#22d3ee', }) ;({ textDecorationColor: '#06b6d4', }) ;({ textDecorationColor: '#0891b2', }) ;({ textDecorationColor: '#0e7490', }) ;({ textDecorationColor: '#155e75', }) ;({ textDecorationColor: '#164e63', }) ;({ textDecorationColor: '#f0f9ff', }) ;({ textDecorationColor: '#e0f2fe', }) ;({ textDecorationColor: '#bae6fd', }) ;({ textDecorationColor: '#7dd3fc', }) ;({ textDecorationColor: '#38bdf8', }) ;({ textDecorationColor: '#0ea5e9', }) ;({ textDecorationColor: '#0284c7', }) ;({ textDecorationColor: '#0369a1', }) ;({ textDecorationColor: '#075985', }) ;({ textDecorationColor: '#0c4a6e', }) ;({ textDecorationColor: '#eff6ff', }) ;({ textDecorationColor: '#dbeafe', }) ;({ textDecorationColor: '#bfdbfe', }) ;({ textDecorationColor: '#93c5fd', }) ;({ textDecorationColor: '#60a5fa', }) ;({ textDecorationColor: '#3b82f6', }) ;({ textDecorationColor: '#2563eb', }) ;({ textDecorationColor: '#1d4ed8', }) ;({ textDecorationColor: '#1e40af', }) ;({ textDecorationColor: '#1e3a8a', }) ;({ textDecorationColor: '#eef2ff', }) ;({ textDecorationColor: '#e0e7ff', }) ;({ textDecorationColor: '#c7d2fe', }) ;({ textDecorationColor: '#a5b4fc', }) ;({ textDecorationColor: '#818cf8', }) ;({ textDecorationColor: '#6366f1', }) ;({ textDecorationColor: '#4f46e5', }) ;({ textDecorationColor: '#4338ca', }) ;({ textDecorationColor: '#3730a3', }) ;({ textDecorationColor: '#312e81', }) ;({ textDecorationColor: '#f5f3ff', }) ;({ textDecorationColor: '#ede9fe', }) ;({ textDecorationColor: '#ddd6fe', }) ;({ textDecorationColor: '#c4b5fd', }) ;({ textDecorationColor: '#a78bfa', }) ;({ textDecorationColor: '#8b5cf6', }) ;({ textDecorationColor: '#7c3aed', }) ;({ textDecorationColor: '#6d28d9', }) ;({ textDecorationColor: '#5b21b6', }) ;({ textDecorationColor: '#4c1d95', }) ;({ textDecorationColor: '#faf5ff', }) ;({ textDecorationColor: '#f3e8ff', }) ;({ textDecorationColor: '#e9d5ff', }) ;({ textDecorationColor: '#d8b4fe', }) ;({ textDecorationColor: '#c084fc', }) ;({ textDecorationColor: '#a855f7', }) ;({ textDecorationColor: '#9333ea', }) ;({ textDecorationColor: '#7e22ce', }) ;({ textDecorationColor: '#6b21a8', }) ;({ textDecorationColor: '#581c87', }) ;({ textDecorationColor: '#fdf4ff', }) ;({ textDecorationColor: '#fae8ff', }) ;({ textDecorationColor: '#f5d0fe', }) ;({ textDecorationColor: '#f0abfc', }) ;({ textDecorationColor: '#e879f9', }) ;({ textDecorationColor: '#d946ef', }) ;({ textDecorationColor: '#c026d3', }) ;({ textDecorationColor: '#a21caf', }) ;({ textDecorationColor: '#86198f', }) ;({ textDecorationColor: '#701a75', }) ;({ textDecorationColor: '#fdf2f8', }) ;({ textDecorationColor: '#fce7f3', }) ;({ textDecorationColor: '#fbcfe8', }) ;({ textDecorationColor: '#f9a8d4', }) ;({ textDecorationColor: '#f472b6', }) ;({ textDecorationColor: '#ec4899', }) ;({ textDecorationColor: '#db2777', }) ;({ textDecorationColor: '#be185d', }) ;({ textDecorationColor: '#9d174d', }) ;({ textDecorationColor: '#831843', }) ;({ textDecorationColor: '#fff1f2', }) ;({ textDecorationColor: '#ffe4e6', }) ;({ textDecorationColor: '#fecdd3', }) ;({ textDecorationColor: '#fda4af', }) ;({ textDecorationColor: '#fb7185', }) ;({ textDecorationColor: '#f43f5e', }) ;({ textDecorationColor: '#e11d48', }) ;({ textDecorationColor: '#be123c', }) ;({ textDecorationColor: '#9f1239', }) ;({ textDecorationColor: '#881337', }) ;({ textDecorationColor: '#dc2626', }) ;({ textDecorationColor: '#50d71e', }) ;({ textDecorationColor: 'black', }) ;({ textDecorationColor: 'rgb(123,123,123)', }) ;({ textDecorationColor: 'rgb(123, 123, 123)', }) ;({ textDecorationColor: 'rgb(123 123 123)', }) ;({ textDecorationColor: 'rgb(0 0 0 1 / 0.2)', }) // \`decoration-[rgb(123_123_123)]/20\` unsupported ;({ textDecorationColor: 'rgb(0 0 0 1 / 20)', }) // \`decoration-[rgb(123_123_123)]/[20]\` unsupported ;({ textDecorationColor: '#50d71e', }) ;({ textDecorationColor: 'var(--color)', }) // \`decoration-[var(--color)]\` unsupported `; exports[`twin.macro textDecorationStyle.tsx: textDecorationStyle.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/text-decoration-style tw\`decoration-solid\` tw\`decoration-double\` tw\`decoration-dotted\` tw\`decoration-dashed\` tw\`decoration-wavy\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/text-decoration-style ;({ textDecorationStyle: 'solid', }) ;({ textDecorationStyle: 'double', }) ;({ textDecorationStyle: 'dotted', }) ;({ textDecorationStyle: 'dashed', }) ;({ textDecorationStyle: 'wavy', }) `; exports[`twin.macro textDecorationThickness.tsx: textDecorationThickness.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/text-decoration-thickness theme\`textDecorationThickness\` tw\`decoration-auto\` tw\`decoration-from-font\` tw\`decoration-0\` tw\`decoration-1\` tw\`decoration-2\` tw\`decoration-4\` tw\`decoration-8\` tw\`decoration-[length:10px]\` tw\`decoration-[percentage:10%]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/text-decoration-thickness ;({ 0: '0px', 1: '1px', 2: '2px', 4: '4px', 8: '8px', auto: 'auto', 'from-font': 'from-font', }) ;({ textDecorationThickness: 'auto', }) ;({ textDecorationThickness: 'from-font', }) ;({ textDecorationThickness: '0px', }) ;({ textDecorationThickness: '1px', }) ;({ textDecorationThickness: '2px', }) ;({ textDecorationThickness: '4px', }) ;({ textDecorationThickness: '8px', }) ;({ textDecorationThickness: '10px', }) ;({ textDecorationThickness: '10%', }) `; exports[`twin.macro textIndent.tsx: textIndent.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/text-indent theme\`textIndent\` tw\`indent-0\` tw\`indent-px\` tw\`indent-0.5\` tw\`indent-1\` tw\`indent-1.5\` tw\`indent-2\` tw\`indent-2.5\` tw\`indent-3\` tw\`indent-3.5\` tw\`indent-4\` tw\`indent-5\` tw\`indent-6\` tw\`indent-7\` tw\`indent-8\` tw\`indent-9\` tw\`indent-10\` tw\`indent-11\` tw\`indent-12\` tw\`indent-14\` tw\`indent-16\` tw\`indent-20\` tw\`indent-24\` tw\`indent-28\` tw\`indent-32\` tw\`indent-36\` tw\`indent-40\` tw\`indent-44\` tw\`indent-48\` tw\`indent-52\` tw\`indent-56\` tw\`indent-60\` tw\`indent-64\` tw\`indent-72\` tw\`indent-80\` tw\`indent-96\` tw\`-indent-0\` tw\`-indent-px\` tw\`-indent-0.5\` tw\`-indent-1\` tw\`-indent-1.5\` tw\`-indent-2\` tw\`-indent-2.5\` tw\`-indent-3\` tw\`-indent-3.5\` tw\`-indent-4\` tw\`-indent-5\` tw\`-indent-6\` tw\`-indent-7\` tw\`-indent-8\` tw\`-indent-9\` tw\`-indent-10\` tw\`-indent-11\` tw\`-indent-12\` tw\`-indent-14\` tw\`-indent-16\` tw\`-indent-20\` tw\`-indent-24\` tw\`-indent-28\` tw\`-indent-32\` tw\`-indent-36\` tw\`-indent-40\` tw\`-indent-44\` tw\`-indent-48\` tw\`-indent-52\` tw\`-indent-56\` tw\`-indent-60\` tw\`-indent-64\` tw\`-indent-72\` tw\`-indent-80\` tw\`-indent-96\` tw\`indent-[50%]\` tw\`indent-[length:10px]\` tw\`indent-[lookup:10px]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/text-indent ;({ 0: '0px', 1: '0.25rem', 2: '0.5rem', 3: '0.75rem', 4: '1rem', 5: '1.25rem', 6: '1.5rem', 7: '1.75rem', 8: '2rem', 9: '2.25rem', 10: '2.5rem', 11: '2.75rem', 12: '3rem', 14: '3.5rem', 16: '4rem', 20: '5rem', 24: '6rem', 28: '7rem', 32: '8rem', 36: '9rem', 40: '10rem', 44: '11rem', 48: '12rem', 52: '13rem', 56: '14rem', 60: '15rem', 64: '16rem', 72: '18rem', 80: '20rem', 96: '24rem', px: '1px', 0.5: '0.125rem', 1.5: '0.375rem', 2.5: '0.625rem', 3.5: '0.875rem', }) ;({ textIndent: '0px', }) ;({ textIndent: '1px', }) ;({ textIndent: '0.125rem', }) ;({ textIndent: '0.25rem', }) ;({ textIndent: '0.375rem', }) ;({ textIndent: '0.5rem', }) ;({ textIndent: '0.625rem', }) ;({ textIndent: '0.75rem', }) ;({ textIndent: '0.875rem', }) ;({ textIndent: '1rem', }) ;({ textIndent: '1.25rem', }) ;({ textIndent: '1.5rem', }) ;({ textIndent: '1.75rem', }) ;({ textIndent: '2rem', }) ;({ textIndent: '2.25rem', }) ;({ textIndent: '2.5rem', }) ;({ textIndent: '2.75rem', }) ;({ textIndent: '3rem', }) ;({ textIndent: '3.5rem', }) ;({ textIndent: '4rem', }) ;({ textIndent: '5rem', }) ;({ textIndent: '6rem', }) ;({ textIndent: '7rem', }) ;({ textIndent: '8rem', }) ;({ textIndent: '9rem', }) ;({ textIndent: '10rem', }) ;({ textIndent: '11rem', }) ;({ textIndent: '12rem', }) ;({ textIndent: '13rem', }) ;({ textIndent: '14rem', }) ;({ textIndent: '15rem', }) ;({ textIndent: '16rem', }) ;({ textIndent: '18rem', }) ;({ textIndent: '20rem', }) ;({ textIndent: '24rem', }) ;({ textIndent: '-0px', }) ;({ textIndent: '-1px', }) ;({ textIndent: '-0.125rem', }) ;({ textIndent: '-0.25rem', }) ;({ textIndent: '-0.375rem', }) ;({ textIndent: '-0.5rem', }) ;({ textIndent: '-0.625rem', }) ;({ textIndent: '-0.75rem', }) ;({ textIndent: '-0.875rem', }) ;({ textIndent: '-1rem', }) ;({ textIndent: '-1.25rem', }) ;({ textIndent: '-1.5rem', }) ;({ textIndent: '-1.75rem', }) ;({ textIndent: '-2rem', }) ;({ textIndent: '-2.25rem', }) ;({ textIndent: '-2.5rem', }) ;({ textIndent: '-2.75rem', }) ;({ textIndent: '-3rem', }) ;({ textIndent: '-3.5rem', }) ;({ textIndent: '-4rem', }) ;({ textIndent: '-5rem', }) ;({ textIndent: '-6rem', }) ;({ textIndent: '-7rem', }) ;({ textIndent: '-8rem', }) ;({ textIndent: '-9rem', }) ;({ textIndent: '-10rem', }) ;({ textIndent: '-11rem', }) ;({ textIndent: '-12rem', }) ;({ textIndent: '-13rem', }) ;({ textIndent: '-14rem', }) ;({ textIndent: '-15rem', }) ;({ textIndent: '-16rem', }) ;({ textIndent: '-18rem', }) ;({ textIndent: '-20rem', }) ;({ textIndent: '-24rem', }) ;({ textIndent: '50%', }) ;({ textIndent: '10px', }) ;({ textIndent: '10px', }) `; exports[`twin.macro textOpacity.tsx: textOpacity.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/text-opacity // Deprecated in favor of slash opacity syntax tw\`text-opacity-0\` tw\`text-opacity-5\` tw\`text-opacity-10\` tw\`text-opacity-20\` tw\`text-opacity-25\` tw\`text-opacity-30\` tw\`text-opacity-40\` tw\`text-opacity-50\` tw\`text-opacity-60\` tw\`text-opacity-70\` tw\`text-opacity-75\` tw\`text-opacity-80\` tw\`text-opacity-90\` tw\`text-opacity-95\` tw\`text-opacity-100\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/text-opacity // Deprecated in favor of slash opacity syntax ;({ '--tw-text-opacity': '0', }) ;({ '--tw-text-opacity': '0.05', }) ;({ '--tw-text-opacity': '0.1', }) ;({ '--tw-text-opacity': '0.2', }) ;({ '--tw-text-opacity': '0.25', }) ;({ '--tw-text-opacity': '0.3', }) ;({ '--tw-text-opacity': '0.4', }) ;({ '--tw-text-opacity': '0.5', }) ;({ '--tw-text-opacity': '0.6', }) ;({ '--tw-text-opacity': '0.7', }) ;({ '--tw-text-opacity': '0.75', }) ;({ '--tw-text-opacity': '0.8', }) ;({ '--tw-text-opacity': '0.9', }) ;({ '--tw-text-opacity': '0.95', }) ;({ '--tw-text-opacity': '1', }) `; exports[`twin.macro textOverflow.tsx: textOverflow.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/text-overflow tw\`truncate\` tw\`text-ellipsis\` tw\`text-clip\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/text-overflow ;({ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', }) ;({ textOverflow: 'ellipsis', }) ;({ textOverflow: 'clip', }) `; exports[`twin.macro textTransform.tsx: textTransform.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/text-transform tw\`uppercase\` tw\`lowercase\` tw\`capitalize\` tw\`normal-case\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/text-transform ;({ textTransform: 'uppercase', }) ;({ textTransform: 'lowercase', }) ;({ textTransform: 'capitalize', }) ;({ textTransform: 'none', }) `; exports[`twin.macro textUnderlineOffset.tsx: textUnderlineOffset.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/text-underline-offset theme\`textUnderlineOffset\` tw\`underline-offset-auto\` tw\`underline-offset-0\` tw\`underline-offset-1\` tw\`underline-offset-2\` tw\`underline-offset-4\` tw\`underline-offset-8\` tw\`underline-offset-[3px]\` tw\`underline-offset-[length:3px]\` tw\`underline-offset-[30%]\` tw\`underline-offset-[percentage:30%]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/text-underline-offset ;({ 0: '0px', 1: '1px', 2: '2px', 4: '4px', 8: '8px', auto: 'auto', }) ;({ textUnderlineOffset: 'auto', }) ;({ textUnderlineOffset: '0px', }) ;({ textUnderlineOffset: '1px', }) ;({ textUnderlineOffset: '2px', }) ;({ textUnderlineOffset: '4px', }) ;({ textUnderlineOffset: '8px', }) ;({ textUnderlineOffset: '3px', }) ;({ textUnderlineOffset: '3px', }) ;({ textUnderlineOffset: '30%', }) ;({ textUnderlineOffset: '30%', }) `; exports[`twin.macro themeValuesToString.tsx: themeValuesToString.tsx 1`] = ` // @ts-nocheck import { globalStyles, theme } from '../macro' globalStyles theme\`keyframes\` theme\`\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck ;({ '*, ::before, ::after': { boxSizing: 'border-box', borderWidth: '0', borderStyle: 'solid', borderColor: 'currentColor', '--tw-border-spacing-x': '0', '--tw-border-spacing-y': '0', '--tw-translate-x': '0', '--tw-translate-y': '0', '--tw-rotate': '0', '--tw-skew-x': '0', '--tw-skew-y': '0', '--tw-scale-x': '1', '--tw-scale-y': '1', '--tw-pan-x': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-pan-y': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-pinch-zoom': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-scroll-snap-strictness': 'proximity', '--tw-ordinal': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-slashed-zero': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-numeric-figure': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-numeric-spacing': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-numeric-fraction': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-ring-offset-shadow': '0 0 #0000', '--tw-ring-shadow': '0 0 #0000', '--tw-shadow': '0 0 #0000', '--tw-shadow-colored': '0 0 #0000', '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-ring-offset-width': '0px', '--tw-ring-offset-color': '#fff', '--tw-ring-color': 'rgb(59 130 246 / 0.5)', '--tw-blur': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-brightness': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-contrast': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-grayscale': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-invert': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-saturate': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-sepia': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-drop-shadow': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-blur': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-brightness': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-contrast': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-grayscale': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-invert': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-opacity': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-saturate': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-sepia': 'var(--tw-empty,/*!*/ /*!*/)', }, '::before, ::after': { '--tw-content': "''", }, html: { lineHeight: '1.5', WebkitTextSizeAdjust: '100%', MozTabSize: '4', tabSize: '4', fontFamily: 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"', fontFeatureSettings: ' normal', fontVariationSettings: ' normal', }, body: { margin: '0', lineHeight: 'inherit', }, hr: { height: '0', color: 'inherit', borderTopWidth: '1px', }, 'abbr:where([title])': { textDecoration: 'underline dotted', }, 'h1, h2, h3, h4, h5, h6': { fontSize: 'inherit', fontWeight: 'inherit', }, a: { color: 'inherit', textDecoration: 'inherit', }, 'b, strong': { fontWeight: 'bolder', }, 'code, kbd, samp, pre': { fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace', fontSize: '1em', }, small: { fontSize: '80%', }, 'sub, sup': { fontSize: '75%', lineHeight: '0', position: 'relative', verticalAlign: 'baseline', }, sub: { bottom: '-0.25em', }, sup: { top: '-0.5em', }, table: { textIndent: '0', borderColor: 'inherit', borderCollapse: 'collapse', }, 'button, input, optgroup, select, textarea': { fontFamily: 'inherit', fontSize: '100%', fontWeight: 'inherit', lineHeight: 'inherit', color: 'inherit', margin: '0', padding: '0', }, 'button, select': { textTransform: 'none', }, "button, [type='button'], [type='reset'], [type='submit']": { WebkitAppearance: 'button', backgroundColor: 'transparent', backgroundImage: 'none', }, ':-moz-focusring': { outline: 'auto', }, ':-moz-ui-invalid': { boxShadow: 'none', }, progress: { verticalAlign: 'baseline', }, '::-webkit-inner-spin-button, ::-webkit-outer-spin-button': { height: 'auto', }, "[type='search']": { WebkitAppearance: 'textfield', outlineOffset: '-2px', }, '::-webkit-search-decoration': { WebkitAppearance: 'none', }, '::-webkit-file-upload-button': { WebkitAppearance: 'button', font: 'inherit', }, summary: { display: 'list-item', }, 'blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre': { margin: '0', }, fieldset: { margin: '0', padding: '0', }, legend: { padding: '0', }, 'ol, ul, menu': { listStyle: 'none', margin: '0', padding: '0', }, textarea: { resize: 'vertical', }, 'input::placeholder, textarea::placeholder': { opacity: '1', color: ' #9ca3af', }, 'button, [role="button"]': { cursor: 'pointer', }, ':disabled': { cursor: 'default', }, 'img, svg, video, canvas, audio, iframe, embed, object': { display: 'block', verticalAlign: 'middle', }, 'img, video': { maxWidth: '100%', height: 'auto', }, '[hidden]': { display: 'none', }, '::backdrop': { '--tw-border-spacing-x': '0', '--tw-border-spacing-y': '0', '--tw-translate-x': '0', '--tw-translate-y': '0', '--tw-rotate': '0', '--tw-skew-x': '0', '--tw-skew-y': '0', '--tw-scale-x': '1', '--tw-scale-y': '1', '--tw-pan-x': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-pan-y': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-pinch-zoom': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-scroll-snap-strictness': 'proximity', '--tw-ordinal': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-slashed-zero': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-numeric-figure': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-numeric-spacing': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-numeric-fraction': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-ring-offset-shadow': '0 0 #0000', '--tw-ring-shadow': '0 0 #0000', '--tw-shadow': '0 0 #0000', '--tw-shadow-colored': '0 0 #0000', '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-ring-offset-width': '0px', '--tw-ring-offset-color': '#fff', '--tw-ring-color': 'rgb(59 130 246 / 0.5)', '--tw-blur': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-brightness': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-contrast': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-grayscale': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-invert': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-saturate': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-sepia': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-drop-shadow': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-blur': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-brightness': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-contrast': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-grayscale': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-invert': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-opacity': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-saturate': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-backdrop-sepia': 'var(--tw-empty,/*!*/ /*!*/)', }, }) ;({ 'fade-up': { from: { transform: 'translateY(0.5rem)', opacity: '0', }, to: { transform: 'translateY(0)', opacity: '1', }, }, }) ;({ colors: {}, keyframes: { 'fade-up': { from: { transform: 'translateY(0.5rem)', opacity: '0', }, to: { transform: 'translateY(0)', opacity: '1', }, }, }, anotherkey: { property: '1rem', }, accentColor: { auto: 'auto', }, animation: { none: 'none', spin: 'spin 1s linear infinite', ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite', pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', bounce: 'bounce 1s infinite', }, aria: { checked: 'checked="true"', disabled: 'disabled="true"', expanded: 'expanded="true"', hidden: 'hidden="true"', pressed: 'pressed="true"', readonly: 'readonly="true"', required: 'required="true"', selected: 'selected="true"', }, aspectRatio: { auto: 'auto', square: '1 / 1', video: '16 / 9', }, backdropBlur: { 0: '0', none: '0', sm: '4px', DEFAULT: '8px', md: '12px', lg: '16px', xl: '24px', '2xl': '40px', '3xl': '64px', }, backdropBrightness: { 0: '0', 50: '.5', 75: '.75', 90: '.9', 95: '.95', 100: '1', 105: '1.05', 110: '1.1', 125: '1.25', 150: '1.5', 200: '2', }, backdropContrast: { 0: '0', 50: '.5', 75: '.75', 100: '1', 125: '1.25', 150: '1.5', 200: '2', }, backdropGrayscale: { 0: '0', DEFAULT: '100%', }, backdropHueRotate: { 0: '0deg', 15: '15deg', 30: '30deg', 60: '60deg', 90: '90deg', 180: '180deg', }, backdropInvert: { 0: '0', DEFAULT: '100%', }, backdropOpacity: { 0: '0', 5: '0.05', 10: '0.1', 20: '0.2', 25: '0.25', 30: '0.3', 40: '0.4', 50: '0.5', 60: '0.6', 70: '0.7', 75: '0.75', 80: '0.8', 90: '0.9', 95: '0.95', 100: '1', }, backdropSaturate: { 0: '0', 50: '.5', 100: '1', 150: '1.5', 200: '2', }, backdropSepia: { 0: '0', DEFAULT: '100%', }, backgroundColor: {}, backgroundImage: { none: 'none', 'gradient-to-t': 'linear-gradient(to top, var(--tw-gradient-stops))', 'gradient-to-tr': 'linear-gradient(to top right, var(--tw-gradient-stops))', 'gradient-to-r': 'linear-gradient(to right, var(--tw-gradient-stops))', 'gradient-to-br': 'linear-gradient(to bottom right, var(--tw-gradient-stops))', 'gradient-to-b': 'linear-gradient(to bottom, var(--tw-gradient-stops))', 'gradient-to-bl': 'linear-gradient(to bottom left, var(--tw-gradient-stops))', 'gradient-to-l': 'linear-gradient(to left, var(--tw-gradient-stops))', 'gradient-to-tl': 'linear-gradient(to top left, var(--tw-gradient-stops))', }, backgroundOpacity: { 0: '0', 5: '0.05', 10: '0.1', 20: '0.2', 25: '0.25', 30: '0.3', 40: '0.4', 50: '0.5', 60: '0.6', 70: '0.7', 75: '0.75', 80: '0.8', 90: '0.9', 95: '0.95', 100: '1', }, backgroundPosition: { bottom: 'bottom', center: 'center', left: 'left', 'left-bottom': 'left bottom', 'left-top': 'left top', right: 'right', 'right-bottom': 'right bottom', 'right-top': 'right top', top: 'top', }, backgroundSize: { auto: 'auto', cover: 'cover', contain: 'contain', }, blur: { 0: '0', none: '0', sm: '4px', DEFAULT: '8px', md: '12px', lg: '16px', xl: '24px', '2xl': '40px', '3xl': '64px', }, borderColor: { DEFAULT: 'currentColor', }, borderOpacity: { 0: '0', 5: '0.05', 10: '0.1', 20: '0.2', 25: '0.25', 30: '0.3', 40: '0.4', 50: '0.5', 60: '0.6', 70: '0.7', 75: '0.75', 80: '0.8', 90: '0.9', 95: '0.95', 100: '1', }, borderRadius: { none: '0px', sm: '0.125rem', DEFAULT: '0.25rem', md: '0.375rem', lg: '0.5rem', xl: '0.75rem', '2xl': '1rem', '3xl': '1.5rem', full: '9999px', }, borderSpacing: { 0: '0px', 1: '0.25rem', 2: '0.5rem', 3: '0.75rem', 4: '1rem', 5: '1.25rem', 6: '1.5rem', 7: '1.75rem', 8: '2rem', 9: '2.25rem', 10: '2.5rem', 11: '2.75rem', 12: '3rem', 14: '3.5rem', 16: '4rem', 20: '5rem', 24: '6rem', 28: '7rem', 32: '8rem', 36: '9rem', 40: '10rem', 44: '11rem', 48: '12rem', 52: '13rem', 56: '14rem', 60: '15rem', 64: '16rem', 72: '18rem', 80: '20rem', 96: '24rem', px: '1px', 0.5: '0.125rem', 1.5: '0.375rem', 2.5: '0.625rem', 3.5: '0.875rem', }, borderWidth: { 0: '0px', 2: '2px', 4: '4px', 8: '8px', DEFAULT: '1px', }, boxShadow: { sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)', DEFAULT: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)', md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)', lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)', xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)', '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)', inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)', none: 'none', }, boxShadowColor: {}, brightness: { 0: '0', 50: '.5', 75: '.75', 90: '.9', 95: '.95', 100: '1', 105: '1.05', 110: '1.1', 125: '1.25', 150: '1.5', 200: '2', }, caretColor: {}, columns: { 1: '1', 2: '2', 3: '3', 4: '4', 5: '5', 6: '6', 7: '7', 8: '8', 9: '9', 10: '10', 11: '11', 12: '12', auto: 'auto', '3xs': '16rem', '2xs': '18rem', xs: '20rem', sm: '24rem', md: '28rem', lg: '32rem', xl: '36rem', '2xl': '42rem', '3xl': '48rem', '4xl': '56rem', '5xl': '64rem', '6xl': '72rem', '7xl': '80rem', }, container: {}, content: { none: 'none', DEFAULT: '', }, contrast: { 0: '0', 50: '.5', 75: '.75', 100: '1', 125: '1.25', 150: '1.5', 200: '2', }, cursor: { auto: 'auto', default: 'default', pointer: 'pointer', wait: 'wait', text: 'text', move: 'move', help: 'help', 'not-allowed': 'not-allowed', none: 'none', 'context-menu': 'context-menu', progress: 'progress', cell: 'cell', crosshair: 'crosshair', 'vertical-text': 'vertical-text', alias: 'alias', copy: 'copy', 'no-drop': 'no-drop', grab: 'grab', grabbing: 'grabbing', 'all-scroll': 'all-scroll', 'col-resize': 'col-resize', 'row-resize': 'row-resize', 'n-resize': 'n-resize', 'e-resize': 'e-resize', 's-resize': 's-resize', 'w-resize': 'w-resize', 'ne-resize': 'ne-resize', 'nw-resize': 'nw-resize', 'se-resize': 'se-resize', 'sw-resize': 'sw-resize', 'ew-resize': 'ew-resize', 'ns-resize': 'ns-resize', 'nesw-resize': 'nesw-resize', 'nwse-resize': 'nwse-resize', 'zoom-in': 'zoom-in', 'zoom-out': 'zoom-out', }, divideColor: { DEFAULT: 'currentColor', }, divideOpacity: { 0: '0', 5: '0.05', 10: '0.1', 20: '0.2', 25: '0.25', 30: '0.3', 40: '0.4', 50: '0.5', 60: '0.6', 70: '0.7', 75: '0.75', 80: '0.8', 90: '0.9', 95: '0.95', 100: '1', }, divideWidth: { 0: '0px', 2: '2px', 4: '4px', 8: '8px', DEFAULT: '1px', }, dropShadow: { sm: '0 1px 1px rgb(0 0 0 / 0.05)', DEFAULT: ['0 1px 2px rgb(0 0 0 / 0.1)', '0 1px 1px rgb(0 0 0 / 0.06)'], md: ['0 4px 3px rgb(0 0 0 / 0.07)', '0 2px 2px rgb(0 0 0 / 0.06)'], lg: ['0 10px 8px rgb(0 0 0 / 0.04)', '0 4px 3px rgb(0 0 0 / 0.1)'], xl: ['0 20px 13px rgb(0 0 0 / 0.03)', '0 8px 5px rgb(0 0 0 / 0.08)'], '2xl': '0 25px 25px rgb(0 0 0 / 0.15)', none: '0 0 #0000', }, fill: { none: 'none', }, flex: { 1: '1 1 0%', auto: '1 1 auto', initial: '0 1 auto', none: 'none', }, flexBasis: { 0: '0px', 1: '0.25rem', 2: '0.5rem', 3: '0.75rem', 4: '1rem', 5: '1.25rem', 6: '1.5rem', 7: '1.75rem', 8: '2rem', 9: '2.25rem', 10: '2.5rem', 11: '2.75rem', 12: '3rem', 14: '3.5rem', 16: '4rem', 20: '5rem', 24: '6rem', 28: '7rem', 32: '8rem', 36: '9rem', 40: '10rem', 44: '11rem', 48: '12rem', 52: '13rem', 56: '14rem', 60: '15rem', 64: '16rem', 72: '18rem', 80: '20rem', 96: '24rem', auto: 'auto', px: '1px', 0.5: '0.125rem', 1.5: '0.375rem', 2.5: '0.625rem', 3.5: '0.875rem', '1/2': '50%', '1/3': '33.333333%', '2/3': '66.666667%', '1/4': '25%', '2/4': '50%', '3/4': '75%', '1/5': '20%', '2/5': '40%', '3/5': '60%', '4/5': '80%', '1/6': '16.666667%', '2/6': '33.333333%', '3/6': '50%', '4/6': '66.666667%', '5/6': '83.333333%', '1/12': '8.333333%', '2/12': '16.666667%', '3/12': '25%', '4/12': '33.333333%', '5/12': '41.666667%', '6/12': '50%', '7/12': '58.333333%', '8/12': '66.666667%', '9/12': '75%', '10/12': '83.333333%', '11/12': '91.666667%', full: '100%', }, flexGrow: { 0: '0', DEFAULT: '1', }, flexShrink: { 0: '0', DEFAULT: '1', }, fontFamily: { sans: [ 'ui-sans-serif', 'system-ui', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', '"Noto Sans"', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Noto Color Emoji"', ], serif: [ 'ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif', ], mono: [ 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', '"Liberation Mono"', '"Courier New"', 'monospace', ], }, fontSize: { xs: [ '0.75rem', { lineHeight: '1rem', }, ], sm: [ '0.875rem', { lineHeight: '1.25rem', }, ], base: [ '1rem', { lineHeight: '1.5rem', }, ], lg: [ '1.125rem', { lineHeight: '1.75rem', }, ], xl: [ '1.25rem', { lineHeight: '1.75rem', }, ], '2xl': [ '1.5rem', { lineHeight: '2rem', }, ], '3xl': [ '1.875rem', { lineHeight: '2.25rem', }, ], '4xl': [ '2.25rem', { lineHeight: '2.5rem', }, ], '5xl': [ '3rem', { lineHeight: '1', }, ], '6xl': [ '3.75rem', { lineHeight: '1', }, ], '7xl': [ '4.5rem', { lineHeight: '1', }, ], '8xl': [ '6rem', { lineHeight: '1', }, ], '9xl': [ '8rem', { lineHeight: '1', }, ], }, fontWeight: { thin: '100', extralight: '200', light: '300', normal: '400', medium: '500', semibold: '600', bold: '700', extrabold: '800', black: '900', }, gap: { 0: '0px', 1: '0.25rem', 2: '0.5rem', 3: '0.75rem', 4: '1rem', 5: '1.25rem', 6: '1.5rem', 7: '1.75rem', 8: '2rem', 9: '2.25rem', 10: '2.5rem', 11: '2.75rem', 12: '3rem', 14: '3.5rem', 16: '4rem', 20: '5rem', 24: '6rem', 28: '7rem', 32: '8rem', 36: '9rem', 40: '10rem', 44: '11rem', 48: '12rem', 52: '13rem', 56: '14rem', 60: '15rem', 64: '16rem', 72: '18rem', 80: '20rem', 96: '24rem', px: '1px', 0.5: '0.125rem', 1.5: '0.375rem', 2.5: '0.625rem', 3.5: '0.875rem', }, gradientColorStops: {}, gradientColorStopPositions: { '0%': '0%', '5%': '5%', '10%': '10%', '15%': '15%', '20%': '20%', '25%': '25%', '30%': '30%', '35%': '35%', '40%': '40%', '45%': '45%', '50%': '50%', '55%': '55%', '60%': '60%', '65%': '65%', '70%': '70%', '75%': '75%', '80%': '80%', '85%': '85%', '90%': '90%', '95%': '95%', '100%': '100%', }, grayscale: { 0: '0', DEFAULT: '100%', }, gridAutoColumns: { auto: 'auto', min: 'min-content', max: 'max-content', fr: 'minmax(0, 1fr)', }, gridAutoRows: { auto: 'auto', min: 'min-content', max: 'max-content', fr: 'minmax(0, 1fr)', }, gridColumn: { auto: 'auto', 'span-1': 'span 1 / span 1', 'span-2': 'span 2 / span 2', 'span-3': 'span 3 / span 3', 'span-4': 'span 4 / span 4', 'span-5': 'span 5 / span 5', 'span-6': 'span 6 / span 6', 'span-7': 'span 7 / span 7', 'span-8': 'span 8 / span 8', 'span-9': 'span 9 / span 9', 'span-10': 'span 10 / span 10', 'span-11': 'span 11 / span 11', 'span-12': 'span 12 / span 12', 'span-full': '1 / -1', }, gridColumnEnd: { 1: '1', 2: '2', 3: '3', 4: '4', 5: '5', 6: '6', 7: '7', 8: '8', 9: '9', 10: '10', 11: '11', 12: '12', 13: '13', auto: 'auto', }, gridColumnStart: { 1: '1', 2: '2', 3: '3', 4: '4', 5: '5', 6: '6', 7: '7', 8: '8', 9: '9', 10: '10', 11: '11', 12: '12', 13: '13', auto: 'auto', }, gridRow: { auto: 'auto', 'span-1': 'span 1 / span 1', 'span-2': 'span 2 / span 2', 'span-3': 'span 3 / span 3', 'span-4': 'span 4 / span 4', 'span-5': 'span 5 / span 5', 'span-6': 'span 6 / span 6', 'span-full': '1 / -1', }, gridRowEnd: { 1: '1', 2: '2', 3: '3', 4: '4', 5: '5', 6: '6', 7: '7', auto: 'auto', }, gridRowStart: { 1: '1', 2: '2', 3: '3', 4: '4', 5: '5', 6: '6', 7: '7', auto: 'auto', }, gridTemplateColumns: { 1: 'repeat(1, minmax(0, 1fr))', 2: 'repeat(2, minmax(0, 1fr))', 3: 'repeat(3, minmax(0, 1fr))', 4: 'repeat(4, minmax(0, 1fr))', 5: 'repeat(5, minmax(0, 1fr))', 6: 'repeat(6, minmax(0, 1fr))', 7: 'repeat(7, minmax(0, 1fr))', 8: 'repeat(8, minmax(0, 1fr))', 9: 'repeat(9, minmax(0, 1fr))', 10: 'repeat(10, minmax(0, 1fr))', 11: 'repeat(11, minmax(0, 1fr))', 12: 'repeat(12, minmax(0, 1fr))', none: 'none', }, gridTemplateRows: { 1: 'repeat(1, minmax(0, 1fr))', 2: 'repeat(2, minmax(0, 1fr))', 3: 'repeat(3, minmax(0, 1fr))', 4: 'repeat(4, minmax(0, 1fr))', 5: 'repeat(5, minmax(0, 1fr))', 6: 'repeat(6, minmax(0, 1fr))', none: 'none', }, height: { 0: '0px', 1: '0.25rem', 2: '0.5rem', 3: '0.75rem', 4: '1rem', 5: '1.25rem', 6: '1.5rem', 7: '1.75rem', 8: '2rem', 9: '2.25rem', 10: '2.5rem', 11: '2.75rem', 12: '3rem', 14: '3.5rem', 16: '4rem', 20: '5rem', 24: '6rem', 28: '7rem', 32: '8rem', 36: '9rem', 40: '10rem', 44: '11rem', 48: '12rem', 52: '13rem', 56: '14rem', 60: '15rem', 64: '16rem', 72: '18rem', 80: '20rem', 96: '24rem', auto: 'auto', px: '1px', 0.5: '0.125rem', 1.5: '0.375rem', 2.5: '0.625rem', 3.5: '0.875rem', '1/2': '50%', '1/3': '33.333333%', '2/3': '66.666667%', '1/4': '25%', '2/4': '50%', '3/4': '75%', '1/5': '20%', '2/5': '40%', '3/5': '60%', '4/5': '80%', '1/6': '16.666667%', '2/6': '33.333333%', '3/6': '50%', '4/6': '66.666667%', '5/6': '83.333333%', full: '100%', screen: '100vh', min: 'min-content', max: 'max-content', fit: 'fit-content', }, hueRotate: { 0: '0deg', 15: '15deg', 30: '30deg', 60: '60deg', 90: '90deg', 180: '180deg', }, inset: { 0: '0px', 1: '0.25rem', 2: '0.5rem', 3: '0.75rem', 4: '1rem', 5: '1.25rem', 6: '1.5rem', 7: '1.75rem', 8: '2rem', 9: '2.25rem', 10: '2.5rem', 11: '2.75rem', 12: '3rem', 14: '3.5rem', 16: '4rem', 20: '5rem', 24: '6rem', 28: '7rem', 32: '8rem', 36: '9rem', 40: '10rem', 44: '11rem', 48: '12rem', 52: '13rem', 56: '14rem', 60: '15rem', 64: '16rem', 72: '18rem', 80: '20rem', 96: '24rem', auto: 'auto', px: '1px', 0.5: '0.125rem', 1.5: '0.375rem', 2.5: '0.625rem', 3.5: '0.875rem', '1/2': '50%', '1/3': '33.333333%', '2/3': '66.666667%', '1/4': '25%', '2/4': '50%', '3/4': '75%', full: '100%', }, invert: { 0: '0', DEFAULT: '100%', }, letterSpacing: { tighter: '-0.05em', tight: '-0.025em', normal: '0em', wide: '0.025em', wider: '0.05em', widest: '0.1em', }, lineHeight: { 3: '.75rem', 4: '1rem', 5: '1.25rem', 6: '1.5rem', 7: '1.75rem', 8: '2rem', 9: '2.25rem', 10: '2.5rem', none: '1', tight: '1.25', snug: '1.375', normal: '1.5', relaxed: '1.625', loose: '2', }, listStyleType: { none: 'none', disc: 'disc', decimal: 'decimal', }, listStyleImage: { none: 'none', }, margin: { 0: '0px', 1: '0.25rem', 2: '0.5rem', 3: '0.75rem', 4: '1rem', 5: '1.25rem', 6: '1.5rem', 7: '1.75rem', 8: '2rem', 9: '2.25rem', 10: '2.5rem', 11: '2.75rem', 12: '3rem', 14: '3.5rem', 16: '4rem', 20: '5rem', 24: '6rem', 28: '7rem', 32: '8rem', 36: '9rem', 40: '10rem', 44: '11rem', 48: '12rem', 52: '13rem', 56: '14rem', 60: '15rem', 64: '16rem', 72: '18rem', 80: '20rem', 96: '24rem', auto: 'auto', px: '1px', 0.5: '0.125rem', 1.5: '0.375rem', 2.5: '0.625rem', 3.5: '0.875rem', }, lineClamp: { 1: '1', 2: '2', 3: '3', 4: '4', 5: '5', 6: '6', }, maxHeight: { 0: '0px', 1: '0.25rem', 2: '0.5rem', 3: '0.75rem', 4: '1rem', 5: '1.25rem', 6: '1.5rem', 7: '1.75rem', 8: '2rem', 9: '2.25rem', 10: '2.5rem', 11: '2.75rem', 12: '3rem', 14: '3.5rem', 16: '4rem', 20: '5rem', 24: '6rem', 28: '7rem', 32: '8rem', 36: '9rem', 40: '10rem', 44: '11rem', 48: '12rem', 52: '13rem', 56: '14rem', 60: '15rem', 64: '16rem', 72: '18rem', 80: '20rem', 96: '24rem', px: '1px', 0.5: '0.125rem', 1.5: '0.375rem', 2.5: '0.625rem', 3.5: '0.875rem', none: 'none', full: '100%', screen: '100vh', min: 'min-content', max: 'max-content', fit: 'fit-content', }, maxWidth: { 0: '0rem', none: 'none', xs: '20rem', sm: '24rem', md: '28rem', lg: '32rem', xl: '36rem', '2xl': '42rem', '3xl': '48rem', '4xl': '56rem', '5xl': '64rem', '6xl': '72rem', '7xl': '80rem', full: '100%', min: 'min-content', max: 'max-content', fit: 'fit-content', prose: '65ch', 'screen-sm': '640px', 'screen-md': '768px', 'screen-lg': '1024px', 'screen-xl': '1280px', 'screen-2xl': '1536px', }, minHeight: { 0: '0px', full: '100%', screen: '100vh', min: 'min-content', max: 'max-content', fit: 'fit-content', }, minWidth: { 0: '0px', full: '100%', min: 'min-content', max: 'max-content', fit: 'fit-content', }, objectPosition: { bottom: 'bottom', center: 'center', left: 'left', 'left-bottom': 'left bottom', 'left-top': 'left top', right: 'right', 'right-bottom': 'right bottom', 'right-top': 'right top', top: 'top', }, opacity: { 0: '0', 5: '0.05', 10: '0.1', 20: '0.2', 25: '0.25', 30: '0.3', 40: '0.4', 50: '0.5', 60: '0.6', 70: '0.7', 75: '0.75', 80: '0.8', 90: '0.9', 95: '0.95', 100: '1', }, order: { 1: '1', 2: '2', 3: '3', 4: '4', 5: '5', 6: '6', 7: '7', 8: '8', 9: '9', 10: '10', 11: '11', 12: '12', first: '-9999', last: '9999', none: '0', }, outlineColor: {}, outlineOffset: { 0: '0px', 1: '1px', 2: '2px', 4: '4px', 8: '8px', }, outlineWidth: { 0: '0px', 1: '1px', 2: '2px', 4: '4px', 8: '8px', }, padding: { 0: '0px', 1: '0.25rem', 2: '0.5rem', 3: '0.75rem', 4: '1rem', 5: '1.25rem', 6: '1.5rem', 7: '1.75rem', 8: '2rem', 9: '2.25rem', 10: '2.5rem', 11: '2.75rem', 12: '3rem', 14: '3.5rem', 16: '4rem', 20: '5rem', 24: '6rem', 28: '7rem', 32: '8rem', 36: '9rem', 40: '10rem', 44: '11rem', 48: '12rem', 52: '13rem', 56: '14rem', 60: '15rem', 64: '16rem', 72: '18rem', 80: '20rem', 96: '24rem', px: '1px', 0.5: '0.125rem', 1.5: '0.375rem', 2.5: '0.625rem', 3.5: '0.875rem', }, placeholderColor: {}, placeholderOpacity: { 0: '0', 5: '0.05', 10: '0.1', 20: '0.2', 25: '0.25', 30: '0.3', 40: '0.4', 50: '0.5', 60: '0.6', 70: '0.7', 75: '0.75', 80: '0.8', 90: '0.9', 95: '0.95', 100: '1', }, ringColor: { DEFAULT: '#3b82f6', }, ringOffsetColor: {}, ringOffsetWidth: { 0: '0px', 1: '1px', 2: '2px', 4: '4px', 8: '8px', }, ringOpacity: { 0: '0', 5: '0.05', 10: '0.1', 20: '0.2', 25: '0.25', 30: '0.3', 40: '0.4', 50: '0.5', 60: '0.6', 70: '0.7', 75: '0.75', 80: '0.8', 90: '0.9', 95: '0.95', 100: '1', DEFAULT: '0.5', }, ringWidth: { 0: '0px', 1: '1px', 2: '2px', 4: '4px', 8: '8px', DEFAULT: '3px', }, rotate: { 0: '0deg', 1: '1deg', 2: '2deg', 3: '3deg', 6: '6deg', 12: '12deg', 45: '45deg', 90: '90deg', 180: '180deg', }, saturate: { 0: '0', 50: '.5', 100: '1', 150: '1.5', 200: '2', }, scale: { 0: '0', 50: '.5', 75: '.75', 90: '.9', 95: '.95', 100: '1', 105: '1.05', 110: '1.1', 125: '1.25', 150: '1.5', }, screens: { sm: '640px', md: '768px', lg: '1024px', xl: '1280px', '2xl': '1536px', }, scrollMargin: { 0: '0px', 1: '0.25rem', 2: '0.5rem', 3: '0.75rem', 4: '1rem', 5: '1.25rem', 6: '1.5rem', 7: '1.75rem', 8: '2rem', 9: '2.25rem', 10: '2.5rem', 11: '2.75rem', 12: '3rem', 14: '3.5rem', 16: '4rem', 20: '5rem', 24: '6rem', 28: '7rem', 32: '8rem', 36: '9rem', 40: '10rem', 44: '11rem', 48: '12rem', 52: '13rem', 56: '14rem', 60: '15rem', 64: '16rem', 72: '18rem', 80: '20rem', 96: '24rem', px: '1px', 0.5: '0.125rem', 1.5: '0.375rem', 2.5: '0.625rem', 3.5: '0.875rem', }, scrollPadding: { 0: '0px', 1: '0.25rem', 2: '0.5rem', 3: '0.75rem', 4: '1rem', 5: '1.25rem', 6: '1.5rem', 7: '1.75rem', 8: '2rem', 9: '2.25rem', 10: '2.5rem', 11: '2.75rem', 12: '3rem', 14: '3.5rem', 16: '4rem', 20: '5rem', 24: '6rem', 28: '7rem', 32: '8rem', 36: '9rem', 40: '10rem', 44: '11rem', 48: '12rem', 52: '13rem', 56: '14rem', 60: '15rem', 64: '16rem', 72: '18rem', 80: '20rem', 96: '24rem', px: '1px', 0.5: '0.125rem', 1.5: '0.375rem', 2.5: '0.625rem', 3.5: '0.875rem', }, sepia: { 0: '0', DEFAULT: '100%', }, skew: { 0: '0deg', 1: '1deg', 2: '2deg', 3: '3deg', 6: '6deg', 12: '12deg', }, space: { 0: '0px', 1: '0.25rem', 2: '0.5rem', 3: '0.75rem', 4: '1rem', 5: '1.25rem', 6: '1.5rem', 7: '1.75rem', 8: '2rem', 9: '2.25rem', 10: '2.5rem', 11: '2.75rem', 12: '3rem', 14: '3.5rem', 16: '4rem', 20: '5rem', 24: '6rem', 28: '7rem', 32: '8rem', 36: '9rem', 40: '10rem', 44: '11rem', 48: '12rem', 52: '13rem', 56: '14rem', 60: '15rem', 64: '16rem', 72: '18rem', 80: '20rem', 96: '24rem', px: '1px', 0.5: '0.125rem', 1.5: '0.375rem', 2.5: '0.625rem', 3.5: '0.875rem', }, spacing: { 0: '0px', 1: '0.25rem', 2: '0.5rem', 3: '0.75rem', 4: '1rem', 5: '1.25rem', 6: '1.5rem', 7: '1.75rem', 8: '2rem', 9: '2.25rem', 10: '2.5rem', 11: '2.75rem', 12: '3rem', 14: '3.5rem', 16: '4rem', 20: '5rem', 24: '6rem', 28: '7rem', 32: '8rem', 36: '9rem', 40: '10rem', 44: '11rem', 48: '12rem', 52: '13rem', 56: '14rem', 60: '15rem', 64: '16rem', 72: '18rem', 80: '20rem', 96: '24rem', px: '1px', 0.5: '0.125rem', 1.5: '0.375rem', 2.5: '0.625rem', 3.5: '0.875rem', }, stroke: { none: 'none', }, strokeWidth: { 0: '0', 1: '1', 2: '2', }, supports: {}, data: {}, textColor: {}, textDecorationColor: {}, textDecorationThickness: { 0: '0px', 1: '1px', 2: '2px', 4: '4px', 8: '8px', auto: 'auto', 'from-font': 'from-font', }, textIndent: { 0: '0px', 1: '0.25rem', 2: '0.5rem', 3: '0.75rem', 4: '1rem', 5: '1.25rem', 6: '1.5rem', 7: '1.75rem', 8: '2rem', 9: '2.25rem', 10: '2.5rem', 11: '2.75rem', 12: '3rem', 14: '3.5rem', 16: '4rem', 20: '5rem', 24: '6rem', 28: '7rem', 32: '8rem', 36: '9rem', 40: '10rem', 44: '11rem', 48: '12rem', 52: '13rem', 56: '14rem', 60: '15rem', 64: '16rem', 72: '18rem', 80: '20rem', 96: '24rem', px: '1px', 0.5: '0.125rem', 1.5: '0.375rem', 2.5: '0.625rem', 3.5: '0.875rem', }, textOpacity: { 0: '0', 5: '0.05', 10: '0.1', 20: '0.2', 25: '0.25', 30: '0.3', 40: '0.4', 50: '0.5', 60: '0.6', 70: '0.7', 75: '0.75', 80: '0.8', 90: '0.9', 95: '0.95', 100: '1', }, textUnderlineOffset: { 0: '0px', 1: '1px', 2: '2px', 4: '4px', 8: '8px', auto: 'auto', }, transformOrigin: { center: 'center', top: 'top', 'top-right': 'top right', right: 'right', 'bottom-right': 'bottom right', bottom: 'bottom', 'bottom-left': 'bottom left', left: 'left', 'top-left': 'top left', }, transitionDelay: { 0: '0s', 75: '75ms', 100: '100ms', 150: '150ms', 200: '200ms', 300: '300ms', 500: '500ms', 700: '700ms', 1000: '1000ms', }, transitionDuration: { 0: '0s', 75: '75ms', 100: '100ms', 150: '150ms', 200: '200ms', 300: '300ms', 500: '500ms', 700: '700ms', 1000: '1000ms', DEFAULT: '150ms', }, transitionProperty: { none: 'none', all: 'all', DEFAULT: 'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter', colors: 'color, background-color, border-color, text-decoration-color, fill, stroke', opacity: 'opacity', shadow: 'box-shadow', transform: 'transform', }, transitionTimingFunction: { DEFAULT: 'cubic-bezier(0.4, 0, 0.2, 1)', linear: 'linear', in: 'cubic-bezier(0.4, 0, 1, 1)', out: 'cubic-bezier(0, 0, 0.2, 1)', 'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)', }, translate: { 0: '0px', 1: '0.25rem', 2: '0.5rem', 3: '0.75rem', 4: '1rem', 5: '1.25rem', 6: '1.5rem', 7: '1.75rem', 8: '2rem', 9: '2.25rem', 10: '2.5rem', 11: '2.75rem', 12: '3rem', 14: '3.5rem', 16: '4rem', 20: '5rem', 24: '6rem', 28: '7rem', 32: '8rem', 36: '9rem', 40: '10rem', 44: '11rem', 48: '12rem', 52: '13rem', 56: '14rem', 60: '15rem', 64: '16rem', 72: '18rem', 80: '20rem', 96: '24rem', px: '1px', 0.5: '0.125rem', 1.5: '0.375rem', 2.5: '0.625rem', 3.5: '0.875rem', '1/2': '50%', '1/3': '33.333333%', '2/3': '66.666667%', '1/4': '25%', '2/4': '50%', '3/4': '75%', full: '100%', }, width: { 0: '0px', 1: '0.25rem', 2: '0.5rem', 3: '0.75rem', 4: '1rem', 5: '1.25rem', 6: '1.5rem', 7: '1.75rem', 8: '2rem', 9: '2.25rem', 10: '2.5rem', 11: '2.75rem', 12: '3rem', 14: '3.5rem', 16: '4rem', 20: '5rem', 24: '6rem', 28: '7rem', 32: '8rem', 36: '9rem', 40: '10rem', 44: '11rem', 48: '12rem', 52: '13rem', 56: '14rem', 60: '15rem', 64: '16rem', 72: '18rem', 80: '20rem', 96: '24rem', auto: 'auto', px: '1px', 0.5: '0.125rem', 1.5: '0.375rem', 2.5: '0.625rem', 3.5: '0.875rem', '1/2': '50%', '1/3': '33.333333%', '2/3': '66.666667%', '1/4': '25%', '2/4': '50%', '3/4': '75%', '1/5': '20%', '2/5': '40%', '3/5': '60%', '4/5': '80%', '1/6': '16.666667%', '2/6': '33.333333%', '3/6': '50%', '4/6': '66.666667%', '5/6': '83.333333%', '1/12': '8.333333%', '2/12': '16.666667%', '3/12': '25%', '4/12': '33.333333%', '5/12': '41.666667%', '6/12': '50%', '7/12': '58.333333%', '8/12': '66.666667%', '9/12': '75%', '10/12': '83.333333%', '11/12': '91.666667%', full: '100%', screen: '100vw', min: 'min-content', max: 'max-content', fit: 'fit-content', }, willChange: { auto: 'auto', scroll: 'scroll-position', contents: 'contents', transform: 'transform', }, zIndex: { 0: '0', 1: '1', 10: '10', 20: '20', 30: '30', 40: '40', 50: '50', auto: 'auto', }, }) `; exports[`twin.macro topRightBottomLeft.tsx: topRightBottomLeft.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/top-right-bottom-left theme\`inset\` tw\`inset-0\` tw\`-inset-0\` tw\`inset-y-0\` tw\`inset-x-0\` tw\`-inset-y-0\` tw\`-inset-x-0\` tw\`top-0\` tw\`right-0\` tw\`bottom-0\` tw\`left-0\` tw\`-top-0\` tw\`-right-0\` tw\`-bottom-0\` tw\`-left-0\` tw\`inset-0.5\` tw\`-inset-0.5\` tw\`inset-y-0.5\` tw\`inset-x-0.5\` tw\`-inset-y-0.5\` tw\`-inset-x-0.5\` tw\`top-0.5\` tw\`right-0.5\` tw\`bottom-0.5\` tw\`left-0.5\` tw\`-top-0.5\` tw\`-right-0.5\` tw\`-bottom-0.5\` tw\`-left-0.5\` tw\`inset-1\` tw\`-inset-1\` tw\`inset-y-1\` tw\`inset-x-1\` tw\`-inset-y-1\` tw\`-inset-x-1\` tw\`top-1\` tw\`right-1\` tw\`bottom-1\` tw\`left-1\` tw\`-top-1\` tw\`-right-1\` tw\`-bottom-1\` tw\`-left-1\` tw\`inset-1.5\` tw\`-inset-1.5\` tw\`inset-y-1.5\` tw\`inset-x-1.5\` tw\`-inset-y-1.5\` tw\`-inset-x-1.5\` tw\`top-1.5\` tw\`right-1.5\` tw\`bottom-1.5\` tw\`left-1.5\` tw\`-top-1.5\` tw\`-right-1.5\` tw\`-bottom-1.5\` tw\`-left-1.5\` tw\`inset-2\` tw\`-inset-2\` tw\`inset-y-2\` tw\`inset-x-2\` tw\`-inset-y-2\` tw\`-inset-x-2\` tw\`top-2\` tw\`right-2\` tw\`bottom-2\` tw\`left-2\` tw\`-top-2\` tw\`-right-2\` tw\`-bottom-2\` tw\`-left-2\` tw\`inset-2.5\` tw\`-inset-2.5\` tw\`inset-y-2.5\` tw\`inset-x-2.5\` tw\`-inset-y-2.5\` tw\`top-2.5\` tw\`right-2.5\` tw\`bottom-2.5\` tw\`left-2.5\` tw\`-top-2.5\` tw\`-bottom-2.5\` tw\`-left-2.5\` tw\`inset-3\` tw\`-inset-3\` tw\`inset-y-3\` tw\`inset-x-3\` tw\`-inset-y-3\` tw\`-inset-x-3\` tw\`top-3\` tw\`right-3\` tw\`bottom-3\` tw\`left-3\` tw\`-top-3\` tw\`-right-3\` tw\`-bottom-3\` tw\`-left-3\` tw\`inset-3.5\` tw\`-inset-3.5\` tw\`inset-y-3.5\` tw\`inset-x-3.5\` tw\`-inset-y-3.5\` tw\`-inset-x-3.5\` tw\`top-3.5\` tw\`right-3.5\` tw\`bottom-3.5\` tw\`left-3.5\` tw\`-top-3.5\` tw\`-right-3.5\` tw\`-bottom-3.5\` tw\`-left-3.5\` tw\`inset-4\` tw\`-inset-4\` tw\`inset-y-4\` tw\`inset-x-4\` tw\`-inset-y-4\` tw\`-inset-x-4\` tw\`top-4\` tw\`right-4\` tw\`bottom-4\` tw\`left-4\` tw\`-top-4\` tw\`-right-4\` tw\`-bottom-4\` tw\`-left-4\` tw\`inset-5\` tw\`-inset-5\` tw\`inset-y-5\` tw\`inset-x-5\` tw\`-inset-y-5\` tw\`-inset-x-5\` tw\`top-5\` tw\`right-5\` tw\`bottom-5\` tw\`left-5\` tw\`-top-5\` tw\`-right-5\` tw\`-bottom-5\` tw\`-left-5\` tw\`inset-6\` tw\`-inset-6\` tw\`inset-y-6\` tw\`inset-x-6\` tw\`-inset-y-6\` tw\`-inset-x-6\` tw\`top-6\` tw\`right-6\` tw\`bottom-6\` tw\`left-6\` tw\`-top-6\` tw\`-right-6\` tw\`-bottom-6\` tw\`-left-6\` tw\`inset-7\` tw\`-inset-7\` tw\`inset-y-7\` tw\`inset-x-7\` tw\`-inset-y-7\` tw\`-inset-x-7\` tw\`top-7\` tw\`right-7\` tw\`bottom-7\` tw\`left-7\` tw\`-top-7\` tw\`-right-7\` tw\`-bottom-7\` tw\`-left-7\` tw\`inset-8\` tw\`-inset-8\` tw\`inset-y-8\` tw\`inset-x-8\` tw\`-inset-y-8\` tw\`-inset-x-8\` tw\`top-8\` tw\`right-8\` tw\`bottom-8\` tw\`left-8\` tw\`-top-8\` tw\`-right-8\` tw\`-bottom-8\` tw\`-left-8\` tw\`inset-9\` tw\`-inset-9\` tw\`inset-y-9\` tw\`inset-x-9\` tw\`-inset-y-9\` tw\`-inset-x-9\` tw\`top-9\` tw\`right-9\` tw\`bottom-9\` tw\`left-9\` tw\`-top-9\` tw\`-right-9\` tw\`-bottom-9\` tw\`-left-9\` tw\`inset-10\` tw\`-inset-10\` tw\`inset-y-10\` tw\`inset-x-10\` tw\`-inset-y-10\` tw\`-inset-x-10\` tw\`top-10\` tw\`right-10\` tw\`bottom-10\` tw\`left-10\` tw\`-top-10\` tw\`-right-10\` tw\`-bottom-10\` tw\`-left-10\` tw\`inset-11\` tw\`-inset-11\` tw\`inset-y-11\` tw\`inset-x-11\` tw\`-inset-y-11\` tw\`-inset-x-11\` tw\`top-11\` tw\`right-11\` tw\`bottom-11\` tw\`left-11\` tw\`-top-11\` tw\`-right-11\` tw\`-bottom-11\` tw\`-left-11\` tw\`inset-12\` tw\`-inset-12\` tw\`inset-y-12\` tw\`inset-x-12\` tw\`-inset-y-12\` tw\`-inset-x-12\` tw\`top-12\` tw\`right-12\` tw\`bottom-12\` tw\`left-12\` tw\`-top-12\` tw\`-right-12\` tw\`-bottom-12\` tw\`-left-12\` tw\`inset-14\` tw\`-inset-14\` tw\`inset-y-14\` tw\`inset-x-14\` tw\`-inset-y-14\` tw\`-inset-x-14\` tw\`top-14\` tw\`right-14\` tw\`bottom-14\` tw\`left-14\` tw\`-top-14\` tw\`-right-14\` tw\`-bottom-14\` tw\`-left-14\` tw\`inset-16\` tw\`-inset-16\` tw\`inset-y-16\` tw\`inset-x-16\` tw\`-inset-y-16\` tw\`-inset-x-16\` tw\`top-16\` tw\`right-16\` tw\`bottom-16\` tw\`left-16\` tw\`-top-16\` tw\`-right-16\` tw\`-bottom-16\` tw\`-left-16\` tw\`inset-20\` tw\`-inset-20\` tw\`inset-y-20\` tw\`inset-x-20\` tw\`-inset-y-20\` tw\`-inset-x-20\` tw\`top-20\` tw\`right-20\` tw\`bottom-20\` tw\`left-20\` tw\`-top-20\` tw\`-right-20\` tw\`-bottom-20\` tw\`-left-20\` tw\`inset-24\` tw\`-inset-24\` tw\`inset-y-24\` tw\`inset-x-24\` tw\`-inset-y-24\` tw\`-inset-x-24\` tw\`top-24\` tw\`right-24\` tw\`bottom-24\` tw\`left-24\` tw\`-right-24\` tw\`-bottom-24\` tw\`-left-24\` tw\`inset-28\` tw\`-inset-28\` tw\`inset-y-28\` tw\`inset-x-28\` tw\`-inset-y-28\` tw\`-inset-x-28\` tw\`top-28\` tw\`right-28\` tw\`bottom-28\` tw\`left-28\` tw\`-top-28\` tw\`-right-28\` tw\`-bottom-28\` tw\`-left-28\` tw\`inset-32\` tw\`-inset-32\` tw\`inset-y-32\` tw\`inset-x-32\` tw\`-inset-y-32\` tw\`-inset-x-32\` tw\`right-32\` tw\`bottom-32\` tw\`left-32\` tw\`-top-32\` tw\`-right-32\` tw\`-bottom-32\` tw\`-left-32\` tw\`inset-36\` tw\`-inset-36\` tw\`inset-y-36\` tw\`inset-x-36\` tw\`-inset-y-36\` tw\`-inset-x-36\` tw\`top-36\` tw\`right-36\` tw\`bottom-36\` tw\`left-36\` tw\`-top-36\` tw\`-right-36\` tw\`-bottom-36\` tw\`-left-36\` tw\`inset-40\` tw\`-inset-40\` tw\`inset-y-40\` tw\`inset-x-40\` tw\`-inset-y-40\` tw\`-inset-x-40\` tw\`top-40\` tw\`right-40\` tw\`bottom-40\` tw\`left-40\` tw\`-top-40\` tw\`-right-40\` tw\`-bottom-40\` tw\`-left-40\` tw\`inset-44\` tw\`-inset-44\` tw\`inset-y-44\` tw\`inset-x-44\` tw\`-inset-y-44\` tw\`-inset-x-44\` tw\`top-44\` tw\`right-44\` tw\`bottom-44\` tw\`left-44\` tw\`-top-44\` tw\`-right-44\` tw\`-bottom-44\` tw\`-left-44\` tw\`inset-48\` tw\`-inset-48\` tw\`inset-y-48\` tw\`inset-x-48\` tw\`-inset-y-48\` tw\`-inset-x-48\` tw\`top-48\` tw\`right-48\` tw\`bottom-48\` tw\`left-48\` tw\`-right-48\` tw\`-bottom-48\` tw\`-left-48\` tw\`inset-52\` tw\`-inset-52\` tw\`inset-y-52\` tw\`inset-x-52\` tw\`-inset-y-52\` tw\`-inset-x-52\` tw\`top-52\` tw\`right-52\` tw\`bottom-52\` tw\`left-52\` tw\`-top-52\` tw\`-right-52\` tw\`-bottom-52\` tw\`-left-52\` tw\`inset-56\` tw\`-inset-56\` tw\`inset-y-56\` tw\`inset-x-56\` tw\`-inset-y-56\` tw\`-inset-x-56\` tw\`top-56\` tw\`right-56\` tw\`bottom-56\` tw\`left-56\` tw\`-top-56\` tw\`-right-56\` tw\`-bottom-56\` tw\`-left-56\` tw\`inset-60\` tw\`-inset-60\` tw\`inset-y-60\` tw\`inset-x-60\` tw\`-inset-y-60\` tw\`-inset-x-60\` tw\`top-60\` tw\`right-60\` tw\`bottom-60\` tw\`left-60\` tw\`-top-60\` tw\`-right-60\` tw\`-bottom-60\` tw\`-left-60\` tw\`inset-64\` tw\`-inset-64\` tw\`inset-y-64\` tw\`inset-x-64\` tw\`-inset-y-64\` tw\`-inset-x-64\` tw\`top-64\` tw\`right-64\` tw\`bottom-64\` tw\`left-64\` tw\`-top-64\` tw\`-right-64\` tw\`-bottom-64\` tw\`-left-64\` tw\`inset-72\` tw\`-inset-72\` tw\`inset-y-72\` tw\`inset-x-72\` tw\`-inset-y-72\` tw\`-inset-x-72\` tw\`top-72\` tw\`right-72\` tw\`bottom-72\` tw\`left-72\` tw\`-top-72\` tw\`-right-72\` tw\`-bottom-72\` tw\`-left-72\` tw\`inset-80\` tw\`-inset-80\` tw\`inset-y-80\` tw\`inset-x-80\` tw\`-inset-y-80\` tw\`-inset-x-80\` tw\`top-80\` tw\`right-80\` tw\`bottom-80\` tw\`left-80\` tw\`-top-80\` tw\`-right-80\` tw\`-bottom-80\` tw\`-left-80\` tw\`inset-96\` tw\`-inset-96\` tw\`inset-y-96\` tw\`inset-x-96\` tw\`-inset-y-96\` tw\`-inset-x-96\` tw\`top-96\` tw\`right-96\` tw\`bottom-96\` tw\`left-96\` tw\`-top-96\` tw\`-right-96\` tw\`-bottom-96\` tw\`-left-96\` tw\`inset-auto\` tw\`inset-px\` tw\`-inset-px\` tw\`inset-1/2\` tw\`inset-1/3\` tw\`inset-2/3\` tw\`inset-1/4\` tw\`inset-2/4\` tw\`inset-3/4\` tw\`inset-full\` tw\`-inset-1/2\` tw\`-inset-1/3\` tw\`-inset-2/3\` tw\`-inset-1/4\` tw\`-inset-2/4\` tw\`-inset-3/4\` tw\`-inset-full\` tw\`inset-y-auto\` tw\`inset-x-auto\` tw\`inset-y-px\` tw\`inset-x-px\` tw\`-inset-y-px\` tw\`-inset-x-px\` tw\`inset-y-1/2\` tw\`inset-x-1/2\` tw\`inset-y-1/3\` tw\`inset-x-1/3\` tw\`inset-y-2/3\` tw\`inset-x-2/3\` tw\`inset-y-1/4\` tw\`inset-x-1/4\` tw\`inset-y-2/4\` tw\`inset-x-2/4\` tw\`inset-y-3/4\` tw\`inset-x-3/4\` tw\`inset-y-full\` tw\`inset-x-full\` tw\`-inset-y-1/2\` tw\`-inset-x-1/2\` tw\`-inset-y-1/3\` tw\`-inset-x-1/3\` tw\`-inset-y-2/3\` tw\`-inset-x-2/3\` tw\`-inset-y-1/4\` tw\`-inset-x-1/4\` tw\`-inset-y-2/4\` tw\`-inset-x-2/4\` tw\`-inset-y-3/4\` tw\`-inset-x-3/4\` tw\`-inset-y-full\` tw\`-inset-x-full\` tw\`top-auto\` tw\`right-auto\` tw\`bottom-auto\` tw\`left-auto\` tw\`top-px\` tw\`right-px\` tw\`bottom-px\` tw\`left-px\` tw\`-top-px\` tw\`-right-px\` tw\`-bottom-px\` tw\`-left-px\` tw\`top-1/2\` tw\`right-1/2\` tw\`bottom-1/2\` tw\`left-1/2\` tw\`top-1/3\` tw\`right-1/3\` tw\`bottom-1/3\` tw\`left-1/3\` tw\`top-2/3\` tw\`right-2/3\` tw\`bottom-2/3\` tw\`left-2/3\` tw\`top-1/4\` tw\`right-1/4\` tw\`bottom-1/4\` tw\`left-1/4\` tw\`top-2/4\` tw\`right-2/4\` tw\`bottom-2/4\` tw\`left-2/4\` tw\`top-3/4\` tw\`right-3/4\` tw\`bottom-3/4\` tw\`left-3/4\` tw\`top-full\` tw\`right-full\` tw\`bottom-full\` tw\`left-full\` tw\`-top-1/2\` tw\`-right-1/2\` tw\`-bottom-1/2\` tw\`-left-1/2\` tw\`-top-1/3\` tw\`-right-1/3\` tw\`-bottom-1/3\` tw\`-left-1/3\` tw\`-top-2/3\` tw\`-right-2/3\` tw\`-bottom-2/3\` tw\`-left-2/3\` tw\`-top-1/4\` tw\`-right-1/4\` tw\`-bottom-1/4\` tw\`-left-1/4\` tw\`-top-2/4\` tw\`-right-2/4\` tw\`-bottom-2/4\` tw\`-left-2/4\` tw\`-top-3/4\` tw\`-right-3/4\` tw\`-bottom-3/4\` tw\`-left-3/4\` tw\`-top-full\` tw\`-right-full\` tw\`-bottom-full\` tw\`-left-full\` tw\`top-[3px]\` tw\`inset-[50px]!\` tw\`inset-6 inset-x-1 start-4 end-8\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/top-right-bottom-left ;({ 0: '0px', 1: '0.25rem', 2: '0.5rem', 3: '0.75rem', 4: '1rem', 5: '1.25rem', 6: '1.5rem', 7: '1.75rem', 8: '2rem', 9: '2.25rem', 10: '2.5rem', 11: '2.75rem', 12: '3rem', 14: '3.5rem', 16: '4rem', 20: '5rem', 24: '6rem', 28: '7rem', 32: '8rem', 36: '9rem', 40: '10rem', 44: '11rem', 48: '12rem', 52: '13rem', 56: '14rem', 60: '15rem', 64: '16rem', 72: '18rem', 80: '20rem', 96: '24rem', auto: 'auto', px: '1px', 0.5: '0.125rem', 1.5: '0.375rem', 2.5: '0.625rem', 3.5: '0.875rem', '1/2': '50%', '1/3': '33.333333%', '2/3': '66.666667%', '1/4': '25%', '2/4': '50%', '3/4': '75%', full: '100%', }) ;({ inset: '0px', }) ;({ inset: '-0px', }) ;({ top: '0px', bottom: '0px', }) ;({ left: '0px', right: '0px', }) ;({ top: '-0px', bottom: '-0px', }) ;({ left: '-0px', right: '-0px', }) ;({ top: '0px', }) ;({ right: '0px', }) ;({ bottom: '0px', }) ;({ left: '0px', }) ;({ top: '-0px', }) ;({ right: '-0px', }) ;({ bottom: '-0px', }) ;({ left: '-0px', }) ;({ inset: '0.125rem', }) ;({ inset: '-0.125rem', }) ;({ top: '0.125rem', bottom: '0.125rem', }) ;({ left: '0.125rem', right: '0.125rem', }) ;({ top: '-0.125rem', bottom: '-0.125rem', }) ;({ left: '-0.125rem', right: '-0.125rem', }) ;({ top: '0.125rem', }) ;({ right: '0.125rem', }) ;({ bottom: '0.125rem', }) ;({ left: '0.125rem', }) ;({ top: '-0.125rem', }) ;({ right: '-0.125rem', }) ;({ bottom: '-0.125rem', }) ;({ left: '-0.125rem', }) ;({ inset: '0.25rem', }) ;({ inset: '-0.25rem', }) ;({ top: '0.25rem', bottom: '0.25rem', }) ;({ left: '0.25rem', right: '0.25rem', }) ;({ top: '-0.25rem', bottom: '-0.25rem', }) ;({ left: '-0.25rem', right: '-0.25rem', }) ;({ top: '0.25rem', }) ;({ right: '0.25rem', }) ;({ bottom: '0.25rem', }) ;({ left: '0.25rem', }) ;({ top: '-0.25rem', }) ;({ right: '-0.25rem', }) ;({ bottom: '-0.25rem', }) ;({ left: '-0.25rem', }) ;({ inset: '0.375rem', }) ;({ inset: '-0.375rem', }) ;({ top: '0.375rem', bottom: '0.375rem', }) ;({ left: '0.375rem', right: '0.375rem', }) ;({ top: '-0.375rem', bottom: '-0.375rem', }) ;({ left: '-0.375rem', right: '-0.375rem', }) ;({ top: '0.375rem', }) ;({ right: '0.375rem', }) ;({ bottom: '0.375rem', }) ;({ left: '0.375rem', }) ;({ top: '-0.375rem', }) ;({ right: '-0.375rem', }) ;({ bottom: '-0.375rem', }) ;({ left: '-0.375rem', }) ;({ inset: '0.5rem', }) ;({ inset: '-0.5rem', }) ;({ top: '0.5rem', bottom: '0.5rem', }) ;({ left: '0.5rem', right: '0.5rem', }) ;({ top: '-0.5rem', bottom: '-0.5rem', }) ;({ left: '-0.5rem', right: '-0.5rem', }) ;({ top: '0.5rem', }) ;({ right: '0.5rem', }) ;({ bottom: '0.5rem', }) ;({ left: '0.5rem', }) ;({ top: '-0.5rem', }) ;({ right: '-0.5rem', }) ;({ bottom: '-0.5rem', }) ;({ left: '-0.5rem', }) ;({ inset: '0.625rem', }) ;({ inset: '-0.625rem', }) ;({ top: '0.625rem', bottom: '0.625rem', }) ;({ left: '0.625rem', right: '0.625rem', }) ;({ top: '-0.625rem', bottom: '-0.625rem', }) ;({ top: '0.625rem', }) ;({ right: '0.625rem', }) ;({ bottom: '0.625rem', }) ;({ left: '0.625rem', }) ;({ top: '-0.625rem', }) ;({ bottom: '-0.625rem', }) ;({ left: '-0.625rem', }) ;({ inset: '0.75rem', }) ;({ inset: '-0.75rem', }) ;({ top: '0.75rem', bottom: '0.75rem', }) ;({ left: '0.75rem', right: '0.75rem', }) ;({ top: '-0.75rem', bottom: '-0.75rem', }) ;({ left: '-0.75rem', right: '-0.75rem', }) ;({ top: '0.75rem', }) ;({ right: '0.75rem', }) ;({ bottom: '0.75rem', }) ;({ left: '0.75rem', }) ;({ top: '-0.75rem', }) ;({ right: '-0.75rem', }) ;({ bottom: '-0.75rem', }) ;({ left: '-0.75rem', }) ;({ inset: '0.875rem', }) ;({ inset: '-0.875rem', }) ;({ top: '0.875rem', bottom: '0.875rem', }) ;({ left: '0.875rem', right: '0.875rem', }) ;({ top: '-0.875rem', bottom: '-0.875rem', }) ;({ left: '-0.875rem', right: '-0.875rem', }) ;({ top: '0.875rem', }) ;({ right: '0.875rem', }) ;({ bottom: '0.875rem', }) ;({ left: '0.875rem', }) ;({ top: '-0.875rem', }) ;({ right: '-0.875rem', }) ;({ bottom: '-0.875rem', }) ;({ left: '-0.875rem', }) ;({ inset: '1rem', }) ;({ inset: '-1rem', }) ;({ top: '1rem', bottom: '1rem', }) ;({ left: '1rem', right: '1rem', }) ;({ top: '-1rem', bottom: '-1rem', }) ;({ left: '-1rem', right: '-1rem', }) ;({ top: '1rem', }) ;({ right: '1rem', }) ;({ bottom: '1rem', }) ;({ left: '1rem', }) ;({ top: '-1rem', }) ;({ right: '-1rem', }) ;({ bottom: '-1rem', }) ;({ left: '-1rem', }) ;({ inset: '1.25rem', }) ;({ inset: '-1.25rem', }) ;({ top: '1.25rem', bottom: '1.25rem', }) ;({ left: '1.25rem', right: '1.25rem', }) ;({ top: '-1.25rem', bottom: '-1.25rem', }) ;({ left: '-1.25rem', right: '-1.25rem', }) ;({ top: '1.25rem', }) ;({ right: '1.25rem', }) ;({ bottom: '1.25rem', }) ;({ left: '1.25rem', }) ;({ top: '-1.25rem', }) ;({ right: '-1.25rem', }) ;({ bottom: '-1.25rem', }) ;({ left: '-1.25rem', }) ;({ inset: '1.5rem', }) ;({ inset: '-1.5rem', }) ;({ top: '1.5rem', bottom: '1.5rem', }) ;({ left: '1.5rem', right: '1.5rem', }) ;({ top: '-1.5rem', bottom: '-1.5rem', }) ;({ left: '-1.5rem', right: '-1.5rem', }) ;({ top: '1.5rem', }) ;({ right: '1.5rem', }) ;({ bottom: '1.5rem', }) ;({ left: '1.5rem', }) ;({ top: '-1.5rem', }) ;({ right: '-1.5rem', }) ;({ bottom: '-1.5rem', }) ;({ left: '-1.5rem', }) ;({ inset: '1.75rem', }) ;({ inset: '-1.75rem', }) ;({ top: '1.75rem', bottom: '1.75rem', }) ;({ left: '1.75rem', right: '1.75rem', }) ;({ top: '-1.75rem', bottom: '-1.75rem', }) ;({ left: '-1.75rem', right: '-1.75rem', }) ;({ top: '1.75rem', }) ;({ right: '1.75rem', }) ;({ bottom: '1.75rem', }) ;({ left: '1.75rem', }) ;({ top: '-1.75rem', }) ;({ right: '-1.75rem', }) ;({ bottom: '-1.75rem', }) ;({ left: '-1.75rem', }) ;({ inset: '2rem', }) ;({ inset: '-2rem', }) ;({ top: '2rem', bottom: '2rem', }) ;({ left: '2rem', right: '2rem', }) ;({ top: '-2rem', bottom: '-2rem', }) ;({ left: '-2rem', right: '-2rem', }) ;({ top: '2rem', }) ;({ right: '2rem', }) ;({ bottom: '2rem', }) ;({ left: '2rem', }) ;({ top: '-2rem', }) ;({ right: '-2rem', }) ;({ bottom: '-2rem', }) ;({ left: '-2rem', }) ;({ inset: '2.25rem', }) ;({ inset: '-2.25rem', }) ;({ top: '2.25rem', bottom: '2.25rem', }) ;({ left: '2.25rem', right: '2.25rem', }) ;({ top: '-2.25rem', bottom: '-2.25rem', }) ;({ left: '-2.25rem', right: '-2.25rem', }) ;({ top: '2.25rem', }) ;({ right: '2.25rem', }) ;({ bottom: '2.25rem', }) ;({ left: '2.25rem', }) ;({ top: '-2.25rem', }) ;({ right: '-2.25rem', }) ;({ bottom: '-2.25rem', }) ;({ left: '-2.25rem', }) ;({ inset: '2.5rem', }) ;({ inset: '-2.5rem', }) ;({ top: '2.5rem', bottom: '2.5rem', }) ;({ left: '2.5rem', right: '2.5rem', }) ;({ top: '-2.5rem', bottom: '-2.5rem', }) ;({ left: '-2.5rem', right: '-2.5rem', }) ;({ top: '2.5rem', }) ;({ right: '2.5rem', }) ;({ bottom: '2.5rem', }) ;({ left: '2.5rem', }) ;({ top: '-2.5rem', }) ;({ right: '-2.5rem', }) ;({ bottom: '-2.5rem', }) ;({ left: '-2.5rem', }) ;({ inset: '2.75rem', }) ;({ inset: '-2.75rem', }) ;({ top: '2.75rem', bottom: '2.75rem', }) ;({ left: '2.75rem', right: '2.75rem', }) ;({ top: '-2.75rem', bottom: '-2.75rem', }) ;({ left: '-2.75rem', right: '-2.75rem', }) ;({ top: '2.75rem', }) ;({ right: '2.75rem', }) ;({ bottom: '2.75rem', }) ;({ left: '2.75rem', }) ;({ top: '-2.75rem', }) ;({ right: '-2.75rem', }) ;({ bottom: '-2.75rem', }) ;({ left: '-2.75rem', }) ;({ inset: '3rem', }) ;({ inset: '-3rem', }) ;({ top: '3rem', bottom: '3rem', }) ;({ left: '3rem', right: '3rem', }) ;({ top: '-3rem', bottom: '-3rem', }) ;({ left: '-3rem', right: '-3rem', }) ;({ top: '3rem', }) ;({ right: '3rem', }) ;({ bottom: '3rem', }) ;({ left: '3rem', }) ;({ top: '-3rem', }) ;({ right: '-3rem', }) ;({ bottom: '-3rem', }) ;({ left: '-3rem', }) ;({ inset: '3.5rem', }) ;({ inset: '-3.5rem', }) ;({ top: '3.5rem', bottom: '3.5rem', }) ;({ left: '3.5rem', right: '3.5rem', }) ;({ top: '-3.5rem', bottom: '-3.5rem', }) ;({ left: '-3.5rem', right: '-3.5rem', }) ;({ top: '3.5rem', }) ;({ right: '3.5rem', }) ;({ bottom: '3.5rem', }) ;({ left: '3.5rem', }) ;({ top: '-3.5rem', }) ;({ right: '-3.5rem', }) ;({ bottom: '-3.5rem', }) ;({ left: '-3.5rem', }) ;({ inset: '4rem', }) ;({ inset: '-4rem', }) ;({ top: '4rem', bottom: '4rem', }) ;({ left: '4rem', right: '4rem', }) ;({ top: '-4rem', bottom: '-4rem', }) ;({ left: '-4rem', right: '-4rem', }) ;({ top: '4rem', }) ;({ right: '4rem', }) ;({ bottom: '4rem', }) ;({ left: '4rem', }) ;({ top: '-4rem', }) ;({ right: '-4rem', }) ;({ bottom: '-4rem', }) ;({ left: '-4rem', }) ;({ inset: '5rem', }) ;({ inset: '-5rem', }) ;({ top: '5rem', bottom: '5rem', }) ;({ left: '5rem', right: '5rem', }) ;({ top: '-5rem', bottom: '-5rem', }) ;({ left: '-5rem', right: '-5rem', }) ;({ top: '5rem', }) ;({ right: '5rem', }) ;({ bottom: '5rem', }) ;({ left: '5rem', }) ;({ top: '-5rem', }) ;({ right: '-5rem', }) ;({ bottom: '-5rem', }) ;({ left: '-5rem', }) ;({ inset: '6rem', }) ;({ inset: '-6rem', }) ;({ top: '6rem', bottom: '6rem', }) ;({ left: '6rem', right: '6rem', }) ;({ top: '-6rem', bottom: '-6rem', }) ;({ left: '-6rem', right: '-6rem', }) ;({ top: '6rem', }) ;({ right: '6rem', }) ;({ bottom: '6rem', }) ;({ left: '6rem', }) ;({ right: '-6rem', }) ;({ bottom: '-6rem', }) ;({ left: '-6rem', }) ;({ inset: '7rem', }) ;({ inset: '-7rem', }) ;({ top: '7rem', bottom: '7rem', }) ;({ left: '7rem', right: '7rem', }) ;({ top: '-7rem', bottom: '-7rem', }) ;({ left: '-7rem', right: '-7rem', }) ;({ top: '7rem', }) ;({ right: '7rem', }) ;({ bottom: '7rem', }) ;({ left: '7rem', }) ;({ top: '-7rem', }) ;({ right: '-7rem', }) ;({ bottom: '-7rem', }) ;({ left: '-7rem', }) ;({ inset: '8rem', }) ;({ inset: '-8rem', }) ;({ top: '8rem', bottom: '8rem', }) ;({ left: '8rem', right: '8rem', }) ;({ top: '-8rem', bottom: '-8rem', }) ;({ left: '-8rem', right: '-8rem', }) ;({ right: '8rem', }) ;({ bottom: '8rem', }) ;({ left: '8rem', }) ;({ top: '-8rem', }) ;({ right: '-8rem', }) ;({ bottom: '-8rem', }) ;({ left: '-8rem', }) ;({ inset: '9rem', }) ;({ inset: '-9rem', }) ;({ top: '9rem', bottom: '9rem', }) ;({ left: '9rem', right: '9rem', }) ;({ top: '-9rem', bottom: '-9rem', }) ;({ left: '-9rem', right: '-9rem', }) ;({ top: '9rem', }) ;({ right: '9rem', }) ;({ bottom: '9rem', }) ;({ left: '9rem', }) ;({ top: '-9rem', }) ;({ right: '-9rem', }) ;({ bottom: '-9rem', }) ;({ left: '-9rem', }) ;({ inset: '10rem', }) ;({ inset: '-10rem', }) ;({ top: '10rem', bottom: '10rem', }) ;({ left: '10rem', right: '10rem', }) ;({ top: '-10rem', bottom: '-10rem', }) ;({ left: '-10rem', right: '-10rem', }) ;({ top: '10rem', }) ;({ right: '10rem', }) ;({ bottom: '10rem', }) ;({ left: '10rem', }) ;({ top: '-10rem', }) ;({ right: '-10rem', }) ;({ bottom: '-10rem', }) ;({ left: '-10rem', }) ;({ inset: '11rem', }) ;({ inset: '-11rem', }) ;({ top: '11rem', bottom: '11rem', }) ;({ left: '11rem', right: '11rem', }) ;({ top: '-11rem', bottom: '-11rem', }) ;({ left: '-11rem', right: '-11rem', }) ;({ top: '11rem', }) ;({ right: '11rem', }) ;({ bottom: '11rem', }) ;({ left: '11rem', }) ;({ top: '-11rem', }) ;({ right: '-11rem', }) ;({ bottom: '-11rem', }) ;({ left: '-11rem', }) ;({ inset: '12rem', }) ;({ inset: '-12rem', }) ;({ top: '12rem', bottom: '12rem', }) ;({ left: '12rem', right: '12rem', }) ;({ top: '-12rem', bottom: '-12rem', }) ;({ left: '-12rem', right: '-12rem', }) ;({ top: '12rem', }) ;({ right: '12rem', }) ;({ bottom: '12rem', }) ;({ left: '12rem', }) ;({ right: '-12rem', }) ;({ bottom: '-12rem', }) ;({ left: '-12rem', }) ;({ inset: '13rem', }) ;({ inset: '-13rem', }) ;({ top: '13rem', bottom: '13rem', }) ;({ left: '13rem', right: '13rem', }) ;({ top: '-13rem', bottom: '-13rem', }) ;({ left: '-13rem', right: '-13rem', }) ;({ top: '13rem', }) ;({ right: '13rem', }) ;({ bottom: '13rem', }) ;({ left: '13rem', }) ;({ top: '-13rem', }) ;({ right: '-13rem', }) ;({ bottom: '-13rem', }) ;({ left: '-13rem', }) ;({ inset: '14rem', }) ;({ inset: '-14rem', }) ;({ top: '14rem', bottom: '14rem', }) ;({ left: '14rem', right: '14rem', }) ;({ top: '-14rem', bottom: '-14rem', }) ;({ left: '-14rem', right: '-14rem', }) ;({ top: '14rem', }) ;({ right: '14rem', }) ;({ bottom: '14rem', }) ;({ left: '14rem', }) ;({ top: '-14rem', }) ;({ right: '-14rem', }) ;({ bottom: '-14rem', }) ;({ left: '-14rem', }) ;({ inset: '15rem', }) ;({ inset: '-15rem', }) ;({ top: '15rem', bottom: '15rem', }) ;({ left: '15rem', right: '15rem', }) ;({ top: '-15rem', bottom: '-15rem', }) ;({ left: '-15rem', right: '-15rem', }) ;({ top: '15rem', }) ;({ right: '15rem', }) ;({ bottom: '15rem', }) ;({ left: '15rem', }) ;({ top: '-15rem', }) ;({ right: '-15rem', }) ;({ bottom: '-15rem', }) ;({ left: '-15rem', }) ;({ inset: '16rem', }) ;({ inset: '-16rem', }) ;({ top: '16rem', bottom: '16rem', }) ;({ left: '16rem', right: '16rem', }) ;({ top: '-16rem', bottom: '-16rem', }) ;({ left: '-16rem', right: '-16rem', }) ;({ top: '16rem', }) ;({ right: '16rem', }) ;({ bottom: '16rem', }) ;({ left: '16rem', }) ;({ top: '-16rem', }) ;({ right: '-16rem', }) ;({ bottom: '-16rem', }) ;({ left: '-16rem', }) ;({ inset: '18rem', }) ;({ inset: '-18rem', }) ;({ top: '18rem', bottom: '18rem', }) ;({ left: '18rem', right: '18rem', }) ;({ top: '-18rem', bottom: '-18rem', }) ;({ left: '-18rem', right: '-18rem', }) ;({ top: '18rem', }) ;({ right: '18rem', }) ;({ bottom: '18rem', }) ;({ left: '18rem', }) ;({ top: '-18rem', }) ;({ right: '-18rem', }) ;({ bottom: '-18rem', }) ;({ left: '-18rem', }) ;({ inset: '20rem', }) ;({ inset: '-20rem', }) ;({ top: '20rem', bottom: '20rem', }) ;({ left: '20rem', right: '20rem', }) ;({ top: '-20rem', bottom: '-20rem', }) ;({ left: '-20rem', right: '-20rem', }) ;({ top: '20rem', }) ;({ right: '20rem', }) ;({ bottom: '20rem', }) ;({ left: '20rem', }) ;({ top: '-20rem', }) ;({ right: '-20rem', }) ;({ bottom: '-20rem', }) ;({ left: '-20rem', }) ;({ inset: '24rem', }) ;({ inset: '-24rem', }) ;({ top: '24rem', bottom: '24rem', }) ;({ left: '24rem', right: '24rem', }) ;({ top: '-24rem', bottom: '-24rem', }) ;({ left: '-24rem', right: '-24rem', }) ;({ top: '24rem', }) ;({ right: '24rem', }) ;({ bottom: '24rem', }) ;({ left: '24rem', }) ;({ top: '-24rem', }) ;({ right: '-24rem', }) ;({ bottom: '-24rem', }) ;({ left: '-24rem', }) ;({ inset: 'auto', }) ;({ inset: '1px', }) ;({ inset: '-1px', }) ;({ inset: '50%', }) ;({ inset: '33.333333%', }) ;({ inset: '66.666667%', }) ;({ inset: '25%', }) ;({ inset: '50%', }) ;({ inset: '75%', }) ;({ inset: '100%', }) ;({ inset: '-50%', }) ;({ inset: '-33.333333%', }) ;({ inset: '-66.666667%', }) ;({ inset: '-25%', }) ;({ inset: '-50%', }) ;({ inset: '-75%', }) ;({ inset: '-100%', }) ;({ top: 'auto', bottom: 'auto', }) ;({ left: 'auto', right: 'auto', }) ;({ top: '1px', bottom: '1px', }) ;({ left: '1px', right: '1px', }) ;({ top: '-1px', bottom: '-1px', }) ;({ left: '-1px', right: '-1px', }) ;({ top: '50%', bottom: '50%', }) ;({ left: '50%', right: '50%', }) ;({ top: '33.333333%', bottom: '33.333333%', }) ;({ left: '33.333333%', right: '33.333333%', }) ;({ top: '66.666667%', bottom: '66.666667%', }) ;({ left: '66.666667%', right: '66.666667%', }) ;({ top: '25%', bottom: '25%', }) ;({ left: '25%', right: '25%', }) ;({ top: '50%', bottom: '50%', }) ;({ left: '50%', right: '50%', }) ;({ top: '75%', bottom: '75%', }) ;({ left: '75%', right: '75%', }) ;({ top: '100%', bottom: '100%', }) ;({ left: '100%', right: '100%', }) ;({ top: '-50%', bottom: '-50%', }) ;({ left: '-50%', right: '-50%', }) ;({ top: '-33.333333%', bottom: '-33.333333%', }) ;({ left: '-33.333333%', right: '-33.333333%', }) ;({ top: '-66.666667%', bottom: '-66.666667%', }) ;({ left: '-66.666667%', right: '-66.666667%', }) ;({ top: '-25%', bottom: '-25%', }) ;({ left: '-25%', right: '-25%', }) ;({ top: '-50%', bottom: '-50%', }) ;({ left: '-50%', right: '-50%', }) ;({ top: '-75%', bottom: '-75%', }) ;({ left: '-75%', right: '-75%', }) ;({ top: '-100%', bottom: '-100%', }) ;({ left: '-100%', right: '-100%', }) ;({ top: 'auto', }) ;({ right: 'auto', }) ;({ bottom: 'auto', }) ;({ left: 'auto', }) ;({ top: '1px', }) ;({ right: '1px', }) ;({ bottom: '1px', }) ;({ left: '1px', }) ;({ top: '-1px', }) ;({ right: '-1px', }) ;({ bottom: '-1px', }) ;({ left: '-1px', }) ;({ top: '50%', }) ;({ right: '50%', }) ;({ bottom: '50%', }) ;({ left: '50%', }) ;({ top: '33.333333%', }) ;({ right: '33.333333%', }) ;({ bottom: '33.333333%', }) ;({ left: '33.333333%', }) ;({ top: '66.666667%', }) ;({ right: '66.666667%', }) ;({ bottom: '66.666667%', }) ;({ left: '66.666667%', }) ;({ top: '25%', }) ;({ right: '25%', }) ;({ bottom: '25%', }) ;({ left: '25%', }) ;({ top: '50%', }) ;({ right: '50%', }) ;({ bottom: '50%', }) ;({ left: '50%', }) ;({ top: '75%', }) ;({ right: '75%', }) ;({ bottom: '75%', }) ;({ left: '75%', }) ;({ top: '100%', }) ;({ right: '100%', }) ;({ bottom: '100%', }) ;({ left: '100%', }) ;({ top: '-50%', }) ;({ right: '-50%', }) ;({ bottom: '-50%', }) ;({ left: '-50%', }) ;({ top: '-33.333333%', }) ;({ right: '-33.333333%', }) ;({ bottom: '-33.333333%', }) ;({ left: '-33.333333%', }) ;({ top: '-66.666667%', }) ;({ right: '-66.666667%', }) ;({ bottom: '-66.666667%', }) ;({ left: '-66.666667%', }) ;({ top: '-25%', }) ;({ right: '-25%', }) ;({ bottom: '-25%', }) ;({ left: '-25%', }) ;({ top: '-50%', }) ;({ right: '-50%', }) ;({ bottom: '-50%', }) ;({ left: '-50%', }) ;({ top: '-75%', }) ;({ right: '-75%', }) ;({ bottom: '-75%', }) ;({ left: '-75%', }) ;({ top: '-100%', }) ;({ right: '-100%', }) ;({ bottom: '-100%', }) ;({ left: '-100%', }) ;({ top: '3px', }) ;({ inset: '50px !important', }) ;({ inset: '1.5rem', left: '0.25rem', right: '0.25rem', insetInlineEnd: '2rem', insetInlineStart: '1rem', }) `; exports[`twin.macro touchAction.tsx: touchAction.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/touch-action tw\`touch-auto\` tw\`touch-none\` tw\`touch-pan-x\` tw\`touch-pan-left\` tw\`touch-pan-right\` tw\`touch-pan-y\` tw\`touch-pan-up\` tw\`touch-pan-down\` tw\`touch-pinch-zoom\` tw\`touch-manipulation\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/touch-action ;({ touchAction: 'auto', }) ;({ touchAction: 'none', }) ;({ '--tw-pan-x': 'pan-x', touchAction: 'var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom)', }) ;({ '--tw-pan-x': 'pan-left', touchAction: 'var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom)', }) ;({ '--tw-pan-x': 'pan-right', touchAction: 'var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom)', }) ;({ '--tw-pan-y': 'pan-y', touchAction: 'var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom)', }) ;({ '--tw-pan-y': 'pan-up', touchAction: 'var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom)', }) ;({ '--tw-pan-y': 'pan-down', touchAction: 'var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom)', }) ;({ '--tw-pinch-zoom': 'pinch-zoom', touchAction: 'var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom)', }) ;({ touchAction: 'manipulation', }) `; exports[`twin.macro transformOrigin.tsx: transformOrigin.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/transform-origin theme\`transformOrigin\` tw\`origin-center\` tw\`origin-top\` tw\`origin-top-right\` tw\`origin-right\` tw\`origin-bottom-right\` tw\`origin-bottom\` tw\`origin-bottom-left\` tw\`origin-left\` tw\`origin-top-left\` tw\`origin-[33% 75%]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/transform-origin ;({ center: 'center', top: 'top', 'top-right': 'top right', right: 'right', 'bottom-right': 'bottom right', bottom: 'bottom', 'bottom-left': 'bottom left', left: 'left', 'top-left': 'top left', }) ;({ transformOrigin: 'center', }) ;({ transformOrigin: 'top', }) ;({ transformOrigin: 'top right', }) ;({ transformOrigin: 'right', }) ;({ transformOrigin: 'bottom right', }) ;({ transformOrigin: 'bottom', }) ;({ transformOrigin: 'bottom left', }) ;({ transformOrigin: 'left', }) ;({ transformOrigin: 'top left', }) ;({ transformOrigin: '33% 75%', }) `; exports[`twin.macro transitionDelay.tsx: transitionDelay.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/transition-delay theme\`transitionDelay\` tw\`delay-75\` tw\`delay-100\` tw\`delay-150\` tw\`delay-200\` tw\`delay-300\` tw\`delay-500\` tw\`delay-700\` tw\`delay-1000\` tw\`delay-[2000ms]\` tw\`delay-[var(--delay)]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/transition-delay ;({ 0: '0s', 75: '75ms', 100: '100ms', 150: '150ms', 200: '200ms', 300: '300ms', 500: '500ms', 700: '700ms', 1000: '1000ms', }) ;({ transitionDelay: '75ms', }) ;({ transitionDelay: '100ms', }) ;({ transitionDelay: '150ms', }) ;({ transitionDelay: '200ms', }) ;({ transitionDelay: '300ms', }) ;({ transitionDelay: '500ms', }) ;({ transitionDelay: '700ms', }) ;({ transitionDelay: '1000ms', }) ;({ transitionDelay: '2000ms', }) ;({ transitionDelay: 'var(--delay)', }) `; exports[`twin.macro transitionDuration.tsx: transitionDuration.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/transition-duration theme\`transitionDuration.\` tw\`duration-75\` tw\`duration-100\` tw\`duration-150\` tw\`duration-200\` tw\`duration-300\` tw\`duration-500\` tw\`duration-700\` tw\`duration-1000\` tw\`duration-[2000ms]\` tw\`duration-[2s]\` tw\`duration-[var(--app-duration)]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/transition-duration ;({ 0: '0s', 75: '75ms', 100: '100ms', 150: '150ms', 200: '200ms', 300: '300ms', 500: '500ms', 700: '700ms', 1000: '1000ms', DEFAULT: '150ms', }) ;({ transitionDuration: '75ms', }) ;({ transitionDuration: '100ms', }) ;({ transitionDuration: '150ms', }) ;({ transitionDuration: '200ms', }) ;({ transitionDuration: '300ms', }) ;({ transitionDuration: '500ms', }) ;({ transitionDuration: '700ms', }) ;({ transitionDuration: '1000ms', }) ;({ transitionDuration: '2000ms', }) ;({ transitionDuration: '2s', }) ;({ transitionDuration: 'var(--app-duration)', }) `; exports[`twin.macro transitionProperty.tsx: transitionProperty.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/transition-property theme\`transitionProperty.\` tw\`transition-none\` tw\`transition-all\` tw\`transition\` tw\`transition-colors\` tw\`transition-opacity\` tw\`transition-shadow\` tw\`transition-transform\` tw\`transition-[height]\` tw\`transition-[lookup:green]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/transition-property ;({ none: 'none', all: 'all', DEFAULT: 'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter', colors: 'color, background-color, border-color, text-decoration-color, fill, stroke', opacity: 'opacity', shadow: 'box-shadow', transform: 'transform', }) ;({ transitionProperty: 'none', }) ;({ transitionProperty: 'all', transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)', transitionDuration: '150ms', }) ;({ transitionProperty: 'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter', transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)', transitionDuration: '150ms', }) ;({ transitionProperty: 'color, background-color, border-color, text-decoration-color, fill, stroke', transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)', transitionDuration: '150ms', }) ;({ transitionProperty: 'opacity', transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)', transitionDuration: '150ms', }) ;({ transitionProperty: 'box-shadow', transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)', transitionDuration: '150ms', }) ;({ transitionProperty: 'transform', transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)', transitionDuration: '150ms', }) ;({ transitionProperty: 'height', transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)', transitionDuration: '150ms', }) ;({ transitionProperty: 'green', transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)', transitionDuration: '150ms', }) `; exports[`twin.macro transitionTimingFunction.tsx: transitionTimingFunction.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/transition-timing-function theme\`transitionTimingFunction.\` tw\`ease-linear\` tw\`ease-in\` tw\`ease-out\` tw\`ease-in-out\` tw\`ease-[cubic-bezier(0.95, 0.05, 0.795, 0.035)]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/transition-timing-function ;({ DEFAULT: 'cubic-bezier(0.4, 0, 0.2, 1)', linear: 'linear', in: 'cubic-bezier(0.4, 0, 1, 1)', out: 'cubic-bezier(0, 0, 0.2, 1)', 'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)', }) ;({ transitionTimingFunction: 'linear', }) ;({ transitionTimingFunction: 'cubic-bezier(0.4, 0, 1, 1)', }) ;({ transitionTimingFunction: 'cubic-bezier(0, 0, 0.2, 1)', }) ;({ transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)', }) ;({ transitionTimingFunction: 'cubic-bezier(0.95, 0.05, 0.795, 0.035)', }) `; exports[`twin.macro translate.tsx: translate.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/translate tw\`translate-x-0\` tw\`translate-y-0\` tw\`translate-x-px\` tw\`translate-y-px\` tw\`translate-x-0.5\` tw\`translate-y-0.5\` tw\`translate-x-1\` tw\`translate-y-1\` tw\`translate-x-1.5\` tw\`translate-y-1.5\` tw\`translate-x-2\` tw\`translate-y-2\` tw\`translate-x-2.5\` tw\`translate-y-2.5\` tw\`translate-x-3\` tw\`translate-y-3\` tw\`translate-x-3.5\` tw\`translate-y-3.5\` tw\`translate-x-4\` tw\`translate-y-4\` tw\`translate-x-5\` tw\`translate-y-5\` tw\`translate-x-6\` tw\`translate-y-6\` tw\`translate-x-7\` tw\`translate-y-7\` tw\`translate-x-8\` tw\`translate-y-8\` tw\`translate-x-9\` tw\`translate-y-9\` tw\`translate-x-10\` tw\`translate-y-10\` tw\`translate-x-11\` tw\`translate-y-11\` tw\`translate-x-12\` tw\`translate-y-12\` tw\`translate-x-14\` tw\`translate-y-14\` tw\`translate-x-16\` tw\`translate-y-16\` tw\`translate-x-20\` tw\`translate-y-20\` tw\`translate-x-24\` tw\`translate-y-24\` tw\`translate-x-28\` tw\`translate-y-28\` tw\`translate-x-32\` tw\`translate-y-32\` tw\`translate-x-36\` tw\`translate-y-36\` tw\`translate-x-40\` tw\`translate-y-40\` tw\`translate-x-44\` tw\`translate-y-44\` tw\`translate-x-48\` tw\`translate-y-48\` tw\`translate-x-52\` tw\`translate-y-52\` tw\`translate-x-56\` tw\`translate-y-56\` tw\`translate-x-60\` tw\`translate-y-60\` tw\`translate-x-64\` tw\`translate-y-64\` tw\`translate-x-72\` tw\`translate-y-72\` tw\`translate-x-80\` tw\`translate-y-80\` tw\`translate-x-96\` tw\`translate-y-96\` tw\`translate-x-1/2\` tw\`translate-x-1/3\` tw\`translate-x-2/3\` tw\`translate-x-1/4\` tw\`translate-x-2/4\` tw\`translate-x-3/4\` tw\`translate-x-full\` tw\`translate-y-1/2\` tw\`translate-y-1/3\` tw\`translate-y-2/3\` tw\`translate-y-1/4\` tw\`translate-y-2/4\` tw\`translate-y-3/4\` tw\`translate-y-full\` tw\`transform\` tw\`transform-gpu\` tw\`transform-cpu\` tw\`transform-none\` tw\`translate-x-10000\` tw\`-translate-x-10000\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/translate ;({ '--tw-translate-x': '0px', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-y': '0px', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-x': '1px', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-y': '1px', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-x': '0.125rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-y': '0.125rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-x': '0.25rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-y': '0.25rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-x': '0.375rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-y': '0.375rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-x': '0.5rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-y': '0.5rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-x': '0.625rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-y': '0.625rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-x': '0.75rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-y': '0.75rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-x': '0.875rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-y': '0.875rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-x': '1rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-y': '1rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-x': '1.25rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-y': '1.25rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-x': '1.5rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-y': '1.5rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-x': '1.75rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-y': '1.75rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-x': '2rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-y': '2rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-x': '2.25rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-y': '2.25rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-x': '2.5rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-y': '2.5rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-x': '2.75rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-y': '2.75rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-x': '3rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-y': '3rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-x': '3.5rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-y': '3.5rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-x': '4rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-y': '4rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-x': '5rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-y': '5rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-x': '6rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-y': '6rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-x': '7rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-y': '7rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-x': '8rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-y': '8rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-x': '9rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-y': '9rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-x': '10rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-y': '10rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-x': '11rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-y': '11rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-x': '12rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-y': '12rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-x': '13rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-y': '13rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-x': '14rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-y': '14rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-x': '15rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-y': '15rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-x': '16rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-y': '16rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-x': '18rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-y': '18rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-x': '20rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-y': '20rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-x': '24rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-y': '24rem', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-x': '50%', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-x': '33.333333%', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-x': '66.666667%', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-x': '25%', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-x': '50%', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-x': '75%', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-x': '100%', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-y': '50%', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-y': '33.333333%', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-y': '66.666667%', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-y': '25%', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-y': '50%', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-y': '75%', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-y': '100%', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ transform: 'translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ transform: 'none', }) ;({ '--tw-translate-x': '5000%', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) ;({ '--tw-translate-x': '-5000%', transform: 'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))', }) `; exports[`twin.macro userPluginOrdering.tsx: userPluginOrdering.tsx 1`] = ` // @ts-nocheck import tw from '../macro' tw\`selector\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck ;({ '@media (min-width: 1px)': { content: '@media .selector', '& .selector3': { content: '@media .selector .selector3', }, ':hover .selector2': { content: '@media .selector:hover .selector2', }, ':hover.selector2': { content: '@media .selector:hover.selector2', }, }, content: '.selector', '& .selector2': { content: '.selector .selector2', }, ':hover': { content: '.selector:hover', }, ':hover .selector3': { content: '.selector:hover .selector3', }, margin: '1px', padding: 'padding', display: 'block', '@media (min-width: 2px)': { content: '@media .selector', }, }) `; exports[`twin.macro userSelect.tsx: userSelect.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/user-select tw\`select-none\` tw\`select-text\` tw\`select-all\` tw\`select-auto\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/user-select ;({ userSelect: 'none', }) ;({ userSelect: 'text', }) ;({ userSelect: 'all', }) ;({ userSelect: 'auto', }) `; exports[`twin.macro variables.tsx: variables.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // Test a user created css class with a css variable as a rule property tw\`css-class-with-variable-as-rule-property\` // Test negative css variables tw\`-mx-gutter-1/2\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // Test a user created css class with a css variable as a rule property ;({ '--some-css-variable-as-rule-prop': 'blue', }) // Test negative css variables ;({ marginLeft: 'calc(var(--gutter-half) * -1)', marginRight: 'calc(var(--gutter-half) * -1)', }) `; exports[`twin.macro variantOrdering.tsx: variantOrdering.tsx 1`] = ` // @ts-nocheck import tw from '../macro' tw\`before:valid:rtl:motion-safe:contrast-more:dark:print:portrait:any-pointer-fine:block\` tw\`any-pointer-fine:portrait:print:dark:contrast-more:motion-safe:rtl:valid:before:mt-5\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck ;({ '@media (any-pointer: fine)': { '@media (orientation: portrait)': { '@media print': { '@media (prefers-color-scheme: dark)': { '@media (prefers-contrast: more)': { '@media (prefers-reduced-motion: no-preference)': { ':is([dir="rtl"] &:valid)::before': { content: 'var(--tw-content)', display: 'block', }, }, }, }, }, }, }, }) ;({ '@media (prefers-reduced-motion: no-preference)': { '@media (prefers-contrast: more)': { '@media (prefers-color-scheme: dark)': { '@media print': { '@media (orientation: portrait)': { '@media (any-pointer: fine)': { ':is([dir="rtl"] &):valid::before': { content: 'var(--tw-content)', marginTop: '1.25rem', }, }, }, }, }, }, }, }) `; exports[`twin.macro verticalAlign.tsx: verticalAlign.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/vertical-align tw\`align-baseline\` tw\`align-top\` tw\`align-middle\` tw\`align-bottom\` tw\`align-text-top\` tw\`align-text-bottom\` tw\`align-sub\` tw\`align-super\` tw\`align-[something]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/vertical-align ;({ verticalAlign: 'baseline', }) ;({ verticalAlign: 'top', }) ;({ verticalAlign: 'middle', }) ;({ verticalAlign: 'bottom', }) ;({ verticalAlign: 'text-top', }) ;({ verticalAlign: 'text-bottom', }) ;({ verticalAlign: 'sub', }) ;({ verticalAlign: 'super', }) ;({ verticalAlign: 'something', }) `; exports[`twin.macro visibility.tsx: visibility.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/visibility tw\`visible\` tw\`invisible\` tw\`collapse\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/visibility ;({ visibility: 'visible', }) ;({ visibility: 'hidden', }) ;({ visibility: 'collapse', }) `; exports[`twin.macro visitedOpacity.tsx: visitedOpacity.tsx 1`] = ` // @ts-nocheck import tw from '../macro' tw\`visited:border-red-500 visited:bg-red-500 visited:text-red-500\` tw\`visited:border-red-500/20 visited:bg-red-500/20 visited:text-red-500/20\` tw\`visited:border-red-500/[20] visited:bg-red-500/[20] visited:text-red-500/[20]\` tw\`visited:(border-red-500) visited:(bg-red-500) visited:(text-red-500)\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck ;({ ':visited': { borderColor: 'rgb(239 68 68 )', backgroundColor: 'rgb(239 68 68 )', color: 'rgb(239 68 68 )', }, }) ;({ ':visited': { borderColor: 'rgb(239 68 68 / 0.2)', backgroundColor: 'rgb(239 68 68 / 0.2)', color: 'rgb(239 68 68 / 0.2)', }, }) ;({ ':visited': { borderColor: 'rgb(239 68 68 / 20)', backgroundColor: 'rgb(239 68 68 / 20)', color: 'rgb(239 68 68 / 20)', }, }) ;({ ':visited': { borderColor: 'rgb(239 68 68 )', backgroundColor: 'rgb(239 68 68 )', color: 'rgb(239 68 68 )', }, }) `; exports[`twin.macro whitespace.tsx: whitespace.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/whitespace tw\`whitespace-normal\` tw\`whitespace-nowrap\` tw\`whitespace-pre\` tw\`whitespace-pre-line\` tw\`whitespace-pre-wrap\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/whitespace ;({ whiteSpace: 'normal', }) ;({ whiteSpace: 'nowrap', }) ;({ whiteSpace: 'pre', }) ;({ whiteSpace: 'pre-line', }) ;({ whiteSpace: 'pre-wrap', }) `; exports[`twin.macro width.tsx: width.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/width theme\`width\` tw\`w-0\` tw\`w-px\` tw\`w-0.5\` tw\`w-1\` tw\`w-1.5\` tw\`w-2\` tw\`w-2.5\` tw\`w-3\` tw\`w-3.5\` tw\`w-4\` tw\`w-5\` tw\`w-6\` tw\`w-7\` tw\`w-8\` tw\`w-9\` tw\`w-10\` tw\`w-11\` tw\`w-12\` tw\`w-14\` tw\`w-16\` tw\`w-20\` tw\`w-24\` tw\`w-28\` tw\`w-32\` tw\`w-36\` tw\`w-40\` tw\`w-44\` tw\`w-48\` tw\`w-52\` tw\`w-56\` tw\`w-60\` tw\`w-64\` tw\`w-72\` tw\`w-80\` tw\`w-96\` tw\`w-auto\` tw\`w-1/2\` tw\`w-1/3\` tw\`w-2/3\` tw\`w-1/4\` tw\`w-2/4\` tw\`w-3/4\` tw\`w-1/5\` tw\`w-2/5\` tw\`w-3/5\` tw\`w-4/5\` tw\`w-1/6\` tw\`w-2/6\` tw\`w-3/6\` tw\`w-4/6\` tw\`w-5/6\` tw\`w-1/12\` tw\`w-2/12\` tw\`w-3/12\` tw\`w-4/12\` tw\`w-5/12\` tw\`w-6/12\` tw\`w-7/12\` tw\`w-8/12\` tw\`w-9/12\` tw\`w-10/12\` tw\`w-11/12\` tw\`w-full\` tw\`w-screen\` tw\`w-min\` tw\`w-max\` tw\`w-fit\` tw\`w-[3.23rem]\` tw\`w-[calc(100%+1rem)]\` tw\`w-[calc(var(--10-10px,calc(-20px-(-30px--40px)))-50px)]\` tw\`w-[var(--width)]\` tw\`w-[var(--width,calc(100%+1rem))]\` tw\`w-[calc(100%/3-1rem*2)]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/width ;({ 0: '0px', 1: '0.25rem', 2: '0.5rem', 3: '0.75rem', 4: '1rem', 5: '1.25rem', 6: '1.5rem', 7: '1.75rem', 8: '2rem', 9: '2.25rem', 10: '2.5rem', 11: '2.75rem', 12: '3rem', 14: '3.5rem', 16: '4rem', 20: '5rem', 24: '6rem', 28: '7rem', 32: '8rem', 36: '9rem', 40: '10rem', 44: '11rem', 48: '12rem', 52: '13rem', 56: '14rem', 60: '15rem', 64: '16rem', 72: '18rem', 80: '20rem', 96: '24rem', auto: 'auto', px: '1px', 0.5: '0.125rem', 1.5: '0.375rem', 2.5: '0.625rem', 3.5: '0.875rem', '1/2': '50%', '1/3': '33.333333%', '2/3': '66.666667%', '1/4': '25%', '2/4': '50%', '3/4': '75%', '1/5': '20%', '2/5': '40%', '3/5': '60%', '4/5': '80%', '1/6': '16.666667%', '2/6': '33.333333%', '3/6': '50%', '4/6': '66.666667%', '5/6': '83.333333%', '1/12': '8.333333%', '2/12': '16.666667%', '3/12': '25%', '4/12': '33.333333%', '5/12': '41.666667%', '6/12': '50%', '7/12': '58.333333%', '8/12': '66.666667%', '9/12': '75%', '10/12': '83.333333%', '11/12': '91.666667%', full: '100%', screen: '100vw', min: 'min-content', max: 'max-content', fit: 'fit-content', }) ;({ width: '0px', }) ;({ width: '1px', }) ;({ width: '0.125rem', }) ;({ width: '0.25rem', }) ;({ width: '0.375rem', }) ;({ width: '0.5rem', }) ;({ width: '0.625rem', }) ;({ width: '0.75rem', }) ;({ width: '0.875rem', }) ;({ width: '1rem', }) ;({ width: '1.25rem', }) ;({ width: '1.5rem', }) ;({ width: '1.75rem', }) ;({ width: '2rem', }) ;({ width: '2.25rem', }) ;({ width: '2.5rem', }) ;({ width: '2.75rem', }) ;({ width: '3rem', }) ;({ width: '3.5rem', }) ;({ width: '4rem', }) ;({ width: '5rem', }) ;({ width: '6rem', }) ;({ width: '7rem', }) ;({ width: '8rem', }) ;({ width: '9rem', }) ;({ width: '10rem', }) ;({ width: '11rem', }) ;({ width: '12rem', }) ;({ width: '13rem', }) ;({ width: '14rem', }) ;({ width: '15rem', }) ;({ width: '16rem', }) ;({ width: '18rem', }) ;({ width: '20rem', }) ;({ width: '24rem', }) ;({ width: 'auto', }) ;({ width: '50%', }) ;({ width: '33.333333%', }) ;({ width: '66.666667%', }) ;({ width: '25%', }) ;({ width: '50%', }) ;({ width: '75%', }) ;({ width: '20%', }) ;({ width: '40%', }) ;({ width: '60%', }) ;({ width: '80%', }) ;({ width: '16.666667%', }) ;({ width: '33.333333%', }) ;({ width: '50%', }) ;({ width: '66.666667%', }) ;({ width: '83.333333%', }) ;({ width: '8.333333%', }) ;({ width: '16.666667%', }) ;({ width: '25%', }) ;({ width: '33.333333%', }) ;({ width: '41.666667%', }) ;({ width: '50%', }) ;({ width: '58.333333%', }) ;({ width: '66.666667%', }) ;({ width: '75%', }) ;({ width: '83.333333%', }) ;({ width: '91.666667%', }) ;({ width: '100%', }) ;({ width: '100vw', }) ;({ width: 'min-content', }) ;({ width: 'max-content', }) ;({ width: 'fit-content', }) ;({ width: '3.23rem', }) ;({ width: 'calc(100% + 1rem)', }) ;({ width: 'calc(var(--10-10px,calc(-20px - (-30px - -40px))) - 50px)', }) ;({ width: 'var(--width)', }) ;({ width: 'var(--width,calc(100% + 1rem))', }) ;({ width: 'calc(100% / 3 - 1rem * 2)', }) `; exports[`twin.macro willChange.tsx: willChange.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/will-change theme\`willChange\` tw\`will-change-auto\` tw\`will-change-scroll\` tw\`will-change-contents\` tw\`will-change-transform\` tw\`will-change-[top, left]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/will-change ;({ auto: 'auto', scroll: 'scroll-position', contents: 'contents', transform: 'transform', }) ;({ willChange: 'auto', }) ;({ willChange: 'scroll-position', }) ;({ willChange: 'contents', }) ;({ willChange: 'transform', }) ;({ willChange: 'top, left', }) `; exports[`twin.macro wordBreak.tsx: wordBreak.tsx 1`] = ` // @ts-nocheck import tw from '../macro' // https://tailwindcss.com/docs/word-break tw\`break-keep\` tw\`break-normal\` tw\`break-words\` tw\`break-all\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/word-break ;({ wordBreak: 'keep-all', }) ;({ overflowWrap: 'normal', wordBreak: 'normal', }) ;({ overflowWrap: 'break-word', }) ;({ wordBreak: 'break-all', }) `; exports[`twin.macro zIndex.tsx: zIndex.tsx 1`] = ` // @ts-nocheck import tw, { theme } from '../macro' // https://tailwindcss.com/docs/z-index theme\`zIndex\` tw\`z-0\` tw\`-z-0\` tw\`z-10\` tw\`-z-10\` tw\`z-20\` tw\`-z-20\` tw\`z-30\` tw\`-z-30\` tw\`z-40\` tw\`-z-40\` tw\`z-50\` tw\`-z-50\` tw\`z-auto\` tw\`z-[100]\` tw\`z-[-100]\` tw\`-z-[100]\` tw\`-z-[-100]\` ↓ ↓ ↓ ↓ ↓ ↓ // @ts-nocheck // https://tailwindcss.com/docs/z-index ;({ 0: '0', 1: '1', 10: '10', 20: '20', 30: '30', 40: '40', 50: '50', auto: 'auto', }) ;({ zIndex: '0', }) ;({ zIndex: '0', }) ;({ zIndex: '10', }) ;({ zIndex: '-10', }) ;({ zIndex: '20', }) ;({ zIndex: '-20', }) ;({ zIndex: '30', }) ;({ zIndex: '-30', }) ;({ zIndex: '40', }) ;({ zIndex: '-40', }) ;({ zIndex: '50', }) ;({ zIndex: '-50', }) ;({ zIndex: 'auto', }) ;({ zIndex: '100', }) ;({ zIndex: '-100', }) ;({ zIndex: '-100', }) ;({ zIndex: '100', }) `; ================================================ FILE: tests/animations.test.ts ================================================ import { run, html } from './util/run' test('basic', async () => { const input = html` <>
` return run(input, {}).then(result => { expect(result).toMatchFormattedJavaScript(` React.createElement( React.Fragment, null, React.createElement("div", { css: { "@keyframes spin": { to: { transform: "rotate(360deg)" } }, animation: "spin 1s linear infinite", }, }), React.createElement("div", { css: { "@keyframes ping": { "75%, 100%": { transform: "scale(2)", opacity: "0" } }, ":hover": { animation: "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite" }, }, }), React.createElement("div", { css: { "@keyframes bounce": { "0%, 100%": { transform: "translateY(-25%)", animationTimingFunction: "cubic-bezier(0.8,0,1,1)", }, "50%": { transform: "none", animationTimingFunction: "cubic-bezier(0,0,0.2,1)" }, }, ".group:hover &": { animation: "bounce 1s infinite" }, }, }) ); `) }) }) test('custom', async () => { const input = html`
` const config = { theme: { extend: { keyframes: { one: { to: { transform: 'rotate(360deg)' } } }, animation: { one: 'one 2s' }, }, }, } return run(input, config).then(result => { expect(result).toMatchFormattedJavaScript(` React.createElement("div", { css: { "@keyframes one": { to: { transform: "rotate(360deg)" } }, animation: "one 2s" }, }); `) }) }) test('custom prefixed', async () => { const input = html`
` const config = { prefix: 'tw-', theme: { extend: { keyframes: { one: { to: { transform: 'rotate(360deg)' } }, }, animation: { one: 'one 2s' }, }, }, } return run(input, config).then(result => { expect(result).toMatchFormattedJavaScript(` React.createElement("div", { css: { "@keyframes tw-one": { to: { transform: "rotate(360deg)" } }, animation: "tw-one 2s" }, }) `) }) }) test('multiple', async () => { const input = html`
` const config = { theme: { extend: { animation: { multiple: 'bounce 2s linear, pulse 3s ease-in' }, }, }, } return run(input, config).then(result => { expect(result).toMatchFormattedJavaScript(` React.createElement("div", { css: { "@keyframes bounce": { "0%, 100%": { transform: "translateY(-25%)", animationTimingFunction: "cubic-bezier(0.8,0,1,1)", }, "50%": { transform: "none", animationTimingFunction: "cubic-bezier(0,0,0.2,1)" }, }, "@keyframes pulse": { "50%": { opacity: ".5" } }, animation: "bounce 2s linear, pulse 3s ease-in", }, }); `) }) }) test('multiple custom', async () => { const input = html`
` const config = { theme: { extend: { keyframes: { one: { to: { transform: 'rotate(360deg)' } }, two: { to: { transform: 'scale(1.23)' } }, }, animation: { multiple: 'one 2s, two 3s' }, }, }, } return run(input, config).then(result => { expect(result).toMatchFormattedJavaScript(` React.createElement("div", { css: { "@keyframes one": { to: { transform: "rotate(360deg)" } }, "@keyframes two": { to: { transform: "scale(1.23)" } }, animation: "one 2s, two 3s", }, }); `) }) }) test('with dots in the name', async () => { const input = html` <>
` const config = { theme: { extend: { keyframes: { 'zoom-.5': { to: { transform: 'scale(0.5)' } }, 'zoom-1.5': { to: { transform: 'scale(1.5)' } }, }, animation: { 'zoom-.5': 'zoom-.5 2s', 'zoom-1.5': 'zoom-1.5 2s', }, }, }, } return run(input, config).then(result => { expect(result).toMatchFormattedJavaScript(` React.createElement( React.Fragment, null, React.createElement("div", { css: { "@keyframes zoom-\\\\.5": { to: { transform: "scale(0.5)" } }, animation: "zoom-.5 2s" }, }), React.createElement("div", { css: { "@keyframes zoom-1\\\\.5": { to: { transform: "scale(1.5)" } }, animation: "zoom-1.5 2s", }, }) ); `) }) }) test('with dots in the name and prefix', async () => { const input = html` <>
` const config = { prefix: 'tw-', theme: { extend: { keyframes: { 'zoom-.5': { to: { transform: 'scale(0.5)' } }, 'zoom-1.5': { to: { transform: 'scale(1.5)' } }, }, animation: { 'zoom-.5': 'zoom-.5 2s', 'zoom-1.5': 'zoom-1.5 2s', }, }, }, } return run(input, config).then((result: string) => { expect(result).toMatchFormattedJavaScript(` React.createElement( React.Fragment, null, React.createElement("div", { css: { "@keyframes tw-zoom-\\\\.5": { to: { transform: "scale(0.5)" } }, animation: "tw-zoom-.5 2s", }, }), React.createElement("div", { css: { "@keyframes tw-zoom-1\\\\.5": { to: { transform: "scale(1.5)" } }, animation: "tw-zoom-1.5 2s", }, }) ); `) }) }) ================================================ FILE: tests/arbitraryProperties.test.ts ================================================ import { run } from './util/run' test('basic arbitrary property', async () => { const input = 'tw`[paint-order:markers]`' return run(input).then(result => { expect(result).toMatchFormattedJavaScript(`({ paintOrder: "markers" });`) }) }) test('arbitrary properties with modifiers', async () => { const input = 'tw`dark:lg:hover:[paint-order:markers]`' return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ '@media (min-width: 1024px)': { '@media (prefers-color-scheme: dark)': { ':hover': { paintOrder: 'markers' } }, }, }) `) }) }) test('arbitrary properties are sorted after utilities', async () => { const input = 'tw`[paint-order:markers] content-none hover:pointer-events-none`' return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ "--tw-content": "none", content: "var(--tw-content)", paintOrder: "markers", ":hover": { pointerEvents: "none" }, }); `) }) }) test('using CSS variables', async () => { const input = 'tw`[--my-var:auto]`' return run(input).then(result => { expect(result).toMatchFormattedJavaScript(`({ "--my-var": "auto" });`) }) }) test('using underscores as spaces', async () => { const input = 'tw`[--my-var:2px_4px]`' return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ "--my-var": "2px 4px" }); `) }) }) test('using the important modifier', async () => { const input = 'tw`![--my-var:2px_4px]`' return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ "--my-var": "2px 4px !important" }); `) }) }) test('colons are allowed in quotes', async () => { const input = "tw`[content:'foo:bar']`" return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ content: "'foo:bar'" }); `) }) }) test('colons are allowed in braces', async () => { const input = 'tw`[background-image:url(http://example.com/picture.jpg)]`' return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ backgroundImage: "url(http://example.com/picture.jpg)" }); `) }) }) test('invalid class', async () => { const input = 'tw`[a:b:c:d]`' expect.assertions(1) return run(input) .then(result => { expect(result).toMatchFormattedJavaScript(``) }) .catch(error => { expect(error).toMatchFormattedError(` MacroError: unknown: ✕ [a:b:c:d] was not found`) }) }) test('invalid arbitrary property', async () => { // eslint-disable-next-line no-template-curly-in-string const input = 'tw`[autoplay:${autoplay}]`' expect.assertions(1) return run(input) .then(result => { expect(result).toMatchFormattedJavaScript(``) }) .catch(error => { expect(error).toMatchFormattedError(` MacroError: unknown: ✕ Your classes need to be complete strings for Twin to detect them correctly Read more at https://twinredirect.page.link/template-literals `) }) }) test('invalid arbitrary property 2', async () => { const input = 'tw`[0:02]`' return run(input) .then(result => { expect(result).toMatchFormattedJavaScript(``) }) .catch(error => { expect(error).toMatchFormattedError(` MacroError: unknown: ✕ [0:02] was not found `) }) }) it('should be possible to read theme values in arbitrary properties (without quotes)', async () => { const input = 'tw`[--a:theme(colors.blue.500)] [color:var(--a)]`' return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ "--a": "#3b82f6", color: "var(--a)" }); `) }) }) it('should be possible to read theme values in arbitrary properties (with quotes)', async () => { const input = "tw`[color:var(--a)] [--a:theme('colors.blue.500')]`" return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ "--a": "#3b82f6", color: "var(--a)" }); `) }) }) it('should not generate invalid CSS', async () => { const input = 'tw`[https://en.wikipedia.org/wiki]`' expect.assertions(1) return run(input) .then(result => { expect(result).toMatchFormattedJavaScript(``) }) .catch(error => { expect(error).toMatchFormattedError(` MacroError: unknown: ✕ [https://en.wikipedia.org/wiki] was not found `) }) }) it('should generate seemingly invalid CSS', async () => { const input = 'tw`[stillworks:/example]`' return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ stillworks: "/example" }); `) }) }) it('should preserve commas', async () => { const input = 'tw`[path[fill="rgb(51,100,51)"]]:[fill:white]`' return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ '& path[fill="rgb(51,100,51)"]': { fill: "white" } }); `) }) }) ================================================ FILE: tests/arbitraryValues.test.ts ================================================ import { run } from './util/run' it('should be possible to differentiate between decoration utilities', async () => { const input = 'tw`decoration-[#ccc] decoration-[3px]`' return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ textDecorationColor: "#ccc", textDecorationThickness: "3px" }); `) }) }) it('should support modifiers for arbitrary values that contain the separator', async () => { const input = "tw`hover:bg-[url('https://github.com/tailwindlabs.png')]`" return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ ":hover": { backgroundImage: "url('https://github.com/tailwindlabs.png')" } }); `) }) }) it('should support arbitrary values for various background utilities', async () => { const input = [ 'tw`bg-gradient-to-r`', 'tw`bg-red-500`', "tw`bg-[url('/image-1-0.png')]`", 'tw`bg-[#ff0000]`', 'tw`bg-[rgb(var(--bg-color))]`', 'tw`bg-[hsl(var(--bg-color))]`', 'tw`bg-[url:var(--image-url)]`', 'tw`bg-[color:var(--bg-color)]`', ].join('; ') return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ backgroundImage: 'linear-gradient(to right, var(--tw-gradient-stops))' }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(239 68 68 / var(--tw-bg-opacity))', }) ;({ backgroundImage: "url('/image-1-0.png')" }) ;({ '--tw-bg-opacity': '1', backgroundColor: 'rgb(255 0 0 / var(--tw-bg-opacity))', }) ;({ backgroundColor: 'rgb(var(--bg-color))' }) ;({ backgroundColor: 'hsl(var(--bg-color))' }) ;({ backgroundImage: 'var(--image-url)' }) ;({ backgroundColor: 'var(--bg-color)' }) `) }) }) it('should error if an unknown typehint is used', async () => { const input = 'tw`inset-[hmm:12px]`' expect.assertions(1) return run(input) .then(result => { expect(result).toMatchFormattedJavaScript(``) }) .catch(error => { expect(error).toMatchFormattedError(` MacroError: unknown: ✕ inset-[hmm:12px] was not found Try one of these classes: - inset-12 > 3rem - inset-px > 1px - inset-x-12 > 3rem - inset-x-px > 1px - inset-y-12 > 3rem `) }) }) it('should handle unknown typehints', async () => { const input = 'tw`w-[length:12px]`' return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ width: "12px" }); `) }) }) it('should convert _ to spaces', async () => { const input = [ 'tw`grid-cols-[200px_repeat(auto-fill,minmax(15%,100px))_300px]`', 'tw`grid-rows-[200px_repeat(auto-fill,minmax(15%,100px))_300px]`', 'tw`shadow-[0px_0px_4px_black]`', 'tw`rounded-[0px_4px_4px_0px]`', 'tw`m-[8px_4px]`', 'tw`p-[8px_4px]`', 'tw`flex-[1_1_100%]`', 'tw`col-[span_3_/_span_8]`', 'tw`row-[span_3_/_span_8]`', 'tw`auto-cols-[minmax(0,_1fr)]`', 'tw`drop-shadow-[0px_1px_3px_black]`', 'tw`content-[_hello_world_]`', 'tw`content-[___abc____]`', "tw`content-['__hello__world__']`", ].join('; ') return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ gridTemplateColumns: "200px repeat(auto-fill,minmax(15%,100px)) 300px" }); ({ gridTemplateRows: "200px repeat(auto-fill,minmax(15%,100px)) 300px" }); ({ "--tw-shadow": "0px 0px 4px black", "--tw-shadow-colored": "0px 0px 4px var(--tw-shadow-color)", boxShadow: "var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)", }); ({ borderRadius: "0px 4px 4px 0px" }); ({ margin: "8px 4px" }); ({ padding: "8px 4px" }); ({ flex: "1 1 100%" }); ({ gridColumn: "span 3 / span 8" }); ({ gridRow: "span 3 / span 8" }); ({ gridAutoColumns: "minmax(0, 1fr)" }); ({ "--tw-drop-shadow": "drop-shadow(0px 1px 3px black)", filter: "var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)", }); ({ "--tw-content": "hello world", content: "var(--tw-content)" }); ({ "--tw-content": "abc", content: "var(--tw-content)" }); ({ "--tw-content": "' hello world '", content: "var(--tw-content)" }); `) }) }) it('should not convert escaped underscores with spaces', async () => { const input = "tw`content-['snake\\_case']`" return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ "--tw-content": "'snake_case'", content: "var(--tw-content)" }); `) }) }) it('should support colons in URLs', async () => { const input = "tw`bg-[url('https://www.spacejam.com/1996/img/bg_stars.gif')]`" return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ backgroundImage: "url('https://www.spacejam.com/1996/img/bg_stars.gif')" }); `) }) }) it('should support unescaped underscores in URLs', async () => { const input = "tw`bg-[url('brown_potato.jpg'),_url('red_tomato.png')]`" return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ backgroundImage: "url('brown_potato.jpg'), url('red_tomato.png')" }); `) }) }) it('reads theme values in arbitrary values (without quotes)', async () => { const input = 'tw`w-[theme(spacing.1)] w-[theme(spacing[0.5])]`' const config = { theme: { spacing: { 0.5: 'calc(.5 * .25rem)', 1: 'calc(1 * .25rem)' } }, } return run(input, config).then(result => { expect(result).toMatchFormattedJavaScript(` ({ width: "calc(.5 * .25rem)" }); `) }) }) it('reads theme values in arbitrary values (with quotes)', async () => { const input = "tw`w-[theme('spacing.1')] w-[theme('spacing[0.5]')]`" const config = { theme: { spacing: { 0.5: 'calc(.5 * .25rem)', 1: 'calc(1 * .25rem)' } }, } return run(input, config).then(result => { expect(result).toMatchFormattedJavaScript(` ({ width: "calc(.5 * .25rem)" }); `) }) }) it('reads theme values in arbitrary values (with quotes) when inside calc or similar functions', async () => { const input = "tw`w-[calc(100%-theme('spacing.1'))] w-[calc(100%-theme('spacing[0.5]'))]`" const config = { theme: { spacing: { 0.5: 'calc(.5 * .25rem)', 1: 'calc(1 * .25rem)', }, }, } return run(input, config).then(result => { expect(result).toMatchFormattedJavaScript(` ({ width: "calc(100% - calc(.5 * .25rem))" }); `) }) }) it('should allow omitting the DEFAULT key when using theme', async () => { const input = 'tw`bg-[theme(colors.black)]`' const config = { theme: { colors: { black: { DEFAULT: '#111111', pure: '#000000 ' } } }, } return run(input, config).then(result => { expect(result).toMatchFormattedJavaScript(` ({ "--tw-bg-opacity": "1", backgroundColor: "rgb(17 17 17 / var(--tw-bg-opacity))" }); `) }) }) it('should allow using the DEFAULT key when using theme', async () => { const input = 'tw`bg-[theme(colors.black.DEFAULT)]`' const config = { theme: { colors: { black: { DEFAULT: '#111111', pure: '#000000 ' } } }, } return run(input, config).then(result => { expect(result).toMatchFormattedJavaScript(` ({ "--tw-bg-opacity": "1", backgroundColor: "rgb(17 17 17 / var(--tw-bg-opacity))" }); `) }) }) it('should allow dots instead of square brackets for decimal point values', async () => { const input = 'tw`ml-[theme(spacing.0.5)]`' return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ "marginLeft": "0.125rem" }); `) }) }) it('should not output unparsable arbitrary CSS values', async () => { // eslint-disable-next-line no-template-curly-in-string const input = 'tw`w-[${sizes.width}]`' expect.assertions(1) return run(input) .then(result => { expect(result).toMatchFormattedJavaScript(``) }) .catch(error => { expect(error).toMatchFormattedError(` MacroError: unknown: ✕ Your classes need to be complete strings for Twin to detect them correctly Read more at https://twinredirect.page.link/template-literals `) }) }) it('should correctly validate each part when checking for `percentage` data types', async () => { const input = 'tw`bg-[top_right_50%]`' return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ backgroundPosition: "top right 50%" }); `) }) }) it('should correctly validate background size', async () => { const input = 'tw`bg-[length:auto_auto,cover,_contain,10px,10px_10%]`' return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ backgroundSize: "auto auto,cover, contain,10px,10px 10%" }); `) }) }) it('should correctly validate combination of percentage and length', async () => { const input = 'tw`bg-[50px_10%]`' return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ "backgroundPosition": "50px 10%" }); `) }) }) it('can explicitly specify type for percentage and length', async () => { const input = 'tw`bg-[position:50%_10%]`' return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ "backgroundPosition": "50% 10%" }); `) }) }) it('can use CSS variables as arbitrary modifiers without `var()`', async () => { const input = [ 'tw`text-sm/[--line-height]`', 'tw`bg-red-500/[--opacity]`', ].join('; ') return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ "fontSize": "0.875rem", "lineHeight": "var(--line-height)" }); ({ "backgroundColor": "rgb(239 68 68 / var(--opacity))" }); `) }) }) it('can use CSS variables as arbitrary values without `var()`', async () => { const input = [ 'tw`w-[--width-var]`', 'tw`bg-[--color-var]`', 'tw`bg-[--color-var,#000]`', 'tw`bg-[length:--size-var]`', 'tw`text-[length:--size-var,12px]`', ].join('; ') return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ "width": "var(--width-var)" }); ({ "backgroundColor": "var(--color-var)" }); ({ "backgroundColor": "var(--color-var,#000)" }); ({ "backgroundSize": "var(--size-var)" }); ({ "fontSize": "var(--size-var,12px)" }); `) }) }) ================================================ FILE: tests/arbitraryVariants.test.ts ================================================ import { run, html } from './util/run' test('basic arbitrary variants', async () => { const input = 'tw`[&>*]:underline`' return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ '>*': { textDecorationLine: 'underline' } }) `) }) }) test('spaces in selector (using _)', async () => { const input = 'tw`[.a.b_&]:underline`' return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ '.a.b &': { textDecorationLine: 'underline' } }) `) }) }) test('spaces in selector (using " ")', async () => { const input = 'tw`[.a.b &]:underline`' return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ '.a.b &': { textDecorationLine: 'underline' } }) `) }) }) test('arbitrary variants with modifiers', async () => { const input = 'tw`dark:lg:hover:[& > *]:underline`' return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ '@media (min-width: 1024px)': { "@media (prefers-color-scheme: dark)": { ":hover > *": { textDecorationLine: "underline" } }, } }) `) }) }) test('variants without & or an at-rule are handled', async () => { const input = html` <>
` const config = { corePlugins: { preflight: false } } return run(input, config).then(result => { expect(result).toMatchFormattedJavaScript(` React.createElement( React.Fragment, null, React.createElement('div', { css: { '& div': { textDecorationLine: 'underline' } }, }), React.createElement('div', { css: { ':hover': { textDecorationLine: 'underline' } }, }), React.createElement('div', { css: { '& wtf-bbq': { textDecorationLine: 'underline' } }, }), React.createElement("div", { css: { "lol:hover": { textDecorationLine: "underline" } } }) ) `) }) }) test('arbitrary variants are sorted correctly', async () => { const input = 'tw`[& > *]:underline underline lg:underline`' return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ textDecorationLine: 'underline', '@media (min-width: 1024px)': { textDecorationLine: 'underline' }, '> *': { textDecorationLine: 'underline' }, }) `) }) }) test('using the important modifier', async () => { const input = 'tw`[&>*]:!underline`' return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ '>*': { textDecorationLine: 'underline !important' } }) `) }) }) test('at-rules', async () => { const input = 'tw`[@supports (what: ever)]:underline`' return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ '@supports (what: ever)': { textDecorationLine: 'underline' } }) `) }) }) test('at-rules with selector modifications', async () => { const input = 'tw`[@media (hover: hover) { &:hover }]:underline`' return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ '@media (hover: hover)': { ':hover': { textDecorationLine: 'underline' } } }) `) }) }) test('nested at-rules with selector modifications', async () => { const input = 'tw`[@media screen { @media (hover: hover) { &:hover } }]:underline`' return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ '@media screen': { '@media (hover: hover)': { ':hover': { textDecorationLine: 'underline' } }, }, }) `) }) }) test('attribute selectors', async () => { const input = 'tw`[&[data-open]]:underline`' return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ '&[data-open]': { textDecorationLine: 'underline' } }) `) }) }) test('multiple attribute selectors', async () => { const input = 'tw`[&[data-foo][data-bar]:not([data-baz])]:underline`' return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ '&[data-foo][data-bar]:not([data-baz])': { textDecorationLine: 'underline', }, }) `) }) }) test('multiple attribute selectors with custom separator (1)', async () => { const input = 'tw`[&[data-foo][data-bar]:not([data-baz])]__underline`' const config = { separator: '__' } return run(input, config).then(result => { expect(result).toMatchFormattedJavaScript(` ({ '&[data-foo][data-bar]:not([data-baz])': { textDecorationLine: 'underline', }, }) `) }) }) test('multiple attribute selectors with custom separator (2)', async () => { const input = 'tw`[&[data-foo][data-bar]:not([data-baz])]_@underline`' const config = { separator: '_@' } return run(input, config).then(result => { expect(result).toMatchFormattedJavaScript(` ({ '&[data-foo][data-bar]:not([data-baz])': { textDecorationLine: 'underline', }, }) `) }) }) test('keeps escaped underscores', async () => { const input = 'tw`[&_.foo\\_bar]:underline`' return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ '& .foo_bar': { textDecorationLine: 'underline' } }) `) }) }) test('keeps escaped underscores with multiple arbitrary variants', async () => { const input = 'tw`[&_.foo\\_bar]:[&_.bar\\_baz]:underline`' return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ '& .foo_bar .bar_baz': { textDecorationLine: 'underline' } }); `) }) }) test('keeps escaped underscores in arbitrary variants mixed with normal variants', async () => { const input = [ 'tw`[&_.foo\\_bar]:hover:underline`', 'tw`hover:[&_.foo\\_bar]:underline`', ].join('; ') return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ "& .foo_bar:hover": { textDecorationLine: "underline" } }); ({ ':hover .foo_bar': { textDecorationLine: 'underline' } }); `) }) }) test('allows attribute variants with quotes', async () => { const input = [ "tw`[&[data-test='2']]:underline`", 'tw`[&[data-test="2"]]:underline`', ].join('; ') return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ "&[data-test='2']": { textDecorationLine: 'underline' } }); ({ '&[data-test="2"]': { textDecorationLine: 'underline' } }); `) }) }) test('classes in arbitrary variants should not be prefixed', async () => { const input = 'tw`[.foo &]:tw-text-red-400 [.fum &]:first:tw-text-green-400`' const config = { prefix: 'tw-' } return run(input, config).then(result => { expect(result).toMatchFormattedJavaScript(` ({ '.foo &': { '--tw-text-opacity': '1', color: 'rgb(248 113 113 / var(--tw-text-opacity))', }, '.fum &:first-child': { '--tw-text-opacity': '1', color: 'rgb(74 222 128 / var(--tw-text-opacity))', }, }) `) }) }) test('classes in the same arbitrary variant should not be prefixed', async () => { const input = [ 'tw`[.foo &]:tw-text-red-400 [.foo &]:tw-bg-white`', 'tw`[& .foo]:tw-text-red-400 [& .foo]:tw-bg-white`', ].join('; ') const config = { prefix: 'tw-' } return run(input, config).then(result => { expect(result).toMatchFormattedJavaScript(` ({ '.foo &': { '--tw-bg-opacity': '1', backgroundColor: 'rgb(255 255 255 / var(--tw-bg-opacity))', '--tw-text-opacity': '1', color: 'rgb(248 113 113 / var(--tw-text-opacity))', }, }) ;({ '& .foo': { '--tw-bg-opacity': '1', backgroundColor: 'rgb(255 255 255 / var(--tw-bg-opacity))', '--tw-text-opacity': '1', color: 'rgb(248 113 113 / var(--tw-text-opacity))', }, }) `) }) }) test('parent selectors before elements are kept', async () => { const input = 'tw`[§ion]:block`' return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ "§ion": { display: "block" } }); `) }) }) test('errors when separator is forgotten against a group', async () => { const input = 'tw`[em](block)`' expect.assertions(1) return run(input) .then(result => { expect(result).toMatchFormattedJavaScript(``) }) .catch(error => { expect(error).toMatchFormattedError(` MacroError: unknown: ✕ [em](block) was not found `) }) }) it('should support aria variants', async () => { const input = [ 'tw`aria-checked:underline`', 'tw`aria-[sort=ascending]:underline`', 'tw`aria-[labelledby=a_b]:underline`', 'tw`group-aria-checked:underline`', 'tw`peer-aria-checked:underline`', 'tw`group-aria-checked/foo:underline`', 'tw`peer-aria-checked/foo:underline`', 'tw`group-aria-[sort=ascending]:underline`', 'tw`peer-aria-[sort=ascending]:underline`', 'tw`group-aria-[labelledby=a_b]:underline`', 'tw`peer-aria-[labelledby=a_b]:underline`', 'tw`group-aria-[sort=ascending]/foo:underline`', 'tw`peer-aria-[sort=ascending]/foo:underline`', ].join('; ') return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ '&[aria-checked="true"]': { "textDecorationLine": "underline" } }); ({ "&[aria-sort=ascending]": { "textDecorationLine": "underline" } }); ({ "&[aria-labelledby=a b]": { "textDecorationLine": "underline" } }); ({ '.group[aria-checked="true"] &': { "textDecorationLine": "underline" } }); ({ '.peer[aria-checked="true"] ~ &': { "textDecorationLine": "underline" } }); ({ '.group\\\\/foo[aria-checked="true"] &': { "textDecorationLine": "underline" } }); ({ '.peer\\\\/foo[aria-checked="true"] ~ &': { "textDecorationLine": "underline" } }); ({ ".group[aria-sort=ascending] &": { "textDecorationLine": "underline" } }); ({ ".peer[aria-sort=ascending] ~ &": { "textDecorationLine": "underline" } }); ({ ".group[aria-labelledby=a b] &": { "textDecorationLine": "underline" } }); ({ ".peer[aria-labelledby=a b] ~ &": { "textDecorationLine": "underline" } }); ({ ".group\\\\/foo[aria-sort=ascending] &": { "textDecorationLine": "underline" } }); ({ ".peer\\\\/foo[aria-sort=ascending] ~ &": { "textDecorationLine": "underline" } }); `) }) }) it('should support data variants', async () => { const input = [ 'tw`data-checked:underline`', 'tw`data-[position=top]:underline`', 'tw`data-[foo=bar_baz]:underline`', 'tw`group-data-checked:underline`', 'tw`peer-data-checked:underline`', 'tw`group-data-checked/foo:underline`', 'tw`peer-data-checked/foo:underline`', 'tw`group-data-[position=top]:underline`', 'tw`peer-data-[position=top]:underline`', 'tw`group-data-[foo=bar_baz]:underline`', 'tw`peer-data-[foo=bar_baz]:underline`', 'tw`group-data-[position=top]/foo:underline`', 'tw`peer-data-[position=top]/foo:underline`', ].join('; ') const config = { theme: { data: { checked: 'ui~="checked"' } } } return run(input, config).then(result => { expect(result).toMatchFormattedJavaScript(` ({ '&[data-ui~="checked"]': { "textDecorationLine": "underline" } }); ({ "&[data-position=top]": { "textDecorationLine": "underline" } }); ({ "&[data-foo=bar baz]": { "textDecorationLine": "underline" } }); ({ '.group[data-ui~="checked"] &': { "textDecorationLine": "underline" } }); ({ '.peer[data-ui~="checked"] ~ &': { "textDecorationLine": "underline" } }); ({ '.group\\\\/foo[data-ui~="checked"] &': { "textDecorationLine": "underline" } }); ({ '.peer\\\\/foo[data-ui~="checked"] ~ &': { "textDecorationLine": "underline" } }); ({ ".group[data-position=top] &": { "textDecorationLine": "underline" } }); ({ ".peer[data-position=top] ~ &": { "textDecorationLine": "underline" } }); ({ ".group[data-foo=bar baz] &": { "textDecorationLine": "underline" } }); ({ ".peer[data-foo=bar baz] ~ &": { "textDecorationLine": "underline" } }); ({ ".group\\\\/foo[data-position=top] &": { "textDecorationLine": "underline" } }); ({ ".peer\\\\/foo[data-position=top] ~ &": { "textDecorationLine": "underline" } }); `) }) }) it('should support supports', async () => { const input = [ // Property check 'tw`supports-[display:grid]:grid`', // Value with spaces, needs to be normalized 'tw`supports-[transform-origin:5%_5%]:underline`', // Selectors (raw) 'tw`supports-[selector(A>B)]:underline`', // 'not' check (raw) 'tw`supports-[not(foo:bar)]:underline`', // 'or' check (raw) 'tw`supports-[(foo:bar)or(bar:baz)]:underline`', // 'and' check (raw) 'tw`supports-[(foo:bar)and(bar:baz)]:underline`', // No value give for the property, defaulting to prop: var(--tw) 'tw`supports-[container-type]:underline`', // Named supports usage 'tw`supports-grid:underline`', ].join('; ') const config = { theme: { supports: { grid: 'display: grid' } } } return run(input, config).then(result => { expect(result).toMatchFormattedJavaScript(` ({ "@supports (display:grid)": { "display": "grid" } }); ({ "@supports (transform-origin:5% 5%)": { "textDecorationLine": "underline" } }); ({ "@supports selector(A>B)": { "textDecorationLine": "underline" } }); ({ "@supports not (foo:bar)": { "textDecorationLine": "underline" } }); ({ "@supports (foo:bar) or (bar:baz)": { "textDecorationLine": "underline" } }); ({ "@supports (foo:bar) and (bar:baz)": { "textDecorationLine": "underline" } }); ({ "@supports (container-type: var(--tw))": { "textDecorationLine": "underline" } }); ({ "@supports (display: grid)": { "textDecorationLine": "underline" } }); `) }) }) it('should be possible to use modifiers and arbitrary groups', async () => { const input = [ // Default group usage 'tw`group-hover:underline`', // Arbitrary variants with pseudo class for group // With & 'tw`group-[&:focus]:underline`', // Without & 'tw`group-[:hover]:underline`', // Arbitrary variants with attributes selectors for group // With & 'tw`group-[&[data-open]]:underline`', // Without & 'tw`group-[[data-open]]:underline`', // Arbitrary variants with other selectors // With & 'tw`group-[.in-foo_&]:underline`', // Without & 'tw`group-[.in-foo]:underline`', // The same as above, but with modifiers 'tw`group-hover/foo:underline`', 'tw`group-[&:focus]/foo:underline`', 'tw`group-[:hover]/foo:underline`', 'tw`group-[&[data-open]]/foo:underline`', 'tw`group-[[data-open]]/foo:underline`', 'tw`group-[.in-foo_&]/foo:underline`', 'tw`group-[.in-foo]/foo:underline`', ].join('; ') return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ ".group:hover &": { "textDecorationLine": "underline" } }); ({ ".group:focus &": { "textDecorationLine": "underline" } }); ({ ".group:hover &": { "textDecorationLine": "underline" } }); ({ ".group[data-open] &": { "textDecorationLine": "underline" } }); ({ ".group[data-open] &": { "textDecorationLine": "underline" } }); ({ ".in-foo .group &": { "textDecorationLine": "underline" } }); ({ ".group.in-foo &": { "textDecorationLine": "underline" } }); ({ ".group\\\\/foo:hover &": { "textDecorationLine": "underline" } }); ({ ".group\\\\/foo:focus &": { "textDecorationLine": "underline" } }); ({ ".group\\\\/foo:hover &": { "textDecorationLine": "underline" } }); ({ ".group\\\\/foo[data-open] &": { "textDecorationLine": "underline" } }); ({ ".group\\\\/foo[data-open] &": { "textDecorationLine": "underline" } }); ({ ".in-foo .group\\\\/foo &": { "textDecorationLine": "underline" } }); ({ ".group\\\\/foo.in-foo &": { "textDecorationLine": "underline" } }); `) }) }) it('should be possible to use modifiers and arbitrary peers', async () => { const input = [ // Default peer usage 'tw`peer-hover:underline`', // Arbitrary variants with pseudo class for peer // With & 'tw`peer-[&:focus]:underline`', // Without & 'tw`peer-[:hover]:underline`', // Arbitrary variants with attributes selectors for peer // With & 'tw`peer-[&[data-open]]:underline`', // Without & 'tw`peer-[[data-open]]:underline`', // Arbitrary variants with other selectors // With & 'tw`peer-[.in-foo_&]:underline`', // Without & 'tw`peer-[.in-foo]:underline`', // The same as above, but with modifiers 'tw`peer-hover/foo:underline`', 'tw`peer-[&:focus]/foo:underline`', 'tw`peer-[:hover]/foo:underline`', 'tw`peer-[&[data-open]]/foo:underline`', 'tw`peer-[[data-open]]/foo:underline`', 'tw`peer-[.in-foo_&]/foo:underline`', 'tw`peer-[.in-foo]/foo:underline`', ].join('; ') const result = await run(input) expect(result).toMatchFormattedJavaScript(` ({ ".peer:hover ~ &": { "textDecorationLine": "underline" } }); ({ ".peer:focus ~ &": { "textDecorationLine": "underline" } }); ({ ".peer:hover ~ &": { "textDecorationLine": "underline" } }); ({ ".peer[data-open] ~ &": { "textDecorationLine": "underline" } }); ({ ".peer[data-open] ~ &": { "textDecorationLine": "underline" } }); ({ ".in-foo .peer ~ &": { "textDecorationLine": "underline" } }); ({ ".peer.in-foo ~ &": { "textDecorationLine": "underline" } }); ({ ".peer\\\\/foo:hover ~ &": { "textDecorationLine": "underline" } }); ({ ".peer\\\\/foo:focus ~ &": { "textDecorationLine": "underline" } }); ({ ".peer\\\\/foo:hover ~ &": { "textDecorationLine": "underline" } }); ({ ".peer\\\\/foo[data-open] ~ &": { "textDecorationLine": "underline" } }); ({ ".peer\\\\/foo[data-open] ~ &": { "textDecorationLine": "underline" } }); ({ ".in-foo .peer\\\\/foo ~ &": { "textDecorationLine": "underline" } }); ({ ".peer\\\\/foo.in-foo ~ &": { "textDecorationLine": "underline" } }); `) }) describe('auto parent selector', () => { test('selectors containing a parent selector are preserved', async () => { const input = 'tw`md:[.test &]:m-1`' return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ "@media (min-width: 768px)": { ".test &": { margin: "0.25rem" } } }); `) }) }) test('media queries are preserved', async () => { const input = 'tw`[@media blah]:m-1`' return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ "@media blah": { margin: "0.25rem" }, }); `) }) }) test('pseudo elements are prefixed', async () => { const input = 'tw`[:hover]:m-1`' return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ ":hover": { margin: "0.25rem" } }); `) }) }) test('selectors are prefixed when media variants precede', async () => { const input = 'tw`md:sm:[one]:m-1`' return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ "@media (min-width: 640px)": { "@media (min-width: 768px)": { "& one": { margin: "0.25rem" }, } }, }); `) }) }) test('multiple parentless variants have order preserved (groups)', async () => { const input = 'tw`[one]:(m-2 [two]:(m-3 [three]:(m-4)))`' return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ '& one': { margin: '0.5rem' }, '& one two': { margin: '0.75rem' }, '& one two three': { margin: '1rem' }, }); `) }) }) test('multiple parentless variants have order preserved (groupless)', async () => { const input = 'tw`[one]:[two]:[three]:m-4`' return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ '& one two three': { margin: '1rem' } }); `) }) }) test('each selector is visited individually', async () => { const input = 'tw`[#blah,#app,pre,.pre,&.post,& section,.main &]:m-4`' return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ "& #blah,& #app,& pre,& .pre,&.post,& section,.main &": { margin: '1rem' } }); `) }) }) test('mixed variants without parent selectors are handled', async () => { const input = 'tw`[one]:not-link:[two]:m-4`' return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ "one:not(:link) two": { margin: "1rem" } }); `) }) }) test('mixed variants without parent selectors are handled 2', async () => { const input = 'tw`not-link:[one]:last:[two]:m-4`' return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ ":not(:link) one:last-child two": { "margin": "1rem" } }); `) }) }) }) test('parent selector at end is handled', async () => { const input = 'tw`[path&]:first:[stroke: #000]`' return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ "path:first-child": { "stroke": "#000" } }); `) }) }) test('nested at-rules', async () => { const input = 'tw`[@media_screen { @media (hover: hover) }]:underline`' return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ '@media screen': { '@media (hover: hover)': { textDecorationLine: 'underline' } } }); `) }) }) test('nested at-rules 2', async () => { const input = 'tw`print:[@page]:underline`' return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ '@media print': { '@page': { textDecorationLine: 'underline' } } }); `) }) }) test('multiple variants containing commas throw unsupported error', async () => { const input = 'tw`[.this,.that]:first:block`' return run(input) .then(result => { expect(result).toMatchFormattedJavaScript(``) }) .catch(error => { expect(error).toMatchFormattedError(` MacroError: unknown: ✕ The variants on [.this,.that]:first:block are invalid tailwind and twin classes To fix, either reduce all variants into a single arbitrary variant: From: \`[.this, .that]:first:block\` To: \`[.this:first, .that:first]:block\` Or split the class into separate classes instead of using commas: From: \`[.this, .that]:first:block\` To: \`[.this]:first:block [.that]:first:block\`\n\nRead more at https://twinredirect.page.link/arbitrary-variants-with-commas `) }) }) ================================================ FILE: tests/config.test.ts ================================================ import type { TwinConfig } from './types' import { run, html } from './util/run' describe('includeClassNames', () => { describe('When set to true', () => { test('Then a tw class in the className attribute', async () => { const input = html`
` const twinConfig = { includeClassNames: true } return run(input, undefined, twinConfig).then((result: string) => { expect(result).toMatchFormattedJavaScript(` React.createElement("div", { css: { ":first-child": { display: "block" } } }); `) }) }) test('Then non-tw classes are preserved', async () => { const input = html`
` const twinConfig = { includeClassNames: true } return run(input, undefined, twinConfig).then((result: string) => { expect(result).toMatchFormattedJavaScript(` React.createElement("div", { className: "last:non-tw-class another-non-tw-class", css: { ":last-child": { marginTop: "1.25rem", display: "inline" } }, }); `) }) }) }) describe('When set to false', () => { test('Then all classes are preserved', async () => { const input = html`
` const twinConfig = { includeClassNames: false } return run(input, undefined, twinConfig).then((result: string) => { expect(result).toMatchFormattedJavaScript(` React.createElement("div", { className: "last:(inline non-tw-class mt-5) another-non-tw-class" }); `) }) }) }) }) describe('sassyPseudo', () => { describe('When set to true', () => { test('Then ::before is prefixed with the parent selector', async () => { const input = 'tw`before:block`' const twinConfig = { sassyPseudo: true } return run(input, undefined, twinConfig).then(result => { expect(result).toMatchFormattedJavaScript(` ({ "&::before": { "content": "var(--tw-content)", "display": "block" } }); `) }) }) }) describe('When set to false', () => { test('Then ::before is not prefixed with the parent selector', async () => { const input = 'tw`before:block`' const twinConfig = { sassyPseudo: false } return run(input, undefined, twinConfig).then(result => { expect(result).toMatchFormattedJavaScript(` ({ "::before": { "content": "var(--tw-content)", "display": "block" } }); `) }) }) }) }) describe('config', () => { describe('When tailwind config added via twin config', () => { test('Then tailwind config colors can be used', async () => { const input = 'tw`bg-primary text-white`' const twinConfig = { config: { theme: { extend: { colors: { primary: 'black' } } } }, } return run(input, undefined, twinConfig).then(result => { expect(result).toMatchFormattedJavaScript(` ({ "--tw-bg-opacity": "1", backgroundColor: "rgb(0 0 0 / var(--tw-bg-opacity))", "--tw-text-opacity": "1", color: "rgb(255 255 255 / var(--tw-text-opacity))", }); `) }) }) }) describe('When tailwind config added via twin config with added tailwind config', () => { test('Then custom config from twin config is dropped', async () => { const input = 'tw`bg-primary text-red-500`' const tailwindConfig = { theme: { extend: { colors: { primary: 'black' } } }, } const twinConfig = { config: { theme: { extend: { colors: { primary: 'white' } } }, }, } return run(input, tailwindConfig, twinConfig).then(result => { expect(result).toMatchFormattedJavaScript( ` ({ "--tw-bg-opacity": "1", backgroundColor: "rgb(0 0 0 / var(--tw-bg-opacity))", "--tw-text-opacity": "1", color: "rgb(239 68 68 / var(--tw-text-opacity))", }); ` ) }) }) test('Then error when using color from twin config', async () => { const input = 'tw`bg-primary text-red-500 text-sec`' const tailwindConfig = { theme: { extend: { colors: { primary: 'black' } } }, } const twinConfig = { config: { theme: { extend: { colors: { primary: 'white', sec: 'red' } } }, }, } expect.assertions(1) return run(input, tailwindConfig, twinConfig) .then(result => { expect(result).toMatchFormattedJavaScript(``) }) .catch(error => { expect(error).toMatchFormattedError(` MacroError: unknown: ✕ text-sec was not found Try one of these classes: - text-sm - select-text > select-text - text-base - text-start > text-start - text-xs `) }) }) }) }) describe('moveKeyframesToGlobalStyles', () => { describe('When set to true', () => { test('Then animation classes don’t have keyframes', async () => { const input = html`
` const twinConfig = { moveKeyframesToGlobalStyles: true } return run(input, undefined, twinConfig).then((result: string) => { expect(result).toMatchFormattedJavaScript(` React.createElement("div", { css: { animation: "bounce 1s infinite" } }); `) }) }) test('Then animation classes do have keyframes', async () => { const input = html`
` const twinConfig = { moveKeyframesToGlobalStyles: false } return run(input, undefined, twinConfig).then((result: string) => { expect(result).toMatchFormattedJavaScript(` React.createElement("div", { css: { "@keyframes bounce": { "0%, 100%": { transform: "translateY(-25%)", animationTimingFunction: "cubic-bezier(0.8,0,1,1)", }, "50%": { transform: "none", animationTimingFunction: "cubic-bezier(0,0,0.2,1)" }, }, animation: "bounce 1s infinite", }, }); `) }) }) test('Stitches has no keyframes', async () => { const input = html`
` const twinConfig = { preset: 'stitches' as string, stitchesConfig: 'tests/stitches.config.js', } as unknown as TwinConfig return run(input, undefined, twinConfig).then((result: string) => { expect(result).toMatchFormattedJavaScript(` import { styled as _styled } from "tests/stitches.config.js"; const _TwComponent = _styled("div", { animation: "bounce 1s infinite" }); React.createElement(_TwComponent, null); `) }) }) }) }) ================================================ FILE: tests/containerQueries.test.ts ================================================ import { run } from './util/run' it('container queries', async () => { const input = [ 'tw`@container`', 'tw`@container-normal`', 'tw`@container/sidebar`', 'tw`@container-normal/sidebar`', 'tw`@container-[size]/sidebar`', 'tw`@md:underline`', 'tw`@md/container1:underline`', 'tw`@md/container2:underline`', 'tw`@md/container10:underline`', 'tw`@sm:underline`', 'tw`@sm/container1:underline`', 'tw`@sm/container2:underline`', 'tw`@sm/container10:underline`', 'tw`@lg:underline`', 'tw`@lg/container1:underline`', 'tw`@lg/container2:underline`', 'tw`@lg/container10:underline`', 'tw`@[1024px]:underline`', 'tw`@[1024px]/container1:underline`', 'tw`@[312px]:underline`', 'tw`@[200rem]:underline`', 'tw`@[123px]:underline`', ].join('; ') const config = { theme: { containers: { sm: '320px', md: '768px', lg: '1024px', }, }, plugins: [require('@tailwindcss/container-queries')], } return run(input, config).then(result => { expect(result).toMatchFormattedJavaScript(` ({ "containerType": "inline-size" }); ({ "containerType": "normal" }); ({ "containerType": "inline-size", "containerName": "sidebar" }); ({ "containerType": "normal", "containerName": "sidebar" }); ({ "containerType": "size", "containerName": "sidebar" }); ({ "@container (min-width: 768px)": { "textDecorationLine": "underline" } }); ({ "@container container1 (min-width: 768px)": { "textDecorationLine": "underline" } }); ({ "@container container2 (min-width: 768px)": { "textDecorationLine": "underline" } }); ({ "@container container10 (min-width: 768px)": { "textDecorationLine": "underline" } }); ({ "@container (min-width: 320px)": { "textDecorationLine": "underline" } }); ({ "@container container1 (min-width: 320px)": { "textDecorationLine": "underline" } }); ({ "@container container2 (min-width: 320px)": { "textDecorationLine": "underline" } }); ({ "@container container10 (min-width: 320px)": { "textDecorationLine": "underline" } }); ({ "@container (min-width: 1024px)": { "textDecorationLine": "underline" } }); ({ "@container container1 (min-width: 1024px)": { "textDecorationLine": "underline" } }); ({ "@container container2 (min-width: 1024px)": { "textDecorationLine": "underline" } }); ({ "@container container10 (min-width: 1024px)": { "textDecorationLine": "underline" } }); ({ "@container (min-width: 1024px)": { "textDecorationLine": "underline" } }); ({ "@container container1 (min-width: 1024px)": { "textDecorationLine": "underline" } }); ({ "@container (min-width: 312px)": { "textDecorationLine": "underline" } }); ({ "@container (min-width: 200rem)": { "textDecorationLine": "underline" } }); ({ "@container (min-width: 123px)": { "textDecorationLine": "underline" } }); `) }) }) it('should be possible to use default container queries', async () => { const input = [ 'tw`@md:underline`', 'tw`@lg:underline`', 'tw`@sm:underline`', 'tw`@xs:underline`', 'tw`@7xl:underline`', 'tw`@6xl:underline`', 'tw`@3xl:underline`', 'tw`@5xl:underline`', ].join('; ') const config = { theme: {}, plugins: [require('@tailwindcss/container-queries')], } return run(input, config).then(result => { expect(result).toMatchFormattedJavaScript(` ({ "@container (min-width: 28rem)": { "textDecorationLine": "underline" } }); ({ "@container (min-width: 32rem)": { "textDecorationLine": "underline" } }); ({ "@container (min-width: 24rem)": { "textDecorationLine": "underline" } }); ({ "@container (min-width: 20rem)": { "textDecorationLine": "underline" } }); ({ "@container (min-width: 80rem)": { "textDecorationLine": "underline" } }); ({ "@container (min-width: 72rem)": { "textDecorationLine": "underline" } }); ({ "@container (min-width: 48rem)": { "textDecorationLine": "underline" } }); ({ "@container (min-width: 64rem)": { "textDecorationLine": "underline" } }); `) }) }) ================================================ FILE: tests/dividers.test.ts ================================================ import { run } from './util/run' it('errors with extra dividers between variants', async () => { const input = 'tw`[&_.test]::block`' return run(input) .then(result => { expect(result).toMatchFormattedJavaScript(``) }) .catch(error => { expect(error).toMatchFormattedError(` MacroError: unknown: ✕ [&_.test]::block has too many dividers `) }) }) it('errors with an extra divider after the class', async () => { const input = 'tw`[&_.test]:block:`' return run(input) .then(result => { expect(result).toMatchFormattedJavaScript(``) }) .catch(error => { expect(error).toMatchFormattedError(` MacroError: unknown: ✕ The variant [&_.test]:block: doesn’t look right `) }) }) ================================================ FILE: tests/escaping.test.ts ================================================ import { run } from './util/run' test('removes newline and tab escape characters', async () => { const input = 'tw`\tm-0\tinline\n`' return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ "margin": "0px", "display": "inline" }); `) }) }) test('the number of backslashes are preserved', async () => { const input = "tw`content-['\\a0']`" return run(input).then(result => { // We have to double escape the backslashes below - it's actually `"'\\a0'"` expect(result).toMatchFormattedJavaScript(` ({ "--tw-content": "'\\\\a0'", content: "var(--tw-content)" }); `) }) }) test('media commas in media queries are preserved', async () => { const input = 'tw`[@media (min-width: 700px),, (min-width: 700px), and (orientation: landscape)]:block`' return run(input).then(result => { expect(result).toMatchFormattedJavaScript(` ({ "@media (min-width: 700px), , (min-width: 700px), and (orientation: landscape)": { "display": "block", } }); `) }) }) ================================================ FILE: tests/fontSize.test.ts ================================================ import { run, html } from './util/run' test('font-size utilities can include a line-height modifier', async () => { const input = html`
` const config = { theme: { fontSize: { sm: ['12px', '20px'], base: ['16px', '24px'], }, lineHeight: { 6: '24px', 7: '28px', 8: '32px', }, }, } // @ts-expect-error Tailwind types aren't updated for array fontSize values return run(input, config).then(result => { expect(result).toMatchFormattedJavaScript(` React.createElement( "div", { class: "text-sm md:text-base" }, React.createElement("div", { class: "text-sm/6 md:text-base/7" }), React.createElement("div", { class: "text-sm/[21px] md:text-base/[33px]" }), React.createElement("div", { class: "text-[13px]/6 md:text-[19px]/8" }), React.createElement("div", { class: "text-[17px]/[23px] md:text-[21px]/[29px]" }), React.createElement("div", { class: "text-sm/999 md:text-base/000" }) ); `) }) }) ================================================ FILE: tests/minMaxScreenVariants.test.ts ================================================ import { run } from './util/run' const defaultScreens = { sm: '640px', md: '768px', lg: '1024px', xl: '1280px', '2xl': '1536px', } it('sorts min and max correctly relative to screens and each other', async () => { const input = `tw\`font-bold max-[800px]:font-bold max-[700px]:font-bold sm:font-bold min-[700px]:font-bold md:font-bold min-[800px]:font-bold\`` const config = { theme: { screens: defaultScreens } } return run(input, config).then(result => { expect(result).toMatchFormattedJavaScript(` ({ "fontWeight": "700", "@media (max-width: 800px)": { "fontWeight": "700" }, "@media (max-width: 700px)": { "fontWeight": "700" }, "@media (min-width: 640px)": { "fontWeight": "700" }, "@media (min-width: 700px)": { "fontWeight": "700" }, "@media (min-width: 768px)": { "fontWeight": "700" }, "@media (min-width: 800px)": { "fontWeight": "700" } }); `) }) }) it('works when using min variants screens config is empty and variants all use the same unit', async () => { const input = `tw\`font-bold min-[700px]:font-bold min-[800px]:font-bold\`` const config = { theme: { screens: {} } } return run(input, config).then(result => { expect(result).toMatchFormattedJavaScript(` ({ "fontWeight": "700", "@media (min-width: 700px)": { "fontWeight": "700" }, "@media (min-width: 800px)": { "fontWeight": "700" } }); `) }) }) it('works when using max variants screens config is empty and variants all use the same unit', async () => { const input = `tw\`font-bold max-[800px]:font-bold max-[700px]:font-bold\`` const config = { theme: { screens: {} } } return run(input, config).then(result => { expect(result).toMatchFormattedJavaScript(` ({ "fontWeight": "700", "@media (max-width: 800px)": { "fontWeight": "700" }, "@media (max-width: 700px)": { "fontWeight": "700" } }) `) }) }) it('converts simple min-width screens for max variant', async () => { const input = `tw\`font-bold max-lg:font-bold max-[700px]:font-bold max-sm:font-bold max-[300px]:font-bold sm:font-bold md:font-bold\`` const config = { theme: { screens: defaultScreens } } return run(input, config).then(result => { expect(result).toMatchFormattedJavaScript(` ({ "fontWeight": "700", "@media not all and (min-width: 1024px)": { "fontWeight": "700" }, "@media (max-width: 700px)": { "fontWeight": "700" }, "@media not all and (min-width: 640px)": { "fontWeight": "700" }, "@media (max-width: 300px)": { "fontWeight": "700" }, "@media (min-width: 640px)": { "fontWeight": "700" }, "@media (min-width: 768px)": { "fontWeight": "700" } }) `) }) }) it('does not have keyed screens for min variant', async () => { const input = `tw\`font-bold min-[300px]:font-bold sm:font-bold min-[700px]:font-bold md:font-bold\`` const config = { theme: { screens: defaultScreens } } return run(input, config).then(result => { expect(result).toMatchFormattedJavaScript(` ({ "fontWeight": "700", "@media (min-width: 300px)": { "fontWeight": "700" }, "@media (min-width: 640px)": { "fontWeight": "700" }, "@media (min-width: 700px)": { "fontWeight": "700" }, "@media (min-width: 768px)": { "fontWeight": "700" } }) `) }) }) ================================================ FILE: tests/plugin.test.js ================================================ const pluginTester = require('babel-plugin-tester').default const plugin = require('babel-plugin-macros') const path = require('path') const glob = require('glob-all') const fs = require('fs') const configFile = file => `${path.dirname(file)}/config.json` pluginTester({ plugin, pluginName: 'twin.macro', babelOptions: { filename: __filename, babelrc: true, }, snapshot: true, tests: glob .sync([ 'tests/__fixtures__/**/*.tsx', '!tests/__fixtures__/**/*.config.js', '!tests/__fixtures__/**/*.config.ts', ]) .map(file => ({ title: path.basename(file), code: fs.readFileSync(file, 'utf8'), pluginOptions: { twin: { ...(fs.existsSync( path.join(path.dirname(file), 'tailwind.config.js') ) && { config: path.join(path.dirname(file), 'tailwind.config.js'), }), ...(fs.existsSync( path.join(path.dirname(file), 'tailwind.config.ts') ) && { config: path.join(path.dirname(file), 'tailwind.config.ts'), }), ...(fs.existsSync(configFile(file)) && JSON.parse(fs.readFileSync(configFile(file), 'utf8'))), }, }, })), }) ================================================ FILE: tests/presetEmotion.test.ts ================================================ import { run, html } from './util/run' const twinConfig = { preset: 'emotion' } as const test('tw prop', async () => { const input = html`
` return run(input, undefined, twinConfig).then(result => { expect(result).toMatchFormattedJavaScript(` React.createElement("div", { css: { display: "block" } }); `) }) }) test('css prop', async () => { const input = html`
` return run(input, undefined, twinConfig).then(result => { expect(result).toMatchFormattedJavaScript(` React.createElement("div", { css: "{{}}" }); `) }) }) test('tw dot', async () => { const input = 'tw.div`block`' return run(input, undefined, twinConfig).then(result => { expect(result).toMatchFormattedJavaScript(` import _styled from "@emotion/styled"; _styled.div({ display: "block" }); `) }) }) test('tw', async () => { const input = 'tw`block`' return run(input, undefined, twinConfig).then(result => { expect(result).toMatchFormattedJavaScript(` ({ display: "block" }); `) }) }) test('styled dot', async () => { const input = 'styled.div``' return run(input, undefined, twinConfig).then(result => { expect(result).toMatchFormattedJavaScript(` import _styled from "@emotion/styled"; _styled.div\`\`; `) }) }) test('styled dot alt', async () => { const input = 'styled.div([tw`block`])' return run(input, undefined, twinConfig).then(result => { expect(result).toMatchFormattedJavaScript(` import _styled from "@emotion/styled"; _styled.div([{ display: "block" }]); `) }) }) test('GlobalStyles', async () => { const input = html`<>` return run(input, undefined, twinConfig).then(result => { expect(result).toMatchFormattedJavaScript(` import { css as _css } from "@emotion/react"; import { Global as _globalImport } from "@emotion/react"; const _GlobalStyles = () => React.createElement(_globalImport, { styles: _css\`*, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: #e5e7eb; --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: var(--tw-empty,/*!*/ /*!*/); --tw-pan-y: var(--tw-empty,/*!*/ /*!*/); --tw-pinch-zoom: var(--tw-empty,/*!*/ /*!*/); --tw-scroll-snap-strictness: proximity; --tw-ordinal: var(--tw-empty,/*!*/ /*!*/); --tw-slashed-zero: var(--tw-empty,/*!*/ /*!*/); --tw-numeric-figure: var(--tw-empty,/*!*/ /*!*/); --tw-numeric-spacing: var(--tw-empty,/*!*/ /*!*/); --tw-numeric-fraction: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-blur: var(--tw-empty,/*!*/ /*!*/); --tw-brightness: var(--tw-empty,/*!*/ /*!*/); --tw-contrast: var(--tw-empty,/*!*/ /*!*/); --tw-grayscale: var(--tw-empty,/*!*/ /*!*/); --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/); --tw-invert: var(--tw-empty,/*!*/ /*!*/); --tw-saturate: var(--tw-empty,/*!*/ /*!*/); --tw-sepia: var(--tw-empty,/*!*/ /*!*/); --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/);}::before, ::after { --tw-content: '';}html { line-height: 1.5; -webkit-text-size-adjust: 100%; -moz-tab-size: 4; tab-size: 4; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-feature-settings: normal; font-variation-settings: normal;}body { margin: 0; line-height: inherit;}hr { height: 0; color: inherit; border-top-width: 1px;}abbr:where([title]) { text-decoration: underline dotted;}h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit;}a { color: inherit; text-decoration: inherit;}b, strong { font-weight: bolder;}code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 1em;}small { font-size: 80%;}sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}sub { bottom: -0.25em;}sup { top: -0.5em;}table { text-indent: 0; border-color: inherit; border-collapse: collapse;}button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0;}button, select { text-transform: none;}button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; background-color: transparent; background-image: none;}:-moz-focusring { outline: auto;}:-moz-ui-invalid { box-shadow: none;}progress { vertical-align: baseline;}::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto;}[type='search'] { -webkit-appearance: textfield; outline-offset: -2px;}::-webkit-search-decoration { -webkit-appearance: none;}::-webkit-file-upload-button { -webkit-appearance: button; font: inherit;}summary { display: list-item;}blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0;}fieldset { margin: 0; padding: 0;}legend { padding: 0;}ol, ul, menu { list-style: none; margin: 0; padding: 0;}textarea { resize: vertical;}input::placeholder, textarea::placeholder { opacity: 1; color: #9ca3af;}button, [role="button"] { cursor: pointer;}:disabled { cursor: default;}img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle;}img, video { max-width: 100%; height: auto;}[hidden] { display: none;}::backdrop { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: var(--tw-empty,/*!*/ /*!*/); --tw-pan-y: var(--tw-empty,/*!*/ /*!*/); --tw-pinch-zoom: var(--tw-empty,/*!*/ /*!*/); --tw-scroll-snap-strictness: proximity; --tw-ordinal: var(--tw-empty,/*!*/ /*!*/); --tw-slashed-zero: var(--tw-empty,/*!*/ /*!*/); --tw-numeric-figure: var(--tw-empty,/*!*/ /*!*/); --tw-numeric-spacing: var(--tw-empty,/*!*/ /*!*/); --tw-numeric-fraction: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-blur: var(--tw-empty,/*!*/ /*!*/); --tw-brightness: var(--tw-empty,/*!*/ /*!*/); --tw-contrast: var(--tw-empty,/*!*/ /*!*/); --tw-grayscale: var(--tw-empty,/*!*/ /*!*/); --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/); --tw-invert: var(--tw-empty,/*!*/ /*!*/); --tw-saturate: var(--tw-empty,/*!*/ /*!*/); --tw-sepia: var(--tw-empty,/*!*/ /*!*/); --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/);}\`, }); React.createElement(React.Fragment, null, React.createElement(_GlobalStyles, null)); `) }) }) ================================================ FILE: tests/presetGoober.test.ts ================================================ import { run, html } from './util/run' const twinConfig = { preset: 'goober' } as const test('tw prop', async () => { const input = html`
` return run(input, undefined, twinConfig).then(result => { expect(result).toMatchFormattedJavaScript(` React.createElement("div", { css: { display: "block" } }); `) }) }) test('css prop', async () => { const input = html`
` return run(input, undefined, twinConfig).then(result => { expect(result).toMatchFormattedJavaScript(` React.createElement("div", { css: "{{}}" }); `) }) }) test('tw dot', async () => { const input = 'tw.div`block`' return run(input, undefined, twinConfig).then(result => { expect(result).toMatchFormattedJavaScript(` import { styled as _styled } from "goober"; _styled.div({ display: "block" }); `) }) }) test('tw', async () => { const input = 'tw`block`' return run(input, undefined, twinConfig).then(result => { expect(result).toMatchFormattedJavaScript(` ({ display: "block" }); `) }) }) test('styled dot', async () => { const input = 'styled.div``' return run(input, undefined, twinConfig).then(result => { expect(result).toMatchFormattedJavaScript(` import { styled as _styled } from "goober"; _styled.div\`\`; `) }) }) test('styled dot alt', async () => { const input = 'styled.div([tw`block`])' return run(input, undefined, twinConfig).then(result => { expect(result).toMatchFormattedJavaScript(` import { styled as _styled } from "goober"; _styled.div([{ display: "block" }]); `) }) }) test('GlobalStyles', async () => { const input = html`<>` return run(input, undefined, twinConfig).then(result => { expect(result).toMatchFormattedJavaScript(` import { createGlobalStyles as _globalImport } from "goober/global"; const _GlobalStyles = _globalImport\`*, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: #e5e7eb; --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: var(--tw-empty,/*!*/ /*!*/); --tw-pan-y: var(--tw-empty,/*!*/ /*!*/); --tw-pinch-zoom: var(--tw-empty,/*!*/ /*!*/); --tw-scroll-snap-strictness: proximity; --tw-ordinal: var(--tw-empty,/*!*/ /*!*/); --tw-slashed-zero: var(--tw-empty,/*!*/ /*!*/); --tw-numeric-figure: var(--tw-empty,/*!*/ /*!*/); --tw-numeric-spacing: var(--tw-empty,/*!*/ /*!*/); --tw-numeric-fraction: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-blur: var(--tw-empty,/*!*/ /*!*/); --tw-brightness: var(--tw-empty,/*!*/ /*!*/); --tw-contrast: var(--tw-empty,/*!*/ /*!*/); --tw-grayscale: var(--tw-empty,/*!*/ /*!*/); --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/); --tw-invert: var(--tw-empty,/*!*/ /*!*/); --tw-saturate: var(--tw-empty,/*!*/ /*!*/); --tw-sepia: var(--tw-empty,/*!*/ /*!*/); --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/);}::before, ::after { --tw-content: '';}html { line-height: 1.5; -webkit-text-size-adjust: 100%; -moz-tab-size: 4; tab-size: 4; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-feature-settings: normal; font-variation-settings: normal;}body { margin: 0; line-height: inherit;}hr { height: 0; color: inherit; border-top-width: 1px;}abbr:where([title]) { text-decoration: underline dotted;}h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit;}a { color: inherit; text-decoration: inherit;}b, strong { font-weight: bolder;}code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 1em;}small { font-size: 80%;}sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}sub { bottom: -0.25em;}sup { top: -0.5em;}table { text-indent: 0; border-color: inherit; border-collapse: collapse;}button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0;}button, select { text-transform: none;}button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; background-color: transparent; background-image: none;}:-moz-focusring { outline: auto;}:-moz-ui-invalid { box-shadow: none;}progress { vertical-align: baseline;}::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto;}[type='search'] { -webkit-appearance: textfield; outline-offset: -2px;}::-webkit-search-decoration { -webkit-appearance: none;}::-webkit-file-upload-button { -webkit-appearance: button; font: inherit;}summary { display: list-item;}blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0;}fieldset { margin: 0; padding: 0;}legend { padding: 0;}ol, ul, menu { list-style: none; margin: 0; padding: 0;}textarea { resize: vertical;}input::placeholder, textarea::placeholder { opacity: 1; color: #9ca3af;}button, [role="button"] { cursor: pointer;}:disabled { cursor: default;}img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle;}img, video { max-width: 100%; height: auto;}[hidden] { display: none;}::backdrop { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: var(--tw-empty,/*!*/ /*!*/); --tw-pan-y: var(--tw-empty,/*!*/ /*!*/); --tw-pinch-zoom: var(--tw-empty,/*!*/ /*!*/); --tw-scroll-snap-strictness: proximity; --tw-ordinal: var(--tw-empty,/*!*/ /*!*/); --tw-slashed-zero: var(--tw-empty,/*!*/ /*!*/); --tw-numeric-figure: var(--tw-empty,/*!*/ /*!*/); --tw-numeric-spacing: var(--tw-empty,/*!*/ /*!*/); --tw-numeric-fraction: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-blur: var(--tw-empty,/*!*/ /*!*/); --tw-brightness: var(--tw-empty,/*!*/ /*!*/); --tw-contrast: var(--tw-empty,/*!*/ /*!*/); --tw-grayscale: var(--tw-empty,/*!*/ /*!*/); --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/); --tw-invert: var(--tw-empty,/*!*/ /*!*/); --tw-saturate: var(--tw-empty,/*!*/ /*!*/); --tw-sepia: var(--tw-empty,/*!*/ /*!*/); --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/);}\`; React.createElement(React.Fragment, null, React.createElement(_GlobalStyles, null)); `) }) }) ================================================ FILE: tests/presetSolid.test.ts ================================================ import { run, html } from './util/run' const twinConfig = { preset: 'solid' } as const test('tw prop', async () => { const input = html`
` return run(input, undefined, twinConfig).then(result => { expect(result).toMatchFormattedJavaScript(` import { styled as _styled } from "solid-styled-components"; const _TwComponent = _styled("div")({ display: "block" }); React.createElement(_TwComponent, null); `) }) }) test('css prop', async () => { const input = '
' return run(input, undefined, twinConfig).then(result => { expect(result).toMatchFormattedJavaScript(` import { styled as _styled } from "solid-styled-components"; const _TwComponent = _styled("div")([{ display: "block" }]); React.createElement(_TwComponent, null); `) }) }) test('tw dot', async () => { const input = 'tw.div`block`' return run(input, undefined, twinConfig).then(result => { expect(result).toMatchFormattedJavaScript(` import { styled as _styled } from "solid-styled-components"; _styled("div")({ display: "block" }); `) }) }) test('tw', async () => { const input = 'tw`block`' return run(input, undefined, twinConfig).then(result => { expect(result).toMatchFormattedJavaScript(` ({ display: "block" }); `) }) }) test('styled dot', async () => { const input = 'styled.div``' return run(input, undefined, twinConfig).then(result => { expect(result).toMatchFormattedJavaScript(` import { styled as _styled } from "solid-styled-components"; _styled.div\`\`; `) }) }) test('styled dot alt', async () => { const input = 'styled.div([tw`block`])' return run(input, undefined, twinConfig).then(result => { expect(result).toMatchFormattedJavaScript(` import { styled as _styled } from "solid-styled-components"; _styled("div")([{ display: "block" }]); `) }) }) test('GlobalStyles', async () => { const input = html`<>` return run(input, undefined, twinConfig).then(result => { expect(result).toMatchFormattedJavaScript(` import { createGlobalStyles as _globalImport } from "solid-styled-components"; const _GlobalStyles = _globalImport\`*, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: #e5e7eb; --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: var(--tw-empty,/*!*/ /*!*/); --tw-pan-y: var(--tw-empty,/*!*/ /*!*/); --tw-pinch-zoom: var(--tw-empty,/*!*/ /*!*/); --tw-scroll-snap-strictness: proximity; --tw-ordinal: var(--tw-empty,/*!*/ /*!*/); --tw-slashed-zero: var(--tw-empty,/*!*/ /*!*/); --tw-numeric-figure: var(--tw-empty,/*!*/ /*!*/); --tw-numeric-spacing: var(--tw-empty,/*!*/ /*!*/); --tw-numeric-fraction: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-blur: var(--tw-empty,/*!*/ /*!*/); --tw-brightness: var(--tw-empty,/*!*/ /*!*/); --tw-contrast: var(--tw-empty,/*!*/ /*!*/); --tw-grayscale: var(--tw-empty,/*!*/ /*!*/); --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/); --tw-invert: var(--tw-empty,/*!*/ /*!*/); --tw-saturate: var(--tw-empty,/*!*/ /*!*/); --tw-sepia: var(--tw-empty,/*!*/ /*!*/); --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/);}::before, ::after { --tw-content: '';}html { line-height: 1.5; -webkit-text-size-adjust: 100%; -moz-tab-size: 4; tab-size: 4; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-feature-settings: normal; font-variation-settings: normal;}body { margin: 0; line-height: inherit;}hr { height: 0; color: inherit; border-top-width: 1px;}abbr:where([title]) { text-decoration: underline dotted;}h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit;}a { color: inherit; text-decoration: inherit;}b, strong { font-weight: bolder;}code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 1em;}small { font-size: 80%;}sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}sub { bottom: -0.25em;}sup { top: -0.5em;}table { text-indent: 0; border-color: inherit; border-collapse: collapse;}button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0;}button, select { text-transform: none;}button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; background-color: transparent; background-image: none;}:-moz-focusring { outline: auto;}:-moz-ui-invalid { box-shadow: none;}progress { vertical-align: baseline;}::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto;}[type='search'] { -webkit-appearance: textfield; outline-offset: -2px;}::-webkit-search-decoration { -webkit-appearance: none;}::-webkit-file-upload-button { -webkit-appearance: button; font: inherit;}summary { display: list-item;}blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0;}fieldset { margin: 0; padding: 0;}legend { padding: 0;}ol, ul, menu { list-style: none; margin: 0; padding: 0;}textarea { resize: vertical;}input::placeholder, textarea::placeholder { opacity: 1; color: #9ca3af;}button, [role="button"] { cursor: pointer;}:disabled { cursor: default;}img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle;}img, video { max-width: 100%; height: auto;}[hidden] { display: none;}::backdrop { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: var(--tw-empty,/*!*/ /*!*/); --tw-pan-y: var(--tw-empty,/*!*/ /*!*/); --tw-pinch-zoom: var(--tw-empty,/*!*/ /*!*/); --tw-scroll-snap-strictness: proximity; --tw-ordinal: var(--tw-empty,/*!*/ /*!*/); --tw-slashed-zero: var(--tw-empty,/*!*/ /*!*/); --tw-numeric-figure: var(--tw-empty,/*!*/ /*!*/); --tw-numeric-spacing: var(--tw-empty,/*!*/ /*!*/); --tw-numeric-fraction: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-blur: var(--tw-empty,/*!*/ /*!*/); --tw-brightness: var(--tw-empty,/*!*/ /*!*/); --tw-contrast: var(--tw-empty,/*!*/ /*!*/); --tw-grayscale: var(--tw-empty,/*!*/ /*!*/); --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/); --tw-invert: var(--tw-empty,/*!*/ /*!*/); --tw-saturate: var(--tw-empty,/*!*/ /*!*/); --tw-sepia: var(--tw-empty,/*!*/ /*!*/); --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/);}\`; React.createElement(React.Fragment, null, React.createElement(_GlobalStyles, null)); `) }) }) ================================================ FILE: tests/presetStitches.test.ts ================================================ import { run, html } from './util/run' const twinConfig = { preset: 'stitches', stitchesConfig: 'tests/stitches.config.js', } as const test('tw prop', async () => { const input = html`
` return run(input, undefined, twinConfig).then(result => { expect(result).toMatchFormattedJavaScript(` import { styled as _styled } from "tests/stitches.config.js"; const _TwComponent = _styled("div", { display: "block" }); React.createElement(_TwComponent, null); `) }) }) test('css prop', async () => { const input = html`
` return run(input, undefined, twinConfig).then(result => { expect(result).toMatchFormattedJavaScript(` import { styled as _styled } from "tests/stitches.config.js"; const _TwComponent = _styled("div", {}); React.createElement(_TwComponent, { css: "{{}}" }); `) }) }) test('tw dot', async () => { const input = 'tw.div`block`' return run(input, undefined, twinConfig).then(result => { expect(result).toMatchFormattedJavaScript(` import { styled as _styled } from "tests/stitches.config.js"; _styled("div", { display: "block" }); `) }) }) test('tw', async () => { const input = 'tw`block`' return run(input, undefined, twinConfig).then(result => { expect(result).toMatchFormattedJavaScript(` ({ display: "block" }); `) }) }) test('styled dot', async () => { const input = 'styled.div``' return run(input, undefined, twinConfig).then(result => { expect(result).toMatchFormattedJavaScript(` import { styled as _styled } from "tests/stitches.config.js"; _styled.div\`\`; `) }) }) test('styled dot alt', async () => { const input = 'styled.div([tw`block`])' return run(input, undefined, twinConfig).then(result => { expect(result).toMatchFormattedJavaScript(` import { styled as _styled } from "tests/stitches.config.js"; _styled("div", [{ display: "block" }]); `) }) }) test('GlobalStyles', async () => { const input = html`<>` return run(input, undefined, twinConfig) .then(result => { expect(result).toMatchFormattedJavaScript(``) }) .catch(error => { expect(error).toMatchFormattedError(` MacroError: unknown: ✕ The GlobalStyles import can’t be used with stitches Use the globalStyles import instead `) }) }) test('globalStyles', async () => { const input = html`globalStyles` return run(input, undefined, twinConfig).then(result => { expect(result).toMatchFormattedJavaScript(` ({ "*, ::before, ::after": { boxSizing: "border-box", borderWidth: "0", borderStyle: "solid", borderColor: "#e5e7eb", "--tw-border-spacing-x": "0", "--tw-border-spacing-y": "0", "--tw-translate-x": "0", "--tw-translate-y": "0", "--tw-rotate": "0", "--tw-skew-x": "0", "--tw-skew-y": "0", "--tw-scale-x": "1", "--tw-scale-y": "1", "--tw-pan-x": "var(--tw-empty,/*!*/ /*!*/)", "--tw-pan-y": "var(--tw-empty,/*!*/ /*!*/)", "--tw-pinch-zoom": "var(--tw-empty,/*!*/ /*!*/)", "--tw-scroll-snap-strictness": "proximity", "--tw-ordinal": "var(--tw-empty,/*!*/ /*!*/)", "--tw-slashed-zero": "var(--tw-empty,/*!*/ /*!*/)", "--tw-numeric-figure": "var(--tw-empty,/*!*/ /*!*/)", "--tw-numeric-spacing": "var(--tw-empty,/*!*/ /*!*/)", "--tw-numeric-fraction": "var(--tw-empty,/*!*/ /*!*/)", "--tw-ring-offset-shadow": "0 0 #0000", "--tw-ring-shadow": "0 0 #0000", "--tw-shadow": "0 0 #0000", "--tw-shadow-colored": "0 0 #0000", "--tw-ring-inset": "var(--tw-empty,/*!*/ /*!*/)", "--tw-ring-offset-width": "0px", "--tw-ring-offset-color": "#fff", "--tw-ring-color": "rgb(59 130 246 / 0.5)", "--tw-blur": "var(--tw-empty,/*!*/ /*!*/)", "--tw-brightness": "var(--tw-empty,/*!*/ /*!*/)", "--tw-contrast": "var(--tw-empty,/*!*/ /*!*/)", "--tw-grayscale": "var(--tw-empty,/*!*/ /*!*/)", "--tw-hue-rotate": "var(--tw-empty,/*!*/ /*!*/)", "--tw-invert": "var(--tw-empty,/*!*/ /*!*/)", "--tw-saturate": "var(--tw-empty,/*!*/ /*!*/)", "--tw-sepia": "var(--tw-empty,/*!*/ /*!*/)", "--tw-drop-shadow": "var(--tw-empty,/*!*/ /*!*/)", "--tw-backdrop-blur": "var(--tw-empty,/*!*/ /*!*/)", "--tw-backdrop-brightness": "var(--tw-empty,/*!*/ /*!*/)", "--tw-backdrop-contrast": "var(--tw-empty,/*!*/ /*!*/)", "--tw-backdrop-grayscale": "var(--tw-empty,/*!*/ /*!*/)", "--tw-backdrop-hue-rotate": "var(--tw-empty,/*!*/ /*!*/)", "--tw-backdrop-invert": "var(--tw-empty,/*!*/ /*!*/)", "--tw-backdrop-opacity": "var(--tw-empty,/*!*/ /*!*/)", "--tw-backdrop-saturate": "var(--tw-empty,/*!*/ /*!*/)", "--tw-backdrop-sepia": "var(--tw-empty,/*!*/ /*!*/)", }, "::before, ::after": { "--tw-content": "''" }, html: { lineHeight: "1.5", WebkitTextSizeAdjust: "100%", MozTabSize: "4", tabSize: "4", fontFamily: 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"', fontFeatureSettings: " normal", fontVariationSettings: " normal", }, body: { margin: "0", lineHeight: "inherit" }, hr: { height: "0", color: "inherit", borderTopWidth: "1px" }, "abbr:where([title])": { textDecoration: "underline dotted" }, "h1, h2, h3, h4, h5, h6": { fontSize: "inherit", fontWeight: "inherit" }, a: { color: "inherit", textDecoration: "inherit" }, "b, strong": { fontWeight: "bolder" }, "code, kbd, samp, pre": { fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace', fontSize: "1em", }, small: { fontSize: "80%" }, "sub, sup": { fontSize: "75%", lineHeight: "0", position: "relative", verticalAlign: "baseline" }, sub: { bottom: "-0.25em" }, sup: { top: "-0.5em" }, table: { textIndent: "0", borderColor: "inherit", borderCollapse: "collapse" }, "button, input, optgroup, select, textarea": { fontFamily: "inherit", fontSize: "100%", fontWeight: "inherit", lineHeight: "inherit", color: "inherit", margin: "0", padding: "0", }, "button, select": { textTransform: "none" }, "button, [type='button'], [type='reset'], [type='submit']": { WebkitAppearance: "button", backgroundColor: "transparent", backgroundImage: "none", }, ":-moz-focusring": { outline: "auto" }, ":-moz-ui-invalid": { boxShadow: "none" }, progress: { verticalAlign: "baseline" }, "::-webkit-inner-spin-button, ::-webkit-outer-spin-button": { height: "auto" }, "[type='search']": { WebkitAppearance: "textfield", outlineOffset: "-2px" }, "::-webkit-search-decoration": { WebkitAppearance: "none" }, "::-webkit-file-upload-button": { WebkitAppearance: "button", font: "inherit" }, summary: { display: "list-item" }, "blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre": { margin: "0" }, fieldset: { margin: "0", padding: "0" }, legend: { padding: "0" }, "ol, ul, menu": { listStyle: "none", margin: "0", padding: "0" }, textarea: { resize: "vertical" }, "input::placeholder, textarea::placeholder": { opacity: "1", color: "#9ca3af" }, 'button, [role="button"]': { cursor: "pointer" }, ":disabled": { cursor: "default" }, "img, svg, video, canvas, audio, iframe, embed, object": { display: "block", verticalAlign: "middle", }, "img, video": { maxWidth: "100%", height: "auto" }, "[hidden]": { display: "none" }, "::backdrop": { "--tw-border-spacing-x": "0", "--tw-border-spacing-y": "0", "--tw-translate-x": "0", "--tw-translate-y": "0", "--tw-rotate": "0", "--tw-skew-x": "0", "--tw-skew-y": "0", "--tw-scale-x": "1", "--tw-scale-y": "1", "--tw-pan-x": "var(--tw-empty,/*!*/ /*!*/)", "--tw-pan-y": "var(--tw-empty,/*!*/ /*!*/)", "--tw-pinch-zoom": "var(--tw-empty,/*!*/ /*!*/)", "--tw-scroll-snap-strictness": "proximity", "--tw-ordinal": "var(--tw-empty,/*!*/ /*!*/)", "--tw-slashed-zero": "var(--tw-empty,/*!*/ /*!*/)", "--tw-numeric-figure": "var(--tw-empty,/*!*/ /*!*/)", "--tw-numeric-spacing": "var(--tw-empty,/*!*/ /*!*/)", "--tw-numeric-fraction": "var(--tw-empty,/*!*/ /*!*/)", "--tw-ring-offset-shadow": "0 0 #0000", "--tw-ring-shadow": "0 0 #0000", "--tw-shadow": "0 0 #0000", "--tw-shadow-colored": "0 0 #0000", "--tw-ring-inset": "var(--tw-empty,/*!*/ /*!*/)", "--tw-ring-offset-width": "0px", "--tw-ring-offset-color": "#fff", "--tw-ring-color": "rgb(59 130 246 / 0.5)", "--tw-blur": "var(--tw-empty,/*!*/ /*!*/)", "--tw-brightness": "var(--tw-empty,/*!*/ /*!*/)", "--tw-contrast": "var(--tw-empty,/*!*/ /*!*/)", "--tw-grayscale": "var(--tw-empty,/*!*/ /*!*/)", "--tw-hue-rotate": "var(--tw-empty,/*!*/ /*!*/)", "--tw-invert": "var(--tw-empty,/*!*/ /*!*/)", "--tw-saturate": "var(--tw-empty,/*!*/ /*!*/)", "--tw-sepia": "var(--tw-empty,/*!*/ /*!*/)", "--tw-drop-shadow": "var(--tw-empty,/*!*/ /*!*/)", "--tw-backdrop-blur": "var(--tw-empty,/*!*/ /*!*/)", "--tw-backdrop-brightness": "var(--tw-empty,/*!*/ /*!*/)", "--tw-backdrop-contrast": "var(--tw-empty,/*!*/ /*!*/)", "--tw-backdrop-grayscale": "var(--tw-empty,/*!*/ /*!*/)", "--tw-backdrop-hue-rotate": "var(--tw-empty,/*!*/ /*!*/)", "--tw-backdrop-invert": "var(--tw-empty,/*!*/ /*!*/)", "--tw-backdrop-opacity": "var(--tw-empty,/*!*/ /*!*/)", "--tw-backdrop-saturate": "var(--tw-empty,/*!*/ /*!*/)", "--tw-backdrop-sepia": "var(--tw-empty,/*!*/ /*!*/)", }, "@keyframes spin": { to: { transform: "rotate(360deg)" } }, "@keyframes ping": { "75%, 100%": { transform: "scale(2)", opacity: "0" } }, "@keyframes pulse": { "50%": { opacity: ".5" } }, "@keyframes bounce": { "0%, 100%": { transform: "translateY(-25%)", animationTimingFunction: "cubic-bezier(0.8,0,1,1)", }, "50%": { transform: "none", animationTimingFunction: "cubic-bezier(0,0,0.2,1)" }, }, }); `) }) }) ================================================ FILE: tests/presetStyledComponents.test.ts ================================================ import { run, html } from './util/run' const twinConfig = { preset: 'styled-components' } as const test('tw prop', async () => { const input = html`
` return run(input, undefined, twinConfig).then(result => { expect(result).toMatchFormattedJavaScript(` React.createElement("div", { css: { display: "block" } }); `) }) }) test('css prop', async () => { const input = html`
` return run(input, undefined, twinConfig).then(result => { expect(result).toMatchFormattedJavaScript(` React.createElement("div", { css: "{{}}" }); `) }) }) test('tw dot', async () => { const input = 'tw.div`block`' return run(input, undefined, twinConfig).then(result => { expect(result).toMatchFormattedJavaScript(` import _styled from "styled-components"; _styled.div({ display: "block" }); `) }) }) test('tw', async () => { const input = 'tw`block`' return run(input, undefined, twinConfig).then(result => { expect(result).toMatchFormattedJavaScript(` ({ display: "block" }); `) }) }) test('styled dot', async () => { const input = 'styled.div``' return run(input, undefined, twinConfig).then(result => { expect(result).toMatchFormattedJavaScript(` import _styled from "styled-components"; _styled.div\`\`; `) }) }) test('styled dot alt', async () => { const input = 'styled.div([tw`block`])' return run(input, undefined, twinConfig).then(result => { expect(result).toMatchFormattedJavaScript(` import _styled from "styled-components"; _styled.div([{ display: "block" }]); `) }) }) test('GlobalStyles', async () => { const input = html`<>` return run(input, undefined, twinConfig).then(result => { expect(result).toMatchFormattedJavaScript(` import { createGlobalStyle as _globalImport } from "styled-components"; const _GlobalStyles = _globalImport\`*, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: #e5e7eb; --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: var(--tw-empty,/*!*/ /*!*/); --tw-pan-y: var(--tw-empty,/*!*/ /*!*/); --tw-pinch-zoom: var(--tw-empty,/*!*/ /*!*/); --tw-scroll-snap-strictness: proximity; --tw-ordinal: var(--tw-empty,/*!*/ /*!*/); --tw-slashed-zero: var(--tw-empty,/*!*/ /*!*/); --tw-numeric-figure: var(--tw-empty,/*!*/ /*!*/); --tw-numeric-spacing: var(--tw-empty,/*!*/ /*!*/); --tw-numeric-fraction: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-blur: var(--tw-empty,/*!*/ /*!*/); --tw-brightness: var(--tw-empty,/*!*/ /*!*/); --tw-contrast: var(--tw-empty,/*!*/ /*!*/); --tw-grayscale: var(--tw-empty,/*!*/ /*!*/); --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/); --tw-invert: var(--tw-empty,/*!*/ /*!*/); --tw-saturate: var(--tw-empty,/*!*/ /*!*/); --tw-sepia: var(--tw-empty,/*!*/ /*!*/); --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/);}::before, ::after { --tw-content: '';}html { line-height: 1.5; -webkit-text-size-adjust: 100%; -moz-tab-size: 4; tab-size: 4; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-feature-settings: normal; font-variation-settings: normal;}body { margin: 0; line-height: inherit;}hr { height: 0; color: inherit; border-top-width: 1px;}abbr:where([title]) { text-decoration: underline dotted;}h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit;}a { color: inherit; text-decoration: inherit;}b, strong { font-weight: bolder;}code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 1em;}small { font-size: 80%;}sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}sub { bottom: -0.25em;}sup { top: -0.5em;}table { text-indent: 0; border-color: inherit; border-collapse: collapse;}button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0;}button, select { text-transform: none;}button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; background-color: transparent; background-image: none;}:-moz-focusring { outline: auto;}:-moz-ui-invalid { box-shadow: none;}progress { vertical-align: baseline;}::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto;}[type='search'] { -webkit-appearance: textfield; outline-offset: -2px;}::-webkit-search-decoration { -webkit-appearance: none;}::-webkit-file-upload-button { -webkit-appearance: button; font: inherit;}summary { display: list-item;}blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0;}fieldset { margin: 0; padding: 0;}legend { padding: 0;}ol, ul, menu { list-style: none; margin: 0; padding: 0;}textarea { resize: vertical;}input::placeholder, textarea::placeholder { opacity: 1; color: #9ca3af;}button, [role="button"] { cursor: pointer;}:disabled { cursor: default;}img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle;}img, video { max-width: 100%; height: auto;}[hidden] { display: none;}::backdrop { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: var(--tw-empty,/*!*/ /*!*/); --tw-pan-y: var(--tw-empty,/*!*/ /*!*/); --tw-pinch-zoom: var(--tw-empty,/*!*/ /*!*/); --tw-scroll-snap-strictness: proximity; --tw-ordinal: var(--tw-empty,/*!*/ /*!*/); --tw-slashed-zero: var(--tw-empty,/*!*/ /*!*/); --tw-numeric-figure: var(--tw-empty,/*!*/ /*!*/); --tw-numeric-spacing: var(--tw-empty,/*!*/ /*!*/); --tw-numeric-fraction: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-blur: var(--tw-empty,/*!*/ /*!*/); --tw-brightness: var(--tw-empty,/*!*/ /*!*/); --tw-contrast: var(--tw-empty,/*!*/ /*!*/); --tw-grayscale: var(--tw-empty,/*!*/ /*!*/); --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/); --tw-invert: var(--tw-empty,/*!*/ /*!*/); --tw-saturate: var(--tw-empty,/*!*/ /*!*/); --tw-sepia: var(--tw-empty,/*!*/ /*!*/); --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/);}\`; React.createElement(React.Fragment, null, React.createElement(_GlobalStyles, null)); `) }) }) ================================================ FILE: tests/screens.test.ts ================================================ import { run } from './util/run' test('screen is replaced', async () => { const input = [ 'screen(``)', 'screen(`mobile`)', 'screen(`tablet`)', 'screen(`mobile_desktop`)', 'screen(`mobile,desktop`)', 'screen(["mobile", "desktop"])', ].join('; ') const tailwindConfig = { theme: { screens: { '': { min: '500px' }, mobile: { max: '767px' }, tablet: { min: '768px', max: '991px' }, desktop: { min: '1600px' }, mobile_desktop: [{ max: '767px' }, { min: '1600px' }], mobile_desktop_max: [{ max: '767px' }, { min: '1600px', max: '767px' }], }, }, } return run(input, tailwindConfig).then(result => { expect(result).toMatchFormattedJavaScript(` "@media (max-width: 399px)"; "@media (min-width: 500px)"; "@media (max-width: 767px)"; "@media (min-width: 768px) and (max-width: 991px)"; "@media (max-width: 767px), (min-width: 1600px)"; "@media (max-width: 767px), (min-width: 1600px)"; "@media (max-width: 767px), (min-width: 1600px)"; `) }) }) ================================================ FILE: tests/stitches.config.js ================================================ // just for show ================================================ FILE: tests/types/index.ts ================================================ import type { Config } from 'tailwindcss' import type { TwinConfigAll } from '../../src/core/types' type TailwindConfig = Partial type TwinConfig = Partial export type { TailwindConfig, TwinConfig } ================================================ FILE: tests/types/types.d.ts ================================================ declare module '@babel/plugin-transform-react-jsx' declare namespace jest { // eslint-disable-next-line @typescript-eslint/consistent-type-definitions interface Matchers { toMatchFormattedError(error: string): R toMatchFormattedJavaScript(javascriptString: string): R } } ================================================ FILE: tests/util/customMatchers.ts ================================================ import * as prettier from 'prettier' import { diff } from 'jest-diff' function formatJavascript(input: string): string { return prettier.format(input.replace(/\n/g, ''), { parser: 'flow', printWidth: 100, }) } function formatError(input: string): string { return String(input) .trim() .split('\n') .map(s => s.trim()) .join('\n') } expect.extend({ toMatchFormattedError( received: string, argument: string ): { actual: string; message: () => string; pass: boolean } { const options = { comment: 'stripped(received) === stripped(argument)', isNot: this.isNot, promise: this.promise, } const formattedReceived = formatError(received) const formattedArgument = formatError(argument) // startsWith check to avoid twin version match at the bottom of the error const pass = formattedReceived.startsWith(formattedArgument) const message = pass ? (): string => this.utils.matcherHint( 'toMatchFormattedJavaScript', undefined, undefined, options ) + '\n\n' + `Expected: ${this.utils.printExpected(formattedReceived)}\n` + `Received: ${this.utils.printReceived(formattedArgument)}` : (): string => { const actual = formattedReceived const expected = formattedArgument const diffString = diff(expected, actual, { expand: this.expand, }) return ( this.utils.matcherHint( 'toMatchFormattedJavaScript', undefined, undefined, options ) + '\n\n' + (diffString?.includes('- Expect') ? `Difference:\n\n${diffString}` : `Expected: ${this.utils.printExpected(expected)}\n` + `Received: ${this.utils.printReceived(actual)}`) ) } return { actual: formattedReceived, message, pass } }, toMatchFormattedJavaScript( received: string, argument: string ): { actual: string; message: () => string; pass: boolean } { const options = { comment: 'stripped(received) === stripped(argument)', isNot: this.isNot, promise: this.promise, } const formattedReceived = formatJavascript(received) const formattedArgument = formatJavascript(argument ?? '') const pass = formattedReceived === formattedArgument const message = pass ? (): string => this.utils.matcherHint( 'toMatchFormattedJavaScript', undefined, undefined, options ) + '\n\n' + `Expected: ${this.utils.printExpected(formattedReceived)}\n` + `Received: ${this.utils.printReceived(formattedArgument)}` : (): string => { const actual = formattedReceived const expected = formattedArgument const diffString = diff(expected, actual, { expand: this.expand, }) return ( this.utils.matcherHint( 'toMatchFormattedJavaScript', undefined, undefined, options ) + '\n\n' + (diffString?.includes('- Expect') ? `Difference:\n\n${diffString}` : `Expected: ${this.utils.printExpected(expected)}\n` + `Received: ${this.utils.printReceived(actual)}`) ) } return { actual: received, message, pass } }, }) ================================================ FILE: tests/util/run.ts ================================================ import * as babel from '@babel/core' import macros from 'babel-plugin-macros' import jsx from '@babel/plugin-transform-react-jsx' // eslint-disable-next-line import/no-relative-parent-imports import type { TailwindConfig, TwinConfig } from '../types' export const html = String.raw export async function run( input: string, tailwindConfig?: TailwindConfig | undefined, twinConfig?: TwinConfig ): Promise { return babelTransform(input, { tailwindConfig, twinConfig }) } export async function babelTransform( input: string, options: { tailwindConfig?: TailwindConfig; twinConfig?: TwinConfig } ): Promise { const babelOptions = babel.loadOptions({ plugins: [ [jsx, { pure: false }], [ macros, { twin: { hasLogColors: false, ...options.twinConfig, ...(options.tailwindConfig && { config: options.tailwindConfig }), }, }, ], ], }) if (!babelOptions) return '' // Type guard const twinImports = `import tw, { styled, globalStyles, GlobalStyles, screen } from './twin.macro'` const inputWithImports = `${twinImports};${input}` const transformed = await babel.transformAsync(inputWithImports, babelOptions) return transformed?.code ?? '' } ================================================ FILE: tsconfig.json ================================================ { "compilerOptions": { "target": "es2020", // To cover tailwindcss use of bigint "module": "esnext", "moduleResolution": "node", "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "jsx": "react", "noEmit": true, "baseUrl": "src" }, "include": ["src/**/*.ts", "tests/**/*.ts"] } ================================================ FILE: types/index.d.ts ================================================ import { ComponentType, ElementType } from 'react' import { Config as TailwindConfig } from 'tailwindcss' export interface TwStyle { [key: string]: string | number | TwStyle } export const GlobalStyles: string export type TemplateFn = ( strings: Readonly, ...values: readonly string[] ) => R export type TwFn = TemplateFn export type ThemeSearchFn = (...values: readonly string[]) => R export type ThemeSearchTaggedFn = ( strings: Readonly ) => R export type ThemeFn = (arg?: string | TemplateStringsArray) => T export type ScreenFn = ( screenValue: string | TemplateStringsArray | string[] ) => (styles?: string | TemplateStringsArray | TwStyle | TwStyle[]) => T export type TwComponent = ( props: JSX.IntrinsicElements[K] & { as?: ElementType } ) => JSX.Element export type TwComponentMap = { [K in keyof JSX.IntrinsicElements]: TemplateFn> } /* eslint-disable-next-line @typescript-eslint/no-explicit-any */ type TwComponentWrapper = >( component: T ) => TemplateFn declare const tw: TwFn & TwComponentMap & TwComponentWrapper export default tw declare module 'react' { interface DOMAttributes { tw?: string } interface HTMLAttributes extends AriaAttributes, DOMAttributes { cs?: string } } declare global { namespace JSX { interface IntrinsicAttributes { tw?: string } } } // Docs: https://github.com/ben-rogerson/twin.macro/blob/master/docs/options.md export type Config = { /** * The css-in-js library behind the scenes, default is `emotion`. */ preset?: 'styled-components' | 'emotion' | 'goober' | 'stitches' | 'solid' /** * Visit `style={...}` props/attributes for classes. */ allowStyleProp?: boolean /** * The path to your Tailwind config. Also takes a TailwindConfig object. */ config?: string | Partial /** * For packages like stitches, add a styled definition on css prop elements. */ convertHtmlElementToStyled?: boolean /** * Convert `styled.[element]``` to `styled('element', ({}))`. */ convertStyledDotToParam?: boolean /** * Convert `styled.[element]``` to `styled('element')({})`. */ convertStyledDotToFunction?: boolean /** * Add a prop to your elements in development so you can see the original cs prop classes, eg: `
`. */ dataCsProp?: boolean | 'all' /** * Add a prop to jsx components in development showing the original tailwind classes. Use `"all"` to keep the prop in production. */ dataTwProp?: boolean | 'all' /** * Display information in your terminal about the Tailwind class conversions. */ debug?: boolean /** * Disable twin from reading values specified in the cs prop. */ disableCsProp?: boolean /** * Disable converting short css within the tw import/prop. */ disableShortCss?: boolean /** * Disable log colors to remove the glyphs when the color display is not supported. */ hasLogColors?: boolean /** * Look in className props for tailwind classes to convert. */ includeClassNames?: boolean /** * `@keyframes` are added next to the `animation-x` classes - this option can move them to global styles instead. */ moveKeyframesToGlobalStyles?: boolean /** * Move the tw prop to a styled definition. */ moveTwPropToStyled?: boolean /** * Some css-in-js frameworks require the `&` in selectors like `&:hover`, this option ensures it’s added. */ sassyPseudo?: boolean /** * This is the path to your config (stitches only). */ stitchesConfig?: string /** * Overwrite the css prop based import, eg: `import: 'css', from: '@emotion/react'`. */ css?: { import: string; from: string } /** * Overwrite the styled import, eg: `import: 'default', from: '@emotion/styled'`. */ styled?: { import: string; from: string } /** * Overwrite the import used for global styles, eg: `import: 'Global', from: '@emotion/react'`. */ global?: { import: string; from: string } } declare const theme: ThemeFn declare const screen: ScreenFn declare const globalStyles: Record export { theme, screen, globalStyles } ================================================ FILE: types/macro.d.ts ================================================ declare const _default: any export default _default ================================================ FILE: types/tests/__fixtures__/config/tailwind.config.d.ts ================================================ declare const _default: { theme: { animation: { 'zoom-.5': string } colors: { number: number purple: string 'purple-hyphen': string mycolors: { DEFAULT: string 'a-purple': string 'a-number': number } 'my-blue': { 100: string } 'color-opacity': ({ opacityVariable }: { opacityVariable: any }) => string color: { deep: { config: { 500: string } } } blue: { DEFAULT: string gray: { 200: string } } 'blue-gray': { DEFAULT: string 200: string } 'blue-gray-green': { DEFAULT: string 200: string 'deep-dish': { DEFAULT: string 200: string } } 'blue-gray-green-pink': string } fontWeight: { customFontWeightAsString: string customFontWeightAsNumber: number } } } export default _default ================================================ FILE: types/tests/__fixtures__/configTS/tailwind.config.d.ts ================================================ declare const _default: { content: never[] theme: { colors: { purple: string } } } export default _default ================================================ FILE: types/tests/basic/index.tsx ================================================ import React from 'react' import tw from '../..' // standard template literal tw`text-gray-100 bg-blue-500` // basic variables const basic = 'bg-blue-500' tw`${basic}` // @ts-expect-error empty tw tw('') // @ts-expect-error interpolations not supported tw`interpolations not supported ${123}` const Button = tw.button`bg-blue-500 text-gray-100` const A = tw.a`bg-blue-500 text-gray-100` const P = tw.p`bg-blue-500 text-gray-100` const Img = tw.img`bg-blue-500 text-gray-100` const jsx = ( <>

ay

) // @ts-expect-error bad jsx const badJsx =