[{"data":1,"prerenderedAt":590},["Reactive",2],{"$KyeTl6nybl":3,"page-data":4,"page-tree":561,"doc-page-nav":581,"doc-linker-to-BaseCard":586,"doc-linker-to-BaseButton":588},[],{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":9,"description":8,"body":10,"_type":556,"_id":557,"_source":558,"_file":559,"_extension":560},"/documentation/tailwindcss/shuriken-ui","tailwindcss",false,"","رابط کاربری شوریکن",{"type":11,"children":12,"toc":553},"root",[13,134,319,547],{"type":14,"tag":15,"props":16,"children":18},"element","doc-component-demo",{"title":17},"What is Shuriken UI?",[19,26,31,93,102,106,111],{"type":14,"tag":20,"props":21,"children":22},"p",{},[23],{"type":24,"value":25},"text","Shuriken UI is a Design System created on top of Tailwind CSS. It was initiated for Tairo and is now available as a standalone package, this allow us to ship releases faster, and simplify upgrade on you side.",{"type":14,"tag":20,"props":27,"children":28},{},[29],{"type":24,"value":30},"It's composed of two main packages:",{"type":14,"tag":32,"props":33,"children":34},"ul",{},[35,59],{"type":14,"tag":36,"props":37,"children":38},"li",{},[39,48,50,57],{"type":14,"tag":40,"props":41,"children":45},"a",{"href":42,"rel":43},"https://www.npmjs.com/package/@shuriken-ui/tailwind",[44],"nofollow",[46],{"type":24,"value":47},"@shuriken-ui/tailwind",{"type":24,"value":49},": Contains the Tailwind CSS preset which register components through Tailwind CSS plugins. Those are configurable in the ",{"type":14,"tag":51,"props":52,"children":54},"code",{"className":53},[],[55],{"type":24,"value":56},"tailwind.config.ts",{"type":24,"value":58}," file.",{"type":14,"tag":36,"props":60,"children":61},{},[62,69,71,77,79,84,86,92],{"type":14,"tag":40,"props":63,"children":66},{"href":64,"rel":65},"https://www.npmjs.com/package/@shuriken-ui/nuxt",[44],[67],{"type":24,"value":68},"@shuriken-ui/nuxt",{"type":24,"value":70},": The Nuxt layer which register the Vue components (prefixed by ",{"type":14,"tag":51,"props":72,"children":74},{"className":73},[],[75],{"type":24,"value":76},"Base*",{"type":24,"value":78},"). They use the Tailwind CSS classes introduced by the ",{"type":14,"tag":51,"props":80,"children":82},{"className":81},[],[83],{"type":24,"value":47},{"type":24,"value":85}," package. Some components properties are configurable in the ",{"type":14,"tag":51,"props":87,"children":89},{"className":88},[],[90],{"type":24,"value":91},"app.config.ts",{"type":24,"value":58},{"type":14,"tag":20,"props":94,"children":95},{},[96],{"type":14,"tag":97,"props":98,"children":99},"em",{},[100],{"type":24,"value":101},"A React version also exists, check on the Shuriken UI documentation for more information.",{"type":14,"tag":103,"props":104,"children":105},"hr",{},[],{"type":14,"tag":20,"props":107,"children":108},{},[109],{"type":24,"value":110},"Useful resources:",{"type":14,"tag":32,"props":112,"children":113},{},[114,124],{"type":14,"tag":36,"props":115,"children":116},{},[117],{"type":14,"tag":40,"props":118,"children":121},{"href":119,"rel":120},"https://tailwindcss.com/docs/presets",[44],[122],{"type":24,"value":123},"Learn about presets on tailwindcss.com",{"type":14,"tag":36,"props":125,"children":126},{},[127],{"type":14,"tag":40,"props":128,"children":131},{"href":129,"rel":130},"https://github.com/shuriken-ui/tailwind/blob/v3.0.1/src/themes.ts",[44],[132],{"type":24,"value":133},"Explore Shuriken UI preset on github.com",{"type":14,"tag":15,"props":135,"children":137},{"title":136},"Shuriken UI components",[138,150,162,175,193,223,251,256,299,302,306],{"type":14,"tag":20,"props":139,"children":140},{},[141,143,148],{"type":24,"value":142},"Let's take a look at the ",{"type":14,"tag":144,"props":145,"children":147},"doc-linker",{"to":146},"BaseCard",[],{"type":24,"value":149}," component and how it's made.",{"type":14,"tag":20,"props":151,"children":152},{},[153,155,160],{"type":24,"value":154},"On the Nuxt layer, the ",{"type":14,"tag":51,"props":156,"children":158},{"className":157},[],[159],{"type":24,"value":146},{"type":24,"value":161}," component expose properties so it's convenient to use in your app.",{"type":14,"tag":20,"props":163,"children":164},{},[165,167,173],{"type":24,"value":166},"We can see that the component use ",{"type":14,"tag":51,"props":168,"children":170},{"className":169},[],[171],{"type":24,"value":172},"nui-card",{"type":24,"value":174}," class to style the card.",{"type":14,"tag":20,"props":176,"children":177},{},[178,180,185,187,192],{"type":24,"value":179},"The ",{"type":14,"tag":51,"props":181,"children":183},{"className":182},[],[184],{"type":24,"value":172},{"type":24,"value":186}," class is defined in the Tailwind CSS preset via a plugin and has a set of properties that can be customized in the ",{"type":14,"tag":51,"props":188,"children":190},{"className":189},[],[191],{"type":24,"value":56},{"type":24,"value":58},{"type":14,"tag":194,"props":195,"children":197},"code-group",{":expandable":196,"expandable":8},"true",[198,211],{"type":14,"tag":199,"props":200,"children":206},"pre",{"className":201,"code":203,"filename":204,"language":205,"meta":8},[202],"language-vue","\u003Cscript setup lang=\"ts\">\nconst props = withDefaults(\n  defineProps\u003C{\n    /**\n     * Adds a flat or a on hover shadow to the card.\n     */\n    shadow?: 'flat' | 'hover'\n\n    /**\n     * The color of the card.\n     *\n     * @default 'default'\n     */\n    color?:\n      | 'default'\n      | 'default-contrast'\n      | 'muted'\n      | 'muted-contrast'\n      | 'dark'\n      | 'black'\n      | 'primary'\n      | 'info'\n      | 'success'\n      | 'warning'\n      | 'danger'\n      | 'none'\n\n    /**\n     * The radius of the card.\n     *\n     * @since 2.0.0\n     * @default 'sm'\n     */\n    rounded?: 'none' | 'sm' | 'md' | 'lg'\n  }>(),\n  {\n    rounded: undefined,\n    shadow: undefined,\n    color: undefined,\n  },\n)\n\nconst color = useNuiDefaultProperty(props, 'BaseCard', 'color')\nconst rounded = useNuiDefaultProperty(props, 'BaseCard', 'rounded')\n\nconst radiuses = {\n  none: '',\n  sm: 'nui-card-rounded-sm',\n  md: 'nui-card-rounded-md',\n  lg: 'nui-card-rounded-lg',\n}\n\nconst colors = {\n  default: 'nui-card-default',\n  'default-contrast': 'nui-card-default-contrast',\n  muted: 'nui-card-muted',\n  'muted-contrast': 'nui-card-muted-contrast',\n  dark: 'nui-card-dark',\n  black: 'nui-card-black',\n  primary: 'nui-card-primary',\n  info: 'nui-card-info',\n  success: 'nui-card-success',\n  warning: 'nui-card-warning',\n  danger: 'nui-card-danger',\n  none: '',\n}\n\nconst shadows = {\n  flat: 'nui-card-shadow',\n  hover: 'nui-card-shadow-hover',\n}\n\nconst classes = computed(() => [\n  'nui-card',\n  rounded.value && radiuses[rounded.value],\n  color.value && colors[color.value],\n  props.shadow && shadows[props.shadow],\n])\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv :class=\"classes\">\n    \u003Cslot>\u003C/slot>\n  \u003C/div>\n\u003C/template>\n","BaseCard.vue (@shuriken-ui/nuxt)","vue",[207],{"type":14,"tag":51,"props":208,"children":209},{"__ignoreMap":8},[210],{"type":24,"value":203},{"type":14,"tag":199,"props":212,"children":218},{"className":213,"code":215,"filename":216,"language":217,"meta":8},[214],"language-ts","import plugin from 'tailwindcss/plugin'\nimport { type CardConfig, defaultConfig, key } from './card.config'\n\nconst config = {\n  theme: {\n    nui: {\n      [key]: defaultConfig,\n    },\n  },\n}\n\nexport default plugin(({ addComponents, theme }) => {\n  const config = theme(`nui.${key}`) satisfies CardConfig\n\n  addComponents({\n    '.nui-card': {\n      //Base\n      [`@apply relative w-${config.width} transition-${config.transition.property} duration-${config.transition.duration}`]:\n        {},\n      //Color:default\n      '&.nui-card-default': {\n        //Border\n        [`@apply border border-${config.color.default.border.light} dark:border-${config.color.default.border.dark}`]:\n          {},\n        //Background\n        [`@apply bg-${config.color.default.background.light} dark:bg-${config.color.default.background.dark}`]:\n          {},\n      },\n      //Color:defaultContrast\n      '&.nui-card-default-contrast': {\n        //Border\n        [`@apply border border-${config.color.defaultContrast.border.light} dark:border-${config.color.defaultContrast.border.dark}`]:\n          {},\n        //Background\n        [`@apply bg-${config.color.defaultContrast.background.light} dark:bg-${config.color.defaultContrast.background.dark}`]:\n          {},\n      },\n      //Color:muted\n      '&.nui-card-muted': {\n        //Border\n        [`@apply border border-${config.color.muted.border.light} dark:border-${config.color.muted.border.dark}`]:\n          {},\n        //Background\n        [`@apply bg-${config.color.muted.background.light} dark:bg-${config.color.muted.background.dark}`]:\n          {},\n      },\n      //Color:mutedContrast\n      '&.nui-card-muted-contrast': {\n        //Border\n        [`@apply border border-${config.color.mutedContrast.border.light} dark:border-${config.color.mutedContrast.border.dark}`]:\n          {},\n        //Background\n        [`@apply bg-${config.color.mutedContrast.background.light} dark:bg-${config.color.mutedContrast.background.dark}`]:\n          {},\n      },\n      //Color:dark\n      '&.nui-card-dark': {\n        //Border\n        [`@apply border border-${config.color.dark.border.light} dark:border-${config.color.dark.border.dark}`]:\n          {},\n        //Background\n        [`@apply bg-${config.color.dark.background.light} dark:bg-${config.color.dark.background.dark}`]:\n          {},\n      },\n      //Color:black\n      '&.nui-card-black': {\n        //Border\n        [`@apply border border-${config.color.black.border.light} dark:border-${config.color.black.border.dark}`]:\n          {},\n        //Background\n        [`@apply bg-${config.color.black.background.light} dark:bg-${config.color.black.background.dark}`]:\n          {},\n      },\n      //Color:primary\n      '&.nui-card-primary': {\n        //Border\n        [`@apply border border-${config.color.primary.border.light} dark:border-${config.color.primary.border.dark}`]:\n          {},\n        //Background\n        [`@apply bg-${config.color.primary.background.light} dark:bg-${config.color.primary.background.dark}`]:\n          {},\n      },\n      //Color:info\n      '&.nui-card-info': {\n        //Border\n        [`@apply border border-${config.color.info.border.light} dark:border-${config.color.info.border.dark}`]:\n          {},\n        //Background\n        [`@apply bg-${config.color.info.background.light} dark:bg-${config.color.info.background.dark}`]:\n          {},\n      },\n      //Color:success\n      '&.nui-card-success': {\n        //Border\n        [`@apply border border-${config.color.success.border.light} dark:border-${config.color.success.border.dark}`]:\n          {},\n        //Background\n        [`@apply bg-${config.color.success.background.light} dark:bg-${config.color.success.background.dark}`]:\n          {},\n      },\n      //Color:warning\n      '&.nui-card-warning': {\n        //Border\n        [`@apply border border-${config.color.warning.border.light} dark:border-${config.color.warning.border.dark}`]:\n          {},\n        //Background\n        [`@apply bg-${config.color.warning.background.light} dark:bg-${config.color.warning.background.dark}`]:\n          {},\n      },\n      //Color:danger\n      '&.nui-card-danger': {\n        //Border\n        [`@apply border border-${config.color.danger.border.light} dark:border-${config.color.danger.border.dark}`]:\n          {},\n        //Background\n        [`@apply bg-${config.color.danger.background.light} dark:bg-${config.color.danger.background.dark}`]:\n          {},\n      },\n      //Rounded:sm\n      '&.nui-card-rounded-sm': {\n        [`@apply rounded-${config.rounded.sm}`]: {},\n      },\n      //Rounded:md\n      '&.nui-card-rounded-md': {\n        [`@apply rounded-${config.rounded.md}`]: {},\n      },\n      //Rounded:lg\n      '&.nui-card-rounded-lg': {\n        [`@apply rounded-${config.rounded.lg}`]: {},\n      },\n      //Shadow\n      '&:not(.nui-card-primary):not(.nui-card-info):not(.nui-card-success):not(.nui-card-warning):not(.nui-card-danger)':\n        {\n          '&.nui-card-shadow': {\n            [`@apply shadow-${config.shadow.light} dark:shadow-${config.shadow.dark} shadow-${config.shadow.size}`]:\n              {},\n          },\n          '&.nui-card-shadow-hover': {\n            [`@apply hover:shadow-${config.shadow.light} dark:hover:shadow-${config.shadow.dark} hover:shadow-${config.shadow.size}`]:\n              {},\n          },\n        },\n    },\n  })\n}, config)\n","card/index.ts (@shuriken-ui/tailwind)","ts",[219],{"type":14,"tag":51,"props":220,"children":221},{"__ignoreMap":8},[222],{"type":24,"value":215},{"type":14,"tag":224,"props":225,"children":226},"doc-message",{},[227],{"type":14,"tag":20,"props":228,"children":229},{},[230,232,236,242,245],{"type":24,"value":231},"Sources:\n",{"type":14,"tag":233,"props":234,"children":235},"br",{},[],{"type":14,"tag":40,"props":237,"children":240},{"href":238,"rel":239},"https://github.com/shuriken-ui/nuxt/blob/v3.1.1/components/base/BaseCard.vue",[44],[241],{"type":24,"value":238},{"type":14,"tag":233,"props":243,"children":244},{},[],{"type":14,"tag":40,"props":246,"children":249},{"href":247,"rel":248},"https://github.com/shuriken-ui/tailwind/blob/v3.0.1/src/plugins/components/card/index.ts",[44],[250],{"type":24,"value":247},{"type":14,"tag":20,"props":252,"children":253},{},[254],{"type":24,"value":255},"There are two things to notice here:",{"type":14,"tag":32,"props":257,"children":258},{},[259,279],{"type":14,"tag":36,"props":260,"children":261},{},[262,264,270,272,277],{"type":24,"value":263},"On the Nuxt component, we use the ",{"type":14,"tag":51,"props":265,"children":267},{"className":266},[],[268],{"type":24,"value":269},"useNuiDefaultProperty",{"type":24,"value":271}," function to get the default value of a property. This function is read from your ",{"type":14,"tag":51,"props":273,"children":275},{"className":274},[],[276],{"type":24,"value":91},{"type":24,"value":278}," file, so you can customize the default value of a property for all components at once.",{"type":14,"tag":36,"props":280,"children":281},{},[282,284,290,292,297],{"type":24,"value":283},"On the Tailwind CSS plugin, we use the ",{"type":14,"tag":51,"props":285,"children":287},{"className":286},[],[288],{"type":24,"value":289},"theme",{"type":24,"value":291}," object to get the configuration of the component. This configuration is read from the ",{"type":14,"tag":51,"props":293,"children":295},{"className":294},[],[296],{"type":24,"value":56},{"type":24,"value":298}," file, so you can update design tokens for specific variants of a component.",{"type":14,"tag":103,"props":300,"children":301},{},[],{"type":14,"tag":20,"props":303,"children":304},{},[305],{"type":24,"value":110},{"type":14,"tag":32,"props":307,"children":308},{},[309],{"type":14,"tag":36,"props":310,"children":311},{},[312],{"type":14,"tag":40,"props":313,"children":316},{"href":314,"rel":315},"https://main--656a098589ac31a8b917519a.chromatic.com/",[44],[317],{"type":24,"value":318},"Explore Shuriken UI storybook",{"type":14,"tag":15,"props":320,"children":322},{"title":321},"Customizing Shuriken UI",[323,342,349,396,401,414,426,439,444,449,470,482,507,510,514],{"type":14,"tag":20,"props":324,"children":325},{},[326,328,333,335,340],{"type":24,"value":327},"You can change how Shuriken UI components look and behave by updating the ",{"type":14,"tag":51,"props":329,"children":331},{"className":330},[],[332],{"type":24,"value":91},{"type":24,"value":334}," and ",{"type":14,"tag":51,"props":336,"children":338},{"className":337},[],[339],{"type":24,"value":56},{"type":24,"value":341}," files. Let's see some examples to understand how it works.",{"type":14,"tag":343,"props":344,"children":348},"doc-heading",{"className":345,"label":347},[346],"mb-4","Example 1: Set default props for all buttons",[],{"type":14,"tag":20,"props":350,"children":351},{},[352,354,358,360,366,368,374,375,381,382,388,390,395],{"type":24,"value":353},"On the ",{"type":14,"tag":144,"props":355,"children":357},{"to":356},"BaseButton",[],{"type":24,"value":359}," we can see that ",{"type":14,"tag":51,"props":361,"children":363},{"className":362},[],[364],{"type":24,"value":365},"color",{"type":24,"value":367},", ",{"type":14,"tag":51,"props":369,"children":371},{"className":370},[],[372],{"type":24,"value":373},"rounded",{"type":24,"value":367},{"type":14,"tag":51,"props":376,"children":378},{"className":377},[],[379],{"type":24,"value":380},"size",{"type":24,"value":334},{"type":14,"tag":51,"props":383,"children":385},{"className":384},[],[386],{"type":24,"value":387},"variants",{"type":24,"value":389}," properties are configurable through the ",{"type":14,"tag":51,"props":391,"children":393},{"className":392},[],[394],{"type":24,"value":91},{"type":24,"value":58},{"type":14,"tag":20,"props":397,"children":398},{},[399],{"type":24,"value":400},"This allow to change the default value of those properties for all buttons at once so you don't have to repeat the same values on each button. You still can set the properties on each button if you need to override the default value.",{"type":14,"tag":194,"props":402,"children":403},{},[404],{"type":14,"tag":199,"props":405,"children":409},{"className":406,"code":407,"filename":408,"language":217,"meta":8},[214],"defineAppConfig({\n  nui: {\n    BaseButton: {\n      color: \"muted-contrast\",\n      rounded: \"md\",\n      size: \"sm\",\n      variant: \"pastel\"\n    }\n  }\n})\n","\u003Capp>/app.config.ts",[410],{"type":14,"tag":51,"props":411,"children":412},{"__ignoreMap":8},[413],{"type":24,"value":407},{"type":14,"tag":20,"props":415,"children":416},{},[417,419,424],{"type":24,"value":418},"You can go further by updating the ",{"type":14,"tag":51,"props":420,"children":422},{"className":421},[],[423],{"type":24,"value":56},{"type":24,"value":425}," file to change the design tokens of the button component. Here is an example to update the font and text size of the button component for each button size:",{"type":14,"tag":194,"props":427,"children":428},{":expandable":196,"expandable":8},[429],{"type":14,"tag":199,"props":430,"children":434},{"className":431,"code":432,"filename":433,"language":217,"meta":8},[214],"import { withShurikenUI } from '@shuriken-ui/tailwind'\n\nexport default withShurikenUI({\n  theme: {\n    extend: {\n      nui: {\n        button: {\n          font: {\n            family: 'sans',\n            weight: 'normal',\n          },\n          size: {\n            sm: {\n              button: {\n                text: 'sm',\n              },\n            },\n            md: {\n              button: {\n                text: 'sm',\n              },\n            },\n            lg: {\n              button: {\n                text: 'base',\n              },\n            },\n            xl: {\n              button: {\n                text: 'base',\n              },\n            },\n          },\n        },\n      },\n    },\n  },\n})\n","\u003Capp>/tailwind.config.ts",[435],{"type":14,"tag":51,"props":436,"children":437},{"__ignoreMap":8},[438],{"type":24,"value":432},{"type":14,"tag":343,"props":440,"children":443},{"className":441,"label":442},[346],"Example 2: Update look and behavior for nui-tooltip",[],{"type":14,"tag":20,"props":445,"children":446},{},[447],{"type":24,"value":448},"By default, focusable elements always have a dotted outline when focused. This is made to improve accessibility. We can change the behavior to only show the outline when the user navigates with the keyboard, which is the default comportment of outline in most browsers.",{"type":14,"tag":20,"props":450,"children":451},{},[452,454,460,462,468],{"type":24,"value":453},"We can also update the style and color of the outline. By default, the outline is dashed and the color is ",{"type":14,"tag":51,"props":455,"children":457},{"className":456},[],[458],{"type":24,"value":459},"muted-300",{"type":24,"value":461}," in light mode and ",{"type":14,"tag":51,"props":463,"children":465},{"className":464},[],[466],{"type":24,"value":467},"muted-600",{"type":24,"value":469}," in dark mode.",{"type":14,"tag":194,"props":471,"children":472},{},[473],{"type":14,"tag":199,"props":474,"children":477},{"className":475,"code":476,"filename":433,"language":217,"meta":8},[214],"import { withShurikenUI } from '@shuriken-ui/tailwind'\n\nexport default withShurikenUI({\n  theme: {\n    extend: {\n      nui: {\n        focus: {\n          mode: 'focus-visible',\n          width: '1',\n          style: 'solid',\n          color: {\n            light: 'primary-500',\n            dark: 'primary-400',\n          }\n        }\n      },\n    },\n  },\n})\n",[478],{"type":14,"tag":51,"props":479,"children":480},{"__ignoreMap":8},[481],{"type":24,"value":476},{"type":14,"tag":224,"props":483,"children":484},{},[485],{"type":14,"tag":20,"props":486,"children":487},{},[488,489,492,498,501],{"type":24,"value":231},{"type":14,"tag":233,"props":490,"children":491},{},[],{"type":14,"tag":40,"props":493,"children":496},{"href":494,"rel":495},"https://github.com/shuriken-ui/tailwind/blob/v3.0.1/src/plugins/components/focus/focus.config.ts",[44],[497],{"type":24,"value":494},{"type":14,"tag":233,"props":499,"children":500},{},[],{"type":14,"tag":40,"props":502,"children":505},{"href":503,"rel":504},"https://github.com/shuriken-ui/tailwind/blob/v3.0.1/src/plugins/components/focus/index.ts",[44],[506],{"type":24,"value":503},{"type":14,"tag":103,"props":508,"children":509},{},[],{"type":14,"tag":20,"props":511,"children":512},{},[513],{"type":24,"value":110},{"type":14,"tag":32,"props":515,"children":516},{},[517,527,537],{"type":14,"tag":36,"props":518,"children":519},{},[520],{"type":14,"tag":40,"props":521,"children":524},{"href":522,"rel":523},"https://shurikenui.com",[44],[525],{"type":24,"value":526},"Shuriken UI Documentation",{"type":14,"tag":36,"props":528,"children":529},{},[530],{"type":14,"tag":40,"props":531,"children":534},{"href":532,"rel":533},"https://github.com/shuriken-ui/tailwind",[44],[535],{"type":24,"value":536},"Shuriken UI Tailwind github.com",{"type":14,"tag":36,"props":538,"children":539},{},[540],{"type":14,"tag":40,"props":541,"children":544},{"href":542,"rel":543},"https://github.com/shuriken-ui/nuxt",[44],[545],{"type":24,"value":546},"Shuriken UI Nuxt github.com",{"type":14,"tag":548,"props":549,"children":552},"doc-nav",{"next":550,"prev":551},"/documentation/tailwindcss/colors","/documentation/tailwindcss/config",[],{"title":8,"searchDepth":554,"depth":554,"links":555},2,[],"markdown","content:documentation:30.tailwindcss:3.shuriken-ui.md","content","documentation/30.tailwindcss/3.shuriken-ui.md","md",[562,568,575],{"_path":563,"_dir":8,"_draft":7,"_partial":7,"_locale":8,"title":564,"description":8,"toc":565,"_type":556,"_id":566,"_source":558,"_file":567,"_extension":560},"/documentation","مرکز مستندات",true,"content:documentation:1.index.md","documentation/1.index.md",{"_path":569,"_dir":6,"_draft":7,"_partial":565,"_locale":8,"title":570,"_id":571,"_type":572,"_source":558,"_file":573,"_extension":574},"/documentation/tailwindcss/_dir","Tailwind CSS","content:documentation:30.tailwindcss:_dir.yml","yaml","documentation/30.tailwindcss/_dir.yml","yml",{"_path":576,"_dir":577,"_draft":7,"_partial":7,"_locale":8,"title":578,"description":8,"_type":556,"_id":579,"_source":558,"_file":580,"_extension":560},"/documentation/tailwindcss","documentation","Tailwind, and Tairo","content:documentation:30.tailwindcss:1.index.md","documentation/30.tailwindcss/1.index.md",[582,584],{"_path":551,"title":583},"Customizing Tailwind",{"_path":550,"title":585},"Colors",{"_path":587},"/documentation/reference/base/card",{"_path":589},"/documentation/reference/base/button",1779173505381]