admin管理员组文章数量:1324838
I'm developing a web app using Vue 3 with Tailwind CSS. My build failed and these 2 errors found.
I've looked for answers and found and . But both did not work for me. I tried to upgrade npm install tailwindcss@latest postcss@latest autoprefixer@latest and things were going even crazier.
I reverted it back but now I can't even run my development server and getting the same errors. Can anybody help?
This is my package.json now
{
"name": "my-project",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@tailwindcss/postcss7-pat": "^2.0.2",
"autoprefixer": "^9",
"axios": "^0.21.1",
"core-js": "^3.6.5",
"dayjs": "^1.10.5",
"postcss": "^7",
"tailwindcss": "npm:@tailwindcss/postcss7-pat@^2.0.2",
"vue": "^3.0.0",
"vue-i18n": "^9.1.6",
"vue-router": "^4.0.0-0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/piler-sfc": "^3.0.0",
"@vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^7.0.0",
"prettier": "^2.2.1",
"vue-cli-plugin-tailwind": "~2.0.6"
}
}
and here is the tailwind.config.js
const colors = require("tailwindcss/colors");
module.exports = {
purge: { content: ["./public/**/*.html", "./src/**/*.vue"] },
presets: [],
darkMode: false, // or 'media' or 'class'
theme: {
screens: {
sm: "640px",
md: "772px",
lg: "1024px",
xl: "1280px",
"2xl": "1536px",
},
colors: {
transparent: "transparent",
current: "currentColor",
black: colors.black,
white: colors.white,
gray: colors.coolGray,
red: colors.red,
yellow: colors.amber,
green: colors.emerald,
blue: colors.blue,
indigo: colors.indigo,
purple: colors.violet,
pink: colors.pink,
linen: "#E0DEDA",
"linen-dark": "#C9C3B7",
"linen-darker": "#999181",
},
spacing: {
px: "1px",
0: "0px",
0.5: "0.125rem",
1: "0.25rem",
1.5: "0.375rem",
2: "0.5rem",
2.5: "0.625rem",
3: "0.75rem",
3.5: "0.875rem",
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",
16: "4rem",
20: "5rem",
24: "6rem",
28: "7rem",
32: "8rem",
36: "9rem",
40: "10rem",
44: "11rem",
48: "12rem",
52: "13rem",
56: "14rem",
60: "15rem",
64: "16rem",
72: "18rem",
80: "20rem",
96: "24rem",
},
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",
},
backgroundColor: (theme) => theme("colors"),
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))",
texture: "url('~@/some/path/to-an-image.png')",
},
backgroundOpacity: (theme) => theme("opacity"),
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",
},
borderColor: (theme) => ({
...theme("colors"),
DEFAULT: theme("colors.gray.200", "currentColor"),
}),
borderOpacity: (theme) => theme("opacity"),
borderRadius: {
none: "0px",
sm: "0.125rem",
DEFAULT: "0.25rem",
md: "0.375rem",
lg: "0.5rem",
xl: "0.75rem",
"2xl": "1rem",
"3xl": "1.5rem",
full: "9999px",
},
borderWidth: {
DEFAULT: "1px",
0: "0px",
2: "2px",
4: "4px",
8: "8px",
},
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",
},
container: {},
cursor: {
auto: "auto",
default: "default",
pointer: "pointer",
wait: "wait",
text: "text",
move: "move",
help: "help",
"not-allowed": "not-allowed",
},
divideColor: (theme) => theme("borderColor"),
divideOpacity: (theme) => theme("borderOpacity"),
divideWidth: (theme) => theme("borderWidth"),
fill: { current: "currentColor" },
flex: {
1: "1 1 0%",
auto: "1 1 auto",
initial: "0 1 auto",
none: "none",
},
flexGrow: {
0: "0",
DEFAULT: "1",
},
flexShrink: {
0: "0",
DEFAULT: "1",
},
fontFamily: {
sans: [
"ui-sans-serif",
"system-ui",
"-apple-system",
"BlinkMacSystemFont",
'"Segoe UI"',
"Roboto",
'"Helvetica Neue"',
"Arial",
'"Noto Sans"',
"sans-serif",
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
'"Noto Color Emoji"',
],
serif: [
"ui-serif",
"Georgia",
"Cambria",
'"Times New Roman"',
"Times",
"serif",
],
mono: [
"ui-monospace",
"SFMono-Regular",
"Menlo",
"Monaco",
"Consolas",
'"Liberation Mono"',
'"Courier New"',
"monospace",
],
"cormorant-uprignt": ["Cormorant Upright", "serif"],
"cormorant-sc": ["Cormorant SC", "serif"],
},
fontSize: {
"2xs": ["0.5rem", { lineHeight: "0.7rem" }],
xs: ["0.75rem", { lineHeight: "1rem" }],
sm: ["0.875rem", { lineHeight: "1.25rem" }],
base: ["1rem", { lineHeight: "1.5rem" }],
lg: ["1.125rem", { lineHeight: "1.75rem" }],
xl: ["1.25rem", { lineHeight: "1.75rem" }],
"2xl": ["1.5rem", { lineHeight: "2rem" }],
"3xl": ["1.875rem", { lineHeight: "2.25rem" }],
"4xl": ["2.25rem", { lineHeight: "2.5rem" }],
"5xl": ["3rem", { lineHeight: "1" }],
"6xl": ["3.75rem", { lineHeight: "1" }],
"7xl": ["4.5rem", { lineHeight: "1" }],
"8xl": ["6rem", { lineHeight: "1" }],
"9xl": ["8rem", { lineHeight: "1" }],
},
fontWeight: {
thin: "100",
extralight: "200",
light: "300",
normal: "400",
medium: "500",
semibold: "600",
bold: "700",
extrabold: "800",
black: "900",
},
gap: (theme) => theme("spacing"),
gradientColorStops: (theme) => theme("colors"),
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: {
auto: "auto",
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",
},
gridColumnStart: {
auto: "auto",
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",
},
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: {
auto: "auto",
1: "1",
2: "2",
3: "3",
4: "4",
5: "5",
6: "6",
7: "7",
},
gridRowEnd: {
auto: "auto",
1: "1",
2: "2",
3: "3",
4: "4",
5: "5",
6: "6",
7: "7",
},
gridTemplateColumns: {
none: "none",
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))",
},
gridTemplateRows: {
none: "none",
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))",
},
height: (theme) => ({
auto: "auto",
...theme("spacing"),
"1/2": "50%",
"1/3": "33.333333%",
"2/3": "66.666667%",
"1/4": "25%",
"2/4": "50%",
"3/4": "75%",
"1/5": "20%",
"2/5": "40%",
"3/5": "60%",
"4/5": "80%",
"1/6": "16.666667%",
"2/6": "33.333333%",
"3/6": "50%",
"4/6": "66.666667%",
"5/6": "83.333333%",
full: "100%",
screen: "100vh",
"7/8-screen": "87.5vh",
"3/4-screen": "75vh",
"1/2-screen": "50vh",
"1/3-screen": "33.333333vh",
"1/4-screen": "25vh",
}),
inset: (theme, { negative }) => ({
auto: "auto",
...theme("spacing"),
...negative(theme("spacing")),
"1/2": "50%",
"1/3": "33.333333%",
"2/3": "66.666667%",
"1/4": "25%",
"2/4": "50%",
"3/4": "75%",
full: "100%",
"-1/2": "-50%",
"-1/3": "-33.333333%",
"-2/3": "-66.666667%",
"-1/4": "-25%",
"-2/4": "-50%",
"-3/4": "-75%",
"-full": "-100%",
}),
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: {
none: "1",
tight: "1.25",
snug: "1.375",
normal: "1.5",
relaxed: "1.625",
loose: "2",
3: ".75rem",
4: "1rem",
5: "1.25rem",
6: "1.5rem",
7: "1.75rem",
8: "2rem",
9: "2.25rem",
10: "2.5rem",
},
listStyleType: {
none: "none",
disc: "disc",
decimal: "decimal",
},
margin: (theme, { negative }) => ({
auto: "auto",
...theme("spacing"),
...negative(theme("spacing")),
}),
maxHeight: (theme) => ({
...theme("spacing"),
full: "100%",
screen: "100vh",
}),
maxWidth: (theme, { breakpoints }) => ({
none: "none",
0: "0rem",
xs: "20rem",
sm: "24rem",
md: "28rem",
lg: "32rem",
xl: "36rem",
"2xl": "42rem",
"3xl": "48rem",
"4xl": "56rem",
"5xl": "64rem",
"6xl": "72rem",
"7xl": "80rem",
full: "100%",
min: "min-content",
max: "max-content",
prose: "65ch",
...breakpoints(theme("screens")),
}),
minHeight: {
0: "0px",
full: "100%",
screen: "100vh",
},
minWidth: {
0: "0px",
full: "100%",
min: "min-content",
max: "max-content",
},
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: {
first: "-9999",
last: "9999",
none: "0",
1: "1",
2: "2",
3: "3",
4: "4",
5: "5",
6: "6",
7: "7",
8: "8",
9: "9",
10: "10",
11: "11",
12: "12",
},
outline: {
none: ["2px solid transparent", "2px"],
white: ["2px dotted white", "2px"],
black: ["2px dotted black", "2px"],
},
padding: (theme) => theme("spacing"),
placeholderColor: (theme) => theme("colors"),
placeholderOpacity: (theme) => theme("opacity"),
ringColor: (theme) => ({
DEFAULT: theme("colors.blue.500", "#3b82f6"),
...theme("colors"),
}),
ringOffsetColor: (theme) => theme("colors"),
ringOffsetWidth: {
0: "0px",
1: "1px",
2: "2px",
4: "4px",
8: "8px",
},
ringOpacity: (theme) => ({
DEFAULT: "0.5",
...theme("opacity"),
}),
ringWidth: {
DEFAULT: "3px",
0: "0px",
1: "1px",
2: "2px",
4: "4px",
8: "8px",
},
rotate: {
"-180": "-180deg",
"-90": "-90deg",
"-45": "-45deg",
"-12": "-12deg",
"-6": "-6deg",
"-3": "-3deg",
"-2": "-2deg",
"-1": "-1deg",
0: "0deg",
1: "1deg",
2: "2deg",
3: "3deg",
6: "6deg",
12: "12deg",
45: "45deg",
90: "90deg",
180: "180deg",
},
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",
},
skew: {
"-12": "-12deg",
"-6": "-6deg",
"-3": "-3deg",
"-2": "-2deg",
"-1": "-1deg",
0: "0deg",
1: "1deg",
2: "2deg",
3: "3deg",
6: "6deg",
12: "12deg",
},
space: (theme, { negative }) => ({
...theme("spacing"),
...negative(theme("spacing")),
}),
stroke: {
current: "currentColor",
},
strokeWidth: {
0: "0",
1: "1",
2: "2",
},
textColor: (theme) => theme("colors"),
textOpacity: (theme) => theme("opacity"),
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: {
DEFAULT: "150ms",
75: "75ms",
100: "100ms",
150: "150ms",
200: "200ms",
300: "300ms",
500: "500ms",
700: "700ms",
1000: "1000ms",
},
transitionProperty: {
none: "none",
all: "all",
DEFAULT:
"background-color, border-color, color, fill, stroke, opacity, box-shadow, transform",
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: (theme, { negative }) => ({
...theme("spacing"),
...negative(theme("spacing")),
"1/2": "50%",
"1/3": "33.333333%",
"2/3": "66.666667%",
"1/4": "25%",
"2/4": "50%",
"3/4": "75%",
full: "100%",
"-1/2": "-50%",
"-1/3": "-33.333333%",
"-2/3": "-66.666667%",
"-1/4": "-25%",
"-2/4": "-50%",
"-3/4": "-75%",
"-full": "-100%",
}),
width: (theme) => ({
auto: "auto",
...theme("spacing"),
"1/2": "50%",
"1/3": "33.333333%",
"2/3": "66.666667%",
"1/4": "25%",
"2/4": "50%",
"3/4": "75%",
"1/5": "20%",
"2/5": "40%",
"3/5": "60%",
"4/5": "80%",
"1/6": "16.666667%",
"2/6": "33.333333%",
"3/6": "50%",
"4/6": "66.666667%",
"5/6": "83.333333%",
"1/12": "8.333333%",
"2/12": "16.666667%",
"3/12": "25%",
"4/12": "33.333333%",
"5/12": "41.666667%",
"6/12": "50%",
"7/12": "58.333333%",
"8/12": "66.666667%",
"9/12": "75%",
"10/12": "83.333333%",
"11/12": "91.666667%",
full: "100%",
screen: "100vw",
"3/4-screen": "75vw",
"1/2-screen": "50vw",
"1/3-screen": "33.333333vw",
"1/4-screen": "25vw",
min: "min-content",
max: "max-content",
}),
zIndex: {
auto: "auto",
0: "0",
10: "10",
20: "20",
30: "30",
40: "40",
50: "50",
},
},
variantOrder: [
"first",
"last",
"odd",
"even",
"visited",
"checked",
"group-hover",
"group-focus",
"focus-within",
"hover",
"focus",
"focus-visible",
"active",
"disabled",
],
variants: {
accessibility: ["responsive", "focus-within", "focus"],
alignContent: ["responsive"],
alignItems: ["responsive"],
alignSelf: ["responsive"],
animation: ["responsive", "hover"],
appearance: ["responsive"],
backgroundAttachment: ["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"],
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", "focus"],
boxShadow: ["responsive", "group-hover", "focus-within", "hover", "focus"],
boxSizing: ["responsive"],
clear: ["responsive"],
container: ["responsive"],
cursor: ["responsive"],
display: ["responsive"],
divideColor: ["responsive", "dark"],
divideOpacity: ["responsive", "dark"],
divideStyle: ["responsive"],
divideWidth: ["responsive"],
fill: ["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"],
gridAutoColumns: ["responsive"],
gridAutoFlow: ["responsive"],
gridAutoRows: ["responsive"],
gridColumn: ["responsive"],
gridColumnEnd: ["responsive"],
gridColumnStart: ["responsive"],
gridRow: ["responsive"],
gridRowEnd: ["responsive"],
gridRowStart: ["responsive"],
gridTemplateColumns: ["responsive"],
gridTemplateRows: ["responsive"],
height: ["responsive"],
inset: ["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"],
objectFit: ["responsive"],
objectPosition: ["responsive"],
opacity: ["responsive", "group-hover", "focus-within", "hover", "focus"],
order: ["responsive"],
outline: ["responsive", "focus-within", "focus"],
overflow: ["responsive", "hover"],
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"],
scale: ["responsive", "hover", "focus"],
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"],
},
plugins: [],
};
I'm developing a web app using Vue 3 with Tailwind CSS. My build failed and these 2 errors found.
I've looked for answers and found https://github./tailwindlabs/tailwindcss/issues/861 and https://github./tailwindlabs/tailwindcss/issues/2810. But both did not work for me. I tried to upgrade npm install tailwindcss@latest postcss@latest autoprefixer@latest and things were going even crazier.
I reverted it back but now I can't even run my development server and getting the same errors. Can anybody help?
This is my package.json now
{
"name": "my-project",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@tailwindcss/postcss7-pat": "^2.0.2",
"autoprefixer": "^9",
"axios": "^0.21.1",
"core-js": "^3.6.5",
"dayjs": "^1.10.5",
"postcss": "^7",
"tailwindcss": "npm:@tailwindcss/postcss7-pat@^2.0.2",
"vue": "^3.0.0",
"vue-i18n": "^9.1.6",
"vue-router": "^4.0.0-0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/piler-sfc": "^3.0.0",
"@vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^7.0.0",
"prettier": "^2.2.1",
"vue-cli-plugin-tailwind": "~2.0.6"
}
}
and here is the tailwind.config.js
const colors = require("tailwindcss/colors");
module.exports = {
purge: { content: ["./public/**/*.html", "./src/**/*.vue"] },
presets: [],
darkMode: false, // or 'media' or 'class'
theme: {
screens: {
sm: "640px",
md: "772px",
lg: "1024px",
xl: "1280px",
"2xl": "1536px",
},
colors: {
transparent: "transparent",
current: "currentColor",
black: colors.black,
white: colors.white,
gray: colors.coolGray,
red: colors.red,
yellow: colors.amber,
green: colors.emerald,
blue: colors.blue,
indigo: colors.indigo,
purple: colors.violet,
pink: colors.pink,
linen: "#E0DEDA",
"linen-dark": "#C9C3B7",
"linen-darker": "#999181",
},
spacing: {
px: "1px",
0: "0px",
0.5: "0.125rem",
1: "0.25rem",
1.5: "0.375rem",
2: "0.5rem",
2.5: "0.625rem",
3: "0.75rem",
3.5: "0.875rem",
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",
16: "4rem",
20: "5rem",
24: "6rem",
28: "7rem",
32: "8rem",
36: "9rem",
40: "10rem",
44: "11rem",
48: "12rem",
52: "13rem",
56: "14rem",
60: "15rem",
64: "16rem",
72: "18rem",
80: "20rem",
96: "24rem",
},
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",
},
backgroundColor: (theme) => theme("colors"),
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))",
texture: "url('~@/some/path/to-an-image.png')",
},
backgroundOpacity: (theme) => theme("opacity"),
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",
},
borderColor: (theme) => ({
...theme("colors"),
DEFAULT: theme("colors.gray.200", "currentColor"),
}),
borderOpacity: (theme) => theme("opacity"),
borderRadius: {
none: "0px",
sm: "0.125rem",
DEFAULT: "0.25rem",
md: "0.375rem",
lg: "0.5rem",
xl: "0.75rem",
"2xl": "1rem",
"3xl": "1.5rem",
full: "9999px",
},
borderWidth: {
DEFAULT: "1px",
0: "0px",
2: "2px",
4: "4px",
8: "8px",
},
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",
},
container: {},
cursor: {
auto: "auto",
default: "default",
pointer: "pointer",
wait: "wait",
text: "text",
move: "move",
help: "help",
"not-allowed": "not-allowed",
},
divideColor: (theme) => theme("borderColor"),
divideOpacity: (theme) => theme("borderOpacity"),
divideWidth: (theme) => theme("borderWidth"),
fill: { current: "currentColor" },
flex: {
1: "1 1 0%",
auto: "1 1 auto",
initial: "0 1 auto",
none: "none",
},
flexGrow: {
0: "0",
DEFAULT: "1",
},
flexShrink: {
0: "0",
DEFAULT: "1",
},
fontFamily: {
sans: [
"ui-sans-serif",
"system-ui",
"-apple-system",
"BlinkMacSystemFont",
'"Segoe UI"',
"Roboto",
'"Helvetica Neue"',
"Arial",
'"Noto Sans"',
"sans-serif",
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
'"Noto Color Emoji"',
],
serif: [
"ui-serif",
"Georgia",
"Cambria",
'"Times New Roman"',
"Times",
"serif",
],
mono: [
"ui-monospace",
"SFMono-Regular",
"Menlo",
"Monaco",
"Consolas",
'"Liberation Mono"',
'"Courier New"',
"monospace",
],
"cormorant-uprignt": ["Cormorant Upright", "serif"],
"cormorant-sc": ["Cormorant SC", "serif"],
},
fontSize: {
"2xs": ["0.5rem", { lineHeight: "0.7rem" }],
xs: ["0.75rem", { lineHeight: "1rem" }],
sm: ["0.875rem", { lineHeight: "1.25rem" }],
base: ["1rem", { lineHeight: "1.5rem" }],
lg: ["1.125rem", { lineHeight: "1.75rem" }],
xl: ["1.25rem", { lineHeight: "1.75rem" }],
"2xl": ["1.5rem", { lineHeight: "2rem" }],
"3xl": ["1.875rem", { lineHeight: "2.25rem" }],
"4xl": ["2.25rem", { lineHeight: "2.5rem" }],
"5xl": ["3rem", { lineHeight: "1" }],
"6xl": ["3.75rem", { lineHeight: "1" }],
"7xl": ["4.5rem", { lineHeight: "1" }],
"8xl": ["6rem", { lineHeight: "1" }],
"9xl": ["8rem", { lineHeight: "1" }],
},
fontWeight: {
thin: "100",
extralight: "200",
light: "300",
normal: "400",
medium: "500",
semibold: "600",
bold: "700",
extrabold: "800",
black: "900",
},
gap: (theme) => theme("spacing"),
gradientColorStops: (theme) => theme("colors"),
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: {
auto: "auto",
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",
},
gridColumnStart: {
auto: "auto",
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",
},
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: {
auto: "auto",
1: "1",
2: "2",
3: "3",
4: "4",
5: "5",
6: "6",
7: "7",
},
gridRowEnd: {
auto: "auto",
1: "1",
2: "2",
3: "3",
4: "4",
5: "5",
6: "6",
7: "7",
},
gridTemplateColumns: {
none: "none",
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))",
},
gridTemplateRows: {
none: "none",
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))",
},
height: (theme) => ({
auto: "auto",
...theme("spacing"),
"1/2": "50%",
"1/3": "33.333333%",
"2/3": "66.666667%",
"1/4": "25%",
"2/4": "50%",
"3/4": "75%",
"1/5": "20%",
"2/5": "40%",
"3/5": "60%",
"4/5": "80%",
"1/6": "16.666667%",
"2/6": "33.333333%",
"3/6": "50%",
"4/6": "66.666667%",
"5/6": "83.333333%",
full: "100%",
screen: "100vh",
"7/8-screen": "87.5vh",
"3/4-screen": "75vh",
"1/2-screen": "50vh",
"1/3-screen": "33.333333vh",
"1/4-screen": "25vh",
}),
inset: (theme, { negative }) => ({
auto: "auto",
...theme("spacing"),
...negative(theme("spacing")),
"1/2": "50%",
"1/3": "33.333333%",
"2/3": "66.666667%",
"1/4": "25%",
"2/4": "50%",
"3/4": "75%",
full: "100%",
"-1/2": "-50%",
"-1/3": "-33.333333%",
"-2/3": "-66.666667%",
"-1/4": "-25%",
"-2/4": "-50%",
"-3/4": "-75%",
"-full": "-100%",
}),
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: {
none: "1",
tight: "1.25",
snug: "1.375",
normal: "1.5",
relaxed: "1.625",
loose: "2",
3: ".75rem",
4: "1rem",
5: "1.25rem",
6: "1.5rem",
7: "1.75rem",
8: "2rem",
9: "2.25rem",
10: "2.5rem",
},
listStyleType: {
none: "none",
disc: "disc",
decimal: "decimal",
},
margin: (theme, { negative }) => ({
auto: "auto",
...theme("spacing"),
...negative(theme("spacing")),
}),
maxHeight: (theme) => ({
...theme("spacing"),
full: "100%",
screen: "100vh",
}),
maxWidth: (theme, { breakpoints }) => ({
none: "none",
0: "0rem",
xs: "20rem",
sm: "24rem",
md: "28rem",
lg: "32rem",
xl: "36rem",
"2xl": "42rem",
"3xl": "48rem",
"4xl": "56rem",
"5xl": "64rem",
"6xl": "72rem",
"7xl": "80rem",
full: "100%",
min: "min-content",
max: "max-content",
prose: "65ch",
...breakpoints(theme("screens")),
}),
minHeight: {
0: "0px",
full: "100%",
screen: "100vh",
},
minWidth: {
0: "0px",
full: "100%",
min: "min-content",
max: "max-content",
},
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: {
first: "-9999",
last: "9999",
none: "0",
1: "1",
2: "2",
3: "3",
4: "4",
5: "5",
6: "6",
7: "7",
8: "8",
9: "9",
10: "10",
11: "11",
12: "12",
},
outline: {
none: ["2px solid transparent", "2px"],
white: ["2px dotted white", "2px"],
black: ["2px dotted black", "2px"],
},
padding: (theme) => theme("spacing"),
placeholderColor: (theme) => theme("colors"),
placeholderOpacity: (theme) => theme("opacity"),
ringColor: (theme) => ({
DEFAULT: theme("colors.blue.500", "#3b82f6"),
...theme("colors"),
}),
ringOffsetColor: (theme) => theme("colors"),
ringOffsetWidth: {
0: "0px",
1: "1px",
2: "2px",
4: "4px",
8: "8px",
},
ringOpacity: (theme) => ({
DEFAULT: "0.5",
...theme("opacity"),
}),
ringWidth: {
DEFAULT: "3px",
0: "0px",
1: "1px",
2: "2px",
4: "4px",
8: "8px",
},
rotate: {
"-180": "-180deg",
"-90": "-90deg",
"-45": "-45deg",
"-12": "-12deg",
"-6": "-6deg",
"-3": "-3deg",
"-2": "-2deg",
"-1": "-1deg",
0: "0deg",
1: "1deg",
2: "2deg",
3: "3deg",
6: "6deg",
12: "12deg",
45: "45deg",
90: "90deg",
180: "180deg",
},
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",
},
skew: {
"-12": "-12deg",
"-6": "-6deg",
"-3": "-3deg",
"-2": "-2deg",
"-1": "-1deg",
0: "0deg",
1: "1deg",
2: "2deg",
3: "3deg",
6: "6deg",
12: "12deg",
},
space: (theme, { negative }) => ({
...theme("spacing"),
...negative(theme("spacing")),
}),
stroke: {
current: "currentColor",
},
strokeWidth: {
0: "0",
1: "1",
2: "2",
},
textColor: (theme) => theme("colors"),
textOpacity: (theme) => theme("opacity"),
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: {
DEFAULT: "150ms",
75: "75ms",
100: "100ms",
150: "150ms",
200: "200ms",
300: "300ms",
500: "500ms",
700: "700ms",
1000: "1000ms",
},
transitionProperty: {
none: "none",
all: "all",
DEFAULT:
"background-color, border-color, color, fill, stroke, opacity, box-shadow, transform",
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: (theme, { negative }) => ({
...theme("spacing"),
...negative(theme("spacing")),
"1/2": "50%",
"1/3": "33.333333%",
"2/3": "66.666667%",
"1/4": "25%",
"2/4": "50%",
"3/4": "75%",
full: "100%",
"-1/2": "-50%",
"-1/3": "-33.333333%",
"-2/3": "-66.666667%",
"-1/4": "-25%",
"-2/4": "-50%",
"-3/4": "-75%",
"-full": "-100%",
}),
width: (theme) => ({
auto: "auto",
...theme("spacing"),
"1/2": "50%",
"1/3": "33.333333%",
"2/3": "66.666667%",
"1/4": "25%",
"2/4": "50%",
"3/4": "75%",
"1/5": "20%",
"2/5": "40%",
"3/5": "60%",
"4/5": "80%",
"1/6": "16.666667%",
"2/6": "33.333333%",
"3/6": "50%",
"4/6": "66.666667%",
"5/6": "83.333333%",
"1/12": "8.333333%",
"2/12": "16.666667%",
"3/12": "25%",
"4/12": "33.333333%",
"5/12": "41.666667%",
"6/12": "50%",
"7/12": "58.333333%",
"8/12": "66.666667%",
"9/12": "75%",
"10/12": "83.333333%",
"11/12": "91.666667%",
full: "100%",
screen: "100vw",
"3/4-screen": "75vw",
"1/2-screen": "50vw",
"1/3-screen": "33.333333vw",
"1/4-screen": "25vw",
min: "min-content",
max: "max-content",
}),
zIndex: {
auto: "auto",
0: "0",
10: "10",
20: "20",
30: "30",
40: "40",
50: "50",
},
},
variantOrder: [
"first",
"last",
"odd",
"even",
"visited",
"checked",
"group-hover",
"group-focus",
"focus-within",
"hover",
"focus",
"focus-visible",
"active",
"disabled",
],
variants: {
accessibility: ["responsive", "focus-within", "focus"],
alignContent: ["responsive"],
alignItems: ["responsive"],
alignSelf: ["responsive"],
animation: ["responsive", "hover"],
appearance: ["responsive"],
backgroundAttachment: ["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"],
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", "focus"],
boxShadow: ["responsive", "group-hover", "focus-within", "hover", "focus"],
boxSizing: ["responsive"],
clear: ["responsive"],
container: ["responsive"],
cursor: ["responsive"],
display: ["responsive"],
divideColor: ["responsive", "dark"],
divideOpacity: ["responsive", "dark"],
divideStyle: ["responsive"],
divideWidth: ["responsive"],
fill: ["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"],
gridAutoColumns: ["responsive"],
gridAutoFlow: ["responsive"],
gridAutoRows: ["responsive"],
gridColumn: ["responsive"],
gridColumnEnd: ["responsive"],
gridColumnStart: ["responsive"],
gridRow: ["responsive"],
gridRowEnd: ["responsive"],
gridRowStart: ["responsive"],
gridTemplateColumns: ["responsive"],
gridTemplateRows: ["responsive"],
height: ["responsive"],
inset: ["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"],
objectFit: ["responsive"],
objectPosition: ["responsive"],
opacity: ["responsive", "group-hover", "focus-within", "hover", "focus"],
order: ["responsive"],
outline: ["responsive", "focus-within", "focus"],
overflow: ["responsive", "hover"],
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"],
scale: ["responsive", "hover", "focus"],
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"],
},
plugins: [],
};
-
Do you have a
tailwind.config.jsfile? – Shaya Ulman Commented Jun 27, 2021 at 15:23 - I do, I'll add it to the question – lorem_impus Commented Jun 27, 2021 at 18:59
- Try removing the config file, do you still get the error? – Shaya Ulman Commented Jun 27, 2021 at 22:47
-
Well no, but now my self-defined utilities are gone. And I'm pretty sure it causes these new errors saying that
bg-linen class does not exist, but bg-none does. If you're sure that bg-linen exists, make sure that any @import statements are being properly processed before Tailwind CSS sees your CSS, as @apply can only be used for classes in the same CSS tree.:( – lorem_impus Commented Jun 28, 2021 at 3:23 - OK, but it's very possible that something in the config is causing the error, I would try to remove all the custom utilities, then adding them back chunk by chunk, then check when the first error is showing up again, so you will now where the problem is. – Shaya Ulman Commented Jun 28, 2021 at 10:43
1 Answer
Reset to default 10Removing presets: [], from tailwind.config.js fixed it for me.
本文标签：
版权声明：本文标题：javascript - Tailwind CSS: Cannot convert undefined or null to object & getProcessedPlugins is not a function - Stack Ov 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742123644a2421838.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论