[{"data":1,"prerenderedAt":2683},["ShallowReactive",2],{"guide-tailwind-color-palette":3},{"id":4,"title":5,"body":6,"date":2675,"description":2676,"extension":2677,"meta":2678,"navigation":163,"path":2679,"readingTime":291,"seo":2680,"stem":2681,"__hash__":2682},"guides\u002Fguides\u002Ftailwind-color-palette.md","Tailwind CSS Color System: Customizing and Extending Palettes",{"type":7,"value":8,"toc":2649},"minimark",[9,14,18,99,197,201,204,336,341,344,379,382,386,393,619,623,626,632,690,696,739,743,746,750,767,771,778,1358,1362,1365,1418,1422,1425,1608,1611,1933,1943,1947,1950,1954,2056,2059,2092,2096,2207,2211,2323,2364,2368,2372,2490,2494,2580,2584,2624,2628,2645],[10,11,13],"h2",{"id":12},"understanding-tailwinds-default-color-system","Understanding Tailwind's Default Color System",[15,16,17],"p",{},"Tailwind CSS provides a comprehensive, thoughtfully designed color system out of the box. Unlike many frameworks that offer a handful of generic colors, Tailwind ships with a complete color palette containing multiple shades for each hue, carefully calibrated for both light and dark themes.",[15,19,20,21,25,26,25,29,25,32,25,35,25,38,25,41,25,44,25,47,25,50,25,53,25,56,25,59,25,62,25,65,25,68,25,71,25,74,25,77,25,80,25,83,86,87,90,91,94,95,98],{},"The default color palette includes ten core colors: ",[22,23,24],"code",{},"slate",", ",[22,27,28],{},"gray",[22,30,31],{},"zinc",[22,33,34],{},"neutral",[22,36,37],{},"stone",[22,39,40],{},"red",[22,42,43],{},"orange",[22,45,46],{},"amber",[22,48,49],{},"yellow",[22,51,52],{},"lime",[22,54,55],{},"green",[22,57,58],{},"emerald",[22,60,61],{},"teal",[22,63,64],{},"cyan",[22,66,67],{},"sky",[22,69,70],{},"blue",[22,72,73],{},"indigo",[22,75,76],{},"violet",[22,78,79],{},"purple",[22,81,82],{},"fuchsia",[22,84,85],{},"pink",", and ",[22,88,89],{},"rose",". Each color comes with 11 shades ranging from ",[22,92,93],{},"50"," (lightest) to ",[22,96,97],{},"950"," (darkest).",[100,101,106],"pre",{"className":102,"code":103,"language":104,"meta":105,"style":105},"language-html shiki shiki-themes github-light github-dark","\u003C!-- Using default Tailwind colors -->\n\u003Cbutton class=\"bg-blue-500 text-white hover:bg-blue-600\">\n  Default Blue Button\n\u003C\u002Fbutton>\n\n\u003Cdiv class=\"text-slate-700 dark:text-slate-300\">\n  Text with dark mode support\n\u003C\u002Fdiv>\n","html","",[22,107,108,117,142,148,158,165,182,188],{"__ignoreMap":105},[109,110,113],"span",{"class":111,"line":112},"line",1,[109,114,116],{"class":115},"sJ8bj","\u003C!-- Using default Tailwind colors -->\n",[109,118,120,124,128,132,135,139],{"class":111,"line":119},2,[109,121,123],{"class":122},"sVt8B","\u003C",[109,125,127],{"class":126},"s9eBZ","button",[109,129,131],{"class":130},"sScJk"," class",[109,133,134],{"class":122},"=",[109,136,138],{"class":137},"sZZnC","\"bg-blue-500 text-white hover:bg-blue-600\"",[109,140,141],{"class":122},">\n",[109,143,145],{"class":111,"line":144},3,[109,146,147],{"class":122},"  Default Blue Button\n",[109,149,151,154,156],{"class":111,"line":150},4,[109,152,153],{"class":122},"\u003C\u002F",[109,155,127],{"class":126},[109,157,141],{"class":122},[109,159,161],{"class":111,"line":160},5,[109,162,164],{"emptyLinePlaceholder":163},true,"\n",[109,166,168,170,173,175,177,180],{"class":111,"line":167},6,[109,169,123],{"class":122},[109,171,172],{"class":126},"div",[109,174,131],{"class":130},[109,176,134],{"class":122},[109,178,179],{"class":137},"\"text-slate-700 dark:text-slate-300\"",[109,181,141],{"class":122},[109,183,185],{"class":111,"line":184},7,[109,186,187],{"class":122},"  Text with dark mode support\n",[109,189,191,193,195],{"class":111,"line":190},8,[109,192,153],{"class":122},[109,194,172],{"class":126},[109,196,141],{"class":122},[10,198,200],{"id":199},"the-anatomy-of-a-tailwind-color-scale","The Anatomy of a Tailwind Color Scale",[15,202,203],{},"Each Tailwind color follows a consistent 50-950 scale with 11 steps:",[100,205,209],{"className":206,"code":207,"language":208,"meta":105,"style":105},"language-css shiki shiki-themes github-light github-dark","\u002F* Tailwind's blue palette structure *\u002F\n--blue-50: #eff6ff;   \u002F* Very light tint *\u002F\n--blue-100: #dbeafe;\n--blue-200: #bfdbfe;\n--blue-300: #93c5fd;\n--blue-400: #60a5fa;\n--blue-500: #3b82f6;  \u002F* Primary brand color (reference point) *\u002F\n--blue-600: #2563eb;\n--blue-700: #1d4ed8;\n--blue-800: #1e40af;\n--blue-900: #1e3a8a;\n--blue-950: #172554;  \u002F* Very dark shade *\u002F\n","css",[22,210,211,216,228,236,244,255,265,279,289,300,311,322],{"__ignoreMap":105},[109,212,213],{"class":111,"line":112},[109,214,215],{"class":115},"\u002F* Tailwind's blue palette structure *\u002F\n",[109,217,218,221,225],{"class":111,"line":119},[109,219,220],{"class":122},"--blue-50: ",[109,222,224],{"class":223},"s7hpK","#eff6ff;",[109,226,227],{"class":115},"   \u002F* Very light tint *\u002F\n",[109,229,230,233],{"class":111,"line":144},[109,231,232],{"class":122},"--blue-100: ",[109,234,235],{"class":223},"#dbeafe;\n",[109,237,238,241],{"class":111,"line":150},[109,239,240],{"class":122},"--blue-200: ",[109,242,243],{"class":223},"#bfdbfe;\n",[109,245,246,249,252],{"class":111,"line":160},[109,247,248],{"class":122},"--blue-300: ",[109,250,251],{"class":223},"#93c5fd",[109,253,254],{"class":122},";\n",[109,256,257,260,263],{"class":111,"line":167},[109,258,259],{"class":122},"--blue-400: ",[109,261,262],{"class":223},"#60a5fa",[109,264,254],{"class":122},[109,266,267,270,273,276],{"class":111,"line":184},[109,268,269],{"class":122},"--blue-500: ",[109,271,272],{"class":223},"#3b82f6",[109,274,275],{"class":122},";  ",[109,277,278],{"class":115},"\u002F* Primary brand color (reference point) *\u002F\n",[109,280,281,284,287],{"class":111,"line":190},[109,282,283],{"class":122},"--blue-600: ",[109,285,286],{"class":223},"#2563eb",[109,288,254],{"class":122},[109,290,292,295,298],{"class":111,"line":291},9,[109,293,294],{"class":122},"--blue-700: ",[109,296,297],{"class":223},"#1d4ed8",[109,299,254],{"class":122},[109,301,303,306,309],{"class":111,"line":302},10,[109,304,305],{"class":122},"--blue-800: ",[109,307,308],{"class":223},"#1e40af",[109,310,254],{"class":122},[109,312,314,317,320],{"class":111,"line":313},11,[109,315,316],{"class":122},"--blue-900: ",[109,318,319],{"class":223},"#1e3a8a",[109,321,254],{"class":122},[109,323,325,328,331,333],{"class":111,"line":324},12,[109,326,327],{"class":122},"--blue-950: ",[109,329,330],{"class":223},"#172554",[109,332,275],{"class":122},[109,334,335],{"class":115},"\u002F* Very dark shade *\u002F\n",[337,338,340],"h3",{"id":339},"why-50-950","Why 50-950?",[15,342,343],{},"The numbering system is intentional:",[345,346,347,355,361,367,373],"ul",{},[348,349,350,354],"li",{},[351,352,353],"strong",{},"50-100",": Background tints, subtle highlights",[348,356,357,360],{},[351,358,359],{},"200-300",": Borders, dividers, disabled states",[348,362,363,366],{},[351,364,365],{},"400-500",": Primary interactive elements (buttons, links)",[348,368,369,372],{},[351,370,371],{},"600-700",": Hover\u002Factive states for 400-500",[348,374,375,378],{},[351,376,377],{},"800-950",": Text colors, dark backgrounds",[15,380,381],{},"This scale gives you enough granularity for accessible designs while remaining manageable.",[10,383,385],{"id":384},"customizing-colors-in-tailwindconfigjs","Customizing Colors in tailwind.config.js",[15,387,388,389,392],{},"To customize your color palette, modify the ",[22,390,391],{},"theme.colors"," section in your Tailwind configuration:",[100,394,398],{"className":395,"code":396,"language":397,"meta":105,"style":105},"language-javascript shiki shiki-themes github-light github-dark","\u002F\u002F tailwind.config.js\nmodule.exports = {\n  theme: {\n    extend: {\n      colors: {\n        \u002F\u002F Add a custom brand color\n        brand: {\n          50: '#eff6ff',\n          100: '#dbeafe',\n          200: '#bfdbfe',\n          300: '#93c5fd',\n          400: '#60a5fa',\n          500: '#3b82f6',\n          600: '#2563eb',\n          700: '#1d4ed8',\n          800: '#1e40af',\n          900: '#1e3a8a',\n          950: '#172554',\n        }\n      }\n    }\n  }\n}\n","javascript",[22,399,400,405,424,429,434,439,444,449,463,475,487,499,511,524,537,550,563,576,589,595,601,607,613],{"__ignoreMap":105},[109,401,402],{"class":111,"line":112},[109,403,404],{"class":115},"\u002F\u002F tailwind.config.js\n",[109,406,407,411,414,417,421],{"class":111,"line":119},[109,408,410],{"class":409},"sj4cs","module",[109,412,413],{"class":122},".",[109,415,416],{"class":409},"exports",[109,418,420],{"class":419},"szBVR"," =",[109,422,423],{"class":122}," {\n",[109,425,426],{"class":111,"line":144},[109,427,428],{"class":122},"  theme: {\n",[109,430,431],{"class":111,"line":150},[109,432,433],{"class":122},"    extend: {\n",[109,435,436],{"class":111,"line":160},[109,437,438],{"class":122},"      colors: {\n",[109,440,441],{"class":111,"line":167},[109,442,443],{"class":115},"        \u002F\u002F Add a custom brand color\n",[109,445,446],{"class":111,"line":184},[109,447,448],{"class":122},"        brand: {\n",[109,450,451,454,457,460],{"class":111,"line":190},[109,452,453],{"class":409},"          50",[109,455,456],{"class":122},": ",[109,458,459],{"class":137},"'#eff6ff'",[109,461,462],{"class":122},",\n",[109,464,465,468,470,473],{"class":111,"line":291},[109,466,467],{"class":409},"          100",[109,469,456],{"class":122},[109,471,472],{"class":137},"'#dbeafe'",[109,474,462],{"class":122},[109,476,477,480,482,485],{"class":111,"line":302},[109,478,479],{"class":409},"          200",[109,481,456],{"class":122},[109,483,484],{"class":137},"'#bfdbfe'",[109,486,462],{"class":122},[109,488,489,492,494,497],{"class":111,"line":313},[109,490,491],{"class":409},"          300",[109,493,456],{"class":122},[109,495,496],{"class":137},"'#93c5fd'",[109,498,462],{"class":122},[109,500,501,504,506,509],{"class":111,"line":324},[109,502,503],{"class":409},"          400",[109,505,456],{"class":122},[109,507,508],{"class":137},"'#60a5fa'",[109,510,462],{"class":122},[109,512,514,517,519,522],{"class":111,"line":513},13,[109,515,516],{"class":409},"          500",[109,518,456],{"class":122},[109,520,521],{"class":137},"'#3b82f6'",[109,523,462],{"class":122},[109,525,527,530,532,535],{"class":111,"line":526},14,[109,528,529],{"class":409},"          600",[109,531,456],{"class":122},[109,533,534],{"class":137},"'#2563eb'",[109,536,462],{"class":122},[109,538,540,543,545,548],{"class":111,"line":539},15,[109,541,542],{"class":409},"          700",[109,544,456],{"class":122},[109,546,547],{"class":137},"'#1d4ed8'",[109,549,462],{"class":122},[109,551,553,556,558,561],{"class":111,"line":552},16,[109,554,555],{"class":409},"          800",[109,557,456],{"class":122},[109,559,560],{"class":137},"'#1e40af'",[109,562,462],{"class":122},[109,564,566,569,571,574],{"class":111,"line":565},17,[109,567,568],{"class":409},"          900",[109,570,456],{"class":122},[109,572,573],{"class":137},"'#1e3a8a'",[109,575,462],{"class":122},[109,577,579,582,584,587],{"class":111,"line":578},18,[109,580,581],{"class":409},"          950",[109,583,456],{"class":122},[109,585,586],{"class":137},"'#172554'",[109,588,462],{"class":122},[109,590,592],{"class":111,"line":591},19,[109,593,594],{"class":122},"        }\n",[109,596,598],{"class":111,"line":597},20,[109,599,600],{"class":122},"      }\n",[109,602,604],{"class":111,"line":603},21,[109,605,606],{"class":122},"    }\n",[109,608,610],{"class":111,"line":609},22,[109,611,612],{"class":122},"  }\n",[109,614,616],{"class":111,"line":615},23,[109,617,618],{"class":122},"}\n",[337,620,622],{"id":621},"replacing-vs-extending","Replacing vs Extending",[15,624,625],{},"Tailwind offers two approaches:",[15,627,628,631],{},[351,629,630],{},"1. Extend (recommended)",": Add to the default palette",[100,633,635],{"className":395,"code":634,"language":397,"meta":105,"style":105},"theme: {\n  extend: {\n    colors: {\n      brand: { \u002F* your colors *\u002F }\n    }\n  }\n}\n\u002F\u002F Result: You keep all default colors + your custom ones\n",[22,636,637,645,652,659,673,677,681,685],{"__ignoreMap":105},[109,638,639,642],{"class":111,"line":112},[109,640,641],{"class":130},"theme",[109,643,644],{"class":122},": {\n",[109,646,647,650],{"class":111,"line":119},[109,648,649],{"class":130},"  extend",[109,651,644],{"class":122},[109,653,654,657],{"class":111,"line":144},[109,655,656],{"class":130},"    colors",[109,658,644],{"class":122},[109,660,661,664,667,670],{"class":111,"line":150},[109,662,663],{"class":130},"      brand",[109,665,666],{"class":122},": { ",[109,668,669],{"class":115},"\u002F* your colors *\u002F",[109,671,672],{"class":122}," }\n",[109,674,675],{"class":111,"line":160},[109,676,606],{"class":122},[109,678,679],{"class":111,"line":167},[109,680,612],{"class":122},[109,682,683],{"class":111,"line":184},[109,684,618],{"class":122},[109,686,687],{"class":111,"line":190},[109,688,689],{"class":115},"\u002F\u002F Result: You keep all default colors + your custom ones\n",[15,691,692,695],{},[351,693,694],{},"2. Replace",": Override the entire color system",[100,697,699],{"className":395,"code":698,"language":397,"meta":105,"style":105},"theme: {\n  colors: {\n    brand: { \u002F* your colors only *\u002F }\n  }\n}\n\u002F\u002F Result: Default colors are removed, only your colors remain\n",[22,700,701,707,714,726,730,734],{"__ignoreMap":105},[109,702,703,705],{"class":111,"line":112},[109,704,641],{"class":130},[109,706,644],{"class":122},[109,708,709,712],{"class":111,"line":119},[109,710,711],{"class":130},"  colors",[109,713,644],{"class":122},[109,715,716,719,721,724],{"class":111,"line":144},[109,717,718],{"class":130},"    brand",[109,720,666],{"class":122},[109,722,723],{"class":115},"\u002F* your colors only *\u002F",[109,725,672],{"class":122},[109,727,728],{"class":111,"line":150},[109,729,612],{"class":122},[109,731,732],{"class":111,"line":160},[109,733,618],{"class":122},[109,735,736],{"class":111,"line":167},[109,737,738],{"class":115},"\u002F\u002F Result: Default colors are removed, only your colors remain\n",[10,740,742],{"id":741},"creating-a-complete-50-950-scale","Creating a Complete 50-950 Scale",[15,744,745],{},"When building a custom color scale, you need to generate 11 shades that maintain consistent perceptual progression. Here are three approaches:",[337,747,749],{"id":748},"method-1-use-an-online-palette-generator","Method 1: Use an Online Palette Generator",[15,751,752,753,760,761,766],{},"Tools like ",[754,755,759],"a",{"href":756,"rel":757},"https:\u002F\u002Ftailwind.simeongriggs.dev\u002F",[758],"nofollow","Tailwind Color Shades Generator"," or ",[754,762,765],{"href":763,"rel":764},"https:\u002F\u002Fhypercolor.dev\u002F",[758],"Hypercolor"," can generate a full scale from a single base color.",[337,768,770],{"id":769},"method-2-use-oklch-for-precision","Method 2: Use oklch() for Precision",[15,772,773,774,777],{},"Modern CSS's ",[22,775,776],{},"oklch()"," function makes it easy to create perceptually uniform scales:",[100,779,781],{"className":395,"code":780,"language":397,"meta":105,"style":105},"\u002F\u002F Calculate programmatically\nfunction generatePalette(baseLightness, baseChroma, baseHue) {\n  return {\n    50: `oklch(${Math.min(baseLightness + 35, 98)}% ${baseChroma * 0.3} ${baseHue})`,\n    100: `oklch(${Math.min(baseLightness + 30, 95)}% ${baseChroma * 0.4} ${baseHue})`,\n    200: `oklch(${Math.min(baseLightness + 20, 90)}% ${baseChroma * 0.5} ${baseHue})`,\n    300: `oklch(${Math.min(baseLightness + 10, 80)}% ${baseChroma * 0.7} ${baseHue})`,\n    400: `oklch(${baseLightness + 5}% ${baseChroma * 0.85} ${baseHue})`,\n    500: `oklch(${baseLightness}% ${baseChroma} ${baseHue})`, \u002F\u002F Reference\n    600: `oklch(${Math.max(baseLightness - 10, 20)}% ${baseChroma} ${baseHue})`,\n    700: `oklch(${Math.max(baseLightness - 20, 15)}% ${baseChroma} ${baseHue})`,\n    800: `oklch(${Math.max(baseLightness - 30, 10)}% ${baseChroma * 0.95} ${baseHue})`,\n    900: `oklch(${Math.max(baseLightness - 40, 8)}% ${baseChroma * 0.9} ${baseHue})`,\n    950: `oklch(${Math.max(baseLightness - 50, 5)}% ${baseChroma * 0.85} ${baseHue})`,\n  }\n}\n\n\u002F\u002F Example: Generate a blue palette\nconst brandBlue = generatePalette(60, 0.2, 264)\n",[22,782,783,788,816,823,880,928,976,1024,1057,1083,1127,1169,1216,1264,1311,1315,1319,1323,1328],{"__ignoreMap":105},[109,784,785],{"class":111,"line":112},[109,786,787],{"class":115},"\u002F\u002F Calculate programmatically\n",[109,789,790,793,796,799,803,805,808,810,813],{"class":111,"line":119},[109,791,792],{"class":419},"function",[109,794,795],{"class":130}," generatePalette",[109,797,798],{"class":122},"(",[109,800,802],{"class":801},"s4XuR","baseLightness",[109,804,25],{"class":122},[109,806,807],{"class":801},"baseChroma",[109,809,25],{"class":122},[109,811,812],{"class":801},"baseHue",[109,814,815],{"class":122},") {\n",[109,817,818,821],{"class":111,"line":144},[109,819,820],{"class":419},"  return",[109,822,423],{"class":122},[109,824,825,828,830,833,836,838,841,843,845,848,851,853,856,859,862,864,867,870,873,875,878],{"class":111,"line":150},[109,826,827],{"class":409},"    50",[109,829,456],{"class":122},[109,831,832],{"class":137},"`oklch(${",[109,834,835],{"class":122},"Math",[109,837,413],{"class":137},[109,839,840],{"class":130},"min",[109,842,798],{"class":137},[109,844,802],{"class":122},[109,846,847],{"class":419}," +",[109,849,850],{"class":409}," 35",[109,852,25],{"class":137},[109,854,855],{"class":409},"98",[109,857,858],{"class":137},")",[109,860,861],{"class":137},"}% ${",[109,863,807],{"class":122},[109,865,866],{"class":419}," *",[109,868,869],{"class":409}," 0.3",[109,871,872],{"class":137},"} ${",[109,874,812],{"class":122},[109,876,877],{"class":137},"})`",[109,879,462],{"class":122},[109,881,882,885,887,889,891,893,895,897,899,901,904,906,909,911,913,915,917,920,922,924,926],{"class":111,"line":160},[109,883,884],{"class":409},"    100",[109,886,456],{"class":122},[109,888,832],{"class":137},[109,890,835],{"class":122},[109,892,413],{"class":137},[109,894,840],{"class":130},[109,896,798],{"class":137},[109,898,802],{"class":122},[109,900,847],{"class":419},[109,902,903],{"class":409}," 30",[109,905,25],{"class":137},[109,907,908],{"class":409},"95",[109,910,858],{"class":137},[109,912,861],{"class":137},[109,914,807],{"class":122},[109,916,866],{"class":419},[109,918,919],{"class":409}," 0.4",[109,921,872],{"class":137},[109,923,812],{"class":122},[109,925,877],{"class":137},[109,927,462],{"class":122},[109,929,930,933,935,937,939,941,943,945,947,949,952,954,957,959,961,963,965,968,970,972,974],{"class":111,"line":167},[109,931,932],{"class":409},"    200",[109,934,456],{"class":122},[109,936,832],{"class":137},[109,938,835],{"class":122},[109,940,413],{"class":137},[109,942,840],{"class":130},[109,944,798],{"class":137},[109,946,802],{"class":122},[109,948,847],{"class":419},[109,950,951],{"class":409}," 20",[109,953,25],{"class":137},[109,955,956],{"class":409},"90",[109,958,858],{"class":137},[109,960,861],{"class":137},[109,962,807],{"class":122},[109,964,866],{"class":419},[109,966,967],{"class":409}," 0.5",[109,969,872],{"class":137},[109,971,812],{"class":122},[109,973,877],{"class":137},[109,975,462],{"class":122},[109,977,978,981,983,985,987,989,991,993,995,997,1000,1002,1005,1007,1009,1011,1013,1016,1018,1020,1022],{"class":111,"line":184},[109,979,980],{"class":409},"    300",[109,982,456],{"class":122},[109,984,832],{"class":137},[109,986,835],{"class":122},[109,988,413],{"class":137},[109,990,840],{"class":130},[109,992,798],{"class":137},[109,994,802],{"class":122},[109,996,847],{"class":419},[109,998,999],{"class":409}," 10",[109,1001,25],{"class":137},[109,1003,1004],{"class":409},"80",[109,1006,858],{"class":137},[109,1008,861],{"class":137},[109,1010,807],{"class":122},[109,1012,866],{"class":419},[109,1014,1015],{"class":409}," 0.7",[109,1017,872],{"class":137},[109,1019,812],{"class":122},[109,1021,877],{"class":137},[109,1023,462],{"class":122},[109,1025,1026,1029,1031,1033,1035,1037,1040,1042,1044,1046,1049,1051,1053,1055],{"class":111,"line":190},[109,1027,1028],{"class":409},"    400",[109,1030,456],{"class":122},[109,1032,832],{"class":137},[109,1034,802],{"class":122},[109,1036,847],{"class":419},[109,1038,1039],{"class":409}," 5",[109,1041,861],{"class":137},[109,1043,807],{"class":122},[109,1045,866],{"class":419},[109,1047,1048],{"class":409}," 0.85",[109,1050,872],{"class":137},[109,1052,812],{"class":122},[109,1054,877],{"class":137},[109,1056,462],{"class":122},[109,1058,1059,1062,1064,1066,1068,1070,1072,1074,1076,1078,1080],{"class":111,"line":291},[109,1060,1061],{"class":409},"    500",[109,1063,456],{"class":122},[109,1065,832],{"class":137},[109,1067,802],{"class":122},[109,1069,861],{"class":137},[109,1071,807],{"class":122},[109,1073,872],{"class":137},[109,1075,812],{"class":122},[109,1077,877],{"class":137},[109,1079,25],{"class":122},[109,1081,1082],{"class":115},"\u002F\u002F Reference\n",[109,1084,1085,1088,1090,1092,1094,1096,1099,1101,1103,1106,1108,1110,1113,1115,1117,1119,1121,1123,1125],{"class":111,"line":302},[109,1086,1087],{"class":409},"    600",[109,1089,456],{"class":122},[109,1091,832],{"class":137},[109,1093,835],{"class":122},[109,1095,413],{"class":137},[109,1097,1098],{"class":130},"max",[109,1100,798],{"class":137},[109,1102,802],{"class":122},[109,1104,1105],{"class":419}," -",[109,1107,999],{"class":409},[109,1109,25],{"class":137},[109,1111,1112],{"class":409},"20",[109,1114,858],{"class":137},[109,1116,861],{"class":137},[109,1118,807],{"class":122},[109,1120,872],{"class":137},[109,1122,812],{"class":122},[109,1124,877],{"class":137},[109,1126,462],{"class":122},[109,1128,1129,1132,1134,1136,1138,1140,1142,1144,1146,1148,1150,1152,1155,1157,1159,1161,1163,1165,1167],{"class":111,"line":313},[109,1130,1131],{"class":409},"    700",[109,1133,456],{"class":122},[109,1135,832],{"class":137},[109,1137,835],{"class":122},[109,1139,413],{"class":137},[109,1141,1098],{"class":130},[109,1143,798],{"class":137},[109,1145,802],{"class":122},[109,1147,1105],{"class":419},[109,1149,951],{"class":409},[109,1151,25],{"class":137},[109,1153,1154],{"class":409},"15",[109,1156,858],{"class":137},[109,1158,861],{"class":137},[109,1160,807],{"class":122},[109,1162,872],{"class":137},[109,1164,812],{"class":122},[109,1166,877],{"class":137},[109,1168,462],{"class":122},[109,1170,1171,1174,1176,1178,1180,1182,1184,1186,1188,1190,1192,1194,1197,1199,1201,1203,1205,1208,1210,1212,1214],{"class":111,"line":324},[109,1172,1173],{"class":409},"    800",[109,1175,456],{"class":122},[109,1177,832],{"class":137},[109,1179,835],{"class":122},[109,1181,413],{"class":137},[109,1183,1098],{"class":130},[109,1185,798],{"class":137},[109,1187,802],{"class":122},[109,1189,1105],{"class":419},[109,1191,903],{"class":409},[109,1193,25],{"class":137},[109,1195,1196],{"class":409},"10",[109,1198,858],{"class":137},[109,1200,861],{"class":137},[109,1202,807],{"class":122},[109,1204,866],{"class":419},[109,1206,1207],{"class":409}," 0.95",[109,1209,872],{"class":137},[109,1211,812],{"class":122},[109,1213,877],{"class":137},[109,1215,462],{"class":122},[109,1217,1218,1221,1223,1225,1227,1229,1231,1233,1235,1237,1240,1242,1245,1247,1249,1251,1253,1256,1258,1260,1262],{"class":111,"line":513},[109,1219,1220],{"class":409},"    900",[109,1222,456],{"class":122},[109,1224,832],{"class":137},[109,1226,835],{"class":122},[109,1228,413],{"class":137},[109,1230,1098],{"class":130},[109,1232,798],{"class":137},[109,1234,802],{"class":122},[109,1236,1105],{"class":419},[109,1238,1239],{"class":409}," 40",[109,1241,25],{"class":137},[109,1243,1244],{"class":409},"8",[109,1246,858],{"class":137},[109,1248,861],{"class":137},[109,1250,807],{"class":122},[109,1252,866],{"class":419},[109,1254,1255],{"class":409}," 0.9",[109,1257,872],{"class":137},[109,1259,812],{"class":122},[109,1261,877],{"class":137},[109,1263,462],{"class":122},[109,1265,1266,1269,1271,1273,1275,1277,1279,1281,1283,1285,1288,1290,1293,1295,1297,1299,1301,1303,1305,1307,1309],{"class":111,"line":526},[109,1267,1268],{"class":409},"    950",[109,1270,456],{"class":122},[109,1272,832],{"class":137},[109,1274,835],{"class":122},[109,1276,413],{"class":137},[109,1278,1098],{"class":130},[109,1280,798],{"class":137},[109,1282,802],{"class":122},[109,1284,1105],{"class":419},[109,1286,1287],{"class":409}," 50",[109,1289,25],{"class":137},[109,1291,1292],{"class":409},"5",[109,1294,858],{"class":137},[109,1296,861],{"class":137},[109,1298,807],{"class":122},[109,1300,866],{"class":419},[109,1302,1048],{"class":409},[109,1304,872],{"class":137},[109,1306,812],{"class":122},[109,1308,877],{"class":137},[109,1310,462],{"class":122},[109,1312,1313],{"class":111,"line":539},[109,1314,612],{"class":122},[109,1316,1317],{"class":111,"line":552},[109,1318,618],{"class":122},[109,1320,1321],{"class":111,"line":565},[109,1322,164],{"emptyLinePlaceholder":163},[109,1324,1325],{"class":111,"line":578},[109,1326,1327],{"class":115},"\u002F\u002F Example: Generate a blue palette\n",[109,1329,1330,1333,1336,1338,1340,1342,1345,1347,1350,1352,1355],{"class":111,"line":591},[109,1331,1332],{"class":419},"const",[109,1334,1335],{"class":409}," brandBlue",[109,1337,420],{"class":419},[109,1339,795],{"class":130},[109,1341,798],{"class":122},[109,1343,1344],{"class":409},"60",[109,1346,25],{"class":122},[109,1348,1349],{"class":409},"0.2",[109,1351,25],{"class":122},[109,1353,1354],{"class":409},"264",[109,1356,1357],{"class":122},")\n",[337,1359,1361],{"id":1360},"method-3-manual-adjustment-with-tools","Method 3: Manual Adjustment with Tools",[15,1363,1364],{},"Start with your brand's primary color (usually the 500 shade) and manually adjust:",[100,1366,1368],{"className":395,"code":1367,"language":397,"meta":105,"style":105},"\u002F\u002F Start with your brand color\nconst brand = {\n  500: '#3b82f6', \u002F\u002F Your primary brand color\n}\n\n\u002F\u002F Then use a tool to generate surrounding shades\n\u002F\u002F that maintain visual harmony\n",[22,1369,1370,1375,1386,1400,1404,1408,1413],{"__ignoreMap":105},[109,1371,1372],{"class":111,"line":112},[109,1373,1374],{"class":115},"\u002F\u002F Start with your brand color\n",[109,1376,1377,1379,1382,1384],{"class":111,"line":119},[109,1378,1332],{"class":419},[109,1380,1381],{"class":409}," brand",[109,1383,420],{"class":419},[109,1385,423],{"class":122},[109,1387,1388,1391,1393,1395,1397],{"class":111,"line":144},[109,1389,1390],{"class":409},"  500",[109,1392,456],{"class":122},[109,1394,521],{"class":137},[109,1396,25],{"class":122},[109,1398,1399],{"class":115},"\u002F\u002F Your primary brand color\n",[109,1401,1402],{"class":111,"line":150},[109,1403,618],{"class":122},[109,1405,1406],{"class":111,"line":160},[109,1407,164],{"emptyLinePlaceholder":163},[109,1409,1410],{"class":111,"line":167},[109,1411,1412],{"class":115},"\u002F\u002F Then use a tool to generate surrounding shades\n",[109,1414,1415],{"class":111,"line":184},[109,1416,1417],{"class":115},"\u002F\u002F that maintain visual harmony\n",[10,1419,1421],{"id":1420},"integrating-with-css-custom-properties","Integrating with CSS Custom Properties",[15,1423,1424],{},"For maximum flexibility, especially with dark mode, use CSS variables:",[100,1426,1428],{"className":395,"code":1427,"language":397,"meta":105,"style":105},"\u002F\u002F tailwind.config.js\nmodule.exports = {\n  theme: {\n    extend: {\n      colors: {\n        \u002F\u002F Reference CSS variables\n        brand: {\n          50: 'rgb(var(--color-brand-50) \u002F \u003Calpha-value>)',\n          100: 'rgb(var(--color-brand-100) \u002F \u003Calpha-value>)',\n          200: 'rgb(var(--color-brand-200) \u002F \u003Calpha-value>)',\n          300: 'rgb(var(--color-brand-300) \u002F \u003Calpha-value>)',\n          400: 'rgb(var(--color-brand-400) \u002F \u003Calpha-value>)',\n          500: 'rgb(var(--color-brand-500) \u002F \u003Calpha-value>)',\n          600: 'rgb(var(--color-brand-600) \u002F \u003Calpha-value>)',\n          700: 'rgb(var(--color-brand-700) \u002F \u003Calpha-value>)',\n          800: 'rgb(var(--color-brand-800) \u002F \u003Calpha-value>)',\n          900: 'rgb(var(--color-brand-900) \u002F \u003Calpha-value>)',\n          950: 'rgb(var(--color-brand-950) \u002F \u003Calpha-value>)',\n        }\n      }\n    }\n  }\n}\n",[22,1429,1430,1434,1446,1450,1454,1458,1463,1467,1478,1489,1500,1511,1522,1533,1544,1555,1566,1577,1588,1592,1596,1600,1604],{"__ignoreMap":105},[109,1431,1432],{"class":111,"line":112},[109,1433,404],{"class":115},[109,1435,1436,1438,1440,1442,1444],{"class":111,"line":119},[109,1437,410],{"class":409},[109,1439,413],{"class":122},[109,1441,416],{"class":409},[109,1443,420],{"class":419},[109,1445,423],{"class":122},[109,1447,1448],{"class":111,"line":144},[109,1449,428],{"class":122},[109,1451,1452],{"class":111,"line":150},[109,1453,433],{"class":122},[109,1455,1456],{"class":111,"line":160},[109,1457,438],{"class":122},[109,1459,1460],{"class":111,"line":167},[109,1461,1462],{"class":115},"        \u002F\u002F Reference CSS variables\n",[109,1464,1465],{"class":111,"line":184},[109,1466,448],{"class":122},[109,1468,1469,1471,1473,1476],{"class":111,"line":190},[109,1470,453],{"class":409},[109,1472,456],{"class":122},[109,1474,1475],{"class":137},"'rgb(var(--color-brand-50) \u002F \u003Calpha-value>)'",[109,1477,462],{"class":122},[109,1479,1480,1482,1484,1487],{"class":111,"line":291},[109,1481,467],{"class":409},[109,1483,456],{"class":122},[109,1485,1486],{"class":137},"'rgb(var(--color-brand-100) \u002F \u003Calpha-value>)'",[109,1488,462],{"class":122},[109,1490,1491,1493,1495,1498],{"class":111,"line":302},[109,1492,479],{"class":409},[109,1494,456],{"class":122},[109,1496,1497],{"class":137},"'rgb(var(--color-brand-200) \u002F \u003Calpha-value>)'",[109,1499,462],{"class":122},[109,1501,1502,1504,1506,1509],{"class":111,"line":313},[109,1503,491],{"class":409},[109,1505,456],{"class":122},[109,1507,1508],{"class":137},"'rgb(var(--color-brand-300) \u002F \u003Calpha-value>)'",[109,1510,462],{"class":122},[109,1512,1513,1515,1517,1520],{"class":111,"line":324},[109,1514,503],{"class":409},[109,1516,456],{"class":122},[109,1518,1519],{"class":137},"'rgb(var(--color-brand-400) \u002F \u003Calpha-value>)'",[109,1521,462],{"class":122},[109,1523,1524,1526,1528,1531],{"class":111,"line":513},[109,1525,516],{"class":409},[109,1527,456],{"class":122},[109,1529,1530],{"class":137},"'rgb(var(--color-brand-500) \u002F \u003Calpha-value>)'",[109,1532,462],{"class":122},[109,1534,1535,1537,1539,1542],{"class":111,"line":526},[109,1536,529],{"class":409},[109,1538,456],{"class":122},[109,1540,1541],{"class":137},"'rgb(var(--color-brand-600) \u002F \u003Calpha-value>)'",[109,1543,462],{"class":122},[109,1545,1546,1548,1550,1553],{"class":111,"line":539},[109,1547,542],{"class":409},[109,1549,456],{"class":122},[109,1551,1552],{"class":137},"'rgb(var(--color-brand-700) \u002F \u003Calpha-value>)'",[109,1554,462],{"class":122},[109,1556,1557,1559,1561,1564],{"class":111,"line":552},[109,1558,555],{"class":409},[109,1560,456],{"class":122},[109,1562,1563],{"class":137},"'rgb(var(--color-brand-800) \u002F \u003Calpha-value>)'",[109,1565,462],{"class":122},[109,1567,1568,1570,1572,1575],{"class":111,"line":565},[109,1569,568],{"class":409},[109,1571,456],{"class":122},[109,1573,1574],{"class":137},"'rgb(var(--color-brand-900) \u002F \u003Calpha-value>)'",[109,1576,462],{"class":122},[109,1578,1579,1581,1583,1586],{"class":111,"line":578},[109,1580,581],{"class":409},[109,1582,456],{"class":122},[109,1584,1585],{"class":137},"'rgb(var(--color-brand-950) \u002F \u003Calpha-value>)'",[109,1587,462],{"class":122},[109,1589,1590],{"class":111,"line":591},[109,1591,594],{"class":122},[109,1593,1594],{"class":111,"line":597},[109,1595,600],{"class":122},[109,1597,1598],{"class":111,"line":603},[109,1599,606],{"class":122},[109,1601,1602],{"class":111,"line":609},[109,1603,612],{"class":122},[109,1605,1606],{"class":111,"line":615},[109,1607,618],{"class":122},[15,1609,1610],{},"Then define the actual values in your CSS:",[100,1612,1614],{"className":206,"code":1613,"language":208,"meta":105,"style":105},":root {\n  --color-brand-50: 239, 246, 255;\n  --color-brand-100: 219, 234, 254;\n  --color-brand-200: 191, 219, 254;\n  --color-brand-300: 147, 197, 253;\n  --color-brand-400: 96, 165, 250;\n  --color-brand-500: 59, 130, 246;\n  --color-brand-600: 37, 99, 235;\n  --color-brand-700: 29, 78, 216;\n  --color-brand-800: 30, 64, 175;\n  --color-brand-900: 30, 58, 138;\n  --color-brand-950: 23, 37, 84;\n}\n\n[data-theme=\"dark\"] {\n  --color-brand-50: 30, 58, 138;   \u002F* Swap light\u002Fdark *\u002F\n  --color-brand-100: 30, 64, 175;\n  \u002F* ... rest of the palette *\u002F\n}\n",[22,1615,1616,1623,1645,1667,1687,1709,1731,1752,1774,1796,1818,1839,1860,1864,1868,1884,1906,1924,1929],{"__ignoreMap":105},[109,1617,1618,1621],{"class":111,"line":112},[109,1619,1620],{"class":130},":root",[109,1622,423],{"class":122},[109,1624,1625,1628,1630,1633,1635,1638,1640,1643],{"class":111,"line":119},[109,1626,1627],{"class":801},"  --color-brand-50",[109,1629,456],{"class":122},[109,1631,1632],{"class":409},"239",[109,1634,25],{"class":122},[109,1636,1637],{"class":409},"246",[109,1639,25],{"class":122},[109,1641,1642],{"class":409},"255",[109,1644,254],{"class":122},[109,1646,1647,1650,1652,1655,1657,1660,1662,1665],{"class":111,"line":144},[109,1648,1649],{"class":801},"  --color-brand-100",[109,1651,456],{"class":122},[109,1653,1654],{"class":409},"219",[109,1656,25],{"class":122},[109,1658,1659],{"class":409},"234",[109,1661,25],{"class":122},[109,1663,1664],{"class":409},"254",[109,1666,254],{"class":122},[109,1668,1669,1672,1674,1677,1679,1681,1683,1685],{"class":111,"line":150},[109,1670,1671],{"class":801},"  --color-brand-200",[109,1673,456],{"class":122},[109,1675,1676],{"class":409},"191",[109,1678,25],{"class":122},[109,1680,1654],{"class":409},[109,1682,25],{"class":122},[109,1684,1664],{"class":409},[109,1686,254],{"class":122},[109,1688,1689,1692,1694,1697,1699,1702,1704,1707],{"class":111,"line":160},[109,1690,1691],{"class":801},"  --color-brand-300",[109,1693,456],{"class":122},[109,1695,1696],{"class":409},"147",[109,1698,25],{"class":122},[109,1700,1701],{"class":409},"197",[109,1703,25],{"class":122},[109,1705,1706],{"class":409},"253",[109,1708,254],{"class":122},[109,1710,1711,1714,1716,1719,1721,1724,1726,1729],{"class":111,"line":167},[109,1712,1713],{"class":801},"  --color-brand-400",[109,1715,456],{"class":122},[109,1717,1718],{"class":409},"96",[109,1720,25],{"class":122},[109,1722,1723],{"class":409},"165",[109,1725,25],{"class":122},[109,1727,1728],{"class":409},"250",[109,1730,254],{"class":122},[109,1732,1733,1736,1738,1741,1743,1746,1748,1750],{"class":111,"line":184},[109,1734,1735],{"class":801},"  --color-brand-500",[109,1737,456],{"class":122},[109,1739,1740],{"class":409},"59",[109,1742,25],{"class":122},[109,1744,1745],{"class":409},"130",[109,1747,25],{"class":122},[109,1749,1637],{"class":409},[109,1751,254],{"class":122},[109,1753,1754,1757,1759,1762,1764,1767,1769,1772],{"class":111,"line":190},[109,1755,1756],{"class":801},"  --color-brand-600",[109,1758,456],{"class":122},[109,1760,1761],{"class":409},"37",[109,1763,25],{"class":122},[109,1765,1766],{"class":409},"99",[109,1768,25],{"class":122},[109,1770,1771],{"class":409},"235",[109,1773,254],{"class":122},[109,1775,1776,1779,1781,1784,1786,1789,1791,1794],{"class":111,"line":291},[109,1777,1778],{"class":801},"  --color-brand-700",[109,1780,456],{"class":122},[109,1782,1783],{"class":409},"29",[109,1785,25],{"class":122},[109,1787,1788],{"class":409},"78",[109,1790,25],{"class":122},[109,1792,1793],{"class":409},"216",[109,1795,254],{"class":122},[109,1797,1798,1801,1803,1806,1808,1811,1813,1816],{"class":111,"line":302},[109,1799,1800],{"class":801},"  --color-brand-800",[109,1802,456],{"class":122},[109,1804,1805],{"class":409},"30",[109,1807,25],{"class":122},[109,1809,1810],{"class":409},"64",[109,1812,25],{"class":122},[109,1814,1815],{"class":409},"175",[109,1817,254],{"class":122},[109,1819,1820,1823,1825,1827,1829,1832,1834,1837],{"class":111,"line":313},[109,1821,1822],{"class":801},"  --color-brand-900",[109,1824,456],{"class":122},[109,1826,1805],{"class":409},[109,1828,25],{"class":122},[109,1830,1831],{"class":409},"58",[109,1833,25],{"class":122},[109,1835,1836],{"class":409},"138",[109,1838,254],{"class":122},[109,1840,1841,1844,1846,1849,1851,1853,1855,1858],{"class":111,"line":324},[109,1842,1843],{"class":801},"  --color-brand-950",[109,1845,456],{"class":122},[109,1847,1848],{"class":409},"23",[109,1850,25],{"class":122},[109,1852,1761],{"class":409},[109,1854,25],{"class":122},[109,1856,1857],{"class":409},"84",[109,1859,254],{"class":122},[109,1861,1862],{"class":111,"line":513},[109,1863,618],{"class":122},[109,1865,1866],{"class":111,"line":526},[109,1867,164],{"emptyLinePlaceholder":163},[109,1869,1870,1873,1876,1878,1881],{"class":111,"line":539},[109,1871,1872],{"class":122},"[",[109,1874,1875],{"class":130},"data-theme",[109,1877,134],{"class":419},[109,1879,1880],{"class":137},"\"dark\"",[109,1882,1883],{"class":122},"] {\n",[109,1885,1886,1888,1890,1892,1894,1896,1898,1900,1903],{"class":111,"line":552},[109,1887,1627],{"class":801},[109,1889,456],{"class":122},[109,1891,1805],{"class":409},[109,1893,25],{"class":122},[109,1895,1831],{"class":409},[109,1897,25],{"class":122},[109,1899,1836],{"class":409},[109,1901,1902],{"class":122},";   ",[109,1904,1905],{"class":115},"\u002F* Swap light\u002Fdark *\u002F\n",[109,1907,1908,1910,1912,1914,1916,1918,1920,1922],{"class":111,"line":565},[109,1909,1649],{"class":801},[109,1911,456],{"class":122},[109,1913,1805],{"class":409},[109,1915,25],{"class":122},[109,1917,1810],{"class":409},[109,1919,25],{"class":122},[109,1921,1815],{"class":409},[109,1923,254],{"class":122},[109,1925,1926],{"class":111,"line":578},[109,1927,1928],{"class":115},"  \u002F* ... rest of the palette *\u002F\n",[109,1930,1931],{"class":111,"line":591},[109,1932,618],{"class":122},[15,1934,1935,1936,1939,1940,413],{},"The ",[22,1937,1938],{},"\u003Calpha-value>"," placeholder is replaced by Tailwind when you use opacity modifiers like ",[22,1941,1942],{},"bg-brand-500\u002F50",[10,1944,1946],{"id":1945},"dark-mode-color-strategy","Dark Mode Color Strategy",[15,1948,1949],{},"When designing for dark mode, simply inverting your light mode palette usually doesn't work. Instead, consider these strategies:",[337,1951,1953],{"id":1952},"strategy-1-swap-light-and-dark-shades","Strategy 1: Swap Light and Dark Shades",[100,1955,1957],{"className":395,"code":1956,"language":397,"meta":105,"style":105},"\u002F\u002F tailwind.config.js\ncolors: {\n  surface: {\n    light: '#ffffff',    \u002F\u002F Light mode: white background\n    dark: '#0f172a',     \u002F\u002F Dark mode: dark background\n  },\n  text: {\n    light: '#0f172a',    \u002F\u002F Light mode: dark text\n    dark: '#f8fafc',     \u002F\u002F Dark mode: light text\n  }\n}\n",[22,1958,1959,1963,1970,1977,1993,2009,2014,2021,2034,2048,2052],{"__ignoreMap":105},[109,1960,1961],{"class":111,"line":112},[109,1962,404],{"class":115},[109,1964,1965,1968],{"class":111,"line":119},[109,1966,1967],{"class":130},"colors",[109,1969,644],{"class":122},[109,1971,1972,1975],{"class":111,"line":144},[109,1973,1974],{"class":130},"  surface",[109,1976,644],{"class":122},[109,1978,1979,1982,1984,1987,1990],{"class":111,"line":150},[109,1980,1981],{"class":130},"    light",[109,1983,456],{"class":122},[109,1985,1986],{"class":137},"'#ffffff'",[109,1988,1989],{"class":122},",    ",[109,1991,1992],{"class":115},"\u002F\u002F Light mode: white background\n",[109,1994,1995,1998,2000,2003,2006],{"class":111,"line":160},[109,1996,1997],{"class":130},"    dark",[109,1999,456],{"class":122},[109,2001,2002],{"class":137},"'#0f172a'",[109,2004,2005],{"class":122},",     ",[109,2007,2008],{"class":115},"\u002F\u002F Dark mode: dark background\n",[109,2010,2011],{"class":111,"line":167},[109,2012,2013],{"class":122},"  },\n",[109,2015,2016,2019],{"class":111,"line":184},[109,2017,2018],{"class":130},"  text",[109,2020,644],{"class":122},[109,2022,2023,2025,2027,2029,2031],{"class":111,"line":190},[109,2024,1981],{"class":130},[109,2026,456],{"class":122},[109,2028,2002],{"class":137},[109,2030,1989],{"class":122},[109,2032,2033],{"class":115},"\u002F\u002F Light mode: dark text\n",[109,2035,2036,2038,2040,2043,2045],{"class":111,"line":291},[109,2037,1997],{"class":130},[109,2039,456],{"class":122},[109,2041,2042],{"class":137},"'#f8fafc'",[109,2044,2005],{"class":122},[109,2046,2047],{"class":115},"\u002F\u002F Dark mode: light text\n",[109,2049,2050],{"class":111,"line":302},[109,2051,612],{"class":122},[109,2053,2054],{"class":111,"line":313},[109,2055,618],{"class":122},[15,2057,2058],{},"Usage with class strategy:",[100,2060,2062],{"className":102,"code":2061,"language":104,"meta":105,"style":105},"\u003Cdiv class=\"bg-white dark:bg-slate-950 text-slate-900 dark:text-slate-50\">\n  Content here\n\u003C\u002Fdiv>\n",[22,2063,2064,2079,2084],{"__ignoreMap":105},[109,2065,2066,2068,2070,2072,2074,2077],{"class":111,"line":112},[109,2067,123],{"class":122},[109,2069,172],{"class":126},[109,2071,131],{"class":130},[109,2073,134],{"class":122},[109,2075,2076],{"class":137},"\"bg-white dark:bg-slate-950 text-slate-900 dark:text-slate-50\"",[109,2078,141],{"class":122},[109,2080,2081],{"class":111,"line":119},[109,2082,2083],{"class":122},"  Content here\n",[109,2085,2086,2088,2090],{"class":111,"line":144},[109,2087,153],{"class":122},[109,2089,172],{"class":126},[109,2091,141],{"class":122},[337,2093,2095],{"id":2094},"strategy-2-use-separate-palettes","Strategy 2: Use Separate Palettes",[100,2097,2099],{"className":395,"code":2098,"language":397,"meta":105,"style":105},"colors: {\n  \u002F\u002F Light mode palette\n  light: {\n    bg: '#ffffff',\n    surface: '#f8fafc',\n    text: '#0f172a',\n  },\n  \u002F\u002F Dark mode palette  \n  dark: {\n    bg: '#0f172a',\n    surface: '#1e293b',\n    text: '#f8fafc',\n  }\n}\n",[22,2100,2101,2107,2112,2119,2130,2141,2152,2156,2161,2168,2178,2189,2199,2203],{"__ignoreMap":105},[109,2102,2103,2105],{"class":111,"line":112},[109,2104,1967],{"class":130},[109,2106,644],{"class":122},[109,2108,2109],{"class":111,"line":119},[109,2110,2111],{"class":115},"  \u002F\u002F Light mode palette\n",[109,2113,2114,2117],{"class":111,"line":144},[109,2115,2116],{"class":130},"  light",[109,2118,644],{"class":122},[109,2120,2121,2124,2126,2128],{"class":111,"line":150},[109,2122,2123],{"class":130},"    bg",[109,2125,456],{"class":122},[109,2127,1986],{"class":137},[109,2129,462],{"class":122},[109,2131,2132,2135,2137,2139],{"class":111,"line":160},[109,2133,2134],{"class":130},"    surface",[109,2136,456],{"class":122},[109,2138,2042],{"class":137},[109,2140,462],{"class":122},[109,2142,2143,2146,2148,2150],{"class":111,"line":167},[109,2144,2145],{"class":130},"    text",[109,2147,456],{"class":122},[109,2149,2002],{"class":137},[109,2151,462],{"class":122},[109,2153,2154],{"class":111,"line":184},[109,2155,2013],{"class":122},[109,2157,2158],{"class":111,"line":190},[109,2159,2160],{"class":115},"  \u002F\u002F Dark mode palette  \n",[109,2162,2163,2166],{"class":111,"line":291},[109,2164,2165],{"class":130},"  dark",[109,2167,644],{"class":122},[109,2169,2170,2172,2174,2176],{"class":111,"line":302},[109,2171,2123],{"class":130},[109,2173,456],{"class":122},[109,2175,2002],{"class":137},[109,2177,462],{"class":122},[109,2179,2180,2182,2184,2187],{"class":111,"line":313},[109,2181,2134],{"class":130},[109,2183,456],{"class":122},[109,2185,2186],{"class":137},"'#1e293b'",[109,2188,462],{"class":122},[109,2190,2191,2193,2195,2197],{"class":111,"line":324},[109,2192,2145],{"class":130},[109,2194,456],{"class":122},[109,2196,2042],{"class":137},[109,2198,462],{"class":122},[109,2200,2201],{"class":111,"line":513},[109,2202,612],{"class":122},[109,2204,2205],{"class":111,"line":526},[109,2206,618],{"class":122},[337,2208,2210],{"id":2209},"strategy-3-css-variables-with-dark-mode","Strategy 3: CSS Variables with Dark Mode",[100,2212,2214],{"className":206,"code":2213,"language":208,"meta":105,"style":105},":root {\n  --color-surface: 255, 255, 255;\n  --color-text: 15, 23, 42;\n}\n\n[data-theme=\"dark\"] {\n  --color-surface: 15, 23, 42;\n  --color-text: 248, 250, 252;\n}\n",[22,2215,2216,2222,2241,2261,2265,2269,2281,2299,2319],{"__ignoreMap":105},[109,2217,2218,2220],{"class":111,"line":112},[109,2219,1620],{"class":130},[109,2221,423],{"class":122},[109,2223,2224,2227,2229,2231,2233,2235,2237,2239],{"class":111,"line":119},[109,2225,2226],{"class":801},"  --color-surface",[109,2228,456],{"class":122},[109,2230,1642],{"class":409},[109,2232,25],{"class":122},[109,2234,1642],{"class":409},[109,2236,25],{"class":122},[109,2238,1642],{"class":409},[109,2240,254],{"class":122},[109,2242,2243,2246,2248,2250,2252,2254,2256,2259],{"class":111,"line":144},[109,2244,2245],{"class":801},"  --color-text",[109,2247,456],{"class":122},[109,2249,1154],{"class":409},[109,2251,25],{"class":122},[109,2253,1848],{"class":409},[109,2255,25],{"class":122},[109,2257,2258],{"class":409},"42",[109,2260,254],{"class":122},[109,2262,2263],{"class":111,"line":150},[109,2264,618],{"class":122},[109,2266,2267],{"class":111,"line":160},[109,2268,164],{"emptyLinePlaceholder":163},[109,2270,2271,2273,2275,2277,2279],{"class":111,"line":167},[109,2272,1872],{"class":122},[109,2274,1875],{"class":130},[109,2276,134],{"class":419},[109,2278,1880],{"class":137},[109,2280,1883],{"class":122},[109,2282,2283,2285,2287,2289,2291,2293,2295,2297],{"class":111,"line":184},[109,2284,2226],{"class":801},[109,2286,456],{"class":122},[109,2288,1154],{"class":409},[109,2290,25],{"class":122},[109,2292,1848],{"class":409},[109,2294,25],{"class":122},[109,2296,2258],{"class":409},[109,2298,254],{"class":122},[109,2300,2301,2303,2305,2308,2310,2312,2314,2317],{"class":111,"line":190},[109,2302,2245],{"class":801},[109,2304,456],{"class":122},[109,2306,2307],{"class":409},"248",[109,2309,25],{"class":122},[109,2311,1728],{"class":409},[109,2313,25],{"class":122},[109,2315,2316],{"class":409},"252",[109,2318,254],{"class":122},[109,2320,2321],{"class":111,"line":291},[109,2322,618],{"class":122},[100,2324,2326],{"className":395,"code":2325,"language":397,"meta":105,"style":105},"\u002F\u002F tailwind.config.js\ncolors: {\n  surface: 'rgb(var(--color-surface) \u002F \u003Calpha-value>)',\n  text: 'rgb(var(--color-text) \u002F \u003Calpha-value>)',\n}\n",[22,2327,2328,2332,2338,2349,2360],{"__ignoreMap":105},[109,2329,2330],{"class":111,"line":112},[109,2331,404],{"class":115},[109,2333,2334,2336],{"class":111,"line":119},[109,2335,1967],{"class":130},[109,2337,644],{"class":122},[109,2339,2340,2342,2344,2347],{"class":111,"line":144},[109,2341,1974],{"class":130},[109,2343,456],{"class":122},[109,2345,2346],{"class":137},"'rgb(var(--color-surface) \u002F \u003Calpha-value>)'",[109,2348,462],{"class":122},[109,2350,2351,2353,2355,2358],{"class":111,"line":150},[109,2352,2018],{"class":130},[109,2354,456],{"class":122},[109,2356,2357],{"class":137},"'rgb(var(--color-text) \u002F \u003Calpha-value>)'",[109,2359,462],{"class":122},[109,2361,2362],{"class":111,"line":160},[109,2363,618],{"class":122},[10,2365,2367],{"id":2366},"practical-examples","Practical Examples",[337,2369,2371],{"id":2370},"building-a-button-component","Building a Button Component",[100,2373,2375],{"className":102,"code":2374,"language":104,"meta":105,"style":105},"\u003C!-- Using your custom brand color -->\n\u003Cbutton class=\"\n  bg-brand-500 \n  hover:bg-brand-600 \n  active:bg-brand-700\n  text-white\n  py-2 px-4\n  rounded-lg\n  transition-colors\n\">\n  Brand Button\n\u003C\u002Fbutton>\n\n\u003C!-- Disabled state using lighter shade -->\n\u003Cbutton disabled class=\"bg-brand-200 text-brand-500 cursor-not-allowed\">\n  Disabled\n\u003C\u002Fbutton>\n",[22,2376,2377,2382,2395,2400,2405,2410,2415,2420,2425,2430,2437,2442,2450,2454,2459,2477,2482],{"__ignoreMap":105},[109,2378,2379],{"class":111,"line":112},[109,2380,2381],{"class":115},"\u003C!-- Using your custom brand color -->\n",[109,2383,2384,2386,2388,2390,2392],{"class":111,"line":119},[109,2385,123],{"class":122},[109,2387,127],{"class":126},[109,2389,131],{"class":130},[109,2391,134],{"class":122},[109,2393,2394],{"class":137},"\"\n",[109,2396,2397],{"class":111,"line":144},[109,2398,2399],{"class":137},"  bg-brand-500 \n",[109,2401,2402],{"class":111,"line":150},[109,2403,2404],{"class":137},"  hover:bg-brand-600 \n",[109,2406,2407],{"class":111,"line":160},[109,2408,2409],{"class":137},"  active:bg-brand-700\n",[109,2411,2412],{"class":111,"line":167},[109,2413,2414],{"class":137},"  text-white\n",[109,2416,2417],{"class":111,"line":184},[109,2418,2419],{"class":137},"  py-2 px-4\n",[109,2421,2422],{"class":111,"line":190},[109,2423,2424],{"class":137},"  rounded-lg\n",[109,2426,2427],{"class":111,"line":291},[109,2428,2429],{"class":137},"  transition-colors\n",[109,2431,2432,2435],{"class":111,"line":302},[109,2433,2434],{"class":137},"\"",[109,2436,141],{"class":122},[109,2438,2439],{"class":111,"line":313},[109,2440,2441],{"class":122},"  Brand Button\n",[109,2443,2444,2446,2448],{"class":111,"line":324},[109,2445,153],{"class":122},[109,2447,127],{"class":126},[109,2449,141],{"class":122},[109,2451,2452],{"class":111,"line":513},[109,2453,164],{"emptyLinePlaceholder":163},[109,2455,2456],{"class":111,"line":526},[109,2457,2458],{"class":115},"\u003C!-- Disabled state using lighter shade -->\n",[109,2460,2461,2463,2465,2468,2470,2472,2475],{"class":111,"line":539},[109,2462,123],{"class":122},[109,2464,127],{"class":126},[109,2466,2467],{"class":130}," disabled",[109,2469,131],{"class":130},[109,2471,134],{"class":122},[109,2473,2474],{"class":137},"\"bg-brand-200 text-brand-500 cursor-not-allowed\"",[109,2476,141],{"class":122},[109,2478,2479],{"class":111,"line":552},[109,2480,2481],{"class":122},"  Disabled\n",[109,2483,2484,2486,2488],{"class":111,"line":565},[109,2485,153],{"class":122},[109,2487,127],{"class":126},[109,2489,141],{"class":122},[337,2491,2493],{"id":2492},"creating-a-card-with-subtle-borders","Creating a Card with Subtle Borders",[100,2495,2497],{"className":102,"code":2496,"language":104,"meta":105,"style":105},"\u003Cdiv class=\"bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-xl p-6\">\n  \u003Ch2 class=\"text-slate-900 dark:text-slate-100 text-xl font-semibold\">\n    Card Title\n  \u003C\u002Fh2>\n  \u003Cp class=\"text-slate-600 dark:text-slate-400 mt-2\">\n    Card content with proper dark mode colors.\n  \u003C\u002Fp>\n\u003C\u002Fdiv>\n",[22,2498,2499,2514,2530,2535,2544,2559,2564,2572],{"__ignoreMap":105},[109,2500,2501,2503,2505,2507,2509,2512],{"class":111,"line":112},[109,2502,123],{"class":122},[109,2504,172],{"class":126},[109,2506,131],{"class":130},[109,2508,134],{"class":122},[109,2510,2511],{"class":137},"\"bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-xl p-6\"",[109,2513,141],{"class":122},[109,2515,2516,2519,2521,2523,2525,2528],{"class":111,"line":119},[109,2517,2518],{"class":122},"  \u003C",[109,2520,10],{"class":126},[109,2522,131],{"class":130},[109,2524,134],{"class":122},[109,2526,2527],{"class":137},"\"text-slate-900 dark:text-slate-100 text-xl font-semibold\"",[109,2529,141],{"class":122},[109,2531,2532],{"class":111,"line":144},[109,2533,2534],{"class":122},"    Card Title\n",[109,2536,2537,2540,2542],{"class":111,"line":150},[109,2538,2539],{"class":122},"  \u003C\u002F",[109,2541,10],{"class":126},[109,2543,141],{"class":122},[109,2545,2546,2548,2550,2552,2554,2557],{"class":111,"line":160},[109,2547,2518],{"class":122},[109,2549,15],{"class":126},[109,2551,131],{"class":130},[109,2553,134],{"class":122},[109,2555,2556],{"class":137},"\"text-slate-600 dark:text-slate-400 mt-2\"",[109,2558,141],{"class":122},[109,2560,2561],{"class":111,"line":167},[109,2562,2563],{"class":122},"    Card content with proper dark mode colors.\n",[109,2565,2566,2568,2570],{"class":111,"line":184},[109,2567,2539],{"class":122},[109,2569,15],{"class":126},[109,2571,141],{"class":122},[109,2573,2574,2576,2578],{"class":111,"line":190},[109,2575,153],{"class":122},[109,2577,172],{"class":126},[109,2579,141],{"class":122},[10,2581,2583],{"id":2582},"common-pitfalls-to-avoid","Common Pitfalls to Avoid",[2585,2586,2587,2593,2599,2605,2611],"ol",{},[348,2588,2589,2592],{},[351,2590,2591],{},"Don't skip shades",": Incomplete palettes (e.g., only 100, 500, 900) limit your design options",[348,2594,2595,2598],{},[351,2596,2597],{},"Maintain contrast",": Ensure your 500 shade has enough contrast against white for accessibility",[348,2600,2601,2604],{},[351,2602,2603],{},"Test in dark mode",": Colors that work in light mode may be invisible in dark mode",[348,2606,2607,2610],{},[351,2608,2609],{},"Avoid too many colors",": Stick to 2-3 main color families plus neutrals",[348,2612,2613,456,2616,2619,2620,2623],{},[351,2614,2615],{},"Use opacity modifiers",[22,2617,2618],{},"bg-brand-500\u002F10"," is better than creating separate ",[22,2621,2622],{},"brand-50"," light shades",[10,2625,2627],{"id":2626},"related-tools","Related Tools",[345,2629,2630,2637],{},[348,2631,2632,2636],{},[754,2633,2635],{"href":2634},"\u002Ftools\u002Fcolor-converter","Color Converter"," - Convert colors to different formats for Tailwind config",[348,2638,2639,2644],{},[754,2640,2643],{"href":2641,"rel":2642},"https:\u002F\u002Fplay.tailwindcss.com\u002F",[758],"Tailwind Play"," - Test your color configuration online",[2646,2647,2648],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":105,"searchDepth":119,"depth":119,"links":2650},[2651,2652,2655,2658,2663,2664,2669,2673,2674],{"id":12,"depth":119,"text":13},{"id":199,"depth":119,"text":200,"children":2653},[2654],{"id":339,"depth":144,"text":340},{"id":384,"depth":119,"text":385,"children":2656},[2657],{"id":621,"depth":144,"text":622},{"id":741,"depth":119,"text":742,"children":2659},[2660,2661,2662],{"id":748,"depth":144,"text":749},{"id":769,"depth":144,"text":770},{"id":1360,"depth":144,"text":1361},{"id":1420,"depth":119,"text":1421},{"id":1945,"depth":119,"text":1946,"children":2665},[2666,2667,2668],{"id":1952,"depth":144,"text":1953},{"id":2094,"depth":144,"text":2095},{"id":2209,"depth":144,"text":2210},{"id":2366,"depth":119,"text":2367,"children":2670},[2671,2672],{"id":2370,"depth":144,"text":2371},{"id":2492,"depth":144,"text":2493},{"id":2582,"depth":119,"text":2583},{"id":2626,"depth":119,"text":2627},"2026-05-26","Master Tailwind CSS color configuration. Learn to customize default palettes, extend with custom colors, create 50-950 scales, and integrate with CSS variables.","md",{"immutable":163},"\u002Fguides\u002Ftailwind-color-palette",{"title":5,"description":2676},"guides\u002Ftailwind-color-palette","YLRygDCcC7oI1gkvdQlIPaND5EIcgeTIopmMokxw6x4",1780401324739]