@modern-js/module-tools-docs 2.0.2 → 2.2.0

package/doc_build/static/js/async/en_guide_best-practices_components.45155af9.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[]).push([[7401],{49913:function(o,t,e){e.r(t),e.d(t,{CH:function(){return r},chCodeConfig:function(){return c},content:function(){return E},frontmatter:function(){return l},title:function(){return i},toc:function(){return p}});var n=e(97458),s=e(53799);const r={annotations:s.ds,Spotlight:s.$1,CodeSlot:s.Af,Code:s.EK},c={staticMediaQuery:"not screen, (max-width: 768px)",theme:{name:"nord",type:"dark",semanticHighlighting:!0,colors:{focusBorder:"#3b4252",foreground:"#d8dee9","activityBar.background":"#2e3440","activityBar.dropBackground":"#3b4252","activityBar.foreground":"#d8dee9","activityBar.activeBorder":"#88c0d0","activityBar.activeBackground":"#3b4252","activityBarBadge.background":"#88c0d0","activityBarBadge.foreground":"#2e3440","badge.foreground":"#2e3440","badge.background":"#88c0d0","button.background":"#88c0d0ee","button.foreground":"#2e3440","button.hoverBackground":"#88c0d0","button.secondaryBackground":"#434c5e","button.secondaryForeground":"#d8dee9","button.secondaryHoverBackground":"#4c566a","charts.red":"#bf616a","charts.blue":"#81a1c1","charts.yellow":"#ebcb8b","charts.orange":"#d08770","charts.green":"#a3be8c","charts.purple":"#b48ead","charts.foreground":"#d8dee9","charts.lines":"#88c0d0","debugConsole.infoForeground":"#88c0d0","debugConsole.warningForeground":"#ebcb8b","debugConsole.errorForeground":"#bf616a","debugConsole.sourceForeground":"#616e88","debugConsoleInputIcon.foreground":"#81a1c1","debugExceptionWidget.background":"#4c566a","debugExceptionWidget.border":"#2e3440","debugToolBar.background":"#3b4252",descriptionForeground:"#d8dee9e6","diffEditor.insertedTextBackground":"#81a1c133","diffEditor.removedTextBackground":"#bf616a4d","dropdown.background":"#3b4252","dropdown.border":"#3b4252","dropdown.foreground":"#d8dee9","editorActiveLineNumber.foreground":"#d8dee9cc","editorCursor.foreground":"#d8dee9","editorHint.border":"#ebcb8b00","editorHint.foreground":"#ebcb8b","editorIndentGuide.background":"#434c5eb3","editorIndentGuide.activeBackground":"#4c566a","editorInlayHint.background":"#434c5e","editorInlayHint.foreground":"#d8dee9","editorLineNumber.foreground":"#4c566a","editorLineNumber.activeForeground":"#d8dee9","editorWhitespace.foreground":"#4c566ab3","editorWidget.background":"#2e3440","editorWidget.border":"#3b4252","editor.background":"#2e3440","editor.foreground":"#d8dee9","editor.hoverHighlightBackground":"#3b4252","editor.findMatchBackground":"#88c0d066","editor.findMatchHighlightBackground":"#88c0d033","editor.findRangeHighlightBackground":"#88c0d033","editor.lineHighlightBackground":"#3b4252","editor.lineHighlightBorder":"#3b4252","editor.inactiveSelectionBackground":"#434c5ecc","editor.inlineValuesBackground":"#4c566a","editor.inlineValuesForeground":"#eceff4","editor.selectionBackground":"#434c5ecc","editor.selectionHighlightBackground":"#434c5ecc","editor.rangeHighlightBackground":"#434c5e52","editor.wordHighlightBackground":"#81a1c166","editor.wordHighlightStrongBackground":"#81a1c199","editor.stackFrameHighlightBackground":"#5e81ac","editor.focusedStackFrameHighlightBackground":"#5e81ac","editorError.foreground":"#bf616a","editorError.border":"#bf616a00","editorWarning.foreground":"#ebcb8b","editorWarning.border":"#ebcb8b00","editorBracketMatch.background":"#2e344000","editorBracketMatch.border":"#88c0d0","editorBracketHighlight.foreground1":"#8fbcbb","editorBracketHighlight.foreground2":"#88c0d0","editorBracketHighlight.foreground3":"#81a1c1","editorBracketHighlight.foreground4":"#5e81ac","editorBracketHighlight.foreground5":"#8fbcbb","editorBracketHighlight.foreground6":"#88c0d0","editorBracketHighlight.unexpectedBracket.foreground":"#bf616a","editorCodeLens.foreground":"#4c566a","editorGroup.background":"#2e3440","editorGroup.border":"#3b425201","editorGroup.dropBackground":"#3b425299","editorGroupHeader.border":"#3b425200","editorGroupHeader.noTabsBackground":"#2e3440","editorGroupHeader.tabsBackground":"#2e3440","editorGroupHeader.tabsBorder":"#3b425200","editorGutter.background":"#2e3440","editorGutter.modifiedBackground":"#ebcb8b","editorGutter.addedBackground":"#a3be8c","editorGutter.deletedBackground":"#bf616a","editorHoverWidget.background":"#3b4252","editorHoverWidget.border":"#3b4252","editorLink.activeForeground":"#88c0d0","editorMarkerNavigation.background":"#5e81acc0","editorMarkerNavigationError.background":"#bf616ac0","editorMarkerNavigationWarning.background":"#ebcb8bc0","editorOverviewRuler.border":"#3b4252","editorOverviewRuler.currentContentForeground":"#3b4252","editorOverviewRuler.incomingContentForeground":"#3b4252","editorOverviewRuler.findMatchForeground":"#88c0d066","editorOverviewRuler.rangeHighlightForeground":"#88c0d066","editorOverviewRuler.selectionHighlightForeground":"#88c0d066","editorOverviewRuler.wordHighlightForeground":"#88c0d066","editorOverviewRuler.wordHighlightStrongForeground":"#88c0d066","editorOverviewRuler.modifiedForeground":"#ebcb8b","editorOverviewRuler.addedForeground":"#a3be8c","editorOverviewRuler.deletedForeground":"#bf616a","editorOverviewRuler.errorForeground":"#bf616a","editorOverviewRuler.warningForeground":"#ebcb8b","editorOverviewRuler.infoForeground":"#81a1c1","editorRuler.foreground":"#434c5e","editorSuggestWidget.background":"#2e3440","editorSuggestWidget.border":"#3b4252","editorSuggestWidget.foreground":"#d8dee9","editorSuggestWidget.focusHighlightForeground":"#88c0d0","editorSuggestWidget.highlightForeground":"#88c0d0","editorSuggestWidget.selectedBackground":"#434c5e","editorSuggestWidget.selectedForeground":"#d8dee9","extensionButton.prominentForeground":"#d8dee9","extensionButton.prominentBackground":"#434c5e","extensionButton.prominentHoverBackground":"#4c566a",errorForeground:"#bf616a","gitDecoration.modifiedResourceForeground":"#ebcb8b","gitDecoration.deletedResourceForeground":"#bf616a","gitDecoration.untrackedResourceForeground":"#a3be8c","gitDecoration.ignoredResourceForeground":"#d8dee966","gitDecoration.conflictingResourceForeground":"#5e81ac","gitDecoration.submoduleResourceForeground":"#8fbcbb","gitDecoration.stageDeletedResourceForeground":"#bf616a","gitDecoration.stageModifiedResourceForeground":"#ebcb8b","input.background":"#3b4252","input.foreground":"#d8dee9","input.placeholderForeground":"#d8dee999","input.border":"#3b4252","inputOption.activeBackground":"#5e81ac","inputOption.activeBorder":"#5e81ac","inputOption.activeForeground":"#eceff4","inputValidation.errorBackground":"#bf616a","inputValidation.errorBorder":"#bf616a","inputValidation.infoBackground":"#81a1c1","inputValidation.infoBorder":"#81a1c1","inputValidation.warningBackground":"#d08770","inputValidation.warningBorder":"#d08770","keybindingLabel.background":"#4c566a","keybindingLabel.border":"#4c566a","keybindingLabel.bottomBorder":"#4c566a","keybindingLabel.foreground":"#d8dee9","list.activeSelectionBackground":"#88c0d0","list.activeSelectionForeground":"#2e3440","list.inactiveSelectionBackground":"#434c5e","list.inactiveSelectionForeground":"#d8dee9","list.inactiveFocusBackground":"#434c5ecc","list.hoverForeground":"#eceff4","list.focusForeground":"#d8dee9","list.focusBackground":"#88c0d099","list.focusHighlightForeground":"#eceff4","list.hoverBackground":"#3b4252","list.dropBackground":"#88c0d099","list.highlightForeground":"#88c0d0","list.errorForeground":"#bf616a","list.warningForeground":"#ebcb8b","merge.currentHeaderBackground":"#81a1c166","merge.currentContentBackground":"#81a1c14d","merge.incomingHeaderBackground":"#8fbcbb66","merge.incomingContentBackground":"#8fbcbb4d","merge.border":"#3b425200","minimap.background":"#2e3440","minimap.errorHighlight":"#bf616acc","minimap.findMatchHighlight":"#88c0d0","minimap.selectionHighlight":"#88c0d0cc","minimap.warningHighlight":"#ebcb8bcc","minimapGutter.addedBackground":"#a3be8c","minimapGutter.deletedBackground":"#bf616a","minimapGutter.modifiedBackground":"#ebcb8b","minimapSlider.activeBackground":"#434c5eaa","minimapSlider.background":"#434c5e99","minimapSlider.hoverBackground":"#434c5eaa","notification.background":"#3b4252","notification.buttonBackground":"#434c5e","notification.buttonForeground":"#d8dee9","notification.buttonHoverBackground":"#4c566a","notification.errorBackground":"#bf616a","notification.errorForeground":"#2e3440","notification.foreground":"#d8dee9","notification.infoBackground":"#88c0d0","notification.infoForeground":"#2e3440","notification.warningBackground":"#ebcb8b","notification.warningForeground":"#2e3440","notificationCenter.border":"#3b425200","notificationCenterHeader.background":"#2e3440","notificationCenterHeader.foreground":"#88c0d0","notificationLink.foreground":"#88c0d0","notifications.background":"#3b4252","notifications.border":"#2e3440","notifications.foreground":"#d8dee9","notificationToast.border":"#3b425200","panel.background":"#2e3440","panel.border":"#3b4252","panelTitle.activeBorder":"#88c0d000","panelTitle.activeForeground":"#88c0d0","panelTitle.inactiveForeground":"#d8dee9","peekView.border":"#4c566a","peekViewEditor.background":"#2e3440","peekViewEditorGutter.background":"#2e3440","peekViewEditor.matchHighlightBackground":"#88c0d04d","peekViewResult.background":"#2e3440","peekViewResult.fileForeground":"#88c0d0","peekViewResult.lineForeground":"#d8dee966","peekViewResult.matchHighlightBackground":"#88c0d0cc","peekViewResult.selectionBackground":"#434c5e","peekViewResult.selectionForeground":"#d8dee9","peekViewTitle.background":"#3b4252","peekViewTitleDescription.foreground":"#d8dee9","peekViewTitleLabel.foreground":"#88c0d0","pickerGroup.border":"#3b4252","pickerGroup.foreground":"#88c0d0","progressBar.background":"#88c0d0","quickInputList.focusBackground":"#88c0d0","quickInputList.focusForeground":"#2e3440","sash.hoverBorder":"#88c0d0","scrollbar.shadow":"#00000066","scrollbarSlider.activeBackground":"#434c5eaa","scrollbarSlider.background":"#434c5e99","scrollbarSlider.hoverBackground":"#434c5eaa","selection.background":"#88c0d099","sideBar.background":"#2e3440","sideBar.foreground":"#d8dee9","sideBar.border":"#3b4252","sideBarSectionHeader.background":"#3b4252","sideBarSectionHeader.foreground":"#d8dee9","sideBarTitle.foreground":"#d8dee9","statusBar.background":"#3b4252","statusBar.debuggingBackground":"#5e81ac","statusBar.debuggingForeground":"#d8dee9","statusBar.noFolderForeground":"#d8dee9","statusBar.noFolderBackground":"#3b4252","statusBar.foreground":"#d8dee9","statusBarItem.activeBackground":"#4c566a","statusBarItem.hoverBackground":"#434c5e","statusBarItem.prominentBackground":"#3b4252","statusBarItem.prominentHoverBackground":"#434c5e","statusBarItem.errorBackground":"#3b4252","statusBarItem.errorForeground":"#bf616a","statusBarItem.warningBackground":"#ebcb8b","statusBarItem.warningForeground":"#2e3440","statusBar.border":"#3b425200","tab.activeBackground":"#3b4252","tab.activeForeground":"#d8dee9","tab.border":"#3b425200","tab.activeBorder":"#88c0d000","tab.unfocusedActiveBorder":"#88c0d000","tab.inactiveBackground":"#2e3440","tab.inactiveForeground":"#d8dee966","tab.unfocusedActiveForeground":"#d8dee999","tab.unfocusedInactiveForeground":"#d8dee966","tab.hoverBackground":"#3b4252cc","tab.unfocusedHoverBackground":"#3b4252b3","tab.hoverBorder":"#88c0d000","tab.unfocusedHoverBorder":"#88c0d000","tab.activeBorderTop":"#88c0d000","tab.unfocusedActiveBorderTop":"#88c0d000","tab.lastPinnedBorder":"#4c566a","terminal.background":"#2e3440","terminal.foreground":"#d8dee9","terminal.ansiBlack":"#3b4252","terminal.ansiRed":"#bf616a","terminal.ansiGreen":"#a3be8c","terminal.ansiYellow":"#ebcb8b","terminal.ansiBlue":"#81a1c1","terminal.ansiMagenta":"#b48ead","terminal.ansiCyan":"#88c0d0","terminal.ansiWhite":"#e5e9f0","terminal.ansiBrightBlack":"#4c566a","terminal.ansiBrightRed":"#bf616a","terminal.ansiBrightGreen":"#a3be8c","terminal.ansiBrightYellow":"#ebcb8b","terminal.ansiBrightBlue":"#81a1c1","terminal.ansiBrightMagenta":"#b48ead","terminal.ansiBrightCyan":"#8fbcbb","terminal.ansiBrightWhite":"#eceff4","terminal.tab.activeBorder":"#88c0d0","textBlockQuote.background":"#3b4252","textBlockQuote.border":"#81a1c1","textCodeBlock.background":"#4c566a","textLink.activeForeground":"#88c0d0","textLink.foreground":"#88c0d0","textPreformat.foreground":"#8fbcbb","textSeparator.foreground":"#eceff4","titleBar.activeBackground":"#2e3440","titleBar.activeForeground":"#d8dee9","titleBar.border":"#2e344000","titleBar.inactiveBackground":"#2e3440","titleBar.inactiveForeground":"#d8dee966","tree.indentGuidesStroke":"#616e88","walkThrough.embeddedEditorBackground":"#2e3440","welcomePage.buttonBackground":"#434c5e","welcomePage.buttonHoverBackground":"#4c566a","widget.shadow":"#00000066"},tokenColors:[{settings:{foreground:"#d8dee9ff",background:"#2e3440ff"}},{scope:"emphasis",settings:{fontStyle:"italic"}},{scope:"strong",settings:{fontStyle:"bold"}},{name:"Comment",scope:"comment",settings:{foreground:"#616E88"}},{name:"Constant Character",scope:"constant.character",settings:{foreground:"#EBCB8B"}},{name:"Constant Character Escape",scope:"constant.character.escape",settings:{foreground:"#EBCB8B"}},{name:"Constant Language",scope:"constant.language",settings:{foreground:"#81A1C1"}},{name:"Constant Numeric",scope:"constant.numeric",settings:{foreground:"#B48EAD"}},{name:"Constant Regexp",scope:"constant.regexp",settings:{foreground:"#EBCB8B"}},{name:"Entity Name Class/Type",scope:["entity.name.class","entity.name.type.class"],settings:{foreground:"#8FBCBB"}},{name:"Entity Name Function",scope:"entity.name.function",settings:{foreground:"#88C0D0"}},{name:"Entity Name Tag",scope:"entity.name.tag",settings:{foreground:"#81A1C1"}},{name:"Entity Other Attribute Name",scope:"entity.other.attribute-name",settings:{foreground:"#8FBCBB"}},{name:"Entity Other Inherited Class",scope:"entity.other.inherited-class",settings:{fontStyle:"bold",foreground:"#8FBCBB"}},{name:"Invalid Deprecated",scope:"invalid.deprecated",settings:{foreground:"#D8DEE9",background:"#EBCB8B"}},{name:"Invalid Illegal",scope:"invalid.illegal",settings:{foreground:"#D8DEE9",background:"#BF616A"}},{name:"Keyword",scope:"keyword",settings:{foreground:"#81A1C1"}},{name:"Keyword Operator",scope:"keyword.operator",settings:{foreground:"#81A1C1"}},{name:"Keyword Other New",scope:"keyword.other.new",settings:{foreground:"#81A1C1"}},{name:"Markup Bold",scope:"markup.bold",settings:{fontStyle:"bold"}},{name:"Markup Changed",scope:"markup.changed",settings:{foreground:"#EBCB8B"}},{name:"Markup Deleted",scope:"markup.deleted",settings:{foreground:"#BF616A"}},{name:"Markup Inserted",scope:"markup.inserted",settings:{foreground:"#A3BE8C"}},{name:"Meta Preprocessor",scope:"meta.preprocessor",settings:{foreground:"#5E81AC"}},{name:"Punctuation",scope:"punctuation",settings:{foreground:"#ECEFF4"}},{name:"Punctuation Definition Parameters",scope:["punctuation.definition.method-parameters","punctuation.definition.function-parameters","punctuation.definition.parameters"],settings:{foreground:"#ECEFF4"}},{name:"Punctuation Definition Tag",scope:"punctuation.definition.tag",settings:{foreground:"#81A1C1"}},{name:"Punctuation Definition Comment",scope:["punctuation.definition.comment","punctuation.end.definition.comment","punctuation.start.definition.comment"],settings:{foreground:"#616E88"}},{name:"Punctuation Section",scope:"punctuation.section",settings:{foreground:"#ECEFF4"}},{name:"Punctuation Section Embedded",scope:["punctuation.section.embedded.begin","punctuation.section.embedded.end"],settings:{foreground:"#81A1C1"}},{name:"Punctuation Terminator",scope:"punctuation.terminator",settings:{foreground:"#81A1C1"}},{name:"Punctuation Variable",scope:"punctuation.definition.variable",settings:{foreground:"#81A1C1"}},{name:"Storage",scope:"storage",settings:{foreground:"#81A1C1"}},{name:"String",scope:"string",settings:{foreground:"#A3BE8C"}},{name:"String Regexp",scope:"string.regexp",settings:{foreground:"#EBCB8B"}},{name:"Support Class",scope:"support.class",settings:{foreground:"#8FBCBB"}},{name:"Support Constant",scope:"support.constant",settings:{foreground:"#81A1C1"}},{name:"Support Function",scope:"support.function",settings:{foreground:"#88C0D0"}},{name:"Support Function Construct",scope:"support.function.construct",settings:{foreground:"#81A1C1"}},{name:"Support Type",scope:"support.type",settings:{foreground:"#8FBCBB"}},{name:"Support Type Exception",scope:"support.type.exception",settings:{foreground:"#8FBCBB"}},{name:"Token Debug",scope:"token.debug-token",settings:{foreground:"#b48ead"}},{name:"Token Error",scope:"token.error-token",settings:{foreground:"#bf616a"}},{name:"Token Info",scope:"token.info-token",settings:{foreground:"#88c0d0"}},{name:"Token Warning",scope:"token.warn-token",settings:{foreground:"#ebcb8b"}},{name:"Variable",scope:"variable.other",settings:{foreground:"#D8DEE9"}},{name:"Variable Language",scope:"variable.language",settings:{foreground:"#81A1C1"}},{name:"Variable Parameter",scope:"variable.parameter",settings:{foreground:"#D8DEE9"}},{name:"[C/CPP] Punctuation Separator Pointer-Access",scope:"punctuation.separator.pointer-access.c",settings:{foreground:"#81A1C1"}},{name:"[C/CPP] Meta Preprocessor Include",scope:["source.c meta.preprocessor.include","source.c string.quoted.other.lt-gt.include"],settings:{foreground:"#8FBCBB"}},{name:"[C/CPP] Conditional Directive",scope:["source.cpp keyword.control.directive.conditional","source.cpp punctuation.definition.directive","source.c keyword.control.directive.conditional","source.c punctuation.definition.directive"],settings:{foreground:"#5E81AC",fontStyle:"bold"}},{name:"[CSS] Constant Other Color RGB Value",scope:"source.css constant.other.color.rgb-value",settings:{foreground:"#B48EAD"}},{name:"[CSS](Function) Meta Property-Value",scope:"source.css meta.property-value",settings:{foreground:"#88C0D0"}},{name:"[CSS] Media Queries",scope:["source.css keyword.control.at-rule.media","source.css keyword.control.at-rule.media punctuation.definition.keyword"],settings:{foreground:"#D08770"}},{name:"[CSS] Punctuation Definition Keyword",scope:"source.css punctuation.definition.keyword",settings:{foreground:"#81A1C1"}},{name:"[CSS] Support Type Property Name",scope:"source.css support.type.property-name",settings:{foreground:"#D8DEE9"}},{name:"[diff] Meta Range Context",scope:"source.diff meta.diff.range.context",settings:{foreground:"#8FBCBB"}},{name:"[diff] Meta Header From-File",scope:"source.diff meta.diff.header.from-file",settings:{foreground:"#8FBCBB"}},{name:"[diff] Punctuation Definition From-File",scope:"source.diff punctuation.definition.from-file",settings:{foreground:"#8FBCBB"}},{name:"[diff] Punctuation Definition Range",scope:"source.diff punctuation.definition.range",settings:{foreground:"#8FBCBB"}},{name:"[diff] Punctuation Definition Separator",scope:"source.diff punctuation.definition.separator",settings:{foreground:"#81A1C1"}},{name:"[Elixir](JakeBecker.elixir-ls) module names",scope:"entity.name.type.module.elixir",settings:{foreground:"#8FBCBB"}},{name:"[Elixir](JakeBecker.elixir-ls) module attributes",scope:"variable.other.readwrite.module.elixir",settings:{foreground:"#D8DEE9",fontStyle:"bold"}},{name:"[Elixir](JakeBecker.elixir-ls) atoms",scope:"constant.other.symbol.elixir",settings:{foreground:"#D8DEE9",fontStyle:"bold"}},{name:"[Elixir](JakeBecker.elixir-ls) modules",scope:"variable.other.constant.elixir",settings:{foreground:"#8FBCBB"}},{name:"[Go] String Format Placeholder",scope:"source.go constant.other.placeholder.go",settings:{foreground:"#EBCB8B"}},{name:"[Java](JavaDoc) Comment Block Documentation HTML Entities",scope:"source.java comment.block.documentation.javadoc punctuation.definition.entity.html",settings:{foreground:"#81A1C1"}},{name:"[Java](JavaDoc) Constant Other",scope:"source.java constant.other",settings:{foreground:"#D8DEE9"}},{name:"[Java](JavaDoc) Keyword Other Documentation",scope:"source.java keyword.other.documentation",settings:{foreground:"#8FBCBB"}},{name:"[Java](JavaDoc) Keyword Other Documentation Author",scope:"source.java keyword.other.documentation.author.javadoc",settings:{foreground:"#8FBCBB"}},{name:"[Java](JavaDoc) Keyword Other Documentation Directive/Custom",scope:["source.java keyword.other.documentation.directive","source.java keyword.other.documentation.custom"],settings:{foreground:"#8FBCBB"}},{name:"[Java](JavaDoc) Keyword Other Documentation See",scope:"source.java keyword.other.documentation.see.javadoc",settings:{foreground:"#8FBCBB"}},{name:"[Java] Meta Method-Call",scope:"source.java meta.method-call meta.method",settings:{foreground:"#88C0D0"}},{name:"[Java](JavaDoc) Meta Tag Template Link",scope:["source.java meta.tag.template.link.javadoc","source.java string.other.link.title.javadoc"],settings:{foreground:"#8FBCBB"}},{name:"[Java](JavaDoc) Meta Tag Template Value",scope:"source.java meta.tag.template.value.javadoc",settings:{foreground:"#88C0D0"}},{name:"[Java](JavaDoc) Punctuation Definition Keyword",scope:"source.java punctuation.definition.keyword.javadoc",settings:{foreground:"#8FBCBB"}},{name:"[Java](JavaDoc) Punctuation Definition Tag",scope:["source.java punctuation.definition.tag.begin.javadoc","source.java punctuation.definition.tag.end.javadoc"],settings:{foreground:"#616E88"}},{name:"[Java] Storage Modifier Import",scope:"source.java storage.modifier.import",settings:{foreground:"#8FBCBB"}},{name:"[Java] Storage Modifier Package",scope:"source.java storage.modifier.package",settings:{foreground:"#8FBCBB"}},{name:"[Java] Storage Type",scope:"source.java storage.type",settings:{foreground:"#8FBCBB"}},{name:"[Java] Storage Type Annotation",scope:"source.java storage.type.annotation",settings:{foreground:"#D08770"}},{name:"[Java] Storage Type Generic",scope:"source.java storage.type.generic",settings:{foreground:"#8FBCBB"}},{name:"[Java] Storage Type Primitive",scope:"source.java storage.type.primitive",settings:{foreground:"#81A1C1"}},{name:"[JavaScript] Decorator",scope:["source.js punctuation.decorator","source.js meta.decorator variable.other.readwrite","source.js meta.decorator entity.name.function"],settings:{foreground:"#D08770"}},{name:"[JavaScript] Meta Object-Literal Key",scope:"source.js meta.object-literal.key",settings:{foreground:"#88C0D0"}},{name:"[JavaScript](JSDoc) Storage Type Class",scope:"source.js storage.type.class.jsdoc",settings:{foreground:"#8FBCBB"}},{name:"[JavaScript] String Template Literals Punctuation",scope:["source.js string.quoted.template punctuation.quasi.element.begin","source.js string.quoted.template punctuation.quasi.element.end","source.js string.template punctuation.definition.template-expression"],settings:{foreground:"#81A1C1"}},{name:"[JavaScript] Interpolated String Template Punctuation Functions",scope:"source.js string.quoted.template meta.method-call.with-arguments",settings:{foreground:"#ECEFF4"}},{name:"[JavaScript] String Template Literal Variable",scope:["source.js string.template meta.template.expression support.variable.property","source.js string.template meta.template.expression variable.other.object"],settings:{foreground:"#D8DEE9"}},{name:"[JavaScript] Support Type Primitive",scope:"source.js support.type.primitive",settings:{foreground:"#81A1C1"}},{name:"[JavaScript] Variable Other Object",scope:"source.js variable.other.object",settings:{foreground:"#D8DEE9"}},{name:"[JavaScript] Variable Other Read-Write Alias",scope:"source.js variable.other.readwrite.alias",settings:{foreground:"#8FBCBB"}},{name:"[JavaScript] Parentheses in Template Strings",scope:["source.js meta.embedded.line meta.brace.square","source.js meta.embedded.line meta.brace.round","source.js string.quoted.template meta.brace.square","source.js string.quoted.template meta.brace.round"],settings:{foreground:"#ECEFF4"}},{name:"[HTML] Constant Character Entity",scope:"text.html.basic constant.character.entity.html",settings:{foreground:"#EBCB8B"}},{name:"[HTML] Constant Other Inline-Data",scope:"text.html.basic constant.other.inline-data",settings:{foreground:"#D08770",fontStyle:"italic"}},{name:"[HTML] Meta Tag SGML Doctype",scope:"text.html.basic meta.tag.sgml.doctype",settings:{foreground:"#5E81AC"}},{name:"[HTML] Punctuation Definition Entity",scope:"text.html.basic punctuation.definition.entity",settings:{foreground:"#81A1C1"}},{name:"[INI] Entity Name Section Group-Title",scope:"source.properties entity.name.section.group-title.ini",settings:{foreground:"#88C0D0"}},{name:"[INI] Punctuation Separator Key-Value",scope:"source.properties punctuation.separator.key-value.ini",settings:{foreground:"#81A1C1"}},{name:"[Markdown] Markup Fenced Code Block",scope:["text.html.markdown markup.fenced_code.block","text.html.markdown markup.fenced_code.block punctuation.definition"],settings:{foreground:"#8FBCBB"}},{name:"[Markdown] Markup Heading",scope:"markup.heading",settings:{foreground:"#88C0D0"}},{name:"[Markdown] Markup Inline",scope:["text.html.markdown markup.inline.raw","text.html.markdown markup.inline.raw punctuation.definition.raw"],settings:{foreground:"#8FBCBB"}},{name:"[Markdown] Markup Italic",scope:"text.html.markdown markup.italic",settings:{fontStyle:"italic"}},{name:"[Markdown] Markup Link",scope:"text.html.markdown markup.underline.link",settings:{fontStyle:"underline"}},{name:"[Markdown] Markup List Numbered/Unnumbered",scope:"text.html.markdown beginning.punctuation.definition.list",settings:{foreground:"#81A1C1"}},{name:"[Markdown] Markup Quote Punctuation Definition",scope:"text.html.markdown beginning.punctuation.definition.quote",settings:{foreground:"#8FBCBB"}},{name:"[Markdown] Markup Quote Punctuation Definition",scope:"text.html.markdown markup.quote",settings:{foreground:"#616E88"}},{name:"[Markdown] Markup Math Constant",scope:"text.html.markdown constant.character.math.tex",settings:{foreground:"#81A1C1"}},{name:"[Markdown] Markup Math Definition Marker",scope:["text.html.markdown punctuation.definition.math.begin","text.html.markdown punctuation.definition.math.end"],settings:{foreground:"#5E81AC"}},{name:"[Markdown] Markup Math Function Definition Marker",scope:"text.html.markdown punctuation.definition.function.math.tex",settings:{foreground:"#88C0D0"}},{name:"[Markdown] Markup Math Operator",scope:"text.html.markdown punctuation.math.operator.latex",settings:{foreground:"#81A1C1"}},{name:"[Markdown] Punctuation Definition Heading",scope:"text.html.markdown punctuation.definition.heading",settings:{foreground:"#81A1C1"}},{name:"[Markdown] Punctuation Definition Constant/String",scope:["text.html.markdown punctuation.definition.constant","text.html.markdown punctuation.definition.string"],settings:{foreground:"#81A1C1"}},{name:"[Markdown] String Other Link Description/Title",scope:["text.html.markdown constant.other.reference.link","text.html.markdown string.other.link.description","text.html.markdown string.other.link.title"],settings:{foreground:"#88C0D0"}},{name:"[Perl] Perl Sigils",scope:"source.perl punctuation.definition.variable",settings:{foreground:"#D8DEE9"}},{name:"[PHP] Meta Function-Call Object",scope:["source.php meta.function-call","source.php meta.function-call.object"],settings:{foreground:"#88C0D0"}},{name:"[Python] Decorator",scope:["source.python entity.name.function.decorator","source.python meta.function.decorator support.type"],settings:{foreground:"#D08770"}},{name:"[Python] Function Call",scope:"source.python meta.function-call.generic",settings:{foreground:"#88C0D0"}},{name:"[Python] Support Type",scope:"source.python support.type",settings:{foreground:"#88C0D0"}},{name:"[Python] Function Parameter",scope:["source.python variable.parameter.function.language"],settings:{foreground:"#D8DEE9"}},{name:"[Python] Function Parameter Special",scope:["source.python meta.function.parameters variable.parameter.function.language.special.self"],settings:{foreground:"#81A1C1"}},{name:"[Rust] Entity types",scope:"source.rust entity.name.type",settings:{foreground:"#8FBCBB"}},{name:"[Rust] Macro",scope:"source.rust meta.macro entity.name.function",settings:{fontStyle:"bold",foreground:"#88C0D0"}},{name:"[Rust] Attributes",scope:["source.rust meta.attribute","source.rust meta.attribute punctuation","source.rust meta.attribute keyword.operator"],settings:{foreground:"#5E81AC"}},{name:"[Rust] Traits",scope:"source.rust entity.name.type.trait",settings:{fontStyle:"bold"}},{name:"[Rust] Interpolation Bracket Curly",scope:"source.rust punctuation.definition.interpolation",settings:{foreground:"#EBCB8B"}},{name:"[SCSS] Punctuation Definition Interpolation Bracket Curly",scope:["source.css.scss punctuation.definition.interpolation.begin.bracket.curly","source.css.scss punctuation.definition.interpolation.end.bracket.curly"],settings:{foreground:"#81A1C1"}},{name:"[SCSS] Variable Interpolation",scope:"source.css.scss variable.interpolation",settings:{foreground:"#D8DEE9",fontStyle:"italic"}},{name:"[TypeScript] Decorators",scope:["source.ts punctuation.decorator","source.ts meta.decorator variable.other.readwrite","source.ts meta.decorator entity.name.function","source.tsx punctuation.decorator","source.tsx meta.decorator variable.other.readwrite","source.tsx meta.decorator entity.name.function"],settings:{foreground:"#D08770"}},{name:"[TypeScript] Object-literal keys",scope:["source.ts meta.object-literal.key","source.tsx meta.object-literal.key"],settings:{foreground:"#D8DEE9"}},{name:"[TypeScript] Object-literal functions",scope:["source.ts meta.object-literal.key entity.name.function","source.tsx meta.object-literal.key entity.name.function"],settings:{foreground:"#88C0D0"}},{name:"[TypeScript] Type/Class",scope:["source.ts support.class","source.ts support.type","source.ts entity.name.type","source.ts entity.name.class","source.tsx support.class","source.tsx support.type","source.tsx entity.name.type","source.tsx entity.name.class"],settings:{foreground:"#8FBCBB"}},{name:"[TypeScript] Static Class Support",scope:["source.ts support.constant.math","source.ts support.constant.dom","source.ts support.constant.json","source.tsx support.constant.math","source.tsx support.constant.dom","source.tsx support.constant.json"],settings:{foreground:"#8FBCBB"}},{name:"[TypeScript] Variables",scope:["source.ts support.variable","source.tsx support.variable"],settings:{foreground:"#D8DEE9"}},{name:"[TypeScript] Parentheses in Template Strings",scope:["source.ts meta.embedded.line meta.brace.square","source.ts meta.embedded.line meta.brace.round","source.tsx meta.embedded.line meta.brace.square","source.tsx meta.embedded.line meta.brace.round"],settings:{foreground:"#ECEFF4"}},{name:"[XML] Entity Name Tag Namespace",scope:"text.xml entity.name.tag.namespace",settings:{foreground:"#8FBCBB"}},{name:"[XML] Keyword Other Doctype",scope:"text.xml keyword.other.doctype",settings:{foreground:"#5E81AC"}},{name:"[XML] Meta Tag Preprocessor",scope:"text.xml meta.tag.preprocessor entity.name.tag",settings:{foreground:"#5E81AC"}},{name:"[XML] Entity Name Tag Namespace",scope:["text.xml string.unquoted.cdata","text.xml string.unquoted.cdata punctuation.definition.string"],settings:{foreground:"#D08770",fontStyle:"italic"}},{name:"[YAML] Entity Name Tag",scope:"source.yaml entity.name.tag",settings:{foreground:"#8FBCBB"}}]},autoImport:!0,showCopyButton:!0,skipLanguages:[],filepath:"/Users/bytedance/modern.js/website/module-tools/docs/en/guide/best-practices/components.mdx"},l=void 0,p=[{id:"debugging-code-with-storybook",text:"Debugging code with Storybook",depth:2},{id:"developing-styles",text:"Developing Styles",depth:2},{id:"csspostcss",text:"CSS/PostCSS",depth:3},{id:"less",text:"Less",depth:3},{id:"sassscss",text:"Sass/Scss",depth:3},{id:"tailwind-css",text:"Tailwind CSS",depth:3},{id:"html-class",text:"HTML class",depth:4},{id:"apply",text:"@apply",depth:4},{id:"recommended-method",text:"Recommended method",depth:4},{id:"the-difference-between-bundle-and-bundleless-build-products",text:"The difference between bundle and bundleless build products",depth:4},{id:"css-modules",text:"CSS Modules",depth:3},{id:"configuring-build-products",text:"Configuring build products",depth:2},{id:"testing-components",text:"Testing components",depth:2},{id:"releasing-components",text:"Releasing components",depth:2}],i="# Initialize the project",E='"# Developing Components\\n\\nThis chapter will describe how to develop component projects using the module engineering solution.\\n\\n# # Initialize the project\\n\\n<CH.Spotlight>\\n\\n```bash Interactive questions\\nnpx @modern-js/create components-project\\n\\n? Please select the solution you want to create Module Solution\\n? Package Name components-demo\\n? Development Language TS\\n? Package Management Tool pnpm\\n```\\n\\n---\\n\\nIt is recommended to use the `@modern-js/create` command to initialize an npm project.\\n\\n```bash Interactive questions\\nnpx @modern-js/create components-project\\n\\n? Please select the solution you want to create Module Solution\\n? Package Name components-demo\\n? Development Language TS\\n? Package Management Tool pnpm\\n```\\n\\n---\\n\\nThe initialized directory structure.\\n\\n```bash The initialized directory structure\\n.\\n\u251c\u2500\u2500 README.md\\n\u251c\u2500\u2500 node_modules/\\n\u251c\u2500\u2500 dist/\\n\u251c\u2500\u2500 modern.config.ts\\n\u251c\u2500\u2500 package.json\\n\u251c\u2500\u2500 pnpm-lock.yaml\\n\u251c\u2500\u2500 src\\n\u2502   \u251c\u2500\u2500 index.ts\\n\u2502   \u2514\u2500\u2500 modern-app-env.d.ts\\n\u2514\u2500\u2500 tsconfig.json\\n```\\n\\n---\\n\\nModify the `. /src/index.ts` file suffix and content.\\n\\nAt this point, a component project is initialized.\\n\\n```tsx ./src/index.tsx\\nexport default () => {\\n  return <div>hello world</div>;\\n};\\n```\\n\\n</CH.Spotlight>\\n\\n## Debugging code with Storybook\\n\\n<CH.Spotlight>\\n\\n```bash Terminal\\npnpm run new\\n\\n? Action Enable features\\n? Enable features Enable Visual Testing (Storybook)\\n```\\n\\n---\\n\\nExecute the `new` command in the project root directory to enable the Storybook feature.\\n\\n```bash Terminal\\npnpm run new\\n\\n? Action Enable features\\n? Enable features Enable Visual Testing (Storybook)\\n```\\n\\n---\\n\\nOnce successfully opened, you will see that a new dependency has been added to `package.json`. The `stories` directory and related initialization files are also created.\\n\\n<CH.Code>\\n\\n```json ./package.json focus=4:7\\n{\\n  \\"name\\": \\"components-demo\\",\\n  \\"devDependencies\\": {\\n    \\"@modern-js/plugin-storybook\\": \\"x.y.z\\",\\n    \\"@modern-js/runtime\\": \\"x.y.z\\",\\n    \\"react\\": \\"^17\\",\\n    \\"react-dom\\": \\"^17\\"\\n  }\\n}\\n```\\n\\n```bash Directory Structure\\n.\\n\u251c\u2500\u2500 src\\n\u2502   \u251c\u2500\u2500 index.ts\\n\u2502   \u2514\u2500\u2500 modern-app-env.d.ts\\n\u251c\u2500\u2500 stories\\n\u2502   \u251c\u2500\u2500 .eslintrc.js\\n\u2502   \u251c\u2500\u2500 index.stories.tsx\\n\u2502   \u2514\u2500\u2500 tsconfig.json\\n```\\n\\n</CH.Code>\\n\\n---\\n\\nAfter initialization, the `tsconfig.json` file in the `. /stories` directory, the `tsconfig.json` file is set by default with the `paths` configuration of the same name as the project.\\n\\n```json ./stories/tsconfig.json focus=5:7\\n{\\n  \\"extends\\": \\"../tsconfig.json\\",\\n  \\"compilerOptions\\": {\\n    \\"baseUrl\\": \\"../\\",\\n    \\"paths\\": {\\n      \\"components-demo\\": [\\"./\\"],\\n      \\"components-demo/*\\": [\\"./*\\"]\\n    }\\n  },\\n  \\"include\\": [\\"**/*\\"]\\n}\\n```\\n\\n---\\n\\nSuch a configuration allows you to introduce code in Story code directly using the name of the project.\\n\\n<CH.Code>\\n\\n```tsx ./stories/index.stories.tsx\\nimport Component from \'components-demo\';\\n\\nexport const YourStory = () => <Component />;\\n\\nexport default {\\n  title: \'Your Stories\',\\n};\\n```\\n\\n---\\n\\n```tsx ./src/index.tsx\\nexport default () => {\\n  return <div>hello world</div>;\\n};\\n```\\n\\n</CH.Code>\\n\\n---\\n\\nAt this point Storybook identifies the entry point for the imported code based on fields like `main`, `exports` in the project\'s `package.json` file.\\nThe location of the type file is determined by the `types` field.\\n\\n```json package.json\\n{\\n  \\"name\\": \\"components-demo\\",\\n  \\"main\\": \\"./dist/esm/index.js\\",\\n  \\"types\\": \\"./dist/types/index.d.ts\\"\\n}\\n```\\n\\n---\\n\\nWhile importing source code for debugging is also supported, debugging using project artifacts is more reliable.\\n\\nDebugging with source code has a limitation: some configurations are not equivalent in Storybook and in the original build support.\\n\\n**This is why debugging with the product is recommended**.\\n\\n```tsx ./stories/index.stories.tsx\\nimport Component from \'../src\';\\n\\nexport const YourStory = () => <Component />;\\n\\nexport default {\\n  title: \'Your Stories\',\\n};\\n```\\n\\n</CH.Spotlight>\\n\\n## Developing Styles\\n\\nNext we can add styles to the component.\\n\\nThe following capabilities are currently supported for developing styles.\\n\\n- CSS/PostCSS\\n- Less\\n- Scss/Sass\\n- Tailwind CSS\\n- CSS Modules\\n\\n### CSS/PostCSS\\n\\nThe module project supports PostCSS and has the following built-in postcss plugins.\\n\\n- [flexbugs-fixes](https://github.com/luisrudge/postcss-flexbugs-fixes)\\n- [custom-properties](https://github.com/postcss/postcss-custom-properties)\\n- [initial](https://github.com/maximkoretskiy/postcss-initial)\\n- [page-break](https://github.com/shrpne/postcss-page-break)\\n- [font-variant](https://github.com/postcss/postcss-font-variant)\\n- [media-minmax](https://github.com/postcss/postcss-media-minmax)\\n- [nesting](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting#readme)\\n\\nSo we can create `.css` files in our projects and use the syntax support and capabilities provided by these plugins directly in our css files.\\n\\n<CH.Spotlight>\\n\\n```css ./src/index.css\\na,\\nb {\\n  color: red;\\n\\n  /* \\"&\\" comes first */\\n  & c,\\n  & d {\\n    color: white;\\n  }\\n\\n  /* \\"&\\" comes later, requiring \\"@nest\\" */\\n  @nest e & {\\n    color: yellow;\\n  }\\n}\\n```\\n\\n---\\n\\nSource Code.\\n\\n```css ./src/index.css\\n\\n```\\n\\n---\\n\\ncss product.\\n\\n```css ./dist/es/index.css\\na,\\nb {\\n  color: red;\\n}\\na c,\\nb c,\\na d,\\nb d {\\n  color: white;\\n}\\ne a,\\ne b {\\n  color: yellow;\\n}\\n```\\n\\n</CH.Spotlight>\\n\\n### Less\\n\\nModule projects support development styles using Less.\\n\\n> Currently supported version is 4.1.3\\n\\n<CH.Spotlight>\\n\\n```less ./src/common.less\\n@bg: black;\\n@bg-light: boolean(luma(@bg) > 50%);\\n\\ndiv {\\n  background: @bg;\\n  color: if(@bg-light, black, white);\\n}\\n```\\n\\n---\\n\\nSource Code.\\n\\n```less ./src/common.less\\n\\n```\\n\\n---\\n\\nLess product.\\n\\n```css ./dist/es/common.css\\ndiv {\\n  background: black;\\n  color: white;\\n}\\n```\\n\\n</CH.Spotlight>\\n\\n### Sass/Scss\\n\\nModule projects support developing styles using Scss/Sass.\\n\\n> Currently supported version is 1.54.4\\n\\n<CH.Spotlight>\\n\\n```sass ./src/common.sass\\n$font-stack: Helvetica, sans-serif;\\n$primary-color: #333;\\n\\nbody {\\n  font: 100% $font-stack;\\n  color: $primary-color;\\n}\\n```\\n\\n---\\n\\n\u6e90\u4ee3\u7801\u3002\\n\\n```sass ./src/common.sass\\n\\n```\\n\\n---\\n\\nLess product.\\n\\n```css ./dist/es/common.css\\nbody {\\n  font: 100% Helvetica, sans-serif;\\n  color: #333;\\n}\\n```\\n\\n</CH.Spotlight>\\n\\n### Tailwind CSS\\n\\nThe module project supports the development of component styles using Tailwind CSS.\\n\\nBy default, this feature is not enabled in the module project, you need to enable it as follows.\\n\\n<CH.Spotlight>\\n\\n```bash Terminal\\npnpm run new\\n\\n? Action Enable features\\n? Enable features Enable Visual Testing (Storybook)\\n```\\n\\n---\\n\\nThe Tailwind CSS feature can be enabled by executing the `new` command in the project root directory.\\n\\n```bash Terminal\\npnpm run new\\n\\n? Action Enable features\\n? Enable features Enable Tailwind CSS\\n```\\n\\n---\\n\\nOnce successfully opened, you will see that a new dependency has been added to `package.json`.\\n\\n```json ./package.json\\n{\\n  \\"devDependencies\\": {\\n    \\"@modern-js/plugin-tailwindcss\\": \\"x.y.z\\"\\n  }\\n}\\n```\\n\\n</CH.Spotlight>\\n\\nTailwind CSS offers two ways to use it.\\n\\n#### HTML class\\n\\n<CH.Spotlight>\\n\\n```tsx ./src/index.tsx\\nimport \'tailwindcss/utilities.css\';\\n\\nexport default () => {\\n  return <div className=\\"bg-black text-white\\">hello world</div>;\\n};\\n```\\n\\n---\\n\\nTailwind CSS supports adding styles to HTML tags by using class names.\\n\\n```tsx ./src/index.tsx focus=5:5\\n\\n```\\n\\n---\\n\\n**When using HTML class names, be sure to import the Tailwind CSS equivalent css file. **\\n\\n```tsx ./src/index.tsx focus=1:1\\n\\n```\\n\\n---\\n\\nStyle product.\\n\\n> This is a bundle build.\\n\\n```css ./dist/es/index.css\\n/* ../../node_modules/.pnpm/tailwindcss@2.2.19/node_modules/tailwindcss/utilities.css */\\n.table {\\n  display: table;\\n}\\n@keyframes spin {\\n  to {\\n    transform: rotate(360deg);\\n  }\\n}\\n@keyframes ping {\\n  75%,\\n  100% {\\n    transform: scale(2);\\n    opacity: 0;\\n  }\\n}\\n@keyframes pulse {\\n  50% {\\n    opacity: 0.5;\\n  }\\n}\\n@keyframes bounce {\\n  0%,\\n  100% {\\n    transform: translateY(-25%);\\n    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);\\n  }\\n  50% {\\n    transform: none;\\n    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\\n  }\\n}\\n.bg-black {\\n  --tw-bg-opacity: 1;\\n  background-color: rgba(0, 0, 0, var(--tw-bg-opacity));\\n}\\n.text-white {\\n  --tw-text-opacity: 1;\\n  color: rgba(255, 255, 255, var(--tw-text-opacity));\\n}\\n*,\\n::before,\\n::after {\\n  --tw-shadow: 0 0 #0000;\\n}\\n*,\\n::before,\\n::after {\\n  --tw-ring-inset: var(--tw-empty);\\n  --tw-ring-offset-width: 0px;\\n  --tw-ring-offset-color: #fff;\\n  --tw-ring-color: rgba(59, 130, 246, 0.5);\\n  --tw-ring-offset-shadow: 0 0 #0000;\\n  --tw-ring-shadow: 0 0 #0000;\\n}\\n@media (min-width: 640px) {\\n}\\n@media (min-width: 768px) {\\n}\\n@media (min-width: 1024px) {\\n}\\n@media (min-width: 1280px) {\\n}\\n@media (min-width: 1536px) {\\n}\\n```\\n\\n</CH.Spotlight>\\n\\n#### `@apply`\\n\\nTailwind CSS provides the [`@apply`](https://v2.tailwindcss.com/docs/functions-and-directives#apply) directive, which allows us to inline the styles provided by Tailwind CSS into the styles we write.\\n\\n`@apply` can be used in CSS, Less, and Sass.\\n\\n```css\\n.btn {\\n  @apply font-bold py-2 px-4 rounded;\\n}\\n```\\n\\nHowever, there are some things to keep in mind when using Less and Sass.\\n\\n##### Sass\\n\\nWhen using Tailwind with Sass, the presence of `!important` after `@apply` requires interpolation to get Sass to compile correctly.\\n\\n<CH.Spotlight>\\n\\n```sass\\n.alert {\\n  @apply bg-red-500 !important;\\n}\\n```\\n\\n---\\n\\nIt does not work properly.\\n\\n```sass\\n\\n```\\n\\n---\\n\\nCan work properly.\\n\\n```sass\\n.alert {\\n  @apply bg-red-500 #{!important};\\n}\\n```\\n\\n</CH.Spotlight>\\n\\n##### Less\\n\\nWhen using Tailwind with Less, you cannot nest Tailwind\'s `@screen` directive.\\n\\n<CH.Spotlight>\\n\\n```less\\n.card {\\n  @apply rounded-none;\\n\\n  @screen sm {\\n    @apply rounded-lg;\\n  }\\n}\\n```\\n\\n---\\n\\nIt does not work properly.\\n\\n```less\\n\\n```\\n\\n---\\n\\nInstead, use regular media queries and the `theme()` function to reference your screen size, or simply don\'t nest your `@screen` directive.\\n\\n<CH.Code>\\n\\n```less Method One\\n// Use a regular media query and theme()\\n.card {\\n  @apply rounded-none;\\n\\n  @media (min-width: theme(\'screens.sm\')) {\\n    @apply rounded-lg;\\n  }\\n}\\n```\\n\\n---\\n\\n```less Method Two\\n// Use the @screen directive at the top-level\\n.card {\\n  @apply rounded-none;\\n\\n  @media (min-width: theme(\'screens.sm\')) {\\n    @apply rounded-lg;\\n  }\\n}\\n```\\n\\n</CH.Code>\\n\\n</CH.Spotlight>\\n\\n#### Recommended method\\n\\n**It is recommended to develop styles in the way specified by `@apply`, so that only styles inlined by directives are included in the style product. **\\n\\nWhen adding styles using HTML class names, by default Tailwind will not only add the styles corresponding to its own class name to the product, but will also have additional style code that may not affect its own styles.\\n\\n#### The difference between bundle and bundleless build products\\n\\nFor the following code, there is a big difference between the bundle and bundleless modes of building products.\\n\\n> The so-called bundle and bundleless can be found in [[Bundle and Bundleless]](/en/guide/advance/in-depth-about-build#bundle- and-bundleless)\\n\\n```tsx ./src/index.tsx\\nimport \'tailwindcss/utilities.css\';\\n\\nexport default () => {\\n  return <div className=\\"bg-black text-white\\">hello world11</div>;\\n};\\n```\\n\\nIn Bundle mode, third-party dependencies are packaged in.\\n\\nFor styles, a separate product file is generated, and there is no code related to importing styles in the Js product file.\\n\\nIf you need to inject styles into Js products, you can enable the [`style.inject` API](/en/api/config/build-config#inject).\\n\\n<CH.Code>\\n```css ./dist/es/index.css\\n/* ../../node_modules/.pnpm/tailwindcss@2.2.19/node_modules/tailwindcss/utilities.css */\\n.table {\\n  display: table;\\n}\\n@keyframes spin {\\n  to {\\n    transform: rotate(360deg);\\n  }\\n}\\n@keyframes ping {\\n  75%, 100% {\\n    transform: scale(2);\\n    opacity: 0;\\n  }\\n}\\n@keyframes pulse {\\n  50% {\\n    opacity: .5;\\n  }\\n}\\n@keyframes bounce {\\n  0%, 100% {\\n    transform: translateY(-25%);\\n    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);\\n  }\\n  50% {\\n    transform: none;\\n    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\\n  }\\n}\\n.bg-black {\\n  --tw-bg-opacity: 1;\\n  background-color: rgba(0, 0, 0, var(--tw-bg-opacity));\\n}\\n.text-white {\\n  --tw-text-opacity: 1;\\n  color: rgba(255, 255, 255, var(--tw-text-opacity));\\n}\\n*,\\n::before,\\n::after {\\n  --tw-shadow: 0 0 #0000 ;\\n}\\n*,\\n::before,\\n::after {\\n  --tw-ring-inset: var(--tw-empty, );\\n  --tw-ring-offset-width: 0px;\\n  --tw-ring-offset-color: #fff;\\n  --tw-ring-color: rgba(59, 130, 246, 0.5);\\n  --tw-ring-offset-shadow: 0 0 #0000;\\n  --tw-ring-shadow: 0 0 #0000 ;\\n}\\n@media (min-width: 640px) {\\n}\\n@media (min-width: 768px) {\\n}\\n@media (min-width: 1024px) {\\n}\\n@media (min-width: 1280px) {\\n}\\n@media (min-width: 1536px) {\\n}\\n```\\n---\\n``` js ./dist/es/index.js\\n// src/index.tsx\\nimport { jsx } from \\"react/jsx-runtime\\";\\nvar src_default = () => {\\n  return /* @__PURE__ */ jsx(\\"div\\", {\\n    className: \\"bg-black text-white\\",\\n    children: \\"hello world11\\"\\n  });\\n};\\nexport {\\n  src_default as default\\n};\\n```\\n</CH.Code>\\n\\nIn Bundleless mode, no third-party dependencies are packaged in, and no style products are generated at this time.\\n\\n```js ./dist/es/index.js\\nimport { jsx } from \'react/jsx-runtime\';\\nimport \'tailwindcss/utilities.css\';\\nvar src_default = () => {\\n  return /* @__PURE__ */ jsx(\'div\', {\\n    className: \'bg-black text-white\',\\n    children: \'hello world11\',\\n  });\\n};\\nexport { src_default as default };\\n```\\n\\n### CSS Modules\\n\\nModule projects support the development of styles using CSS Modules. By default, the following files are recognized as CSS Module files.\\n\\n- `.module.css`\\n- `.module.less`\\n- `.module.scss`\\n- `.module.sass`\\n\\nIf you need to configure CSS Modules, you can check out the API at\\n\\n- [autoModules](en/api/config/build-config#automodules)\\n- [modules](/en/api/config/build-config#modules)\\n\\nThe following is a code example.\\n\\n<CH.Code>\\n\\n```tsx ./src/index.tsx\\nimport style from \'./index.module.css\';\\n\\nexport default () => {\\n  return <div className={style.btn}>hello world</div>;\\n};\\n```\\n\\n```css ./src/index.module.css\\n.btn {\\n  color: blue;\\n}\\n```\\n\\n</CH.Code>\\n\\n## Configuring build products\\n\\nBased on most scenarios of component project usage, **it is recommended to use the `npm-component` build preset**. This preset yields a product directory structure of\\n\\n```bash\\n.\\n\u251c\u2500\u2500 dist\\n\u2502   \u251c\u2500\u2500 es\\n\u2502   \u251c\u2500\u2500 lib\\n\u2502   \u2514\u2500\u2500 types\\n```\\n\\n- `. /dist/es`: Contains bundleless products in ES modules format that support the es6 syntax.\\n- `. /dist/lib`: Contains bundleless products in CommonJS format with support for es6 syntax.\\n- `. /dist/types`: Contains the types file.\\n\\nThe [`buildPreset`](/en/api/config/build-preset) can be configured manually if there is a requirement to use syntax support, and supports modifying the supported syntax by adding a suffix to `npm-component`.\\n\\n```tsx\\nexport default defineConfig({\\n  buildPreset: \'npm-component-es2019\',\\n});\\n```\\n\\nIf you have special needs for the build product directory structure, you can use the [`buildConfig` API](/en/api/config/build-config), which can be used by the following documentation.\\n\\n- [modify-output-product](/en/guide/basic/modify-output-product#build-configuration-object)\\n- [in-depth-about-build](/en/guide/advance/in-depth-about-build)\\n\\n## Testing components\\n\\nFor more information on how to test components, please refer to [[Test project]](/en/guide/basic/test-your-project).\\n\\n## Releasing components\\n\\nIt is recommended to use module project to provide version publishing function, you can refer to [[Versioning and publishing]](/en/guide/basic/publish-your-project).\\n"';function a(o){const t=Object.assign({h1:"h1",a:"a",p:"p",code:"code",h2:"h2",strong:"strong",ul:"ul",li:"li",h3:"h3",blockquote:"blockquote",h4:"h4",h5:"h5",hr:"hr"},o.components);return r||F("CH",!1),r.Code||F("CH.Code",!0),r.CodeSlot||F("CH.CodeSlot",!0),r.Spotlight||F("CH.Spotlight",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(t.h1,{id:"developing-components",children:[(0,n.jsx)(t.a,{className:"header-anchor","aria-hidden":"true",href:"#developing-components",children:"#"}),"Developing Components"]}),"\n",(0,n.jsx)(t.p,{children:"This chapter will describe how to develop component projects using the module engineering solution."}),"\n",(0,n.jsxs)(t.h1,{id:"-initialize-the-project",children:[(0,n.jsx)(t.a,{className:"header-anchor","aria-hidden":"true",href:"#-initialize-the-project",children:"#"}),"# Initialize the project"]}),"\n",(0,n.jsxs)(r.Spotlight,{codeConfig:c,editorSteps:[{northPanel:{tabs:["Interactive"],active:"Interactive",heightRatio:1},files:[{name:"Interactive",questions:!0,focus:"",code:{lines:[{tokens:[{content:"npx @modern-js/create components-project",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[]},{tokens:[{content:"?",props:{style:{color:"#81A1C1"}}},{content:" Please ",props:{style:{color:"#D8DEE9FF"}}},{content:"select",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"the",props:{style:{color:"#D8DEE9"}}},{content:" solution you want to create Module Solution",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"?",props:{style:{color:"#81A1C1"}}},{content:" Package Name components-demo",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"?",props:{style:{color:"#81A1C1"}}},{content:" Development Language TS",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"?",props:{style:{color:"#81A1C1"}}},{content:" Package Management Tool pnpm",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"bash"},annotations:[]}]},{northPanel:{tabs:["Interactive"],active:"Interactive",heightRatio:1},files:[{name:"Interactive",questions:!0,focus:"",code:{lines:[{tokens:[{content:"npx @modern-js/create components-project",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[]},{tokens:[{content:"?",props:{style:{color:"#81A1C1"}}},{content:" Please ",props:{style:{color:"#D8DEE9FF"}}},{content:"select",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"the",props:{style:{color:"#D8DEE9"}}},{content:" solution you want to create Module Solution",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"?",props:{style:{color:"#81A1C1"}}},{content:" Package Name components-demo",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"?",props:{style:{color:"#81A1C1"}}},{content:" Development Language TS",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"?",props:{style:{color:"#81A1C1"}}},{content:" Package Management Tool pnpm",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"bash"},annotations:[]}],southPanel:void 0},{northPanel:{tabs:["Interactive","The"],active:"The",heightRatio:1},files:[{name:"Interactive",questions:!0,focus:"",code:{lines:[{tokens:[{content:"npx @modern-js/create components-project",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[]},{tokens:[{content:"?",props:{style:{color:"#81A1C1"}}},{content:" Please ",props:{style:{color:"#D8DEE9FF"}}},{content:"select",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"the",props:{style:{color:"#D8DEE9"}}},{content:" solution you want to create Module Solution",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"?",props:{style:{color:"#81A1C1"}}},{content:" Package Name components-demo",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"?",props:{style:{color:"#81A1C1"}}},{content:" Development Language TS",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"?",props:{style:{color:"#81A1C1"}}},{content:" Package Management Tool pnpm",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"bash"},annotations:[]},{name:"The",initialized:!0,directory:!0,structure:!0,focus:"",code:{lines:[{tokens:[{content:".",props:{style:{color:"#88C0D0"}}}]},{tokens:[{content:"\u251c\u2500\u2500 README.md",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"\u251c\u2500\u2500 node_modules/",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"\u251c\u2500\u2500 dist/",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"\u251c\u2500\u2500 modern.config.ts",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"\u251c\u2500\u2500 package.json",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"\u251c\u2500\u2500 pnpm-lock.yaml",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"\u251c\u2500\u2500 src",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"\u2502   \u251c\u2500\u2500 index.ts",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"\u2502   \u2514\u2500\u2500 modern-app-env.d.ts",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"\u2514\u2500\u2500 tsconfig.json",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"bash"},annotations:[]}],southPanel:void 0},{northPanel:{tabs:["Interactive","./src/index.tsx"],active:"./src/index.tsx",heightRatio:1},files:[{name:"Interactive",questions:!0,focus:"",code:{lines:[{tokens:[{content:"npx @modern-js/create components-project",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[]},{tokens:[{content:"?",props:{style:{color:"#81A1C1"}}},{content:" Please ",props:{style:{color:"#D8DEE9FF"}}},{content:"select",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"the",props:{style:{color:"#D8DEE9"}}},{content:" solution you want to create Module Solution",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"?",props:{style:{color:"#81A1C1"}}},{content:" Package Name components-demo",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"?",props:{style:{color:"#81A1C1"}}},{content:" Development Language TS",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"?",props:{style:{color:"#81A1C1"}}},{content:" Package Management Tool pnpm",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"bash"},annotations:[]},{name:"./src/index.tsx",focus:"",code:{lines:[{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"()",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=>",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"return",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"<div>",props:{style:{color:"#81A1C1"}}},{content:"hello world",props:{style:{color:"#D8DEE9FF"}}},{content:"</div>;",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]}],southPanel:void 0}],children:[(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(r.CodeSlot,{})}),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(t.p,{children:["It is recommended to use the ",(0,n.jsx)(t.code,{children:"@modern-js/create"})," command to initialize an npm project."]}),(0,n.jsx)(r.CodeSlot,{})]}),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:"The initialized directory structure."}),(0,n.jsx)(r.CodeSlot,{})]}),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(t.p,{children:["Modify the ",(0,n.jsx)(t.code,{children:". /src/index.ts"})," file suffix and content."]}),(0,n.jsx)(t.p,{children:"At this point, a component project is initialized."}),(0,n.jsx)(r.CodeSlot,{})]})]}),"\n",(0,n.jsxs)(t.h2,{id:"debugging-code-with-storybook",children:[(0,n.jsx)(t.a,{className:"header-anchor","aria-hidden":"true",href:"#debugging-code-with-storybook",children:"#"}),"Debugging code with Storybook"]}),"\n",(0,n.jsxs)(r.Spotlight,{codeConfig:c,editorSteps:[{northPanel:{tabs:["Terminal"],active:"Terminal",heightRatio:1},files:[{name:"Terminal",focus:"",code:{lines:[{tokens:[{content:"pnpm run new",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[]},{tokens:[{content:"?",props:{style:{color:"#81A1C1"}}},{content:" Action Enable features",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"?",props:{style:{color:"#81A1C1"}}},{content:" Enable features Enable Visual Testing ",props:{style:{color:"#D8DEE9FF"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"Storybook",props:{style:{color:"#D8DEE9FF"}}},{content:")",props:{style:{color:"#ECEFF4"}}}]}],lang:"bash"},annotations:[]}]},{northPanel:{tabs:["Terminal"],active:"Terminal",heightRatio:1},files:[{name:"Terminal",focus:"",code:{lines:[{tokens:[{content:"pnpm run new",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[]},{tokens:[{content:"?",props:{style:{color:"#81A1C1"}}},{content:" Action Enable features",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"?",props:{style:{color:"#81A1C1"}}},{content:" Enable features Enable Visual Testing ",props:{style:{color:"#D8DEE9FF"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"Storybook",props:{style:{color:"#D8DEE9FF"}}},{content:")",props:{style:{color:"#ECEFF4"}}}]}],lang:"bash"},annotations:[]}],southPanel:void 0},{northPanel:{tabs:["Terminal","./package.json","Directory"],active:"./package.json",heightRatio:1},files:[{name:"Terminal",focus:"",code:{lines:[{tokens:[{content:"pnpm run new",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[]},{tokens:[{content:"?",props:{style:{color:"#81A1C1"}}},{content:" Action Enable features",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"?",props:{style:{color:"#81A1C1"}}},{content:" Enable features Enable Visual Testing ",props:{style:{color:"#D8DEE9FF"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"Storybook",props:{style:{color:"#D8DEE9FF"}}},{content:")",props:{style:{color:"#ECEFF4"}}}]}],lang:"bash"},annotations:[]},{name:"./package.json",focus:"4:7",code:{lines:[{tokens:[{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"name",props:{style:{color:"#8FBCBB"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"components-demo",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"devDependencies",props:{style:{color:"#8FBCBB"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"@modern-js/plugin-storybook",props:{style:{color:"#8FBCBB"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"x.y.z",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"@modern-js/runtime",props:{style:{color:"#8FBCBB"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"x.y.z",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"react",props:{style:{color:"#8FBCBB"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"^17",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"react-dom",props:{style:{color:"#8FBCBB"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"^17",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"json"},annotations:[]},{name:"Directory",Structure:!0,focus:"",code:{lines:[{tokens:[{content:".",props:{style:{color:"#88C0D0"}}}]},{tokens:[{content:"\u251c\u2500\u2500 src",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"\u2502   \u251c\u2500\u2500 index.ts",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"\u2502   \u2514\u2500\u2500 modern-app-env.d.ts",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"\u251c\u2500\u2500 stories",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"\u2502   \u251c\u2500\u2500 .eslintrc.js",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"\u2502   \u251c\u2500\u2500 index.stories.tsx",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"\u2502   \u2514\u2500\u2500 tsconfig.json",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"bash"},annotations:[]}],southPanel:void 0},{northPanel:{tabs:["Terminal","./stories/tsconfig.json"],active:"./stories/tsconfig.json",heightRatio:1},files:[{name:"Terminal",focus:"",code:{lines:[{tokens:[{content:"pnpm run new",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[]},{tokens:[{content:"?",props:{style:{color:"#81A1C1"}}},{content:" Action Enable features",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"?",props:{style:{color:"#81A1C1"}}},{content:" Enable features Enable Visual Testing ",props:{style:{color:"#D8DEE9FF"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"Storybook",props:{style:{color:"#D8DEE9FF"}}},{content:")",props:{style:{color:"#ECEFF4"}}}]}],lang:"bash"},annotations:[]},{name:"./stories/tsconfig.json",focus:"5:7",code:{lines:[{tokens:[{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"extends",props:{style:{color:"#8FBCBB"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"../tsconfig.json",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"compilerOptions",props:{style:{color:"#8FBCBB"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"baseUrl",props:{style:{color:"#8FBCBB"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"../",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"paths",props:{style:{color:"#8FBCBB"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"      ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"components-demo",props:{style:{color:"#8FBCBB"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"[",props:{style:{color:"#ECEFF4"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"./",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"],",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"      ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"components-demo/*",props:{style:{color:"#8FBCBB"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"[",props:{style:{color:"#ECEFF4"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"./*",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"]",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"include",props:{style:{color:"#8FBCBB"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"[",props:{style:{color:"#ECEFF4"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"**/*",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"]",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"json"},annotations:[]}],southPanel:void 0},{northPanel:{tabs:["Terminal","./stories/index.stories.tsx"],active:"./stories/index.stories.tsx",heightRatio:.6428571428571429},files:[{name:"Terminal",focus:"",code:{lines:[{tokens:[{content:"pnpm run new",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[]},{tokens:[{content:"?",props:{style:{color:"#81A1C1"}}},{content:" Action Enable features",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"?",props:{style:{color:"#81A1C1"}}},{content:" Enable features Enable Visual Testing ",props:{style:{color:"#D8DEE9FF"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"Storybook",props:{style:{color:"#D8DEE9FF"}}},{content:")",props:{style:{color:"#ECEFF4"}}}]}],lang:"bash"},annotations:[]},{name:"./stories/index.stories.tsx",focus:"",code:{lines:[{tokens:[{content:"import",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"Component",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"from",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"components-demo",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[]},{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"const",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"YourStory",props:{style:{color:"#88C0D0"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"()",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=>",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"<",props:{style:{color:"#81A1C1"}}},{content:"Component",props:{style:{color:"#8FBCBB"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"/>;",props:{style:{color:"#81A1C1"}}}]},{tokens:[]},{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"title",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"Your Stories",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]},{name:"./src/index.tsx",focus:"",code:{lines:[{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"()",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=>",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"return",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"<div>",props:{style:{color:"#81A1C1"}}},{content:"hello world",props:{style:{color:"#D8DEE9FF"}}},{content:"</div>;",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]}],southPanel:{tabs:["./src/index.tsx"],active:"./src/index.tsx",heightRatio:.3571428571428571}},{northPanel:{tabs:["Terminal","package.json"],active:"package.json",heightRatio:1},files:[{name:"Terminal",focus:"",code:{lines:[{tokens:[{content:"pnpm run new",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[]},{tokens:[{content:"?",props:{style:{color:"#81A1C1"}}},{content:" Action Enable features",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"?",props:{style:{color:"#81A1C1"}}},{content:" Enable features Enable Visual Testing ",props:{style:{color:"#D8DEE9FF"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"Storybook",props:{style:{color:"#D8DEE9FF"}}},{content:")",props:{style:{color:"#ECEFF4"}}}]}],lang:"bash"},annotations:[]},{name:"package.json",focus:"",code:{lines:[{tokens:[{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"name",props:{style:{color:"#8FBCBB"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"components-demo",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"main",props:{style:{color:"#8FBCBB"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"./dist/esm/index.js",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"types",props:{style:{color:"#8FBCBB"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"./dist/types/index.d.ts",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"json"},annotations:[]}],southPanel:void 0},{northPanel:{tabs:["Terminal","./stories/index.stories.tsx"],active:"./stories/index.stories.tsx",heightRatio:1},files:[{name:"Terminal",focus:"",code:{lines:[{tokens:[{content:"pnpm run new",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[]},{tokens:[{content:"?",props:{style:{color:"#81A1C1"}}},{content:" Action Enable features",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"?",props:{style:{color:"#81A1C1"}}},{content:" Enable features Enable Visual Testing ",props:{style:{color:"#D8DEE9FF"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"Storybook",props:{style:{color:"#D8DEE9FF"}}},{content:")",props:{style:{color:"#ECEFF4"}}}]}],lang:"bash"},annotations:[]},{name:"./stories/index.stories.tsx",focus:"",code:{lines:[{tokens:[{content:"import",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"Component",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"from",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"../src",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[]},{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"const",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"YourStory",props:{style:{color:"#88C0D0"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"()",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=>",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"<",props:{style:{color:"#81A1C1"}}},{content:"Component",props:{style:{color:"#8FBCBB"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"/>;",props:{style:{color:"#81A1C1"}}}]},{tokens:[]},{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"title",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"Your Stories",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]}],southPanel:void 0}],children:[(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(r.CodeSlot,{})}),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(t.p,{children:["Execute the ",(0,n.jsx)(t.code,{children:"new"})," command in the project root directory to enable the Storybook feature."]}),(0,n.jsx)(r.CodeSlot,{})]}),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(t.p,{children:["Once successfully opened, you will see that a new dependency has been added to ",(0,n.jsx)(t.code,{children:"package.json"}),". The ",(0,n.jsx)(t.code,{children:"stories"})," directory and related initialization files are also created."]}),(0,n.jsx)(r.CodeSlot,{})]}),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(t.p,{children:["After initialization, the ",(0,n.jsx)(t.code,{children:"tsconfig.json"})," file in the ",(0,n.jsx)(t.code,{children:". /stories"})," directory, the ",(0,n.jsx)(t.code,{children:"tsconfig.json"})," file is set by default with the ",(0,n.jsx)(t.code,{children:"paths"})," configuration of the same name as the project."]}),(0,n.jsx)(r.CodeSlot,{})]}),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:"Such a configuration allows you to introduce code in Story code directly using the name of the project."}),(0,n.jsx)(r.CodeSlot,{})]}),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(t.p,{children:["At this point Storybook identifies the entry point for the imported code based on fields like ",(0,n.jsx)(t.code,{children:"main"}),", ",(0,n.jsx)(t.code,{children:"exports"})," in the project's ",(0,n.jsx)(t.code,{children:"package.json"})," file.\nThe location of the type file is determined by the ",(0,n.jsx)(t.code,{children:"types"})," field."]}),(0,n.jsx)(r.CodeSlot,{})]}),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:"While importing source code for debugging is also supported, debugging using project artifacts is more reliable."}),(0,n.jsx)(t.p,{children:"Debugging with source code has a limitation: some configurations are not equivalent in Storybook and in the original build support."}),(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.strong,{children:"This is why debugging with the product is recommended"}),"."]}),(0,n.jsx)(r.CodeSlot,{})]})]}),"\n",(0,n.jsxs)(t.h2,{id:"developing-styles",children:[(0,n.jsx)(t.a,{className:"header-anchor","aria-hidden":"true",href:"#developing-styles",children:"#"}),"Developing Styles"]}),"\n",(0,n.jsx)(t.p,{children:"Next we can add styles to the component."}),"\n",(0,n.jsx)(t.p,{children:"The following capabilities are currently supported for developing styles."}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsx)(t.li,{children:"CSS/PostCSS"}),"\n",(0,n.jsx)(t.li,{children:"Less"}),"\n",(0,n.jsx)(t.li,{children:"Scss/Sass"}),"\n",(0,n.jsx)(t.li,{children:"Tailwind CSS"}),"\n",(0,n.jsx)(t.li,{children:"CSS Modules"}),"\n"]}),"\n",(0,n.jsxs)(t.h3,{id:"csspostcss",children:[(0,n.jsx)(t.a,{className:"header-anchor","aria-hidden":"true",href:"#csspostcss",children:"#"}),"CSS/PostCSS"]}),"\n",(0,n.jsx)(t.p,{children:"The module project supports PostCSS and has the following built-in postcss plugins."}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsx)(t.li,{children:(0,n.jsx)(t.a,{href:"https://github.com/luisrudge/postcss-flexbugs-fixes",target:"_blank",rel:"nofollow",children:"flexbugs-fixes"})}),"\n",(0,n.jsx)(t.li,{children:(0,n.jsx)(t.a,{href:"https://github.com/postcss/postcss-custom-properties",target:"_blank",rel:"nofollow",children:"custom-properties"})}),"\n",(0,n.jsx)(t.li,{children:(0,n.jsx)(t.a,{href:"https://github.com/maximkoretskiy/postcss-initial",target:"_blank",rel:"nofollow",children:"initial"})}),"\n",(0,n.jsx)(t.li,{children:(0,n.jsx)(t.a,{href:"https://github.com/shrpne/postcss-page-break",target:"_blank",rel:"nofollow",children:"page-break"})}),"\n",(0,n.jsx)(t.li,{children:(0,n.jsx)(t.a,{href:"https://github.com/postcss/postcss-font-variant",target:"_blank",rel:"nofollow",children:"font-variant"})}),"\n",(0,n.jsx)(t.li,{children:(0,n.jsx)(t.a,{href:"https://github.com/postcss/postcss-media-minmax",target:"_blank",rel:"nofollow",children:"media-minmax"})}),"\n",(0,n.jsx)(t.li,{children:(0,n.jsx)(t.a,{href:"https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting#readme-3",target:"_blank",rel:"nofollow",children:"nesting"})}),"\n"]}),"\n",(0,n.jsxs)(t.p,{children:["So we can create ",(0,n.jsx)(t.code,{children:".css"})," files in our projects and use the syntax support and capabilities provided by these plugins directly in our css files."]}),"\n",(0,n.jsxs)(r.Spotlight,{codeConfig:c,editorSteps:[{northPanel:{tabs:["./src/index.css"],active:"./src/index.css",heightRatio:1},files:[{name:"./src/index.css",focus:"",code:{lines:[{tokens:[{content:"a",props:{style:{color:"#81A1C1"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"b",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"color",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"red;",props:{style:{color:"#81A1C1"}}}]},{tokens:[]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:'/* "&" comes first */',props:{style:{color:"#616E88"}}}]},{tokens:[{content:"  & c,",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"  & d {",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:"color",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"white;",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:'/* "&" comes later, requiring "@nest" */',props:{style:{color:"#616E88"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"@nest",props:{style:{color:"#81A1C1"}}},{content:" e & ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"    color: yellow;",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"  }",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"}",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"css"},annotations:[]}]},{northPanel:{tabs:["./src/index.css"],active:"./src/index.css",heightRatio:1},files:[{name:"./src/index.css",focus:"",code:{lines:[{tokens:[{content:"a",props:{style:{color:"#81A1C1"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"b",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"color",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"red;",props:{style:{color:"#81A1C1"}}}]},{tokens:[]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:'/* "&" comes first */',props:{style:{color:"#616E88"}}}]},{tokens:[{content:"  & c,",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"  & d {",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:"color",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"white;",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:'/* "&" comes later, requiring "@nest" */',props:{style:{color:"#616E88"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"@nest",props:{style:{color:"#81A1C1"}}},{content:" e & ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"    color: yellow;",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"  }",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"}",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"css"},annotations:[]}],southPanel:void 0},{northPanel:{tabs:["./src/index.css","./dist/es/index.css"],active:"./dist/es/index.css",heightRatio:1},files:[{name:"./src/index.css",focus:"",code:{lines:[{tokens:[{content:"a",props:{style:{color:"#81A1C1"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"b",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"color",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"red;",props:{style:{color:"#81A1C1"}}}]},{tokens:[]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:'/* "&" comes first */',props:{style:{color:"#616E88"}}}]},{tokens:[{content:"  & c,",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"  & d {",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:"color",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"white;",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:'/* "&" comes later, requiring "@nest" */',props:{style:{color:"#616E88"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"@nest",props:{style:{color:"#81A1C1"}}},{content:" e & ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"    color: yellow;",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"  }",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"}",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"css"},annotations:[]},{name:"./dist/es/index.css",focus:"",code:{lines:[{tokens:[{content:"a",props:{style:{color:"#81A1C1"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"b",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"color",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"red;",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"a",props:{style:{color:"#81A1C1"}}},{content:" c",props:{style:{color:"#D8DEE9FF"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"b",props:{style:{color:"#81A1C1"}}},{content:" c",props:{style:{color:"#D8DEE9FF"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"a",props:{style:{color:"#81A1C1"}}},{content:" d",props:{style:{color:"#D8DEE9FF"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"b",props:{style:{color:"#81A1C1"}}},{content:" d ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"color",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"white;",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"e ",props:{style:{color:"#D8DEE9FF"}}},{content:"a",props:{style:{color:"#81A1C1"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"e ",props:{style:{color:"#D8DEE9FF"}}},{content:"b",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"color",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"yellow;",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"css"},annotations:[]}],southPanel:void 0}],children:[(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(r.CodeSlot,{})}),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:"Source Code."}),(0,n.jsx)(r.CodeSlot,{})]}),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:"css product."}),(0,n.jsx)(r.CodeSlot,{})]})]}),"\n",(0,n.jsxs)(t.h3,{id:"less",children:[(0,n.jsx)(t.a,{className:"header-anchor","aria-hidden":"true",href:"#less",children:"#"}),"Less"]}),"\n",(0,n.jsx)(t.p,{children:"Module projects support development styles using Less."}),"\n",(0,n.jsxs)(t.blockquote,{children:["\n",(0,n.jsx)(t.p,{children:"Currently supported version is 4.1.3"}),"\n"]}),"\n",(0,n.jsxs)(r.Spotlight,{codeConfig:c,editorSteps:[{northPanel:{tabs:["./src/common.less"],active:"./src/common.less",heightRatio:1},files:[{name:"./src/common.less",focus:"",code:{lines:[{tokens:[{content:"@",props:{style:{color:"#81A1C1"}}},{content:"bg",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"black;",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"@",props:{style:{color:"#81A1C1"}}},{content:"bg-light",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" boolean(",props:{style:{color:"#D8DEE9FF"}}},{content:"luma",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"@",props:{style:{color:"#81A1C1"}}},{content:"bg",props:{style:{color:"#D8DEE9"}}},{content:") ",props:{style:{color:"#D8DEE9FF"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"50",props:{style:{color:"#B48EAD"}}},{content:"%",props:{style:{color:"#81A1C1"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[]},{tokens:[{content:"div",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"background",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"@",props:{style:{color:"#81A1C1"}}},{content:"bg",props:{style:{color:"#D8DEE9"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"color",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"if(",props:{style:{color:"#88C0D0"}}},{content:"@",props:{style:{color:"#81A1C1"}}},{content:"bg-light",props:{style:{color:"#D8DEE9"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"black",props:{style:{color:"#81A1C1"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"white",props:{style:{color:"#81A1C1"}}},{content:")",props:{style:{color:"#88C0D0"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"less"},annotations:[]}]},{northPanel:{tabs:["./src/common.less"],active:"./src/common.less",heightRatio:1},files:[{name:"./src/common.less",focus:"",code:{lines:[{tokens:[{content:"@",props:{style:{color:"#81A1C1"}}},{content:"bg",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"black;",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"@",props:{style:{color:"#81A1C1"}}},{content:"bg-light",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" boolean(",props:{style:{color:"#D8DEE9FF"}}},{content:"luma",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"@",props:{style:{color:"#81A1C1"}}},{content:"bg",props:{style:{color:"#D8DEE9"}}},{content:") ",props:{style:{color:"#D8DEE9FF"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"50",props:{style:{color:"#B48EAD"}}},{content:"%",props:{style:{color:"#81A1C1"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[]},{tokens:[{content:"div",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"background",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"@",props:{style:{color:"#81A1C1"}}},{content:"bg",props:{style:{color:"#D8DEE9"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"color",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"if(",props:{style:{color:"#88C0D0"}}},{content:"@",props:{style:{color:"#81A1C1"}}},{content:"bg-light",props:{style:{color:"#D8DEE9"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"black",props:{style:{color:"#81A1C1"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"white",props:{style:{color:"#81A1C1"}}},{content:")",props:{style:{color:"#88C0D0"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"less"},annotations:[]}],southPanel:void 0},{northPanel:{tabs:["./src/common.less","./dist/es/common.css"],active:"./dist/es/common.css",heightRatio:1},files:[{name:"./src/common.less",focus:"",code:{lines:[{tokens:[{content:"@",props:{style:{color:"#81A1C1"}}},{content:"bg",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"black;",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"@",props:{style:{color:"#81A1C1"}}},{content:"bg-light",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" boolean(",props:{style:{color:"#D8DEE9FF"}}},{content:"luma",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"@",props:{style:{color:"#81A1C1"}}},{content:"bg",props:{style:{color:"#D8DEE9"}}},{content:") ",props:{style:{color:"#D8DEE9FF"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"50",props:{style:{color:"#B48EAD"}}},{content:"%",props:{style:{color:"#81A1C1"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[]},{tokens:[{content:"div",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"background",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"@",props:{style:{color:"#81A1C1"}}},{content:"bg",props:{style:{color:"#D8DEE9"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"color",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"if(",props:{style:{color:"#88C0D0"}}},{content:"@",props:{style:{color:"#81A1C1"}}},{content:"bg-light",props:{style:{color:"#D8DEE9"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"black",props:{style:{color:"#81A1C1"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"white",props:{style:{color:"#81A1C1"}}},{content:")",props:{style:{color:"#88C0D0"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"less"},annotations:[]},{name:"./dist/es/common.css",focus:"",code:{lines:[{tokens:[{content:"div",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"background",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"black;",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"color",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"white;",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"css"},annotations:[]}],southPanel:void 0}],children:[(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(r.CodeSlot,{})}),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:"Source Code."}),(0,n.jsx)(r.CodeSlot,{})]}),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:"Less product."}),(0,n.jsx)(r.CodeSlot,{})]})]}),"\n",(0,n.jsxs)(t.h3,{id:"sassscss",children:[(0,n.jsx)(t.a,{className:"header-anchor","aria-hidden":"true",href:"#sassscss",children:"#"}),"Sass/Scss"]}),"\n",(0,n.jsx)(t.p,{children:"Module projects support developing styles using Scss/Sass."}),"\n",(0,n.jsxs)(t.blockquote,{children:["\n",(0,n.jsx)(t.p,{children:"Currently supported version is 1.54.4"}),"\n"]}),"\n",(0,n.jsxs)(r.Spotlight,{codeConfig:c,editorSteps:[{northPanel:{tabs:["./src/common.sass"],active:"./src/common.sass",heightRatio:1},files:[{name:"./src/common.sass",focus:"",code:{lines:[{tokens:[{content:"$font-stack",props:{style:{color:"#D8DEE9"}}},{content:": ",props:{style:{color:"#D8DEE9FF"}}},{content:"Helvetica",props:{style:{color:"#81A1C1"}}},{content:",",props:{style:{color:"#616E88"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"sans-serif",props:{style:{color:"#81A1C1"}}},{content:";",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"$primary-color",props:{style:{color:"#D8DEE9"}}},{content:": ",props:{style:{color:"#D8DEE9FF"}}},{content:"#333",props:{style:{color:"#81A1C1"}}},{content:";",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[]},{tokens:[{content:"body",props:{style:{color:"#81A1C1"}}},{content:" {",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"font",props:{style:{color:"#8FBCBB"}}},{content:": ",props:{style:{color:"#D8DEE9FF"}}},{content:"100",props:{style:{color:"#B48EAD"}}},{content:"%",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"$font-stack",props:{style:{color:"#D8DEE9"}}},{content:";",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"color",props:{style:{color:"#8FBCBB"}}},{content:": ",props:{style:{color:"#D8DEE9FF"}}},{content:"$primary-color",props:{style:{color:"#D8DEE9"}}},{content:";",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"}",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"sass"},annotations:[]}]},{northPanel:{tabs:["./src/common.sass"],active:"./src/common.sass",heightRatio:1},files:[{name:"./src/common.sass",focus:"",code:{lines:[{tokens:[{content:"$font-stack",props:{style:{color:"#D8DEE9"}}},{content:": ",props:{style:{color:"#D8DEE9FF"}}},{content:"Helvetica",props:{style:{color:"#81A1C1"}}},{content:",",props:{style:{color:"#616E88"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"sans-serif",props:{style:{color:"#81A1C1"}}},{content:";",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"$primary-color",props:{style:{color:"#D8DEE9"}}},{content:": ",props:{style:{color:"#D8DEE9FF"}}},{content:"#333",props:{style:{color:"#81A1C1"}}},{content:";",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[]},{tokens:[{content:"body",props:{style:{color:"#81A1C1"}}},{content:" {",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"font",props:{style:{color:"#8FBCBB"}}},{content:": ",props:{style:{color:"#D8DEE9FF"}}},{content:"100",props:{style:{color:"#B48EAD"}}},{content:"%",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"$font-stack",props:{style:{color:"#D8DEE9"}}},{content:";",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"color",props:{style:{color:"#8FBCBB"}}},{content:": ",props:{style:{color:"#D8DEE9FF"}}},{content:"$primary-color",props:{style:{color:"#D8DEE9"}}},{content:";",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"}",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"sass"},annotations:[]}],southPanel:void 0},{northPanel:{tabs:["./src/common.sass","./dist/es/common.css"],active:"./dist/es/common.css",heightRatio:1},files:[{name:"./src/common.sass",focus:"",code:{lines:[{tokens:[{content:"$font-stack",props:{style:{color:"#D8DEE9"}}},{content:": ",props:{style:{color:"#D8DEE9FF"}}},{content:"Helvetica",props:{style:{color:"#81A1C1"}}},{content:",",props:{style:{color:"#616E88"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"sans-serif",props:{style:{color:"#81A1C1"}}},{content:";",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"$primary-color",props:{style:{color:"#D8DEE9"}}},{content:": ",props:{style:{color:"#D8DEE9FF"}}},{content:"#333",props:{style:{color:"#81A1C1"}}},{content:";",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[]},{tokens:[{content:"body",props:{style:{color:"#81A1C1"}}},{content:" {",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"font",props:{style:{color:"#8FBCBB"}}},{content:": ",props:{style:{color:"#D8DEE9FF"}}},{content:"100",props:{style:{color:"#B48EAD"}}},{content:"%",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"$font-stack",props:{style:{color:"#D8DEE9"}}},{content:";",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"color",props:{style:{color:"#8FBCBB"}}},{content:": ",props:{style:{color:"#D8DEE9FF"}}},{content:"$primary-color",props:{style:{color:"#D8DEE9"}}},{content:";",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"}",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"sass"},annotations:[]},{name:"./dist/es/common.css",focus:"",code:{lines:[{tokens:[{content:"body",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"font",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"100",props:{style:{color:"#B48EAD"}}},{content:"%",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"Helvetica",props:{style:{color:"#81A1C1"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"sans-serif;",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"color",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"#",props:{style:{color:"#ECEFF4"}}},{content:"333",props:{style:{color:"#B48EAD"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"css"},annotations:[]}],southPanel:void 0}],children:[(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(r.CodeSlot,{})}),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:"\u6e90\u4ee3\u7801\u3002"}),(0,n.jsx)(r.CodeSlot,{})]}),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:"Less product."}),(0,n.jsx)(r.CodeSlot,{})]})]}),"\n",(0,n.jsxs)(t.h3,{id:"tailwind-css",children:[(0,n.jsx)(t.a,{className:"header-anchor","aria-hidden":"true",href:"#tailwind-css",children:"#"}),"Tailwind CSS"]}),"\n",(0,n.jsx)(t.p,{children:"The module project supports the development of component styles using Tailwind CSS."}),"\n",(0,n.jsx)(t.p,{children:"By default, this feature is not enabled in the module project, you need to enable it as follows."}),"\n",(0,n.jsxs)(r.Spotlight,{codeConfig:c,editorSteps:[{northPanel:{tabs:["Terminal"],active:"Terminal",heightRatio:1},files:[{name:"Terminal",focus:"",code:{lines:[{tokens:[{content:"pnpm run new",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[]},{tokens:[{content:"?",props:{style:{color:"#81A1C1"}}},{content:" Action Enable features",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"?",props:{style:{color:"#81A1C1"}}},{content:" Enable features Enable Visual Testing ",props:{style:{color:"#D8DEE9FF"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"Storybook",props:{style:{color:"#D8DEE9FF"}}},{content:")",props:{style:{color:"#ECEFF4"}}}]}],lang:"bash"},annotations:[]}]},{northPanel:{tabs:["Terminal"],active:"Terminal",heightRatio:1},files:[{name:"Terminal",focus:"",code:{lines:[{tokens:[{content:"pnpm run new",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[]},{tokens:[{content:"?",props:{style:{color:"#81A1C1"}}},{content:" Action Enable features",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"?",props:{style:{color:"#81A1C1"}}},{content:" Enable features Enable Tailwind CSS",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"bash"},annotations:[]}],southPanel:void 0},{northPanel:{tabs:["Terminal","./package.json"],active:"./package.json",heightRatio:1},files:[{name:"Terminal",focus:"",code:{lines:[{tokens:[{content:"pnpm run new",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[]},{tokens:[{content:"?",props:{style:{color:"#81A1C1"}}},{content:" Action Enable features",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"?",props:{style:{color:"#81A1C1"}}},{content:" Enable features Enable Visual Testing ",props:{style:{color:"#D8DEE9FF"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"Storybook",props:{style:{color:"#D8DEE9FF"}}},{content:")",props:{style:{color:"#ECEFF4"}}}]}],lang:"bash"},annotations:[]},{name:"./package.json",focus:"",code:{lines:[{tokens:[{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"devDependencies",props:{style:{color:"#8FBCBB"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"@modern-js/plugin-tailwindcss",props:{style:{color:"#8FBCBB"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"x.y.z",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"json"},annotations:[]}],southPanel:void 0}],children:[(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(r.CodeSlot,{})}),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(t.p,{children:["The Tailwind CSS feature can be enabled by executing the ",(0,n.jsx)(t.code,{children:"new"})," command in the project root directory."]}),(0,n.jsx)(r.CodeSlot,{})]}),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(t.p,{children:["Once successfully opened, you will see that a new dependency has been added to ",(0,n.jsx)(t.code,{children:"package.json"}),"."]}),(0,n.jsx)(r.CodeSlot,{})]})]}),"\n",(0,n.jsx)(t.p,{children:"Tailwind CSS offers two ways to use it."}),"\n",(0,n.jsxs)(t.h4,{id:"html-class",children:[(0,n.jsx)(t.a,{className:"header-anchor","aria-hidden":"true",href:"#html-class",children:"#"}),"HTML class"]}),"\n",(0,n.jsxs)(r.Spotlight,{codeConfig:c,editorSteps:[{northPanel:{tabs:["./src/index.tsx"],active:"./src/index.tsx",heightRatio:1},files:[{name:"./src/index.tsx",focus:"",code:{lines:[{tokens:[{content:"import",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"tailwindcss/utilities.css",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[]},{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"()",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=>",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"return",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"<div",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"className",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"bg-black text-white",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"hello world",props:{style:{color:"#D8DEE9FF"}}},{content:"</div>;",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]}]},{northPanel:{tabs:["./src/index.tsx"],active:"./src/index.tsx",heightRatio:1},files:[{name:"./src/index.tsx",focus:"5:5",code:{lines:[{tokens:[{content:"import",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"tailwindcss/utilities.css",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[]},{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"()",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=>",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"return",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"<div",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"className",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"bg-black text-white",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"hello world",props:{style:{color:"#D8DEE9FF"}}},{content:"</div>;",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]}],southPanel:void 0},{northPanel:{tabs:["./src/index.tsx"],active:"./src/index.tsx",heightRatio:1},files:[{name:"./src/index.tsx",focus:"1:1",code:{lines:[{tokens:[{content:"import",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"tailwindcss/utilities.css",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[]},{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"()",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=>",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"return",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"<div",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"className",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"bg-black text-white",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"hello world",props:{style:{color:"#D8DEE9FF"}}},{content:"</div>;",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]}],southPanel:void 0},{northPanel:{tabs:["./src/index.tsx","./dist/es/index.css"],active:"./dist/es/index.css",heightRatio:1},files:[{name:"./src/index.tsx",focus:"",code:{lines:[{tokens:[{content:"import",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"tailwindcss/utilities.css",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[]},{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"()",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=>",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"return",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"<div",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"className",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"bg-black text-white",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"hello world",props:{style:{color:"#D8DEE9FF"}}},{content:"</div>;",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]},{name:"./dist/es/index.css",focus:"",code:{lines:[{tokens:[{content:"/* ../../node_modules/.pnpm/tailwindcss@2.2.19/node_modules/tailwindcss/utilities.css */",props:{style:{color:"#616E88"}}}]},{tokens:[{content:".",props:{style:{color:"#ECEFF4"}}},{content:"table",props:{style:{color:"#8FBCBB"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"display",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"table;",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"@keyframes",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"spin",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  to ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:"transform",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"rotate",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"360",props:{style:{color:"#B48EAD"}}},{content:"deg",props:{style:{color:"#81A1C1"}}},{content:")",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"@keyframes",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"ping",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  75%,",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"  100% ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:"transform",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"scale",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"2",props:{style:{color:"#B48EAD"}}},{content:")",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:"opacity",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"0",props:{style:{color:"#B48EAD"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"@keyframes",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"pulse",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  50% ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:"opacity",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"0.5",props:{style:{color:"#B48EAD"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"@keyframes",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"bounce",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  0%,",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"  100% ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:"transform",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"translateY",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"-25",props:{style:{color:"#B48EAD"}}},{content:"%",props:{style:{color:"#81A1C1"}}},{content:")",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:"animation-timing-function",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"cubic-bezier",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"0.8",props:{style:{color:"#B48EAD"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"0",props:{style:{color:"#B48EAD"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"1",props:{style:{color:"#B48EAD"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"1",props:{style:{color:"#B48EAD"}}},{content:")",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  50% ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:"transform",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"none;",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:"animation-timing-function",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"cubic-bezier",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"0",props:{style:{color:"#B48EAD"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"0",props:{style:{color:"#B48EAD"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"0.2",props:{style:{color:"#B48EAD"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"1",props:{style:{color:"#B48EAD"}}},{content:")",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:".",props:{style:{color:"#ECEFF4"}}},{content:"bg-black",props:{style:{color:"#8FBCBB"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  --tw-bg-opacity",props:{style:{color:"#D8DEE9FF"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"1",props:{style:{color:"#B48EAD"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"background-color",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"rgba",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"0",props:{style:{color:"#B48EAD"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"0",props:{style:{color:"#B48EAD"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"0",props:{style:{color:"#B48EAD"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" var",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"--tw-bg-opacity",props:{style:{color:"#88C0D0"}}},{content:"))",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:".",props:{style:{color:"#ECEFF4"}}},{content:"text-white",props:{style:{color:"#8FBCBB"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  --tw-text-opacity",props:{style:{color:"#D8DEE9FF"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"1",props:{style:{color:"#B48EAD"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"color",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"rgba",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"255",props:{style:{color:"#B48EAD"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"255",props:{style:{color:"#B48EAD"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"255",props:{style:{color:"#B48EAD"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" var",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"--tw-text-opacity",props:{style:{color:"#88C0D0"}}},{content:"))",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"*",props:{style:{color:"#81A1C1"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"::",props:{style:{color:"#ECEFF4"}}},{content:"before",props:{style:{color:"#8FBCBB"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"::",props:{style:{color:"#ECEFF4"}}},{content:"after",props:{style:{color:"#8FBCBB"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  --tw-shadow",props:{style:{color:"#D8DEE9FF"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"0",props:{style:{color:"#B48EAD"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"0",props:{style:{color:"#B48EAD"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"#",props:{style:{color:"#ECEFF4"}}},{content:"0000",props:{style:{color:"#B48EAD"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"*",props:{style:{color:"#81A1C1"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"::",props:{style:{color:"#ECEFF4"}}},{content:"before",props:{style:{color:"#8FBCBB"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"::",props:{style:{color:"#ECEFF4"}}},{content:"after",props:{style:{color:"#8FBCBB"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  --tw-ring-inset",props:{style:{color:"#D8DEE9FF"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"var",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"--tw-empty",props:{style:{color:"#88C0D0"}}},{content:")",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  --tw-ring-offset-width",props:{style:{color:"#D8DEE9FF"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"0",props:{style:{color:"#B48EAD"}}},{content:"px;",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  --tw-ring-offset-color",props:{style:{color:"#D8DEE9FF"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"#",props:{style:{color:"#ECEFF4"}}},{content:"fff",props:{style:{color:"#B48EAD"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  --tw-ring-color",props:{style:{color:"#D8DEE9FF"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"rgba",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"59",props:{style:{color:"#B48EAD"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"130",props:{style:{color:"#B48EAD"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"246",props:{style:{color:"#B48EAD"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"0.5",props:{style:{color:"#B48EAD"}}},{content:")",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  --tw-ring-offset-shadow",props:{style:{color:"#D8DEE9FF"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"0",props:{style:{color:"#B48EAD"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"0",props:{style:{color:"#B48EAD"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"#",props:{style:{color:"#ECEFF4"}}},{content:"0000",props:{style:{color:"#B48EAD"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  --tw-ring-shadow",props:{style:{color:"#D8DEE9FF"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"0",props:{style:{color:"#B48EAD"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"0",props:{style:{color:"#B48EAD"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"#",props:{style:{color:"#ECEFF4"}}},{content:"0000",props:{style:{color:"#B48EAD"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"@media",props:{style:{color:"#D08770"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"min-width",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"640",props:{style:{color:"#B48EAD"}}},{content:"px",props:{style:{color:"#81A1C1"}}},{content:")",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"@media",props:{style:{color:"#D08770"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"min-width",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"768",props:{style:{color:"#B48EAD"}}},{content:"px",props:{style:{color:"#81A1C1"}}},{content:")",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"@media",props:{style:{color:"#D08770"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"min-width",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"1024",props:{style:{color:"#B48EAD"}}},{content:"px",props:{style:{color:"#81A1C1"}}},{content:")",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"@media",props:{style:{color:"#D08770"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"min-width",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"1280",props:{style:{color:"#B48EAD"}}},{content:"px",props:{style:{color:"#81A1C1"}}},{content:")",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"@media",props:{style:{color:"#D08770"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"min-width",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"1536",props:{style:{color:"#B48EAD"}}},{content:"px",props:{style:{color:"#81A1C1"}}},{content:")",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"css"},annotations:[]}],southPanel:void 0}],children:[(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(r.CodeSlot,{})}),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:"Tailwind CSS supports adding styles to HTML tags by using class names."}),(0,n.jsx)(r.CodeSlot,{})]}),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:"**When using HTML class names, be sure to import the Tailwind CSS equivalent css file. **"}),(0,n.jsx)(r.CodeSlot,{})]}),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:"Style product."}),(0,n.jsxs)(t.blockquote,{children:["\n",(0,n.jsx)(t.p,{children:"This is a bundle build."}),"\n"]}),(0,n.jsx)(r.CodeSlot,{})]})]}),"\n",(0,n.jsxs)(t.h4,{id:"apply",children:[(0,n.jsx)(t.a,{className:"header-anchor","aria-hidden":"true",href:"#apply",children:"#"}),(0,n.jsx)(t.code,{children:"@apply"})]}),"\n",(0,n.jsxs)(t.p,{children:["Tailwind CSS provides the ",(0,n.jsx)(t.a,{href:"https://v2.tailwindcss.com/docs/functions-and-directives#apply-7",target:"_blank",rel:"nofollow",children:(0,n.jsx)(t.code,{children:"@apply"})})," directive, which allows us to inline the styles provided by Tailwind CSS into the styles we write."]}),"\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"@apply"})," can be used in CSS, Less, and Sass."]}),"\n",(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:".",props:{style:{color:"#ECEFF4"}}},{content:"btn",props:{style:{color:"#8FBCBB"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  @apply font-bold py-2 px-4 rounded",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"css"},annotations:[]}]}),"\n",(0,n.jsx)(t.p,{children:"However, there are some things to keep in mind when using Less and Sass."}),"\n",(0,n.jsxs)(t.h5,{id:"sass",children:[(0,n.jsx)(t.a,{className:"header-anchor","aria-hidden":"true",href:"#sass",children:"#"}),"Sass"]}),"\n",(0,n.jsxs)(t.p,{children:["When using Tailwind with Sass, the presence of ",(0,n.jsx)(t.code,{children:"!important"})," after ",(0,n.jsx)(t.code,{children:"@apply"})," requires interpolation to get Sass to compile correctly."]}),"\n",(0,n.jsxs)(r.Spotlight,{codeConfig:c,editorSteps:[{northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:".alert",props:{style:{color:"#8FBCBB"}}},{content:" {",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"@apply bg-red-500",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"!important",props:{style:{color:"#81A1C1"}}},{content:";",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"}",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"sass"},annotations:[]}]},{northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:".alert",props:{style:{color:"#8FBCBB"}}},{content:" {",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"@apply bg-red-500",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"!important",props:{style:{color:"#81A1C1"}}},{content:";",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"}",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"sass"},annotations:[]}],southPanel:void 0},{northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:".alert",props:{style:{color:"#8FBCBB"}}},{content:" {",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"@apply bg-red-500",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"#{",props:{style:{color:"#88C0D0"}}},{content:"!",props:{style:{color:"#81A1C1"}}},{content:"important}",props:{style:{color:"#88C0D0"}}},{content:";",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"}",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"sass"},annotations:[]}],southPanel:void 0}],children:[(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(r.CodeSlot,{})}),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:"It does not work properly."}),(0,n.jsx)(r.CodeSlot,{})]}),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:"Can work properly."}),(0,n.jsx)(r.CodeSlot,{})]})]}),"\n",(0,n.jsxs)(t.h5,{id:"less-1",children:[(0,n.jsx)(t.a,{className:"header-anchor","aria-hidden":"true",href:"#less-1",children:"#"}),"Less"]}),"\n",(0,n.jsxs)(t.p,{children:["When using Tailwind with Less, you cannot nest Tailwind's ",(0,n.jsx)(t.code,{children:"@screen"})," directive."]}),"\n",(0,n.jsxs)(r.Spotlight,{codeConfig:c,editorSteps:[{northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:".",props:{style:{color:"#ECEFF4"}}},{content:"card",props:{style:{color:"#8FBCBB"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"@",props:{style:{color:"#81A1C1"}}},{content:"apply",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"rounded-none;",props:{style:{color:"#81A1C1"}}}]},{tokens:[]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"@",props:{style:{color:"#81A1C1"}}},{content:"screen",props:{style:{color:"#D8DEE9"}}},{content:" sm ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:"@",props:{style:{color:"#81A1C1"}}},{content:"apply",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"rounded-lg;",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"less"},annotations:[]}]},{northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:".",props:{style:{color:"#ECEFF4"}}},{content:"card",props:{style:{color:"#8FBCBB"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"@",props:{style:{color:"#81A1C1"}}},{content:"apply",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"rounded-none;",props:{style:{color:"#81A1C1"}}}]},{tokens:[]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"@",props:{style:{color:"#81A1C1"}}},{content:"screen",props:{style:{color:"#D8DEE9"}}},{content:" sm ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:"@",props:{style:{color:"#81A1C1"}}},{content:"apply",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"rounded-lg;",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"less"},annotations:[]}],southPanel:void 0},{northPanel:{tabs:["","Method"],active:"Method",heightRatio:.5},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:".",props:{style:{color:"#ECEFF4"}}},{content:"card",props:{style:{color:"#8FBCBB"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"@",props:{style:{color:"#81A1C1"}}},{content:"apply",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"rounded-none;",props:{style:{color:"#81A1C1"}}}]},{tokens:[]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"@",props:{style:{color:"#81A1C1"}}},{content:"screen",props:{style:{color:"#D8DEE9"}}},{content:" sm ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:"@",props:{style:{color:"#81A1C1"}}},{content:"apply",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"rounded-lg;",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"less"},annotations:[]},{name:"Method",Two:!0,focus:"",code:{lines:[{tokens:[{content:"// Use the @screen directive at the top-level",props:{style:{color:"#616E88"}}}]},{tokens:[{content:".",props:{style:{color:"#ECEFF4"}}},{content:"card",props:{style:{color:"#8FBCBB"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"@",props:{style:{color:"#81A1C1"}}},{content:"apply",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"rounded-none;",props:{style:{color:"#81A1C1"}}}]},{tokens:[]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"@media",props:{style:{color:"#D08770"}}},{content:" (",props:{style:{color:"#D8DEE9FF"}}},{content:"min-width",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" theme(",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"screens.sm",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:")) ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:"@",props:{style:{color:"#81A1C1"}}},{content:"apply",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"rounded-lg;",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"less"},annotations:[]},{name:"Method",Two:!0,focus:"",code:{lines:[{tokens:[{content:"// Use the @screen directive at the top-level",props:{style:{color:"#616E88"}}}]},{tokens:[{content:".",props:{style:{color:"#ECEFF4"}}},{content:"card",props:{style:{color:"#8FBCBB"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"@",props:{style:{color:"#81A1C1"}}},{content:"apply",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"rounded-none;",props:{style:{color:"#81A1C1"}}}]},{tokens:[]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"@media",props:{style:{color:"#D08770"}}},{content:" (",props:{style:{color:"#D8DEE9FF"}}},{content:"min-width",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" theme(",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"screens.sm",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:")) ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:"@",props:{style:{color:"#81A1C1"}}},{content:"apply",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"rounded-lg;",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"less"},annotations:[]}],southPanel:{tabs:["Method"],active:"Method",heightRatio:.5}}],children:[(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(r.CodeSlot,{})}),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:"It does not work properly."}),(0,n.jsx)(r.CodeSlot,{})]}),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(t.p,{children:["Instead, use regular media queries and the ",(0,n.jsx)(t.code,{children:"theme()"})," function to reference your screen size, or simply don't nest your ",(0,n.jsx)(t.code,{children:"@screen"})," directive."]}),(0,n.jsx)(r.CodeSlot,{})]})]}),"\n",(0,n.jsxs)(t.h4,{id:"recommended-method",children:[(0,n.jsx)(t.a,{className:"header-anchor","aria-hidden":"true",href:"#recommended-method",children:"#"}),"Recommended method"]}),"\n",(0,n.jsxs)(t.p,{children:["**It is recommended to develop styles in the way specified by ",(0,n.jsx)(t.code,{children:"@apply"}),", so that only styles inlined by directives are included in the style product. **"]}),"\n",(0,n.jsx)(t.p,{children:"When adding styles using HTML class names, by default Tailwind will not only add the styles corresponding to its own class name to the product, but will also have additional style code that may not affect its own styles."}),"\n",(0,n.jsxs)(t.h4,{id:"the-difference-between-bundle-and-bundleless-build-products",children:[(0,n.jsx)(t.a,{className:"header-anchor","aria-hidden":"true",href:"#the-difference-between-bundle-and-bundleless-build-products",children:"#"}),"The difference between bundle and bundleless build products"]}),"\n",(0,n.jsx)(t.p,{children:"For the following code, there is a big difference between the bundle and bundleless modes of building products."}),"\n",(0,n.jsxs)(t.blockquote,{children:["\n",(0,n.jsx)(t.p,{children:"The so-called bundle and bundleless can be found in [[Bundle and Bundleless]](/en/guide/advance/in-depth-about-build#bundle- and-bundleless)"}),"\n"]}),"\n",(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["./src/index.tsx"],active:"./src/index.tsx",heightRatio:1},files:[{name:"./src/index.tsx",focus:"",code:{lines:[{tokens:[{content:"import",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"tailwindcss/utilities.css",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[]},{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"()",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=>",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"return",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"<div",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"className",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"bg-black text-white",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"hello world11",props:{style:{color:"#D8DEE9FF"}}},{content:"</div>;",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]}]}),"\n",(0,n.jsx)(t.p,{children:"In Bundle mode, third-party dependencies are packaged in."}),"\n",(0,n.jsx)(t.p,{children:"For styles, a separate product file is generated, and there is no code related to importing styles in the Js product file."}),"\n",(0,n.jsxs)(t.p,{children:["If you need to inject styles into Js products, you can enable the ",(0,n.jsxs)(t.a,{href:"/module-tools/en/api/config/build-config.html#inject-3",children:[(0,n.jsx)(t.code,{children:"style.inject"})," API"]}),"."]}),"\n",(0,n.jsxs)(r.Code,{codeConfig:c,northPanel:{tabs:["./dist/es/index.css"],active:"./dist/es/index.css",heightRatio:.8333333333333334},southPanel:{tabs:["./dist/es/index.js"],active:"./dist/es/index.js",heightRatio:.16666666666666663},files:[{name:"./dist/es/index.css",focus:"",code:{lines:[{tokens:[{content:"/* ../../node_modules/.pnpm/tailwindcss@2.2.19/node_modules/tailwindcss/utilities.css */",props:{style:{color:"#616E88"}}}]},{tokens:[{content:".",props:{style:{color:"#ECEFF4"}}},{content:"table",props:{style:{color:"#8FBCBB"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"display",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"table;",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"@keyframes",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"spin",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  to ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:"transform",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"rotate",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"360",props:{style:{color:"#B48EAD"}}},{content:"deg",props:{style:{color:"#81A1C1"}}},{content:")",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"@keyframes",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"ping",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  75%, 100% ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:"transform",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"scale",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"2",props:{style:{color:"#B48EAD"}}},{content:")",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:"opacity",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"0",props:{style:{color:"#B48EAD"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"@keyframes",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"pulse",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  50% ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:"opacity",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:".5",props:{style:{color:"#B48EAD"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"@keyframes",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"bounce",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  0%, 100% ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:"transform",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"translateY",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"-25",props:{style:{color:"#B48EAD"}}},{content:"%",props:{style:{color:"#81A1C1"}}},{content:")",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:"animation-timing-function",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"cubic-bezier",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"0.8",props:{style:{color:"#B48EAD"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"0",props:{style:{color:"#B48EAD"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"1",props:{style:{color:"#B48EAD"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"1",props:{style:{color:"#B48EAD"}}},{content:")",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  50% ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:"transform",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"none;",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:"animation-timing-function",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"cubic-bezier",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"0",props:{style:{color:"#B48EAD"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"0",props:{style:{color:"#B48EAD"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"0.2",props:{style:{color:"#B48EAD"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"1",props:{style:{color:"#B48EAD"}}},{content:")",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:".",props:{style:{color:"#ECEFF4"}}},{content:"bg-black",props:{style:{color:"#8FBCBB"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  --tw-bg-opacity",props:{style:{color:"#D8DEE9FF"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"1",props:{style:{color:"#B48EAD"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"background-color",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"rgba",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"0",props:{style:{color:"#B48EAD"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"0",props:{style:{color:"#B48EAD"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"0",props:{style:{color:"#B48EAD"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" var",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"--tw-bg-opacity",props:{style:{color:"#88C0D0"}}},{content:"))",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:".",props:{style:{color:"#ECEFF4"}}},{content:"text-white",props:{style:{color:"#8FBCBB"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  --tw-text-opacity",props:{style:{color:"#D8DEE9FF"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"1",props:{style:{color:"#B48EAD"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"color",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"rgba",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"255",props:{style:{color:"#B48EAD"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"255",props:{style:{color:"#B48EAD"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"255",props:{style:{color:"#B48EAD"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" var",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"--tw-text-opacity",props:{style:{color:"#88C0D0"}}},{content:"))",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"*",props:{style:{color:"#81A1C1"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"::",props:{style:{color:"#ECEFF4"}}},{content:"before",props:{style:{color:"#8FBCBB"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"::",props:{style:{color:"#ECEFF4"}}},{content:"after",props:{style:{color:"#8FBCBB"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  --tw-shadow",props:{style:{color:"#D8DEE9FF"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"0",props:{style:{color:"#B48EAD"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"0",props:{style:{color:"#B48EAD"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"#",props:{style:{color:"#ECEFF4"}}},{content:"0000",props:{style:{color:"#B48EAD"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"*",props:{style:{color:"#81A1C1"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"::",props:{style:{color:"#ECEFF4"}}},{content:"before",props:{style:{color:"#8FBCBB"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"::",props:{style:{color:"#ECEFF4"}}},{content:"after",props:{style:{color:"#8FBCBB"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  --tw-ring-inset",props:{style:{color:"#D8DEE9FF"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"var",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"--tw-empty",props:{style:{color:"#88C0D0"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:")",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  --tw-ring-offset-width",props:{style:{color:"#D8DEE9FF"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"0",props:{style:{color:"#B48EAD"}}},{content:"px;",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  --tw-ring-offset-color",props:{style:{color:"#D8DEE9FF"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"#",props:{style:{color:"#ECEFF4"}}},{content:"fff",props:{style:{color:"#B48EAD"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  --tw-ring-color",props:{style:{color:"#D8DEE9FF"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"rgba",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"59",props:{style:{color:"#B48EAD"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"130",props:{style:{color:"#B48EAD"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"246",props:{style:{color:"#B48EAD"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"0.5",props:{style:{color:"#B48EAD"}}},{content:")",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  --tw-ring-offset-shadow",props:{style:{color:"#D8DEE9FF"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"0",props:{style:{color:"#B48EAD"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"0",props:{style:{color:"#B48EAD"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"#",props:{style:{color:"#ECEFF4"}}},{content:"0000",props:{style:{color:"#B48EAD"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  --tw-ring-shadow",props:{style:{color:"#D8DEE9FF"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"0",props:{style:{color:"#B48EAD"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"0",props:{style:{color:"#B48EAD"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"#",props:{style:{color:"#ECEFF4"}}},{content:"0000",props:{style:{color:"#B48EAD"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"@media",props:{style:{color:"#D08770"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"min-width",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"640",props:{style:{color:"#B48EAD"}}},{content:"px",props:{style:{color:"#81A1C1"}}},{content:")",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"@media",props:{style:{color:"#D08770"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"min-width",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"768",props:{style:{color:"#B48EAD"}}},{content:"px",props:{style:{color:"#81A1C1"}}},{content:")",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"@media",props:{style:{color:"#D08770"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"min-width",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"1024",props:{style:{color:"#B48EAD"}}},{content:"px",props:{style:{color:"#81A1C1"}}},{content:")",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"@media",props:{style:{color:"#D08770"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"min-width",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"1280",props:{style:{color:"#B48EAD"}}},{content:"px",props:{style:{color:"#81A1C1"}}},{content:")",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"@media",props:{style:{color:"#D08770"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"min-width",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"1536",props:{style:{color:"#B48EAD"}}},{content:"px",props:{style:{color:"#81A1C1"}}},{content:")",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"css"},annotations:[]},{name:"./dist/es/index.js",focus:"",code:{lines:[{tokens:[{content:"// src/index.tsx",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"import",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"jsx",props:{style:{color:"#8FBCBB"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"from",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"react/jsx-runtime",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"var",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"src_default",props:{style:{color:"#88C0D0"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"()",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=>",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"return",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"/* @__PURE__ */",props:{style:{color:"#616E88"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"jsx",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"div",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:"className",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"bg-black text-white",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:"children",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"hello world11",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"src_default",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"as",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}],children:[(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["./dist/es/index.css"],active:"./dist/es/index.css",heightRatio:1},files:[{name:"./dist/es/index.css",focus:"",code:{lines:[{tokens:[{content:"/* ../../node_modules/.pnpm/tailwindcss@2.2.19/node_modules/tailwindcss/utilities.css */",props:{style:{color:"#616E88"}}}]},{tokens:[{content:".",props:{style:{color:"#ECEFF4"}}},{content:"table",props:{style:{color:"#8FBCBB"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"display",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"table;",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"@keyframes",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"spin",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  to ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:"transform",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"rotate",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"360",props:{style:{color:"#B48EAD"}}},{content:"deg",props:{style:{color:"#81A1C1"}}},{content:")",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"@keyframes",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"ping",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  75%, 100% ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:"transform",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"scale",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"2",props:{style:{color:"#B48EAD"}}},{content:")",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:"opacity",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"0",props:{style:{color:"#B48EAD"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"@keyframes",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"pulse",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  50% ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:"opacity",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:".5",props:{style:{color:"#B48EAD"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"@keyframes",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"bounce",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  0%, 100% ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:"transform",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"translateY",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"-25",props:{style:{color:"#B48EAD"}}},{content:"%",props:{style:{color:"#81A1C1"}}},{content:")",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:"animation-timing-function",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"cubic-bezier",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"0.8",props:{style:{color:"#B48EAD"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"0",props:{style:{color:"#B48EAD"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"1",props:{style:{color:"#B48EAD"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"1",props:{style:{color:"#B48EAD"}}},{content:")",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  50% ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:"transform",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"none;",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:"animation-timing-function",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"cubic-bezier",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"0",props:{style:{color:"#B48EAD"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"0",props:{style:{color:"#B48EAD"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"0.2",props:{style:{color:"#B48EAD"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"1",props:{style:{color:"#B48EAD"}}},{content:")",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:".",props:{style:{color:"#ECEFF4"}}},{content:"bg-black",props:{style:{color:"#8FBCBB"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  --tw-bg-opacity",props:{style:{color:"#D8DEE9FF"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"1",props:{style:{color:"#B48EAD"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"background-color",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"rgba",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"0",props:{style:{color:"#B48EAD"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"0",props:{style:{color:"#B48EAD"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"0",props:{style:{color:"#B48EAD"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" var",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"--tw-bg-opacity",props:{style:{color:"#88C0D0"}}},{content:"))",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:".",props:{style:{color:"#ECEFF4"}}},{content:"text-white",props:{style:{color:"#8FBCBB"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  --tw-text-opacity",props:{style:{color:"#D8DEE9FF"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"1",props:{style:{color:"#B48EAD"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"color",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"rgba",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"255",props:{style:{color:"#B48EAD"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"255",props:{style:{color:"#B48EAD"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"255",props:{style:{color:"#B48EAD"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" var",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"--tw-text-opacity",props:{style:{color:"#88C0D0"}}},{content:"))",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"*",props:{style:{color:"#81A1C1"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"::",props:{style:{color:"#ECEFF4"}}},{content:"before",props:{style:{color:"#8FBCBB"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"::",props:{style:{color:"#ECEFF4"}}},{content:"after",props:{style:{color:"#8FBCBB"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  --tw-shadow",props:{style:{color:"#D8DEE9FF"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"0",props:{style:{color:"#B48EAD"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"0",props:{style:{color:"#B48EAD"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"#",props:{style:{color:"#ECEFF4"}}},{content:"0000",props:{style:{color:"#B48EAD"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"*",props:{style:{color:"#81A1C1"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"::",props:{style:{color:"#ECEFF4"}}},{content:"before",props:{style:{color:"#8FBCBB"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"::",props:{style:{color:"#ECEFF4"}}},{content:"after",props:{style:{color:"#8FBCBB"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  --tw-ring-inset",props:{style:{color:"#D8DEE9FF"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"var",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"--tw-empty",props:{style:{color:"#88C0D0"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:")",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  --tw-ring-offset-width",props:{style:{color:"#D8DEE9FF"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"0",props:{style:{color:"#B48EAD"}}},{content:"px;",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  --tw-ring-offset-color",props:{style:{color:"#D8DEE9FF"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"#",props:{style:{color:"#ECEFF4"}}},{content:"fff",props:{style:{color:"#B48EAD"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  --tw-ring-color",props:{style:{color:"#D8DEE9FF"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"rgba",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"59",props:{style:{color:"#B48EAD"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"130",props:{style:{color:"#B48EAD"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"246",props:{style:{color:"#B48EAD"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"0.5",props:{style:{color:"#B48EAD"}}},{content:")",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  --tw-ring-offset-shadow",props:{style:{color:"#D8DEE9FF"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"0",props:{style:{color:"#B48EAD"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"0",props:{style:{color:"#B48EAD"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"#",props:{style:{color:"#ECEFF4"}}},{content:"0000",props:{style:{color:"#B48EAD"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  --tw-ring-shadow",props:{style:{color:"#D8DEE9FF"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"0",props:{style:{color:"#B48EAD"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"0",props:{style:{color:"#B48EAD"}}},{content:" ",props:{style:{color:"#88C0D0"}}},{content:"#",props:{style:{color:"#ECEFF4"}}},{content:"0000",props:{style:{color:"#B48EAD"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"@media",props:{style:{color:"#D08770"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"min-width",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"640",props:{style:{color:"#B48EAD"}}},{content:"px",props:{style:{color:"#81A1C1"}}},{content:")",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"@media",props:{style:{color:"#D08770"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"min-width",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"768",props:{style:{color:"#B48EAD"}}},{content:"px",props:{style:{color:"#81A1C1"}}},{content:")",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"@media",props:{style:{color:"#D08770"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"min-width",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"1024",props:{style:{color:"#B48EAD"}}},{content:"px",props:{style:{color:"#81A1C1"}}},{content:")",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"@media",props:{style:{color:"#D08770"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"min-width",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"1280",props:{style:{color:"#B48EAD"}}},{content:"px",props:{style:{color:"#81A1C1"}}},{content:")",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"@media",props:{style:{color:"#D08770"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"min-width",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"1536",props:{style:{color:"#B48EAD"}}},{content:"px",props:{style:{color:"#81A1C1"}}},{content:")",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"css"},annotations:[]}]}),(0,n.jsx)(t.hr,{}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["./dist/es/index.js"],active:"./dist/es/index.js",heightRatio:1},files:[{name:"./dist/es/index.js",focus:"",code:{lines:[{tokens:[{content:"// src/index.tsx",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"import",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"jsx",props:{style:{color:"#8FBCBB"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"from",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"react/jsx-runtime",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"var",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"src_default",props:{style:{color:"#88C0D0"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"()",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=>",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"return",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"/* @__PURE__ */",props:{style:{color:"#616E88"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"jsx",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"div",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:"className",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"bg-black text-white",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:"children",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"hello world11",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"src_default",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"as",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]})]}),"\n",(0,n.jsx)(t.p,{children:"In Bundleless mode, no third-party dependencies are packaged in, and no style products are generated at this time."}),"\n",(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["./dist/es/index.js"],active:"./dist/es/index.js",heightRatio:1},files:[{name:"./dist/es/index.js",focus:"",code:{lines:[{tokens:[{content:"import",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"jsx",props:{style:{color:"#8FBCBB"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"from",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"react/jsx-runtime",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"import",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"tailwindcss/utilities.css",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"var",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"src_default",props:{style:{color:"#88C0D0"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"()",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=>",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"return",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"/* @__PURE__ */",props:{style:{color:"#616E88"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"jsx",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"div",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:"className",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"bg-black text-white",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:"children",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"hello world11",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"src_default",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"as",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]}),"\n",(0,n.jsxs)(t.h3,{id:"css-modules",children:[(0,n.jsx)(t.a,{className:"header-anchor","aria-hidden":"true",href:"#css-modules",children:"#"}),"CSS Modules"]}),"\n",(0,n.jsx)(t.p,{children:"Module projects support the development of styles using CSS Modules. By default, the following files are recognized as CSS Module files."}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsx)(t.li,{children:(0,n.jsx)(t.code,{children:".module.css"})}),"\n",(0,n.jsx)(t.li,{children:(0,n.jsx)(t.code,{children:".module.less"})}),"\n",(0,n.jsx)(t.li,{children:(0,n.jsx)(t.code,{children:".module.scss"})}),"\n",(0,n.jsx)(t.li,{children:(0,n.jsx)(t.code,{children:".module.sass"})}),"\n"]}),"\n",(0,n.jsx)(t.p,{children:"If you need to configure CSS Modules, you can check out the API at"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsx)(t.li,{children:(0,n.jsx)(t.a,{href:"/module-tools/en/api/config/build-config.html#automodules-3",children:"autoModules"})}),"\n",(0,n.jsx)(t.li,{children:(0,n.jsx)(t.a,{href:"/module-tools/en/api/config/build-config.html#modules-3",children:"modules"})}),"\n"]}),"\n",(0,n.jsx)(t.p,{children:"The following is a code example."}),"\n",(0,n.jsxs)(r.Code,{codeConfig:c,northPanel:{tabs:["./src/index.tsx","./src/index.module.css"],active:"./src/index.tsx",heightRatio:1},files:[{name:"./src/index.tsx",focus:"",code:{lines:[{tokens:[{content:"import",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"style",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"from",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"./index.module.css",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[]},{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"()",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=>",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"return",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"<div",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"className",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"style",props:{style:{color:"#D8DEE9"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"btn",props:{style:{color:"#D8DEE9"}}},{content:"}>",props:{style:{color:"#81A1C1"}}},{content:"hello world",props:{style:{color:"#D8DEE9FF"}}},{content:"</div>;",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]},{name:"./src/index.module.css",focus:"",code:{lines:[{tokens:[{content:".",props:{style:{color:"#ECEFF4"}}},{content:"btn",props:{style:{color:"#8FBCBB"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"color",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"blue;",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"css"},annotations:[]}],children:[(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["./src/index.tsx"],active:"./src/index.tsx",heightRatio:1},files:[{name:"./src/index.tsx",focus:"",code:{lines:[{tokens:[{content:"import",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"style",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"from",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"./index.module.css",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[]},{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"()",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=>",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"return",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"<div",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"className",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"style",props:{style:{color:"#D8DEE9"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"btn",props:{style:{color:"#D8DEE9"}}},{content:"}>",props:{style:{color:"#81A1C1"}}},{content:"hello world",props:{style:{color:"#D8DEE9FF"}}},{content:"</div>;",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["./src/index.module.css"],active:"./src/index.module.css",heightRatio:1},files:[{name:"./src/index.module.css",focus:"",code:{lines:[{tokens:[{content:".",props:{style:{color:"#ECEFF4"}}},{content:"btn",props:{style:{color:"#8FBCBB"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"color",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"blue;",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"css"},annotations:[]}]})]}),"\n",(0,n.jsxs)(t.h2,{id:"configuring-build-products",children:[(0,n.jsx)(t.a,{className:"header-anchor","aria-hidden":"true",href:"#configuring-build-products",children:"#"}),"Configuring build products"]}),"\n",(0,n.jsxs)(t.p,{children:["Based on most scenarios of component project usage, ",(0,n.jsxs)(t.strong,{children:["it is recommended to use the ",(0,n.jsx)(t.code,{children:"npm-component"})," build preset"]}),". This preset yields a product directory structure of"]}),"\n",(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:".",props:{style:{color:"#88C0D0"}}}]},{tokens:[{content:"\u251c\u2500\u2500 dist",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"\u2502   \u251c\u2500\u2500 es",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"\u2502   \u251c\u2500\u2500 lib",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"\u2502   \u2514\u2500\u2500 types",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"bash"},annotations:[]}]}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:". /dist/es"}),": Contains bundleless products in ES modules format that support the es6 syntax."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:". /dist/lib"}),": Contains bundleless products in CommonJS format with support for es6 syntax."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:". /dist/types"}),": Contains the types file."]}),"\n"]}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.a,{href:"/module-tools/en/api/config/build-preset.html",children:(0,n.jsx)(t.code,{children:"buildPreset"})})," can be configured manually if there is a requirement to use syntax support, and supports modifying the supported syntax by adding a suffix to ",(0,n.jsx)(t.code,{children:"npm-component"}),"."]}),"\n",(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"defineConfig",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"buildPreset",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"npm-component-es2019",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]}]}),"\n",(0,n.jsxs)(t.p,{children:["If you have special needs for the build product directory structure, you can use the ",(0,n.jsxs)(t.a,{href:"/module-tools/en/api/config/build-config.html",children:[(0,n.jsx)(t.code,{children:"buildConfig"})," API"]}),", which can be used by the following documentation."]}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsx)(t.li,{children:(0,n.jsx)(t.a,{href:"/module-tools/en/guide/basic/modify-output-product.html#build-configuration-object-1",children:"modify-output-product"})}),"\n",(0,n.jsx)(t.li,{children:(0,n.jsx)(t.a,{href:"/module-tools/en/guide/advance/in-depth-about-build.html",children:"in-depth-about-build"})}),"\n"]}),"\n",(0,n.jsxs)(t.h2,{id:"testing-components",children:[(0,n.jsx)(t.a,{className:"header-anchor","aria-hidden":"true",href:"#testing-components",children:"#"}),"Testing components"]}),"\n",(0,n.jsxs)(t.p,{children:["For more information on how to test components, please refer to ",(0,n.jsx)(t.a,{href:"/module-tools/en/guide/basic/test-your-project.html",children:"[Test project]"}),"."]}),"\n",(0,n.jsxs)(t.h2,{id:"releasing-components",children:[(0,n.jsx)(t.a,{className:"header-anchor","aria-hidden":"true",href:"#releasing-components",children:"#"}),"Releasing components"]}),"\n",(0,n.jsxs)(t.p,{children:["It is recommended to use module project to provide version publishing function, you can refer to ",(0,n.jsx)(t.a,{href:"/module-tools/en/guide/basic/publish-your-project.html",children:"[Versioning and publishing]"}),"."]})]})}function F(o,t){throw new Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(o={}){const{wrapper:t}=o.components||{};return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(a,o)})):a(o)}}}]);