如何解决Tailwind CSS：无法将 undefined 或 null 转换为 object & getProcessedPlugins 不是函数
我正在使用 Vue 3 和 Tailwind CSS 开发一个网络应用程序。我的构建失败并发现了这 2 个错误。
我一直在寻找答案并找到了 https://github.com/tailwindlabs/tailwindcss/issues/861 和 https://github.com/tailwindlabs/tailwindcss/issues/2810。但两者都不适合我。我尝试升级 npm install tailwindcss@latest postcss@latest autoprefixer@latest，但事情变得更加疯狂。
我恢复了它，但现在我什至无法运行我的开发服务器并收到相同的错误。有人可以帮忙吗？
这是我现在的package.json
{
"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-compat": "^2.0.2","autoprefixer": "^9","axios": "^0.21.1","core-js": "^3.6.5","dayjs": "^1.10.5","postcss": "^7","tailwindcss": "npm:@tailwindcss/postcss7-compat@^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/compiler-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"
}
}
这里是 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.2,1) infinite",pulse: "pulse 2s cubic-bezier(0.4,0.6,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,"gradient-to-r": "linear-gradient(to right,"gradient-to-br":
"linear-gradient(to bottom right,"gradient-to-b": "linear-gradient(to bottom,"gradient-to-bl":
"linear-gradient(to bottom left,"gradient-to-l": "linear-gradient(to left,"gradient-to-tl":
"linear-gradient(to top left,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",2: "2px",4: "4px",8: "8px",BoxShadow: {
sm: "0 1px 2px 0 rgba(0,0.05)",DEFAULT:
"0 1px 3px 0 rgba(0,0.1),0 1px 2px 0 rgba(0,0.06)",md:
"0 4px 6px -1px rgba(0,0 2px 4px -1px rgba(0,lg:
"0 10px 15px -3px rgba(0,0 4px 6px -2px rgba(0,xl:
"0 20px 25px -5px rgba(0,0 10px 10px -5px rgba(0,0.04)","2xl": "0 25px 50px -12px rgba(0,0.25)",inner: "inset 0 2px 4px 0 rgba(0,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",flexGrow: {
0: "0",DEFAULT: "1",flexShrink: {
0: "0",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",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","2xl": ["1.5rem",{ lineHeight: "2rem" }],"3xl": ["1.875rem",{ lineHeight: "2.25rem" }],"4xl": ["2.25rem",{ lineHeight: "2.5rem" }],"5xl": ["3rem",{ lineHeight: "1" }],"6xl": ["3.75rem","7xl": ["4.5rem","8xl": ["6rem","9xl": ["8rem",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",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",gridRow: {
auto: "auto",gridRowStart: {
auto: "auto",gridRowEnd: {
auto: "auto",gridTemplateColumns: {
none: "none",1: "repeat(1,minmax(0,1fr))",2: "repeat(2,3: "repeat(3,4: "repeat(4,5: "repeat(5,6: "repeat(6,7: "repeat(7,8: "repeat(8,9: "repeat(9,10: "repeat(10,11: "repeat(11,12: "repeat(12,gridTemplateRows: {
none: "none",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",...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%",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,1,1)","50%": {
transform: "none",animationTimingFunction: "cubic-bezier(0,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",listStyleType: {
none: "none",disc: "disc",decimal: "decimal",margin: (theme,maxHeight: (theme) => ({
...theme("spacing"),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",prose: "65ch",...breakpoints(theme("screens")),minHeight: {
0: "0px",minWidth: {
0: "0px",objectPosition: {
bottom: "bottom",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",outline: {
none: ["2px solid transparent","2px"],white: ["2px dotted white",black: ["2px dotted black",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",ringOpacity: (theme) => ({
DEFAULT: "0.5",...theme("opacity"),ringWidth: {
DEFAULT: "3px",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",105: "1.05",110: "1.1",125: "1.25",150: "1.5",skew: {
"-12": "-12deg",space: (theme,{ negative }) => ({
...theme("spacing"),stroke: {
current: "currentColor",strokeWidth: {
0: "0",textColor: (theme) => theme("colors"),textOpacity: (theme) => theme("opacity"),transformOrigin: {
center: "center","top-right": "top right","bottom-right": "bottom right",bottom: "bottom","bottom-left": "bottom 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",transitionProperty: {
none: "none",all: "all",DEFAULT:
"background-color,border-color,color,fill,stroke,opacity,Box-shadow,transform",colors: "background-color,stroke",opacity: "opacity",shadow: "Box-shadow",transform: "transform",transitionTimingFunction: {
DEFAULT: "cubic-bezier(0.4,linear: "linear",in: "cubic-bezier(0.4,out: "cubic-bezier(0,"in-out": "cubic-bezier(0.4,translate: (theme,width: (theme) => ({
auto: "auto","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%",screen: "100vw","3/4-screen": "75vw","1/2-screen": "50vw","1/3-screen": "33.333333vw","1/4-screen": "25vw",zIndex: {
auto: "auto",0: "0",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"],alignContent: ["responsive"],alignItems: ["responsive"],alignSelf: ["responsive"],animation: ["responsive","hover"],appearance: ["responsive"],backgroundAttachment: ["responsive"],backgroundClip: ["responsive"],backgroundColor: [
"responsive","dark",backgroundImage: ["responsive"],backgroundOpacity: [
"responsive",backgroundPosition: ["responsive"],backgroundRepeat: ["responsive"],backgroundSize: ["responsive"],borderCollapse: ["responsive"],borderColor: [
"responsive",borderOpacity: [
"responsive",borderRadius: ["responsive"],borderStyle: ["responsive"],borderWidth: ["responsive",BoxShadow: ["responsive",BoxSizing: ["responsive"],clear: ["responsive"],container: ["responsive"],cursor: ["responsive"],display: ["responsive"],divideColor: ["responsive","dark"],divideOpacity: ["responsive",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",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",order: ["responsive"],outline: ["responsive",overflow: ["responsive",overscrollBehavior: ["responsive"],padding: ["responsive"],placeContent: ["responsive"],placeItems: ["responsive"],placeSelf: ["responsive"],placeholderColor: ["responsive",placeholderOpacity: ["responsive",pointerEvents: ["responsive"],position: ["responsive"],resize: ["responsive"],ringColor: ["responsive",ringOffsetColor: ["responsive",ringOffsetWidth: ["responsive",ringOpacity: ["responsive",ringWidth: ["responsive",rotate: ["responsive",scale: ["responsive",skew: ["responsive",space: ["responsive"],stroke: ["responsive"],strokeWidth: ["responsive"],tableLayout: ["responsive"],textAlign: ["responsive"],textColor: [
"responsive",textdecoration: [
"responsive",textOpacity: [
"responsive",textOverflow: ["responsive"],textTransform: ["responsive"],transform: ["responsive"],transformOrigin: ["responsive"],transitionDelay: ["responsive"],transitionDuration: ["responsive"],transitionProperty: ["responsive"],transitionTimingFunction: ["responsive"],translate: ["responsive",userSelect: ["responsive"],verticalAlign: ["responsive"],visibility: ["responsive"],whitespace: ["responsive"],width: ["responsive"],wordBreak: ["responsive"],zIndex: ["responsive",plugins: [],};
解决方法
从 pd.np.array 中删除 presets: [], 为我修复了它。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
