[{"data":1,"prerenderedAt":382},["Reactive",2],{"$KyeTl6nybl":3,"page-data":4,"page-tree":357,"doc-page-nav":377},[],{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":9,"description":8,"body":10,"_type":352,"_id":353,"_source":354,"_file":355,"_extension":356},"/documentation/tailwindcss/colors","tailwindcss",false,"","Colors",{"type":11,"children":12,"toc":349},"root",[13,150,188,219,250,281,312,343],{"type":14,"tag":15,"props":16,"children":18},"element","doc-component-demo",{"title":17},"Brand your application",[19,80,106,110,115],{"type":14,"tag":20,"props":21,"children":22},"p",{},[23,26,33,35,41,42,48,49,55,56,62,64,70,72,78],{"type":24,"value":25},"text","To make your application stand out, Tairo uses ",{"type":14,"tag":27,"props":28,"children":30},"code",{"className":29},[],[31],{"type":24,"value":32},"primary",{"type":24,"value":34},", ",{"type":14,"tag":27,"props":36,"children":38},{"className":37},[],[39],{"type":24,"value":40},"info",{"type":24,"value":34},{"type":14,"tag":27,"props":43,"children":45},{"className":44},[],[46],{"type":24,"value":47},"success",{"type":24,"value":34},{"type":14,"tag":27,"props":50,"children":52},{"className":51},[],[53],{"type":24,"value":54},"warning",{"type":24,"value":34},{"type":14,"tag":27,"props":57,"children":59},{"className":58},[],[60],{"type":24,"value":61},"danger",{"type":24,"value":63}," and ",{"type":14,"tag":27,"props":65,"children":67},{"className":66},[],[68],{"type":24,"value":69},"muted",{"type":24,"value":71}," custom color shades to allow you to easily customize the look and feel of your dashboard. By default, we use predefined colors from Tailwind CSS but you can easily change them by editing the ",{"type":14,"tag":27,"props":73,"children":75},{"className":74},[],[76],{"type":24,"value":77},"tailwind.config.ts",{"type":24,"value":79}," file.",{"type":14,"tag":81,"props":82,"children":83},"ul",{},[84],{"type":14,"tag":85,"props":86,"children":87},"li",{},[88,94,96,102],{"type":14,"tag":89,"props":90,"children":91},"strong",{},[92],{"type":24,"value":93},"Use the customizer :",{"type":24,"value":95}," Open the Tairo theme customizer by clicking on the droplet icon in the sidebar. You can dynamically change the layout between the two available (more in future updates). You can change the primary color using one of the presets but also the background color, by selecting one of the available shades. The customizer is a useful tool that let's you see your brand color in action.",{"type":14,"tag":97,"props":98,"children":101},"doc-image",{"src":99,"srcDark":100},"/img/apps/customizer.png","/img/apps/customizer-dark.png",[],{"type":14,"tag":103,"props":104,"children":105},"doc-customizer-button",{},[],{"type":14,"tag":107,"props":108,"children":109},"hr",{},[],{"type":14,"tag":20,"props":111,"children":112},{},[113],{"type":24,"value":114},"Useful resources:",{"type":14,"tag":81,"props":116,"children":117},{},[118,130,140],{"type":14,"tag":85,"props":119,"children":120},{},[121],{"type":14,"tag":122,"props":123,"children":127},"a",{"href":124,"rel":125},"https://tailwindcss.com/docs/customizing-colors",[126],"nofollow",[128],{"type":24,"value":129},"View default Tailwind CSS colors on tailwindcss.com",{"type":14,"tag":85,"props":131,"children":132},{},[133],{"type":14,"tag":122,"props":134,"children":137},{"href":135,"rel":136},"https://www.tailwindshades.com/",[126],[138],{"type":24,"value":139},"Generate shades for your custom colors with tailwindshades.com",{"type":14,"tag":85,"props":141,"children":142},{},[143],{"type":14,"tag":122,"props":144,"children":147},{"href":145,"rel":146},"https://www.tints.dev/",[126],[148],{"type":24,"value":149},"Generate P-3 shades for your colors with tints.dev",{"type":14,"tag":15,"props":151,"children":155},{"title":152,":code":153,":dark":153,"demo":154},"Primary color","false","#examples/colors/primary-color.vue",[156,168,185],{"type":14,"tag":20,"props":157,"children":158},{},[159,161,166],{"type":24,"value":160},"The ",{"type":14,"tag":27,"props":162,"children":164},{"className":163},[],[165],{"type":24,"value":32},{"type":24,"value":167}," color is the main color to establish brand recognition and familiarity of your application.",{"type":14,"tag":169,"props":170,"children":171},"code-group",{},[172],{"type":14,"tag":173,"props":174,"children":180},"pre",{"className":175,"code":177,"filename":178,"language":179,"meta":8},[176],"language-ts","import { withShurikenUI } from '@shuriken-ui/tailwind'\nimport colors from 'tailwindcss/colors'\n\nexport default withShurikenUI({\n  content: [],\n  theme: {\n    extend: {\n      // change the primary color\n      primary: colors.violet,\n    }\n  }\n})\n","\u003Capp>/tailwind.config.ts","ts",[181],{"type":14,"tag":27,"props":182,"children":183},{"__ignoreMap":8},[184],{"type":24,"value":177},{"type":14,"tag":107,"props":186,"children":187},{},[],{"type":14,"tag":15,"props":189,"children":192},{"title":190,":code":153,":dark":153,"demo":191},"Muted color","#examples/colors/muted-color.vue",[193,204,216],{"type":14,"tag":20,"props":194,"children":195},{},[196,197,202],{"type":24,"value":160},{"type":14,"tag":27,"props":198,"children":200},{"className":199},[],[201],{"type":24,"value":69},{"type":24,"value":203}," color is used to create a contrast between the primary color, text and the background color. To make your app look good in dark mode, you should use a color that fit well with the primary color: example, if your primary color is red, you should use a warm gray color for the muted color.",{"type":14,"tag":169,"props":205,"children":206},{},[207],{"type":14,"tag":173,"props":208,"children":211},{"className":209,"code":210,"filename":178,"language":179,"meta":8},[176],"import { withShurikenUI } from '@shuriken-ui/tailwind'\nimport colors from 'tailwindcss/colors'\n\nexport default withShurikenUI({\n  content: [],\n  theme: {\n    extend: {\n      // change the muted color\n      muted: colors.slate,\n    }\n  }\n})\n",[212],{"type":14,"tag":27,"props":213,"children":214},{"__ignoreMap":8},[215],{"type":24,"value":210},{"type":14,"tag":107,"props":217,"children":218},{},[],{"type":14,"tag":15,"props":220,"children":223},{"title":221,":code":153,":dark":153,"demo":222},"Info color","#examples/colors/info-color.vue",[224,235,247],{"type":14,"tag":20,"props":225,"children":226},{},[227,228,233],{"type":24,"value":160},{"type":14,"tag":27,"props":229,"children":231},{"className":230},[],[232],{"type":24,"value":40},{"type":24,"value":234}," color is the secondary color used to highlight important information.",{"type":14,"tag":169,"props":236,"children":237},{},[238],{"type":14,"tag":173,"props":239,"children":242},{"className":240,"code":241,"filename":178,"language":179,"meta":8},[176],"import { withShurikenUI } from '@shuriken-ui/tailwind'\nimport colors from 'tailwindcss/colors'\n\nexport default withShurikenUI({\n  content: [],\n  theme: {\n    extend: {\n      // change the info color\n      info: colors.sky,\n    }\n  }\n})\n",[243],{"type":14,"tag":27,"props":244,"children":245},{"__ignoreMap":8},[246],{"type":24,"value":241},{"type":14,"tag":107,"props":248,"children":249},{},[],{"type":14,"tag":15,"props":251,"children":254},{"title":252,":code":153,":dark":153,"demo":253},"Success color","#examples/colors/success-color.vue",[255,266,278],{"type":14,"tag":20,"props":256,"children":257},{},[258,259,264],{"type":24,"value":160},{"type":14,"tag":27,"props":260,"children":262},{"className":261},[],[263],{"type":24,"value":47},{"type":24,"value":265}," color is the color shade used to highlight actions that have been completed successfully.",{"type":14,"tag":169,"props":267,"children":268},{},[269],{"type":14,"tag":173,"props":270,"children":273},{"className":271,"code":272,"filename":178,"language":179,"meta":8},[176],"import { withShurikenUI } from '@shuriken-ui/tailwind'\nimport colors from 'tailwindcss/colors'\n\nexport default withShurikenUI({\n  content: [],\n  theme: {\n    extend: {\n      // change the success color\n      success: colors.teal,\n    }\n  }\n})\n",[274],{"type":14,"tag":27,"props":275,"children":276},{"__ignoreMap":8},[277],{"type":24,"value":272},{"type":14,"tag":107,"props":279,"children":280},{},[],{"type":14,"tag":15,"props":282,"children":285},{"title":283,":code":153,":dark":153,"demo":284},"Danger color","#examples/colors/danger-color.vue",[286,297,309],{"type":14,"tag":20,"props":287,"children":288},{},[289,290,295],{"type":24,"value":160},{"type":14,"tag":27,"props":291,"children":293},{"className":292},[],[294],{"type":24,"value":61},{"type":24,"value":296}," color is the color shade used to raise attention to potentially dangerous actions or when something has gone wrong.",{"type":14,"tag":169,"props":298,"children":299},{},[300],{"type":14,"tag":173,"props":301,"children":304},{"className":302,"code":303,"filename":178,"language":179,"meta":8},[176],"import { withShurikenUI } from '@shuriken-ui/tailwind'\nimport colors from 'tailwindcss/colors'\n\nexport default withShurikenUI({\n  content: [],\n  theme: {\n    extend: {\n      // change the danger color\n      danger: colors.rose,\n    }\n  }\n})\n",[305],{"type":14,"tag":27,"props":306,"children":307},{"__ignoreMap":8},[308],{"type":24,"value":303},{"type":14,"tag":107,"props":310,"children":311},{},[],{"type":14,"tag":15,"props":313,"children":316},{"title":314,":code":153,":dark":153,"demo":315},"Warning color","#examples/colors/warning-color.vue",[317,328,340],{"type":14,"tag":20,"props":318,"children":319},{},[320,321,326],{"type":24,"value":160},{"type":14,"tag":27,"props":322,"children":324},{"className":323},[],[325],{"type":24,"value":54},{"type":24,"value":327}," color is the color shade used to highlight actions that need to be taken.",{"type":14,"tag":169,"props":329,"children":330},{},[331],{"type":14,"tag":173,"props":332,"children":335},{"className":333,"code":334,"filename":178,"language":179,"meta":8},[176],"import { withShurikenUI } from '@shuriken-ui/tailwind'\nimport colors from 'tailwindcss/colors'\n\nexport default withShurikenUI({\n  content: [],\n  theme: {\n    extend: {\n      // change the warning color\n      warning: colors.amber,\n    }\n  }\n})\n",[336],{"type":14,"tag":27,"props":337,"children":338},{"__ignoreMap":8},[339],{"type":24,"value":334},{"type":14,"tag":107,"props":341,"children":342},{},[],{"type":14,"tag":344,"props":345,"children":348},"doc-nav",{"next":346,"prev":347},"/documentation/tailwindcss/fonts","/documentation/tailwindcss/shuriken-ui",[],{"title":8,"searchDepth":350,"depth":350,"links":351},2,[],"markdown","content:documentation:30.tailwindcss:4.colors.md","content","documentation/30.tailwindcss/4.colors.md","md",[358,364,371],{"_path":359,"_dir":8,"_draft":7,"_partial":7,"_locale":8,"title":360,"description":8,"toc":361,"_type":352,"_id":362,"_source":354,"_file":363,"_extension":356},"/documentation","مرکز مستندات",true,"content:documentation:1.index.md","documentation/1.index.md",{"_path":365,"_dir":6,"_draft":7,"_partial":361,"_locale":8,"title":366,"_id":367,"_type":368,"_source":354,"_file":369,"_extension":370},"/documentation/tailwindcss/_dir","Tailwind CSS","content:documentation:30.tailwindcss:_dir.yml","yaml","documentation/30.tailwindcss/_dir.yml","yml",{"_path":372,"_dir":373,"_draft":7,"_partial":7,"_locale":8,"title":374,"description":8,"_type":352,"_id":375,"_source":354,"_file":376,"_extension":356},"/documentation/tailwindcss","documentation","Tailwind, and Tairo","content:documentation:30.tailwindcss:1.index.md","documentation/30.tailwindcss/1.index.md",[378,380],{"_path":347,"title":379},"رابط کاربری شوریکن",{"_path":346,"title":381},"Fonts",1779173506600]