按照网上的各种教程，很清楚的知道要修改以下几处： 1、引入3个css到 global.css，并且在 _app.js内引入 2、tailwind.config.js 3、postcss.config.js
以下是文件内容，注意我的 tailwindcss.config.js有2种格式，这就是解决了我的问题
global.css
/* ./styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
}
tailwind.config.js 方式一
"next": "^13.4.10",
"postcss": "^8.4.21",
"tailwindcss": "^3.2.7",
const config = {
content: ['./pages/**/*.{js,ts,jsx,tsx,mdx}', './components/**/*.{js,ts,jsx,tsx,mdx}', './app/**/*.{js,ts,jsx,tsx,mdx}'],
theme: {
extend: {
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))'
}
}
},
plugins: []
}
export default config
tailwind.config.js 方式二(非Next.js项目)
module.exports = {
purge: ['./src/**/*.html', './src/**/*.tsx', './src/**/*.ts'],
darkMode: false, // or 'media' or 'class'
theme: {
backgroundOpacity: {
80: '0.8'
},
screens: {
sm: '768px',
md: '1240px',
m: '430px',
mm: '495px'
},
opacity: {
0: '0',
10: '0.1',
30: '0.3',
40: '0.4',
50: '0.5',
75: '0.75',
80: '0.8',
85: '0.85',
100: '1'
},
borderWidth: {
DEFAULT: '1px',
1: '0.5px'
},
scale: {
100: '1',
125: '1.25',
150: '1.5',
200: '2'
},
colors: {
white: '#FFF',
black: '#000',
red: '#FF3C3C',
green: '#55E0B5',
blue1: '#1261FF',
blue2: '#1161FA',
blue3: '#1161FB',
blue4: '#2670FC',
blue5: '#29C0ED',
blue6: '#0C81E5',
blue7: '#0C81E5',
bg1: '#F5F5F5',
blue8: '#707070',
blue9: '#DADADA',
blue10: '#696969',
'green-wechat': '#15C160',
transparent: 'rgba(0,0,0,0)',
transparent1: 'rgba(21,47,98,0.1)',
warn: '#F43530',
blue: {
info: '#4C84C4',
primary: '#1890ff'
},
gray: {
gray1: '#F5F5F1',
gray2: '#ECECE1',
gray3: '#DFDFD2',
gray4: '#cccccc',
gray5: '#d9d9d9',
gray6: '#BDBDBD',
gray7: '#D1D1D1',
gray8: '#707070',
gray9: '#F3F3F3',
gray10: '#6F6F6F',
gray11: '#111111',
gray12: '#F8F8F8',
gray13: '#707070',
gray14: '#969696',
gray15: '#F7F7F7',
gray16: '#F2F2F2',
gray17: '#E2E2E2',
gray18: '#575757',
gray19: '#DADADA',
gray20: '#6E6E6E',
gray21: '#F6F6F6',
gray22: '#DEDEDE',
gray23: '#666666',
gray24: '#C7C7C7',
gray25: '#EFEFF2',
gray26: '#000000',
gray27: '#ffffff',
gray28: '#E1E1E1',
gray29: '#707070',
gray30: '#091F4A',
gray31: '#74A4FF',
gray32: '#B6B6B6',
gray33: '#C4C4C4',
gray34: '#333333',
gray35: '#353535',
gray36: '#535353',
gray37: '#d4d4d4',
gray38: '#e8e8e8',
gray39: '#c8c8c8',
gray40: '#1161FB',
gray41: '#0F53D3',
gray42: '#1890ff'
},
dark: {
1: '#333',
2: '#444',
3: '#666',
4: '#888',
5: '#111',
6: '#222'
},
text: {
main: '#333333',
secoundary: '#999999',
black: '#000'
}
},
fontSize: {
sm: '12px',
md: '14px',
base: '16px',
lg: '18px',
xl: '20px',
'2xl': '24px',
'3xl': '28px',
'4xl': '42px',
'5xl': '34px',
'6xl': '56px',
'7xl': '22px',
'8xl': '48px',
'9xl': '52px',
'10xl': '32px',
'11xl': '36px',
'12xl': '40px'
},
fontWeight: {
'ori-normal': 300,
normal: 400,
bold: 500,
height: 600
},
lineHeight: {
sm: '12px',
md: '14px',
base: '16px',
lg: '18px',
xl: '20px',
'2xl': '24px',
'3xl': '28px',
'4xl': '30px',
'5xl': '70px',
'7xl': '48px',
'8xl': '22px',
'9xl': '78px',
'10xl': '50px',
'11xl': '34px',
'12xl': '95px',
'13xl': '66px',
'14xl': '38px'
},
boxShadow: {
panel: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 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)',
none: 'none'
},
borderRadius: {
1: '4px',
2: '8px',
3: '12px',
4: '16px',
5: '20px',
6: '24px',
7: '5px',
8: '10px',
full: '9999px'
},
maxWidth: {
'1/2': '50%',
'1/3': '33.33%',
'2/3': '66.66%',
'1/4': '25%',
'3/4': '75%',
'1/6': '16.66%',
'1/5': '20%',
sm: '768px', // 768 - 24 - 24 = 720
md: '1024px' // 1024 - 24 - 24 = 976
},
inset: {
0: '0px'
},
spacing: {
0: '0px',
px: '1px',
1: '4px',
2: '8px',
3: '12px',
4: '16px',
5: '20px',
6: '24px',
7: '26px',
8: '32px',
9: '36px',
10: '40px',
11: '42px',
12: '48px',
14: '56px',
16: '60px',
18: '72px',
19: '30px',
20: '19px',
21: '92px',
22: '127px',
23: '120px',
24: '160px',
25: '100px',
26: '155px',
27: '2px',
28: '6px',
29: '96px',
30: '112px',
31: '85px',
32: '80px',
33: '180px',
34: '220px',
35: '84px',
36: '286px',
37: '14px',
38: '240px',
39: '105px',
40: '130px',
41: '44px',
42: '600px',
99: '300px',
43: '300px',
144: '144px',
44: '550px',
45: '150px',
46: '190px',
47: '210px',
48: '63px',
49: '70px',
50: '176px',
p1: '320px',
p2: '20px',
p3: '230px',
p4: '622px',
m1: '66px',
h1: '680px',
h2: '480px',
h3: '660px',
h4: '838px',
h5: '1240px',
h6: '498px',
h7: '500px',
h8: '1068px',
h9: '800px',
h10: '540px',
h11: '464px',
h12: '270px',
h13: '200px',
h14: '66px',
h15: '340px',
h16: '560px',
h17: '840px',
h18: '400px',
h19: '290px',
h20: '924px',
h21: '527px',
h22: '140px',
h23: '74px',
w1: '260px',
w2: '741px',
w3: '489px',
w4: '392px',
w5: '360px',
w6: '49px',
w7: '50px',
w8: '68px',
w9: '440px',
w10: '3px',
w11: '65px',
w12: '218px',
w13: '1920px',
w14: '1320px',
w15: '600px',
w16: '682px',
w17: '622px',
w18: '52px',
w19: '252px',
w20: '18px',
w21: '10px',
w22: '31.25%',
'1/3': '33.33%',
'2/3': '66.66%',
'1/2': '50%',
'1/5': '22.18%',
'48/1': '48.5%'
}
},
variants: {
extend: {
// display: ['hover'],
scale: ['hover'],
opacity: ['hover'],
cursor: ['hover'],
padding: ['hover'],
// opacity: ['active'],
borderColor: ['active', 'hover'],
// backgroundColor: ['hover'],
visibility: [, 'group-hover', 'hover', 'focus'],
backgroundSize: ['hover', 'focus'],
backgroundImage: ['hover', 'focus']
}
},
plugins: [],
corePlugins: {
position: true,
float: true,
backgroundOpacity: true,
objectFit: false,
objectPosition: true,
clear: false,
animation: true,
appearance: false,
divider: false,
fill: false,
gap: false,
gradientColorStops: true,
grid: false,
objectFit: false,
// objectPosition: false,
order: false,
// outline: false,
overscrollBehavior: true,
placeContent: false,
placeholder: false,
placeItems: false,
placeSelf: false,
resize: false,
ring: false,
// scale: false,
rotate: false,
skew: false,
stroke: false,
tableLayout: false,
// textDecoration: false,
textTransform: false,
// transform: false,
translate: true,
verticalAlign: false,
visibility: true,
// whitespace: false,
borderStyle: true
}
}
