我使用 Next.js 13 创建了一个新项目,并像往常一样添加了 Tailwind,但我所做的更改不会立即应用,需要刷新整个页面才能生效。我粘贴了我的配置。也许我错过了一些东西。
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx}",
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
"./layout/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
// some customization here, omitting
},
},
plugins: [],
}
Run Code Online (Sandbox Code Playgroud)
.babelrc
{
"presets": ["next/babel"],
"plugins": []
}
Run Code Online (Sandbox Code Playgroud)
全局变量.css
@tailwind base;
@tailwind components;
@tailwind utilities;
Run Code Online (Sandbox Code Playgroud)
我将它们包含在 _app.tsx 中import '../styles/globals.css'
另外,这是我的依赖项。
"dependencies": {
"@react-google-maps/api": "^2.13.1",
"@types/node": "18.11.9",
"@types/react": "18.0.24",
"@types/react-dom": "18.0.8",
"axios": "^1.1.3",
"eslint": "8.26.0",
"eslint-config-next": "13.0.2",
"next": "13.0.2",
"react": "18.2.0",
"react-circular-progressbar": "^2.1.0",
"react-dom": "18.2.0",
"react-icons": "^4.6.0", …Run Code Online (Sandbox Code Playgroud)