Merge pull request tailwindlabs#141 from stidges/nested-customized-config

Update customized-config partial to support nested keys

Author: adamwathan

source/_partials/customized-config.blade.php

@@ -1,21 +1,37 @@
+@php
+$keyDepth = substr_count($key, '.');
+$usesTheme = $usesTheme ?? false;
+@endphp
 <div class="rounded-lg mb-8 overflow-hidden">
   <div class="bg-gray-800 p-4 font-mono text-sm overflow-x-scroll whitespace-no-wrap">
     <div class="whitespace-pre text-gray-400">// tailwind.config.js</div>
     <div class="whitespace-pre text-gray-200">module.exports = {</div>
-    <div class="whitespace-pre text-gray-200"><span style="color: #f9ee98;">  {{ $key }}</span>: {</div>
-    <div>{!! collect(explode("\n", $slot))->map(function ($line) {
+    {!! collect(explode('.', $key))->map(function ($configKey, $index) use ($keyDepth, $usesTheme) {
+      $configKey = str_repeat('  ', $index + 1) . $configKey;
+      $suffix = ': {';
+      if ($index === $keyDepth) {
+        $configKey = '<span style="color: #f9ee98;">' . $configKey . '</span>';
+        $suffix = $usesTheme ? ': theme => ({' : $suffix;
+      }
+      return '<div class="whitespace-pre text-gray-200">' . $configKey . $suffix . '</div>';
+    })->implode("\n") !!}
+    <div>{!! collect(explode("\n", $slot))->map(function ($line) use ($keyDepth) {
+      $indentation = str_repeat('&nbsp;&nbsp;', $keyDepth + 1);
       if (starts_with($line, '+')) {
-        return '<div style="color: #a8ff60;"><span>+</span>&nbsp;&nbsp;&nbsp;' . e(trim(substr($line, 1))) . '</div>';
+        return '<div style="color: #a8ff60;"><span>+</span>&nbsp;' . $indentation . e(trim(substr($line, 1))) . '</div>';
       }
       if (starts_with($line, '-')) {
-        return '<div class="text-gray-500"><span class="text-gray-500">-</span>&nbsp;&nbsp;&nbsp;' . e(trim(substr($line, 1))) . '</div>';
+        return '<div class="text-gray-500"><span>-</span>&nbsp;' . $indentation . e(trim(substr($line, 1))) . '</div>';
       }
       if (starts_with($line, '//')) {
-        return '<div class="text-gray-400">&nbsp;&nbsp;&nbsp;&nbsp;' . e(trim($line)) . '</div>';
+        return '<div class="text-gray-400">&nbsp;&nbsp;' . $indentation . e(trim($line)) . '</div>';
       }
-      return '<div class="text-gray-300">&nbsp;&nbsp;&nbsp;&nbsp;' . e(trim($line)) . '</div>';
+      return '<div class="text-gray-300">&nbsp;&nbsp;' . $indentation . e(trim($line)) . '</div>';
     })->implode("\n") !!}</div>
-    <div class="whitespace-pre text-gray-200">  }</div>
+    {!! collect(range($keyDepth, 0))->map(function ($depth) use ($keyDepth, $usesTheme) {
+      $closingBrace = $usesTheme && $depth === $keyDepth ? '})' : '}';
+      return '<div class="whitespace-pre text-gray-200">' . str_repeat('  ', $depth + 1) . $closingBrace . '</div>';
+    })->implode("\n") !!}
     <div class="whitespace-pre text-gray-200">}</div>
   </div>
 </div>

source/docs/background-color.blade.md

@@ -126,10 +126,10 @@ Focus utilities can also be combined with responsive utilities by adding the res
 
 By default Tailwind makes the entire [default color palette](/docs/colors#default-color-palette) available as background colors.
 
-You can [customize your color palette](/docs/colors#customizing) by editing the `colors` variable in your Tailwind config file, or customize just your background colors using the `backgroundColors` section of your Tailwind config.
+You can [customize your color palette](/docs/colors#customizing) by editing the `theme.colors` variable in your Tailwind config file, or customize just your background colors using the `theme.backgroundColor` section of your Tailwind config.
 
-@component('_partials.customized-config', ['key' => 'backgroundColors'])
-- ...colors,
+@component('_partials.customized-config', ['key' => 'theme.backgroundColor', 'usesTheme' => true])
+- ...theme('colors'),
 + 'primary': '#3490dc',
 + 'secondary': '#ffed4a',
 + 'danger': '#e3342f',
@@ -138,7 +138,7 @@ You can [customize your color palette](/docs/colors#customizing) by editing the
 @include('_partials.variants-and-disabling', [
     'utility' => [
         'name' => 'background color',
-        'property' => 'backgroundColors',
+        'property' => 'backgroundColor',
     ],
     'variants' => [
         'responsive',

source/docs/background-position.blade.md

@@ -65,9 +65,9 @@ features:
 
 ### Background Positions
 
-By default Tailwind provides nine `background-position` utilities. You change, add, or remove these by editing the `backgroundPosition` section of your Tailwind config.
+By default Tailwind provides nine `background-position` utilities. You change, add, or remove these by editing the `theme.backgroundPosition` section of your Tailwind config.
 
-@component('_partials.customized-config', ['key' => 'backgroundPosition'])
+@component('_partials.customized-config', ['key' => 'theme.backgroundPosition'])
   bottom: 'bottom',
 + 'bottom-4': 'center bottom 1rem',
   center: 'center',

source/docs/background-size.blade.md

@@ -33,9 +33,9 @@ features:
 
 ## Customizing
 
-By default Tailwind provides utilities for `auto`, `cover`, and `contain` background sizes. You can change, add, or remove these by editing the `backgroundSize` section of your config.
+By default Tailwind provides utilities for `auto`, `cover`, and `contain` background sizes. You can change, add, or remove these by editing the `theme.backgroundSize` section of your config.
 
-@component('_partials.customized-config', ['key' => 'backgroundSize'])
+@component('_partials.customized-config', ['key' => 'theme.backgroundSize'])
   'auto': 'auto',
   'cover': 'cover',
   'contain': 'contain',

source/docs/border-color.blade.md

@@ -128,10 +128,11 @@ Focus utilities can also be combined with responsive utilities by adding the res
 
 By default Tailwind makes the entire [default color palette](/docs/colors#default-color-palette) available as border colors.
 
-You can [customize your color palette](/docs/colors#customizing) by editing the `colors` variable in your Tailwind config file, or customize just your border colors using the `borderColors` section of your Tailwind config.
+You can [customize your color palette](/docs/colors#customizing) by editing the `theme.colors` variable in your Tailwind config file, or customize just your border colors using the `theme.borderColor` section of your Tailwind config.
 
-@component('_partials.customized-config', ['key' => 'borderColors'])
-- ...colors,
+@component('_partials.customized-config', ['key' => 'theme.borderColor', 'usesTheme' => true])
+- ...theme('colors'),
+  default: theme('colors.gray.300', 'currentColor'),
 + 'primary': '#3490dc',
 + 'secondary': '#ffed4a',
 + 'danger': '#e3342f',
@@ -140,7 +141,7 @@ You can [customize your color palette](/docs/colors#customizing) by editing the
 @include('_partials.variants-and-disabling', [
     'utility' => [
         'name' => 'border color',
-        'property' => 'borderColors',
+        'property' => 'borderColor',
     ],
     'variants' => [
         'responsive',

source/docs/border-radius.blade.md

@@ -358,9 +358,9 @@ For more information about Tailwind's responsive design features, check out the
 
 ### Border Radiuses
 
-By default Tailwind provides five border radius size utilities. You can change, add, or remove these by editing the `borderRadius` section of your Tailwind config.
+By default Tailwind provides five border radius size utilities. You can change, add, or remove these by editing the `theme.borderRadius` section of your Tailwind config.
 
-@component('_partials.customized-config', ['key' => 'borderRadius'])
+@component('_partials.customized-config', ['key' => 'theme.borderRadius'])
   'none': '0',
 - 'sm': '.125rem',
 - default: '.25rem',

source/docs/border-width.blade.md

@@ -70,9 +70,9 @@ For more information about Tailwind's responsive design features, check out the
 
 ### Border Widths
 
-By default Tailwind provides five `border-width` utilities, and the same number of utilities per side (top, right, bottom, and left). You change, add, or remove these by editing the `borderWidth` section of your Tailwind config. The values in this section will also control which utilities will be generated side.
+By default Tailwind provides five `border-width` utilities, and the same number of utilities per side (top, right, bottom, and left). You change, add, or remove these by editing the `theme.borderWidth` section of your Tailwind config. The values in this section will also control which utilities will be generated side.
 
-@component('_partials.customized-config', ['key' => 'borderWidth'])
+@component('_partials.customized-config', ['key' => 'theme.borderWidth'])
   default: '1px',
   '0': '0',
   '2': '2px',

source/docs/box-shadow.blade.md

@@ -127,11 +127,11 @@ For more information about Tailwind's responsive design features, check out the
 
 ### Box Shadows
 
-By default Tailwind provides three drop shadow utilities, one inner shadow utility, and a utility for removing existing shadows. You can change, add, or remove these by editing the `boxShadow` section of your Tailwind config.
+By default Tailwind provides three drop shadow utilities, one inner shadow utility, and a utility for removing existing shadows. You can change, add, or remove these by editing the `theme.boxShadow` section of your Tailwind config.
 
 If a `default` shadow is provided, it will be used for the non-suffixed `.shadow` utility. Any other keys will be used as suffixes, for example the key `'2'` will create a corresponding `.shadow-2` utility.
 
-@component('_partials.customized-config', ['key' => 'boxShadow'])
+@component('_partials.customized-config', ['key' => 'theme.boxShadow'])
   default: '0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06)'
   md: ' 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06)'
   lg: ' 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05)'

source/docs/cursor.blade.md

@@ -50,9 +50,9 @@ features:
 
 ### Cursors
 
-By default Tailwind provides six `cursor` utilities. You change, add, or remove these by editing the `cursor` values in the `theme` section of your Tailwind config.
+By default Tailwind provides six `cursor` utilities. You change, add, or remove these by editing the `theme.cursor` section of your Tailwind config.
 
-@component('_partials.customized-config', ['key' => 'cursor'])
+@component('_partials.customized-config', ['key' => 'theme.cursor'])
   auto: 'auto',
   default: 'default',
   pointer: 'pointer',

source/docs/fill.blade.md

@@ -28,9 +28,12 @@ Useful for styling icon sets like [Zondicons](http://www.zondicons.com/) that ar
 
 ## Customizing
 
-Control which fill utilities Tailwind generates by customizing the `theme.fill` section in your Tailwind config file:
+Control which fill utilities Tailwind generates by customizing the `theme.fill` section of your Tailwind config file:
 
 @component('_partials.customized-config', ['key' => 'theme'])
+- fill: {
+-   current: 'currentColor',
+- }
 + fill: theme => ({
 +   'red': theme('colors.red.500'),
 +   'green': theme('colors.green.500'),

source/docs/flex-grow.blade.md

@@ -147,9 +147,9 @@ For more information about Tailwind's responsive design features, check out the
 
 ### Grow Values
 
-By default Tailwind provides two `flex-grow` utilities. You change, add, or remove these by editing the `flexGrow` section of your Tailwind config.
+By default Tailwind provides two `flex-grow` utilities. You change, add, or remove these by editing the `theme.flexGrow` section of your Tailwind config.
 
-@component('_partials.customized-config', ['key' => 'flexGrow'])
+@component('_partials.customized-config', ['key' => 'theme.flexGrow'])
   '0': 0,
 - default: 1,
 + default: 2,

source/docs/flex-shrink.blade.md

@@ -147,9 +147,9 @@ For more information about Tailwind's responsive design features, check out the
 
 ### Shrink Values
 
-By default Tailwind provides two `flex-shrink` utilities. You change, add, or remove these by editing the `flexShrink` section of your Tailwind config.
+By default Tailwind provides two `flex-shrink` utilities. You change, add, or remove these by editing the `theme.flexShrink` section of your Tailwind config.
 
-@component('_partials.customized-config', ['key' => 'flexShrink'])
+@component('_partials.customized-config', ['key' => 'theme.flexShrink'])
   '0': 0,
 - default: 1,
 + default: 2,

source/docs/flex.blade.md

@@ -281,9 +281,9 @@ For more information about Tailwind's responsive design features, check out the
 
 ### Flex Values
 
-By default Tailwind provides four `flex` utilities. You change, add, or remove these by editing the `flex` section of your Tailwind config.
+By default Tailwind provides four `flex` utilities. You change, add, or remove these by editing the `theme.flex` section of your Tailwind config.
 
-@component('_partials.customized-config', ['key' => 'flex'])
+@component('_partials.customized-config', ['key' => 'theme.flex'])
   '1': '1 1 0%',
   auto: '1 1 auto',
 - initial: '0 1 auto',

source/docs/font-family.blade.md

@@ -95,9 +95,9 @@ For more information about Tailwind's responsive design features, check out the
 
 ### Font Families
 
-By default Tailwind provides three font family utilities: a cross-browser sans-serif stack, a cross-browser serif stack, and a cross-browser monospaced stack. You can change, add, or remove these by editing the `fontFamily` section of your Tailwind config.
+By default Tailwind provides three font family utilities: a cross-browser sans-serif stack, a cross-browser serif stack, and a cross-browser monospaced stack. You can change, add, or remove these by editing the `theme.fontFamily` section of your Tailwind config.
 
-@component('_partials.customized-config', ['key' => 'fontFamily'])
+@component('_partials.customized-config', ['key' => 'theme.fontFamily'])
 - 'sans': ['-apple-system', 'BlinkMacSystemFont', ...],
 - 'serif': ['Georgia', 'Cambria', ...],
 - 'mono': ['SFMono-Regular', 'Menlo', ...],

source/docs/font-weight.blade.md

@@ -180,9 +180,9 @@ Focus utilities can also be combined with responsive utilities by adding the res
 
 ### Font Weights
 
-By default Tailwind provides 10 `font-weight` utilities. You change, add, or remove these by editing the `fontWeight` section of your Tailwind config.
+By default Tailwind provides 10 `font-weight` utilities. You change, add, or remove these by editing the `theme.fontWeight` section of your Tailwind config.
 
-@component('_partials.customized-config', ['key' => 'fontWeight'])
+@component('_partials.customized-config', ['key' => 'theme.fontWeight'])
 - hairline: 100,
 + 'extra-light': 100,
 - thin: 200,

source/docs/height.blade.md

@@ -24,9 +24,9 @@ features:
 
 ### Height Scale
 
-By default Tailwind provides 19 fixed `height` utilities, a 100% height utilitiy, an `auto` utility, and a utility for setting the height of an element to match the viewport height. You change, add, or remove these by editing the `height` section of your Tailwind config.
+By default Tailwind provides 19 fixed `height` utilities, a 100% height utility, an `auto` utility, and a utility for setting the height of an element to match the viewport height. You change, add, or remove these by editing the `theme.height` section of your Tailwind config.
 
-@component('_partials.customized-config', ['key' => 'height'])
+@component('_partials.customized-config', ['key' => 'theme.height', 'usesTheme' => true])
   'auto': 'auto',
   ...theme('spacing'),
 + '72': '18rem',

source/docs/line-height.blade.md

@@ -67,9 +67,9 @@ For more information about Tailwind's responsive design features, check out the
 
 ### Line Heights
 
-By default Tailwind provides six `line-height` utilities. You change, add, or remove these by editing the `lineHeight` section of your Tailwind config.
+By default Tailwind provides six `line-height` utilities. You change, add, or remove these by editing the `theme.lineHeight` section of your Tailwind config.
 
-@component('_partials.customized-config', ['key' => 'lineHeight'])
+@component('_partials.customized-config', ['key' => 'theme.lineHeight'])
   none: 1,
   tight: 1.25,
 - snug: 1.375,

source/docs/list-style-type.blade.md

@@ -127,9 +127,9 @@ For more information about Tailwind's responsive design features, check out the
 
 ## Customizing
 
-By default Tailwind provides three utilities for the most common list style types. You change, add, or remove these by editing the `listStyleType` section of your Tailwind config.
+By default Tailwind provides three utilities for the most common list style types. You change, add, or remove these by editing the `theme.listStyleType` section of your Tailwind config.
 
-@component('_partials.customized-config', ['key' => 'listStyleType'])
+@component('_partials.customized-config', ['key' => 'theme.listStyleType'])
   none: 'none',
 - disc: 'disc',
 - decimal: 'decimal',

source/docs/max-width.blade.md

@@ -76,9 +76,9 @@ features:
 
 ### Max-Width Scale
 
-By default Tailwind provides ten `max-width` utilities. You change, add, or remove these by editing the `maxWidth` values in the `theme` section of your Tailwind config.
+By default Tailwind provides ten `max-width` utilities. You change, add, or remove these by editing the `theme.maxWidth` section of your Tailwind config.
 
-@component('_partials.customized-config', ['key' => 'maxWidth'])
+@component('_partials.customized-config', ['key' => 'theme.maxWidth'])
   'xs': '20rem',
   'sm': '24rem',
   'md': '28rem',

source/docs/object-position.blade.md

@@ -65,9 +65,9 @@ features:
 
 ### Object Positioning
 
-By default Tailwind provides nine object position utilities. You can change, add, or remove these by editing the `objectPosition` section of your Tailwind config.
+By default Tailwind provides nine object position utilities. You can change, add, or remove these by editing the `theme.objectPosition` section of your Tailwind config.
 
-@component('_partials.customized-config', ['key' => 'objectPosition'])
+@component('_partials.customized-config', ['key' => 'theme.objectPosition'])
   bottom: 'bottom',
   center: 'center',
   left: 'left',

source/docs/opacity.blade.md

@@ -97,9 +97,9 @@ For more information about Tailwind's responsive design features, check out the
 
 ### Opacity Scale
 
-By default Tailwind provides five opacity utilities based on a simple numeric scale. You change, add, or remove these by editing the `opacity` section of your Tailwind config.
+By default Tailwind provides five opacity utilities based on a simple numeric scale. You change, add, or remove these by editing the `theme.opacity` section of your Tailwind config.
 
-@component('_partials.customized-config', ['key' => 'opacity'])
+@component('_partials.customized-config', ['key' => 'theme.opacity'])
   '0': '0',
 - '25': '.25',
 - '50': '.5',

source/docs/stroke.blade.md

@@ -33,6 +33,9 @@ Useful for styling icon sets like [Feather](https://feathericons.com/) that are
 Control which stroke utilities Tailwind generates by customizing the `theme.stroke` section in your Tailwind config file:
 
 @component('_partials.customized-config', ['key' => 'theme'])
+- stroke: {
+-   current: 'currentColor',
+- }
 + stroke: theme => ({
 +   'red': theme('colors.red.500'),
 +   'green': theme('colors.green.500'),

source/docs/text-color.blade.md

@@ -132,6 +132,7 @@ By default Tailwind makes the entire [default color palette](/docs/colors#defaul
 You can [customize your color palette](/docs/colors#customizing) by editing `theme.colors` in your Tailwind config file, or customize just your text colors in the `theme.textColor` section.
 
 @component('_partials.customized-config', ['key' => 'theme'])
+- textColor: theme => theme('colors'),
 + textColor: {
 +   'primary': '#3490dc',
 +   'secondary': '#ffed4a',

source/docs/width.blade.md

@@ -25,9 +25,9 @@ features:
 
 ### Width Scale
 
-By default Tailwind provides 19 fixed `width` utilities, 12 percentage-based utilities, an `auto` utility, and a utility for setting the width of an element to match the viewport width. You change, add, or remove these by editing the `width` section of your Tailwind config.
+By default Tailwind provides 19 fixed `width` utilities, 12 percentage-based utilities, an `auto` utility, and a utility for setting the width of an element to match the viewport width. You change, add, or remove these by editing the `theme.width` section of your Tailwind config.
 
-@component('_partials.customized-config', ['key' => 'width'])
+@component('_partials.customized-config', ['key' => 'theme.width', 'usesTheme' => true])
   'auto': 'auto',
   ...theme('spacing'),
 + '72': '18rem',

source/docs/z-index.blade.md

@@ -141,9 +141,9 @@ For more information about Tailwind's responsive design features, check out the
 
 ### Z-Index Scale
 
-By default Tailwind provides six numeric `z-index` utilities and an `auto` utility. You change, add, or remove these by editing the `zIndex` section of your Tailwind config.
+By default Tailwind provides six numeric `z-index` utilities and an `auto` utility. You change, add, or remove these by editing the `theme.zIndex` section of your Tailwind config.
 
-@component('_partials.customized-config', ['key' => 'zIndex'])
+@component('_partials.customized-config', ['key' => 'theme.zIndex'])
   '0': 0,
 - '10': 10,
 - '20': 20,