feat: support 'shadow'

__tests__/tailwindcss/box-shadow.ts

@@ -1,15 +1,103 @@
 import { expectError, tailwindRunner } from "./runner";
 
-tailwindRunner(
-  "Effects - Box Shadow",
-  expectError([
+tailwindRunner("Effects - Box Shadow", [
+  [
     "shadow-sm",
+    {
+      styles: {
+        "shadow-sm": {
+          shadowColor: "rgba(0, 0, 0, 0.1)",
+          shadowOffset: { height: 1, width: 0 },
+          shadowOpacity: 1,
+          shadowRadius: 1,
+          elevation: 1.5,
+        },
+      },
+    },
+  ],
+  [
     "shadow",
+    {
+      styles: {
+        shadow: {
+          shadowColor: "rgba(0, 0, 0, 0.1)",
+          shadowOffset: { height: 4, width: 0 },
+          shadowOpacity: 1,
+          shadowRadius: 6,
+          elevation: 3,
+        },
+      },
+    },
+  ],
+  [
     "shadow-md",
+    {
+      styles: {
+        "shadow-md": {
+          shadowColor: "rgba(0, 0, 0, 0.1)",
+          shadowOffset: { height: 6, width: 0 },
+          shadowOpacity: 1,
+          shadowRadius: 10,
+          elevation: 6,
+        },
+      },
+    },
+  ],
+  [
     "shadow-lg",
+    {
+      styles: {
+        "shadow-lg": {
+          shadowColor: "rgba(0, 0, 0, 0.1)",
+          shadowOffset: { height: 10, width: 0 },
+          shadowOpacity: 1,
+          shadowRadius: 15,
+          elevation: 7.5,
+        },
+      },
+    },
+  ],
+  [
     "shadow-xl",
+    {
+      styles: {
+        "shadow-xl": {
+          shadowColor: "rgba(0, 0, 0, 0.1)",
+          shadowOffset: { height: 20, width: 0 },
+          shadowOpacity: 1,
+          shadowRadius: 25,
+          elevation: 12.5,
+        },
+      },
+    },
+  ],
+  [
     "shadow-2xl",
-    "shadow-inner",
+    {
+      styles: {
+        "shadow-2xl": {
+          shadowColor: "rgba(0, 0, 0, 0.1)",
+          shadowOffset: { height: 25, width: 0 },
+          shadowOpacity: 1,
+          shadowRadius: 50,
+          elevation: 25,
+        },
+      },
+    },
+  ],
+  [
     "shadow-none",
-  ])
-);
+    {
+      styles: {
+        "shadow-none": {
+          shadowColor: "rgba(0, 0, 0, 0)",
+          shadowOffset: { height: 0, width: 0 },
+          shadowOpacity: 1,
+          shadowRadius: 0,
+          elevation: 0,
+        },
+      },
+    },
+  ],
+  ...expectError(["shadow-inner"]),
+]);

src/plugin/native/box-shadow.ts

@@ -0,0 +1,28 @@
+import { CustomPluginFunction } from "./types";
+
+export const boxShadow: CustomPluginFunction = (
+  { matchUtilities, theme },
+  notSupported
+) => {
+  const themeValues = Object.entries(theme("boxShadow"));
+  const elevation = theme("elevation");
+
+  matchUtilities(
+    {
+      shadow(value: string) {
+        const size = themeValues.find(([, themeValue]) => value === themeValue);
+
+        return size
+          ? {
+              boxShadow: value,
+              elevation: elevation[size[0]],
+            }
+          : {
+              boxShadow: value,
+            };
+      },
+      "shadow-inner": notSupported("shadow-inner"),
+    },
+    { values: theme("boxShadow"), type: ["shadow"] }
+  );
+};

src/plugin/native/index.ts

@@ -4,6 +4,7 @@ import {
   TailwindThemeValue,
 } from "tailwindcss/tailwind-config";
 import { StyleError } from "../../types/common";
+import { boxShadow } from "./box-shadow";
 import { divide } from "./divide";
 import { elevation } from "./elevation";
 import { fontSize } from "./font-size";
@@ -42,6 +43,7 @@ export const nativePlugin = plugin.withOptions<NativePluginOptions | undefined>(
       rotate(helpers, notSupported);
       translate(helpers, notSupported);
       skew(helpers, notSupported);
+      boxShadow(helpers, notSupported);
     };
   },
   function ({ rem = 16 } = {}) {
@@ -165,11 +167,21 @@ export const nativePlugin = plugin.withOptions<NativePluginOptions | undefined>(
         elevation: {
           sm: "1.5",
           DEFAULT: "3",
+          md: "6",
           lg: "7.5",
           xl: "12.5",
           "2xl": "25",
           none: "0",
         },
+        boxShadow: {
+          sm: "0px 1px 1px rgba(0, 0, 0, 0.1)",
+          DEFAULT: "0px 4px 6px rgba(0, 0, 0, 0.1)",
+          md: "0px 6px 10px rgba(0, 0, 0, 0.1)",
+          lg: "0px 10px 15px rgba(0, 0, 0, 0.1)",
+          xl: "0px 20px 25px rgba(0, 0, 0, 0.1)",
+          "2xl": "0px 25px 50px rgba(0, 0, 0, 0.1)",
+          none: "0px 0px 0px rgba(0, 0, 0, 0)",
+        },
       },
       corePlugins: {
         space: false,
@@ -184,6 +196,7 @@ export const nativePlugin = plugin.withOptions<NativePluginOptions | undefined>(
         rotate: false,
         skew: false,
         translate: false,
+        boxShadow: false,
       },
     };