text shadow plugin is easy to import

huncholaneauthored 1 year ago

parent 32c2c15commit 55a1b671c58a539220cd89ed73590bb163c1b3d2Browse files

+32-12twench_landing_page/plugins/text-shadow.ts

		@@ -1,17 +1,37 @@
	1	+import { text } from "stream/consumers";
1	2	import plugin from "tailwindcss/plugin";
2	3
3		-const textShadowPlugin = plugin(function ({ matchUtilities, theme }) {
4		- matchUtilities(
5		- {
6		- "text-shadow": (value: string) => ({
7		- textShadow: `${value} ${value} 0 #000, -${value} -${value} 0 #000, ${value} -${value} 0 #000,
8		- -${value} ${value} 0 #000, ${value} 0 0 #000, -${value} 0 0 #000, 0 ${value} 0 #000, 0 -${value} 0 #000;`,
9		- }),
	4	+function textShadow(value: string) {
	5	+ return {
	6	+ textShadow: `${value} ${value} 0 #000, -${value} -${value} 0 #000, ${value} -${value} 0 #000,
	7	+ -${value} ${value} 0 #000, ${value} 0 0 #000, -${value} 0 0 #000, 0 ${value} 0 #000, 0 -${value} 0 #000;`,
	8	+ };
	9	+}
	10	+
	11	+const textShadowPlugin = plugin(
	12	+ function ({ matchUtilities, theme }) {
	13	+ matchUtilities(
	14	+ {
	15	+ "text-shadow": (value: string) => ({
	16	+ textShadow: textShadow(value),
	17	+ }),
	18	+ },
	19	+ {
	20	+ values: theme("textShadow"),
	21	+ }
	22	+ );
	23	+ },
	24	+ {
	25	+ theme: {
	26	+ textShadow: {
	27	+ DEFAULT: "1px",
	28	+ sm: "2px",
	29	+ md: "3px",
	30	+ lg: "4px",
	31	+ xl: "5px",
	32	+ },
10	33	},
11		- {
12		- values: theme("textShadow"),
13		- }
14		- );
15		-});
	34	+ }
	35	+);
16	36
17	37	export default textShadowPlugin;

+0-7twench_landing_page/tailwind.config.ts