Tailwindcss 不适用于 next.js;配置有什么问题?
Tailwindcss not working with next.js; what is wrong with the configuration?
出于某种原因,tailwind
在 next.js 中无法正确呈现。
我想知道是不是我的设置有问题?
样式文件夹 - tailwind.css
@tailwind 基地;
/* Write your own custom base styles here */
/* Start purging... */
@tailwind components;
/* Stop purging. */
/* Write you own custom component styles here */
.btn-blue {
@apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}
/* Start purging... */
@tailwind utilities;
/* Stop purging. */
/* Your own custom utilities */
.....
_app.js
import React from "react";
// import "styles/global.scss";
import 'styles/tailwind.css'
import NavbarCustom from "components/Layout/NavbarCustom";
import Footer from "components/Layout/Footer";
import "util/analytics.js";
import { ProvideAuth } from "util/auth.js";
function MyApp({ Component, pageProps }) {
return (
<ProvideAuth>
<>
<NavbarCustom
bg="white"
variant="light"
expand="md"
logo="icons/Logo_512px.png"
/>
<Component {...pageProps} />
我做错了什么?好迷茫,一般这样设置就好了
顺便说一句,这是网站 - https://moodmap.app/ .
使用下面的信息进行了更改,奇怪的是仍然是同样的问题。
https://moodmap.app/ 是站点示例。
tailwind.config.js
module.exports = {
future: {
removeDeprecatedGapUtilities: true,
},
purge: ['./components/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {
colors: {
'accent-1': '#333',
},
},
},
variants: {},
plugins: [],
}
postcss.config.js
module.exports = {
plugins: [
'tailwindcss',
'postcss-flexbugs-fixes',
[
'postcss-preset-env',
{
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
features: {
'custom-properties': false,
},
},
],
],
}
{
"name": "MoodMap",
"version": "0.1.0",
"private": true,
"keywords": [
"MoodMap"
],
"dependencies": {
"@analytics/google-analytics": "0.2.2",
"@stripe/stripe-js": "^1.5.0",
"analytics": "0.3.1",
"fake-auth": "0.1.7",
"mailchimp-api-v3": "1.13.1",
"next": "9.5.3",
"query-string": "6.9.0",
"raw-body": "^2.4.1",
"rc-year-calendar": "^1.0.2",
"react": "16.12.0",
"react-dom": "16.12.0",
"react-hook-form": "4.10.1",
"react-query": "2.12.1",
"react-transition-group": "^4.4.1",
"stripe": "^8.52.0"
},
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"stripe-webhook": "stripe listen --forward-to localhost:3000/api/stripe-webhook"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"postcss-flexbugs-fixes": "^4.2.1",
"postcss-preset-env": "^6.7.0",
"stylelint": "^13.7.1",
"stylelint-config-standard": "^20.0.0",
"tailwindcss": "^1.8.9"
}
}
谢谢!
我觉得你的设置太大了。现在你可以用更简单的东西来实现这一点。
首先,我认为 CSS 不再需要加载到 nextjs 中,并且原生支持模块。 (所以你可以用CSS东西删除这个)
其次,如果您使用较新的版本,tailwind 不再需要如此复杂的设置。
因此您将需要安装 postcss-preset-env,但现在确实不需要大配置。
看看这个例子https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss
我的项目也有同样的问题,但我尝试像这样更改 globals.css
:
之前
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900');
@tailwind base;
@tailwind components;
@tailwind utilities;
之后
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import './base.css';
@import 'tailwindcss/utilities';
我在一些文件中遇到了同样的问题。
删除所有内联顺风 类 并将它们放入 CSS 文件中 @apply
后效果很好。
对我来说,解决方案是将 ./src/...
添加到 tailwind.config.js
中的内容源。官方 Next.JS + Tailwindcss 示例不支持 src 文件夹。
我的一个项目安装了这些包版本
"next": "11.1.0",
"autoprefixer": "^10.3.3",
"postcss": "^8.3.6",
"tailwindcss": "^2.2.8"
tailwind.config.js
中的此设置有效:
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
};
最近我用这些包开始了一个新项目:
"next": "12.0.8",
"autoprefixer": "^10.4.2",
"postcss": "^8.4.5",
"tailwindcss": "^3.0.15"
之前的配置设置无效。所以我将其更改为:
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
};
postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
tailwind.config.js
module.exports = {
mode: 'jit',
content: [
"./**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
global.css
@tailwind base;
@tailwind components;
@tailwind utilities;
我也遇到过这种情况,但我的解决办法是编辑 tailwind.connfig.js
取决于版本
对于版本 2
module.exports = {
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
版本 3
module.exports = {
content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
module.exports = {
content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}', './containers/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
<!-- You have to add paths to folders in which you are using
tailwindcss in the tailwind.config.js file -->
<!-- Example: I add './containers/**/*.{js,ts,jsx,tsx}' to the "content"-->
对于使用 nextJS 创建项目的开发人员。
请注意 tailwind.config.js
的内容需要正确的文件路径。
module.exports = {
content: ["./pages/*.{html,js,jsx}"],
theme: {
extend: {},
},
plugins: [],
}
例如,如果您使用 nextjs 创建一个项目,您将有一个 pages
文件夹,您的 index.js
文件位于该文件夹中。因此 https://tailwindcss.com/docs/installation/using-postcss 上的代码片段(见下文)并不完全匹配。改成上面的或者自己喜欢的。
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
经过几个小时的摆弄,我终于以最奇怪的方式工作了;我刚刚在我的一个组件中的一个元素中添加了一个 class,然后在 global.css 文件中为该 class 编写了自定义 CSS,然后所有顺风 class es反映。这可能是他们需要跟踪和修复的 Tailwind 代码中的错误。
对于仍然对以下版本有疑问的人:
"autoprefixer": "^10.4.7",
"postcss": "^8.4.13",
"tailwindcss": "^3.0.24",
在 Nx + Next.js 环境中,您可以简单地使用以下配置文件:
// postcss.config.js
const { join } = require('path');
module.exports = {
plugins: {
tailwindcss: {
config: join(__dirname, 'tailwind.config.js'),
},
autoprefixer: {},
},
};
// taildiwn.config.js
const { join } = require('path');
module.exports = {
content: [
join(__dirname, './pages/**/*.{js,ts,jsx,tsx}'),
join(__dirname, './src/**/*.{js,ts,jsx,tsx}'),
],
theme: {
extend: {},
},
plugins: [],
};
出于某种原因,tailwind
在 next.js 中无法正确呈现。
我想知道是不是我的设置有问题?
样式文件夹 - tailwind.css
@tailwind 基地;
/* Write your own custom base styles here */
/* Start purging... */
@tailwind components;
/* Stop purging. */
/* Write you own custom component styles here */
.btn-blue {
@apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}
/* Start purging... */
@tailwind utilities;
/* Stop purging. */
/* Your own custom utilities */
.....
_app.js
import React from "react";
// import "styles/global.scss";
import 'styles/tailwind.css'
import NavbarCustom from "components/Layout/NavbarCustom";
import Footer from "components/Layout/Footer";
import "util/analytics.js";
import { ProvideAuth } from "util/auth.js";
function MyApp({ Component, pageProps }) {
return (
<ProvideAuth>
<>
<NavbarCustom
bg="white"
variant="light"
expand="md"
logo="icons/Logo_512px.png"
/>
<Component {...pageProps} />
我做错了什么?好迷茫,一般这样设置就好了
顺便说一句,这是网站 - https://moodmap.app/ .
使用下面的信息进行了更改,奇怪的是仍然是同样的问题。
https://moodmap.app/ 是站点示例。
tailwind.config.js
module.exports = {
future: {
removeDeprecatedGapUtilities: true,
},
purge: ['./components/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {
colors: {
'accent-1': '#333',
},
},
},
variants: {},
plugins: [],
}
postcss.config.js
module.exports = {
plugins: [
'tailwindcss',
'postcss-flexbugs-fixes',
[
'postcss-preset-env',
{
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
features: {
'custom-properties': false,
},
},
],
],
}
{
"name": "MoodMap",
"version": "0.1.0",
"private": true,
"keywords": [
"MoodMap"
],
"dependencies": {
"@analytics/google-analytics": "0.2.2",
"@stripe/stripe-js": "^1.5.0",
"analytics": "0.3.1",
"fake-auth": "0.1.7",
"mailchimp-api-v3": "1.13.1",
"next": "9.5.3",
"query-string": "6.9.0",
"raw-body": "^2.4.1",
"rc-year-calendar": "^1.0.2",
"react": "16.12.0",
"react-dom": "16.12.0",
"react-hook-form": "4.10.1",
"react-query": "2.12.1",
"react-transition-group": "^4.4.1",
"stripe": "^8.52.0"
},
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"stripe-webhook": "stripe listen --forward-to localhost:3000/api/stripe-webhook"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"postcss-flexbugs-fixes": "^4.2.1",
"postcss-preset-env": "^6.7.0",
"stylelint": "^13.7.1",
"stylelint-config-standard": "^20.0.0",
"tailwindcss": "^1.8.9"
}
}
谢谢!
我觉得你的设置太大了。现在你可以用更简单的东西来实现这一点。
首先,我认为 CSS 不再需要加载到 nextjs 中,并且原生支持模块。 (所以你可以用CSS东西删除这个)
其次,如果您使用较新的版本,tailwind 不再需要如此复杂的设置。
因此您将需要安装 postcss-preset-env,但现在确实不需要大配置。
看看这个例子https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss
我的项目也有同样的问题,但我尝试像这样更改 globals.css
:
之前
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900');
@tailwind base;
@tailwind components;
@tailwind utilities;
之后
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import './base.css';
@import 'tailwindcss/utilities';
我在一些文件中遇到了同样的问题。
删除所有内联顺风 类 并将它们放入 CSS 文件中 @apply
后效果很好。
对我来说,解决方案是将 ./src/...
添加到 tailwind.config.js
中的内容源。官方 Next.JS + Tailwindcss 示例不支持 src 文件夹。
我的一个项目安装了这些包版本
"next": "11.1.0",
"autoprefixer": "^10.3.3",
"postcss": "^8.3.6",
"tailwindcss": "^2.2.8"
tailwind.config.js
中的此设置有效:
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
};
最近我用这些包开始了一个新项目:
"next": "12.0.8",
"autoprefixer": "^10.4.2",
"postcss": "^8.4.5",
"tailwindcss": "^3.0.15"
之前的配置设置无效。所以我将其更改为:
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
};
postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
tailwind.config.js
module.exports = {
mode: 'jit',
content: [
"./**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
global.css
@tailwind base;
@tailwind components;
@tailwind utilities;
我也遇到过这种情况,但我的解决办法是编辑 tailwind.connfig.js
取决于版本
对于版本 2
module.exports = {
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
版本 3
module.exports = {
content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
module.exports = {
content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}', './containers/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
<!-- You have to add paths to folders in which you are using
tailwindcss in the tailwind.config.js file -->
<!-- Example: I add './containers/**/*.{js,ts,jsx,tsx}' to the "content"-->
对于使用 nextJS 创建项目的开发人员。
请注意 tailwind.config.js
的内容需要正确的文件路径。
module.exports = {
content: ["./pages/*.{html,js,jsx}"],
theme: {
extend: {},
},
plugins: [],
}
例如,如果您使用 nextjs 创建一个项目,您将有一个 pages
文件夹,您的 index.js
文件位于该文件夹中。因此 https://tailwindcss.com/docs/installation/using-postcss 上的代码片段(见下文)并不完全匹配。改成上面的或者自己喜欢的。
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
经过几个小时的摆弄,我终于以最奇怪的方式工作了;我刚刚在我的一个组件中的一个元素中添加了一个 class,然后在 global.css 文件中为该 class 编写了自定义 CSS,然后所有顺风 class es反映。这可能是他们需要跟踪和修复的 Tailwind 代码中的错误。
对于仍然对以下版本有疑问的人:
"autoprefixer": "^10.4.7",
"postcss": "^8.4.13",
"tailwindcss": "^3.0.24",
在 Nx + Next.js 环境中,您可以简单地使用以下配置文件:
// postcss.config.js
const { join } = require('path');
module.exports = {
plugins: {
tailwindcss: {
config: join(__dirname, 'tailwind.config.js'),
},
autoprefixer: {},
},
};
// taildiwn.config.js
const { join } = require('path');
module.exports = {
content: [
join(__dirname, './pages/**/*.{js,ts,jsx,tsx}'),
join(__dirname, './src/**/*.{js,ts,jsx,tsx}'),
],
theme: {
extend: {},
},
plugins: [],
};