iuxcode · July 25, 2024 09:31 · Nov 23, 2019 · Nov 23, 2019 · Nov 23, 2019 · Nov 23, 2019
diff --git a/tailwind-colors-as-css-variables.md b/tailwind-colors-as-css-variables.md
@@ -12,16 +12,16 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        blue: {
-          '100': '#ebf6ff',
-          '200': '#b7ddff',
-          '300': '#85c2ff',
-          '400': '#51a5ff',
-          '500': '#2487ff',
-          '600': '#006aff',
-          '700': '#0755d4',
-          '800': '#164398',
-          '900': '#223867',
+        gray: {
+          '100': '#f5f5f5',
+          '200': '#eeeeee',
+          '300': '#e0e0e0',
+          '400': '#bdbdbd',
+          '500': '#9e9e9e',
+          '600': '#757575',
+          '700': '#616161',
+          '800': '#424242',
+          '900': '#212121',
         },
       },
     },

diff --git a/tailwind-colors-as-css-variables.md b/tailwind-colors-as-css-variables.md
@@ -3,7 +3,7 @@ This is a simple Tailwind plugin to expose all of Tailwind's colors, including a
 There are a couple of main reasons this is helpful:
 
 - You can reference all of Tailwind's colors—including any custom ones you define—from handwritten CSS code.
-- You can define _all_ of your colors within the Tailwind configuration, and access the final values programmatically, which isn't possible if you did it the other way around: referencing custom CSS variables from your Tailwind config.
+- You can define _all_ of your colors within the Tailwind configuration, and access the final values programmatically, which isn't possible if you did it the other way around: referencing custom CSS variables (defined in CSS code) from your Tailwind config.
 
 See the [Tailwind Plugins](https://tailwindcss.com/docs/plugins) for more info on plugins.
 

diff --git a/tailwind-colors-as-css-variables.md b/tailwind-colors-as-css-variables.md
@@ -3,7 +3,7 @@ This is a simple Tailwind plugin to expose all of Tailwind's colors, including a
 There are a couple of main reasons this is helpful:
 
 - You can reference all of Tailwind's colors—including any custom ones you define—from handwritten CSS code.
-- You can define _all_ of your colors within the Tailwind configuration, and access the final values programmatically, which isn't possible if you did it the other way around, referencing custom CSS variables from your Tailwind config.
+- You can define _all_ of your colors within the Tailwind configuration, and access the final values programmatically, which isn't possible if you did it the other way around: referencing custom CSS variables from your Tailwind config.
 
 See the [Tailwind Plugins](https://tailwindcss.com/docs/plugins) for more info on plugins.
 

diff --git a/tailwind-colors-as-css-variables.md b/tailwind-colors-as-css-variables.md
@@ -1,6 +1,9 @@
 This is a simple Tailwind plugin to expose all of Tailwind's colors, including any custom ones, as custom css properties on the `:root` element.
 
-It lets you keep _all_ of your color customizations within the Tailwind configuration, and access the final values programmatically, which isn't possible if you do it the other way around, referencing CSS variables from your Tailwind config.
+There are a couple of main reasons this is helpful:
+
+- You can reference all of Tailwind's colors—including any custom ones you define—from handwritten CSS code.
+- You can define _all_ of your colors within the Tailwind configuration, and access the final values programmatically, which isn't possible if you did it the other way around, referencing custom CSS variables from your Tailwind config.
 
 See the [Tailwind Plugins](https://tailwindcss.com/docs/plugins) for more info on plugins.
 

diff --git a/tailwind-colors-as-css-variables.md b/tailwind-colors-as-css-variables.md
@@ -0,0 +1,47 @@
+This is a simple Tailwind plugin to expose all of Tailwind's colors, including any custom ones, as custom css properties on the `:root` element.
+
+It lets you keep _all_ of your color customizations within the Tailwind configuration, and access the final values programmatically, which isn't possible if you do it the other way around, referencing CSS variables from your Tailwind config.
+
+See the [Tailwind Plugins](https://tailwindcss.com/docs/plugins) for more info on plugins.
+
+```js
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        blue: {
+          '100': '#ebf6ff',
+          '200': '#b7ddff',
+          '300': '#85c2ff',
+          '400': '#51a5ff',
+          '500': '#2487ff',
+          '600': '#006aff',
+          '700': '#0755d4',
+          '800': '#164398',
+          '900': '#223867',
+        },
+      },
+    },
+  },
+  plugins: [
+    function({ addBase, theme }) {
+      function extractColorVars(colorObj, colorGroup = '') {
+        return Object.keys(colorObj).reduce((vars, colorKey) => {
+          const value = colorObj[colorKey];
+
+          const newVars =
+            typeof value === 'string'
+              ? { [`--color${colorGroup}-${colorKey}`]: value }
+              : extractColorVars(value, `-${colorKey}`);
+
+          return { ...vars, ...newVars };
+        }, {});
+      }
+
+      addBase({
+        ':root': extractColorVars(theme('colors')),
+      });
+    },
+  ],
+};
+```
No results found