Romakita
commented
11 months ago Tailwind-formio is just the module to specify templating. It’s completly agnostic of react ;)
Closed TriStarGod closed 1 month ago
Romakita
commented
11 months ago Tailwind-formio is just the module to specify templating. It’s completly agnostic of react ;)
Romakita
commented
11 months ago It should works with tailwind 3.0
TriStarGod
commented
11 months ago @Romakita Thats awesome. Gonna try it. Some follow up questions:
Btw, your readme's tutorial link "https://tsed.io/tutorials/formio.html" 404s.
Romakita
commented
11 months ago @tsed/formio is the on premise server formio. Isn’t the formio.js sdk. It configure the Ts.ED server to use formio. With this module you can used the tsed framework to create custom controller and expose your formio server.
For example the tsed api use formio:
https://github.com/tsedio/tsed-api
https://api.tsed.io/backoffice/auth
TriStarGod
commented
11 months ago @Romakita I tried testing out with tailwind 3.x but it throws @apply should not be used with the 'group' utility . Looks like its related to issue #56, which in turn is related to tailwindlabs/tailwindcss#4666.
TriStarGod
commented
11 months ago Faced two issues that I was able to resolve
@apply should not be used with the 'group' utility was resolved by deleting the group in https://github.com/tsedio/tsed-formio/blob/master/packages/tailwind-formio/styles/nav.cssTriStarGod
commented
11 months ago What should the tailwind.config.js outline array values be? I can make a PR with the minor changes I've made to get it working with tailwind 3.x.
Romakita
commented
11 months ago Hum... you can comment the line that use outline.none[1] temporarily. I don't know exactly what is the impact on the css design :)
Romakita
commented
11 months ago When your PR is ready, I'll take a time to compare previous and new version in the storybook.
TriStarGod
commented
11 months ago Didn't delete the outline none array. Instead just added to the tailwind config. Sent PRs for #129 and #130
github-actions[bot]
commented
11 months ago If you appreciated the support, know that it is free and is carried out on personal time ;)
A support, even a little bit makes a difference for me and continues to bring you answers!
TriStarGod
commented
11 months ago Do you know what outline none array values could be?
Romakita
commented
11 months ago Here is the generated tailwind configs:
{
"plugins": [
null
],
"theme": {
"screens": {
"sm": "40.01em",
"md": "50.01em",
"lg": "64.01em",
"xl": "76.26em"
},
"colors": {
"transparent": "transparent",
"current": "currentColor",
"black": "#000",
"white": "hsla(0, 100%, 100%, 1)",
"gray": {
"50": "#f9fafb",
"100": "#f3f4f6",
"200": "#e5e7eb",
"300": "#d1d5db",
"400": "#9ca3af",
"500": "#6b7280",
"600": "#4b5563",
"700": "#374151",
"800": "#1f2937",
"900": "#111827",
"DEFAULT": "#4b5563"
},
"red": {
"50": "#fef2f2",
"100": "#fee2e2",
"200": "#fecaca",
"300": "#fca5a5",
"400": "#f87171",
"500": "#ef4444",
"600": "#dc2626",
"700": "#b91c1c",
"800": "#991b1b",
"900": "#7f1d1d",
"DEFAULT": "#dc2626"
},
"yellow": {
"50": "#fffbeb",
"100": "#fef3c7",
"200": "#fde68a",
"300": "#fcd34d",
"400": "#fbbf24",
"500": "#f59e0b",
"600": "#d97706",
"700": "#b45309",
"800": "#92400e",
"900": "#78350f",
"DEFAULT": "#d97706"
},
"green": {
"50": "#ecfdf5",
"100": "#d1fae5",
"200": "#a7f3d0",
"300": "#6ee7b7",
"400": "#34d399",
"500": "#10b981",
"600": "#059669",
"700": "#047857",
"800": "#065f46",
"900": "#064e3b",
"DEFAULT": "#059669"
},
"blue": {
"50": "#eff6ff",
"100": "#dbeafe",
"200": "#bfdbfe",
"300": "#93c5fd",
"400": "#60a5fa",
"500": "#3b82f6",
"600": "#2563eb",
"700": "#1d4ed8",
"800": "#1e40af",
"900": "#1e3a8a",
"DEFAULT": "#2563eb"
},
"indigo": {
"50": "#eef2ff",
"100": "#e0e7ff",
"200": "#c7d2fe",
"300": "#a5b4fc",
"400": "#818cf8",
"500": "#6366f1",
"600": "#4f46e5",
"700": "#4338ca",
"800": "#3730a3",
"900": "#312e81",
"DEFAULT": "#4f46e5"
},
"purple": {
"50": "#f5f3ff",
"100": "#ede9fe",
"200": "#ddd6fe",
"300": "#c4b5fd",
"400": "#a78bfa",
"500": "#8b5cf6",
"600": "#7c3aed",
"700": "#6d28d9",
"800": "#5b21b6",
"900": "#4c1d95",
"DEFAULT": "#7c3aed"
},
"pink": {
"50": "#fdf2f8",
"100": "#fce7f3",
"200": "#fbcfe8",
"300": "#f9a8d4",
"400": "#f472b6",
"500": "#ec4899",
"600": "#db2777",
"700": "#be185d",
"800": "#9d174d",
"900": "#831843",
"DEFAULT": "#db2777"
},
"inherit": "inherit",
"primary": {
"50": "hsla(208, 100%, 91%, 1)",
"100": "hsla(208, 100%, 83%, 1)",
"200": "hsla(208, 100%, 75%, 1)",
"300": "hsla(208, 100%, 67%, 1)",
"400": "hsla(208, 100%, 59%, 1)",
"500": "hsla(208, 100%, 51%, 1)",
"600": "hsla(208, 100%, 43%, 1)",
"700": "hsla(208, 100%, 35%, 1)",
"800": "hsla(208, 100%, 27%, 1)",
"900": "hsla(208, 100%, 19%, 1)",
"DEFAULT": "hsla(208, 100%, 43%, 1)"
},
"primary-active": "hsla(190, 81%, 42%, 1)",
"secondary": {
"50": "hsla(190, 81%, 90%, 1)",
"100": "hsla(190, 81%, 82%, 1)",
"200": "hsla(190, 81%, 74%, 1)",
"300": "hsla(190, 81%, 66%, 1)",
"400": "hsla(190, 81%, 58%, 1)",
"500": "hsla(190, 81%, 50%, 1)",
"600": "hsla(190, 81%, 42%, 1)",
"700": "hsla(190, 81%, 34%, 1)",
"800": "hsla(190, 81%, 28%, 1)",
"900": "hsla(190, 81%, 20%, 1)",
"DEFAULT": "hsla(190, 81%, 42%, 1)"
},
"gray-lighter": "#f7f7f7",
"gray-lighter-active": "hsla(0, 0%, 92%, 1)",
"gray-light": "#d4d1d1",
"gray-medium": "#a8a0a0",
"gray-dark": "#998e8e",
"gray-darker": "#504747"
},
"spacing": {
"0": "0",
"1": ".25rem",
"2": ".5rem",
"3": ".75rem",
"4": "1rem",
"5": "1.25rem",
"6": "1.5rem",
"7": "1.75rem",
"8": "2rem",
"9": "2.25rem",
"10": "2.5rem",
"11": "2.75rem",
"12": "3rem",
"14": "3.5rem",
"15": "3.75rem",
"16": "4rem",
"20": "5rem",
"22": "5.5rem",
"24": "6rem",
"25": "6.25rem",
"26": "6.5rem",
"28": "8rem",
"30": "8.5rem",
"32": "9rem",
"36": "9rem",
"40": "10rem",
"44": "11rem",
"48": "12rem",
"52": "13rem",
"56": "14rem",
"60": "15rem",
"64": "16rem",
"68": "17rem",
"72": "18rem",
"80": "20rem",
"96": "24rem",
"px": "1px",
"0.5": "0.125rem",
"1.5": ".375rem",
"2.5": ".625rem",
"3.5": "0.875rem",
"7.5": "1.875rem"
},
"animation": {
"none": "none",
"spin": "spin 1s linear infinite",
"ping": "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite",
"pulse": "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
"bounce": "bounce 1s infinite"
},
"backgroundImage": {
"none": "none",
"gradient-to-t": "linear-gradient(to top, var(--tw-gradient-stops))",
"gradient-to-tr": "linear-gradient(to top right, var(--tw-gradient-stops))",
"gradient-to-r": "linear-gradient(to right, var(--tw-gradient-stops))",
"gradient-to-br": "linear-gradient(to bottom right, var(--tw-gradient-stops))",
"gradient-to-b": "linear-gradient(to bottom, var(--tw-gradient-stops))",
"gradient-to-bl": "linear-gradient(to bottom left, var(--tw-gradient-stops))",
"gradient-to-l": "linear-gradient(to left, var(--tw-gradient-stops))",
"gradient-to-tl": "linear-gradient(to top left, var(--tw-gradient-stops))"
},
"backgroundPosition": {
"bottom": "bottom",
"center": "center",
"left": "left",
"left-bottom": "left bottom",
"left-top": "left top",
"right": "right",
"right-bottom": "right bottom",
"right-top": "right top",
"top": "top"
},
"backgroundSize": {
"auto": "auto",
"cover": "cover",
"contain": "contain"
},
"blur": {
"0": "0",
"none": "0",
"sm": "4px",
"DEFAULT": "8px",
"md": "12px",
"lg": "16px",
"xl": "24px",
"2xl": "40px",
"3xl": "64px"
},
"brightness": {
"0": "0",
"50": ".5",
"75": ".75",
"90": ".9",
"95": ".95",
"100": "1",
"105": "1.05",
"110": "1.1",
"125": "1.25",
"150": "1.5",
"200": "2"
},
"borderRadius": {
"none": "0px",
"sm": "0.125rem",
"DEFAULT": "0.25rem",
"md": "0.375rem",
"lg": "0.5rem",
"xl": "0.75rem",
"2xl": "1rem",
"3xl": "1.5rem",
"full": "100%",
"half": "50%"
},
"borderWidth": {
"0": "0px",
"1": "1px",
"2": "2px",
"4": "4px",
"5": "5px",
"8": "8px",
"DEFAULT": "1px"
},
"boxShadow": {
"sm": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
"DEFAULT": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
"md": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
"lg": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
"xl": "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
"2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
"inner": "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
"none": "none"
},
"contrast": {
"0": "0",
"50": ".5",
"75": ".75",
"100": "1",
"125": "1.25",
"150": "1.5",
"200": "2"
},
"container": {},
"content": {
"none": "none"
},
"cursor": {
"auto": "auto",
"default": "default",
"pointer": "pointer",
"wait": "wait",
"text": "text",
"move": "move",
"help": "help",
"not-allowed": "not-allowed"
},
"dropShadow": {
"sm": "0 1px 1px rgba(0,0,0,0.05)",
"DEFAULT": [
"0 1px 2px rgba(0, 0, 0, 0.1)",
"0 1px 1px rgba(0, 0, 0, 0.06)"
],
"md": [
"0 4px 3px rgba(0, 0, 0, 0.07)",
"0 2px 2px rgba(0, 0, 0, 0.06)"
],
"lg": [
"0 10px 8px rgba(0, 0, 0, 0.04)",
"0 4px 3px rgba(0, 0, 0, 0.1)"
],
"xl": [
"0 20px 13px rgba(0, 0, 0, 0.03)",
"0 8px 5px rgba(0, 0, 0, 0.08)"
],
"2xl": "0 25px 25px rgba(0, 0, 0, 0.15)",
"none": "0 0 #0000"
},
"fill": {
"current": "currentColor",
"transparent": "transparent"
},
"grayscale": {
"0": "0",
"DEFAULT": "100%"
},
"hueRotate": {
"0": "0deg",
"15": "15deg",
"30": "30deg",
"60": "60deg",
"90": "90deg",
"180": "180deg",
"-180": "-180deg",
"-90": "-90deg",
"-60": "-60deg",
"-30": "-30deg",
"-15": "-15deg"
},
"invert": {
"0": "0",
"DEFAULT": "100%"
},
"flex": {
"1": "1 1 0%",
"2": "2 2 0%",
"3": "3 3 0%",
"auto": "1 1 auto",
"initial": "0 1 auto",
"none": "none"
},
"flexGrow": {
"0": "0",
"DEFAULT": "1"
},
"flexShrink": {
"0": "0",
"DEFAULT": "1"
},
"fontFamily": {
"brand": [
"Source Sans Pro",
"sans-serif"
],
"sans": [
"Source Sans Pro",
"sans-serif"
],
"serif": [
"Source Sans Pro",
"sans-serif"
],
"inconsolata": [
"Inconsolata"
],
"source": [
"source-code-pro",
"Menlo",
"Monaco",
"Consolas",
"Courier New",
"monospace"
]
},
"fontSize": {
"micro": ".5rem",
"xxs": ".625rem",
"xs": ".75rem",
"sm": ".875rem",
"base": "1rem",
"md": "1.125rem",
"lg": "1.25rem",
"xl": "1.5rem",
"2xl": "1.75rem",
"3xl": "2rem",
"4xl": "2.25rem",
"5xl": "2.75rem",
"7xl": "3.75rem",
"11xl": "4.75rem"
},
"fontWeight": {
"thin": "100",
"extralight": "200",
"light": "300",
"normal": "400",
"medium": "500",
"semibold": "600",
"bold": "700",
"extrabold": "800",
"black": "900",
"hairline": 100
},
"gridAutoColumns": {
"auto": "auto",
"min": "min-content",
"max": "max-content",
"fr": "minmax(0, 1fr)"
},
"gridAutoRows": {
"auto": "auto",
"min": "min-content",
"max": "max-content",
"fr": "minmax(0, 1fr)"
},
"gridColumn": {
"auto": "auto",
"span-1": "span 1 / span 1",
"span-2": "span 2 / span 2",
"span-3": "span 3 / span 3",
"span-4": "span 4 / span 4",
"span-5": "span 5 / span 5",
"span-6": "span 6 / span 6",
"span-7": "span 7 / span 7",
"span-8": "span 8 / span 8",
"span-9": "span 9 / span 9",
"span-10": "span 10 / span 10",
"span-11": "span 11 / span 11",
"span-12": "span 12 / span 12",
"span-full": "1 / -1"
},
"gridColumnEnd": {
"1": "1",
"2": "2",
"3": "3",
"4": "4",
"5": "5",
"6": "6",
"7": "7",
"8": "8",
"9": "9",
"10": "10",
"11": "11",
"12": "12",
"13": "13",
"auto": "auto"
},
"gridColumnStart": {
"1": "1",
"2": "2",
"3": "3",
"4": "4",
"5": "5",
"6": "6",
"7": "7",
"8": "8",
"9": "9",
"10": "10",
"11": "11",
"12": "12",
"13": "13",
"auto": "auto"
},
"gridRow": {
"auto": "auto",
"span-1": "span 1 / span 1",
"span-2": "span 2 / span 2",
"span-3": "span 3 / span 3",
"span-4": "span 4 / span 4",
"span-5": "span 5 / span 5",
"span-6": "span 6 / span 6",
"span-full": "1 / -1"
},
"gridRowStart": {
"1": "1",
"2": "2",
"3": "3",
"4": "4",
"5": "5",
"6": "6",
"7": "7",
"auto": "auto"
},
"gridRowEnd": {
"1": "1",
"2": "2",
"3": "3",
"4": "4",
"5": "5",
"6": "6",
"7": "7",
"auto": "auto"
},
"gridTemplateColumns": {
"1": "repeat(1, minmax(0, 1fr))",
"2": "repeat(2, minmax(0, 1fr))",
"3": "repeat(3, minmax(0, 1fr))",
"4": "repeat(4, minmax(0, 1fr))",
"5": "repeat(5, minmax(0, 1fr))",
"6": "repeat(6, minmax(0, 1fr))",
"7": "repeat(7, minmax(0, 1fr))",
"8": "repeat(8, minmax(0, 1fr))",
"9": "repeat(9, minmax(0, 1fr))",
"10": "repeat(10, minmax(0, 1fr))",
"11": "repeat(11, minmax(0, 1fr))",
"12": "repeat(12, minmax(0, 1fr))",
"none": "none"
},
"gridTemplateRows": {
"1": "repeat(1, minmax(0, 1fr))",
"2": "repeat(2, minmax(0, 1fr))",
"3": "repeat(3, minmax(0, 1fr))",
"4": "repeat(4, minmax(0, 1fr))",
"5": "repeat(5, minmax(0, 1fr))",
"6": "repeat(6, minmax(0, 1fr))",
"none": "none"
},
"keyframes": {
"spin": {
"to": {
"transform": "rotate(360deg)"
}
},
"ping": {
"75%, 100%": {
"transform": "scale(2)",
"opacity": "0"
}
},
"pulse": {
"50%": {
"opacity": ".5"
}
},
"bounce": {
"0%, 100%": {
"transform": "translateY(-25%)",
"animationTimingFunction": "cubic-bezier(0.8,0,1,1)"
},
"50%": {
"transform": "none",
"animationTimingFunction": "cubic-bezier(0,0,0.2,1)"
}
}
},
"letterSpacing": {
"tighter": "-0.05em",
"tight": "-0.025em",
"normal": "0em",
"wide": "0.025em",
"wider": "0.05em",
"widest": "0.1em"
},
"lineHeight": {
"3": ".75rem",
"4": "1rem",
"5": "1.25rem",
"6": "1.5rem",
"7": "1.75rem",
"8": "2rem",
"9": "2.25rem",
"10": "2.5rem",
"none": "1",
"tight": "1.25",
"snug": "1.375",
"normal": "1.5",
"relaxed": "1.625",
"loose": "2"
},
"listStyleType": {
"none": "none",
"disc": "disc",
"decimal": "decimal"
},
"minHeight": {
"0": "0px",
"full": "100%",
"screen": "100vh"
},
"minWidth": {
"0": "0px",
"full": "100%",
"min": "min-content",
"max": "max-content",
"site": "18.75rem",
"input-mini": "17.5rem",
"input-small": "31.25rem",
"input-medium": "36.3125rem",
"input-large": "61.45rem",
"button-mini": "5.5rem",
"button-small": "7rem",
"button-medium": "9.875rem",
"button-large": "10rem"
},
"objectPosition": {
"bottom": "bottom",
"center": "center",
"left": "left",
"left-bottom": "left bottom",
"left-top": "left top",
"right": "right",
"right-bottom": "right bottom",
"right-top": "right top",
"top": "top"
},
"opacity": {
"0": "0",
"5": "0.05",
"10": "0.1",
"20": "0.2",
"25": "0.25",
"30": "0.3",
"40": "0.4",
"50": "0.5",
"60": "0.6",
"70": "0.7",
"75": "0.75",
"80": "0.8",
"90": "0.9",
"95": "0.95",
"100": "1"
},
"order": {
"1": "1",
"2": "2",
"3": "3",
"4": "4",
"5": "5",
"6": "6",
"7": "7",
"8": "8",
"9": "9",
"10": "10",
"11": "11",
"12": "12",
"first": "-9999",
"last": "9999",
"none": "0"
},
"outline": {
"none": [
"2px solid transparent",
"2px"
],
"white": [
"2px dotted white",
"2px"
],
"black": [
"2px dotted black",
"2px"
]
},
"ringOffsetWidth": {
"0": "0px",
"1": "1px",
"2": "2px",
"4": "4px",
"8": "8px"
},
"ringWidth": {
"0": "0px",
"1": "1px",
"2": "2px",
"4": "4px",
"8": "8px",
"DEFAULT": "3px"
},
"rotate": {
"0": "0deg",
"1": "1deg",
"2": "2deg",
"3": "3deg",
"6": "6deg",
"12": "12deg",
"45": "45deg",
"90": "90deg",
"180": "180deg",
"-180": "-180deg",
"-90": "-90deg",
"-45": "-45deg",
"-12": "-12deg",
"-6": "-6deg",
"-3": "-3deg",
"-2": "-2deg",
"-1": "-1deg"
},
"saturate": {
"0": "0",
"50": ".5",
"100": "1",
"150": "1.5",
"200": "2"
},
"scale": {
"0": "0",
"50": ".5",
"75": ".75",
"90": ".9",
"95": ".95",
"100": "1",
"105": "1.05",
"110": "1.1",
"125": "1.25",
"150": "1.5"
},
"sepia": {
"0": "0",
"DEFAULT": "100%"
},
"skew": {
"0": "0deg",
"1": "1deg",
"2": "2deg",
"3": "3deg",
"6": "6deg",
"12": "12deg",
"-12": "-12deg",
"-6": "-6deg",
"-3": "-3deg",
"-2": "-2deg",
"-1": "-1deg"
},
"stroke": {
"current": "currentColor"
},
"strokeWidth": {
"0": "0",
"1": "1",
"2": "2"
},
"transformOrigin": {
"center": "center",
"top": "top",
"top-right": "top right",
"right": "right",
"bottom-right": "bottom right",
"bottom": "bottom",
"bottom-left": "bottom left",
"left": "left",
"top-left": "top left"
},
"transitionDelay": {
"75": "75ms",
"100": "100ms",
"150": "150ms",
"200": "200ms",
"300": "300ms",
"500": "500ms",
"700": "700ms",
"1000": "1000ms"
},
"transitionDuration": {
"75": "75ms",
"100": "100ms",
"150": "150ms",
"200": "200ms",
"300": "300ms",
"500": "500ms",
"700": "700ms",
"1000": "1000ms",
"DEFAULT": "150ms"
},
"transitionProperty": {
"none": "none",
"all": "all",
"DEFAULT": "background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter",
"colors": "background-color, border-color, color, fill, stroke",
"opacity": "opacity",
"shadow": "box-shadow",
"transform": "transform"
},
"transitionTimingFunction": {
"DEFAULT": "cubic-bezier(0.4, 0, 0.2, 1)",
"linear": "linear",
"in": "cubic-bezier(0.4, 0, 1, 1)",
"out": "cubic-bezier(0, 0, 0.2, 1)",
"in-out": "cubic-bezier(0.4, 0, 0.2, 1)"
},
"translate": {
"down": "-100%",
"right-up": [
"100%",
"-100%"
],
"3d": [
"40px",
"-60px",
"-130px"
]
},
"zIndex": {
"0": 0,
"1": 1,
"2": 2,
"3": 3,
"4": 4,
"5": 5,
"6": 6,
"10": 10,
"20": 20,
"30": 30,
"40": 40,
"50": 50,
"auto": "auto"
}
},
"variants": {
"accessibility": [
"responsive",
"focus-within",
"focus"
],
"alignContent": [
"responsive"
],
"alignItems": [
"responsive"
],
"alignSelf": [
"responsive"
],
"animation": [
"responsive"
],
"appearance": [
"responsive"
],
"backdropBlur": [
"responsive"
],
"backdropBrightness": [
"responsive"
],
"backdropContrast": [
"responsive"
],
"backdropFilter": [
"responsive"
],
"backdropGrayscale": [
"responsive"
],
"backdropHueRotate": [
"responsive"
],
"backdropInvert": [
"responsive"
],
"backdropOpacity": [
"responsive"
],
"backdropSaturate": [
"responsive"
],
"backdropSepia": [
"responsive"
],
"backgroundAttachment": [
"responsive"
],
"backgroundBlendMode": [
"responsive"
],
"backgroundClip": [
"responsive"
],
"backgroundColor": [
"responsive",
"dark",
"group-hover",
"focus-within",
"hover",
"focus"
],
"backgroundImage": [
"responsive"
],
"backgroundOpacity": [
"responsive",
"dark",
"group-hover",
"focus-within",
"hover",
"focus"
],
"backgroundPosition": [
"responsive"
],
"backgroundRepeat": [
"responsive"
],
"backgroundSize": [
"responsive"
],
"backgroundOrigin": [
"responsive"
],
"blur": [
"responsive"
],
"borderCollapse": [
"responsive"
],
"borderColor": [
"responsive",
"dark",
"group-hover",
"focus-within",
"hover",
"focus"
],
"borderOpacity": [
"responsive",
"dark",
"group-hover",
"focus-within",
"hover",
"focus"
],
"borderRadius": [
"responsive"
],
"borderStyle": [
"responsive"
],
"borderWidth": [
"responsive"
],
"boxDecorationBreak": [
"responsive"
],
"boxShadow": [
"responsive",
"group-hover",
"focus-within",
"hover",
"focus"
],
"boxSizing": [
"responsive"
],
"brightness": [
"responsive"
],
"clear": [
"responsive"
],
"container": [
"responsive"
],
"contrast": [
"responsive"
],
"cursor": [
"responsive"
],
"display": [
"responsive"
],
"divideColor": [
"responsive",
"dark"
],
"divideOpacity": [
"responsive",
"dark"
],
"divideStyle": [
"responsive"
],
"divideWidth": [
"responsive"
],
"dropShadow": [
"responsive"
],
"fill": [
"responsive"
],
"filter": [
"responsive"
],
"flex": [
"responsive"
],
"flexDirection": [
"responsive"
],
"flexGrow": [
"responsive"
],
"flexShrink": [
"responsive"
],
"flexWrap": [
"responsive"
],
"float": [
"responsive"
],
"fontFamily": [
"responsive"
],
"fontSize": [
"responsive"
],
"fontSmoothing": [
"responsive"
],
"fontStyle": [
"responsive"
],
"fontVariantNumeric": [
"responsive"
],
"fontWeight": [
"responsive"
],
"gap": [
"responsive"
],
"gradientColorStops": [
"responsive",
"dark",
"hover",
"focus"
],
"grayscale": [
"responsive"
],
"gridAutoColumns": [
"responsive"
],
"gridAutoFlow": [
"responsive"
],
"gridAutoRows": [
"responsive"
],
"gridColumn": [
"responsive"
],
"gridColumnEnd": [
"responsive"
],
"gridColumnStart": [
"responsive"
],
"gridRow": [
"responsive"
],
"gridRowEnd": [
"responsive"
],
"gridRowStart": [
"responsive"
],
"gridTemplateColumns": [
"responsive"
],
"gridTemplateRows": [
"responsive"
],
"height": [
"responsive"
],
"hueRotate": [
"responsive"
],
"inset": [
"responsive"
],
"invert": [
"responsive"
],
"isolation": [
"responsive"
],
"justifyContent": [
"responsive"
],
"justifyItems": [
"responsive"
],
"justifySelf": [
"responsive"
],
"letterSpacing": [
"responsive"
],
"lineHeight": [
"responsive"
],
"listStylePosition": [
"responsive"
],
"listStyleType": [
"responsive"
],
"margin": [
"responsive"
],
"maxHeight": [
"responsive"
],
"maxWidth": [
"responsive"
],
"minHeight": [
"responsive"
],
"minWidth": [
"responsive"
],
"mixBlendMode": [
"responsive"
],
"objectFit": [
"responsive"
],
"objectPosition": [
"responsive"
],
"opacity": [
"responsive",
"group-hover",
"focus-within",
"hover",
"focus"
],
"order": [
"responsive"
],
"outline": [
"responsive",
"focus-within",
"focus"
],
"overflow": [
"responsive"
],
"overscrollBehavior": [
"responsive"
],
"padding": [
"responsive"
],
"placeContent": [
"responsive"
],
"placeItems": [
"responsive"
],
"placeSelf": [
"responsive"
],
"placeholderColor": [
"responsive",
"dark",
"focus"
],
"placeholderOpacity": [
"responsive",
"dark",
"focus"
],
"pointerEvents": [
"responsive"
],
"position": [
"responsive"
],
"resize": [
"responsive"
],
"ringColor": [
"responsive",
"dark",
"focus-within",
"focus"
],
"ringOffsetColor": [
"responsive",
"dark",
"focus-within",
"focus"
],
"ringOffsetWidth": [
"responsive",
"focus-within",
"focus"
],
"ringOpacity": [
"responsive",
"dark",
"focus-within",
"focus"
],
"ringWidth": [
"responsive",
"focus-within",
"focus"
],
"rotate": [
"responsive",
"hover",
"focus"
],
"saturate": [
"responsive"
],
"scale": [
"responsive",
"hover",
"focus"
],
"sepia": [
"responsive"
],
"skew": [
"responsive",
"hover",
"focus"
],
"space": [
"responsive"
],
"stroke": [
"responsive"
],
"strokeWidth": [
"responsive"
],
"tableLayout": [
"responsive"
],
"textAlign": [
"responsive"
],
"textColor": [
"responsive",
"dark",
"group-hover",
"focus-within",
"hover",
"focus"
],
"textDecoration": [
"responsive",
"group-hover",
"focus-within",
"hover",
"focus"
],
"textOpacity": [
"responsive",
"dark",
"group-hover",
"focus-within",
"hover",
"focus"
],
"textOverflow": [
"responsive"
],
"textTransform": [
"responsive"
],
"transform": [
"responsive"
],
"transformOrigin": [
"responsive"
],
"transitionDelay": [
"responsive"
],
"transitionDuration": [
"responsive"
],
"transitionProperty": [
"responsive"
],
"transitionTimingFunction": [
"responsive"
],
"translate": [
"responsive",
"hover",
"focus"
],
"userSelect": [
"responsive"
],
"verticalAlign": [
"responsive"
],
"visibility": [
"responsive"
],
"whitespace": [
"responsive"
],
"width": [
"responsive"
],
"wordBreak": [
"responsive"
],
"zIndex": [
"responsive",
"focus-within",
"focus"
]
},
"corePlugins": {
"backgroundAttachment": false,
"borderCollapse": true,
"letterSpacing": false,
"userSelect": false
},
"purge": {
"enabled": false,
"content": []
}
}
So:
outline: {
none: ['2px solid transparent', '2px'],
white: ['2px dotted white', '2px'],
black: ['2px dotted black', '2px'],
},See you ^^
github-actions[bot]
commented
1 month ago If you appreciated the support, know that it is free and is carried out on personal time ;)
A support, even a little bit makes a difference for me and continues to bring you answers!
Currently using formio.js in sveltejs project. Its typing sucks and lacking tailwind support. Can @tsed/tailwind-formio be used as a replacement? Is react required? Does it only work with tailwind 2.x?