Tailwindcss 不适用于 next.js；配置有什么问题？

Question

由于某种原因，顺风在 next.js 中无法正确呈现。

我想知道我的设置是否有问题？

样式文件夹 - tailwind.css

@顺风基地；

/* 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://mmap-1xr646x4a.vercel.app/。

使用下面的信息，进行了更改，但仍然奇怪地出现了同样的问题。

https://mmap-hewlbern.moodmap.vercel.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"
  }
}

谢谢！

Answer 1

就我而言，我已正确设置 Tailwind 配置文件，但 tailwind 样式不适用。删除.next文件夹并运行next dev有帮助。

Answer 2

对于使用 nextJS 创建项目的开发人员。

请注意，内容tailwind.config.js需要文件的正确路径。

module.exports = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

例如，如果您使用 nextjs 创建一个项目，您将有一个pages文件夹，您的index.js文件位于其中。因此， https://tailwindcss.com/docs/installation/using-postcss上的代码片段（见下文）并不完全匹配。将其更改为上面的或您自己的喜好。

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Answer 3

我的项目也有同样的问题，但我尝试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';

Answer 4

我按照官方教程从 \xe2\x80\x94 https://tailwindcss.com/docs/guides/nextjs将 TailwindCSS 安装到我的 NextJS 应用程序中- 但仍然无法正常工作。

\n

事实证明，我忘记导入global.css到我的主应用程序文件中。

\n

添加 -

\n

import "../styles/globals.css";\n

\n

into _app.tsx 为我解决了这个问题。

\n

Answer 5

对我来说，解决方案是将./src/...内容源添加到tailwind.config.js. 官方 Next.JS + Tailwindcss 示例不支持 src 文件夹。

Answer 6

在 global.css 中像这样导入解决了我的问题：

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Answer 7

我的一个项目安装了这些软件包版本

"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: [],
};

Answer 8

经过几个小时的摆弄后，我让它以最奇怪的方式工作；我只是将一个类添加到我的一个组件中的元素，然后在 global.css 文件中为该类编写自定义 CSS，然后反映所有 tailwinds 类。这可能是 Tailwind 代码中的一个错误，他们需要跟踪和修复。

Answer 9

对于以下版本仍有问题的人：

"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: {},
  },
};

// tailwind.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: [],
};

Answer 10

我觉得你的设置太大了。现在你可以用更简单的东西来实现这一点。

首先，我认为不再需要将 CSS 加载到 nextjs 中，并且本机支持模块。（所以你可以用CSS的东西删除它）

其次，如果您使用较新的版本，顺风不再需要如此复杂的设置。

所以你需要安装 postcss-preset-env，但它现在确实不需要大配置。

看看这个例子https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss

Answer 11

对于 2023 年遇到这种情况的任何人，并且上述解决方案都不起作用，这可能听起来很明显，但您需要确保您的 Next.js 应用程序中有一个 postcss.config.js 文件，即使它只是空的。

如果不这样做，样式将不会运行。我花了一些时间试图解决这个问题，包括删除构建文件夹等。

如果您遵循文档，您应该已经有了一个，但如果您没有（或不小心删除了它），您可以在终端中运行以下命令：

npx tailwindcss init -p 

关于运行上面的 init 命令的重要注意事项 - 它将覆盖您的 tailwind 配置。确保在运行上述操作之前获取它的副本。

或者只是在目录的根目录中创建一个 postcss.config.js 文件，其中包含以下内容：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Answer 12

对我来说，问题是“create-next-app”，我没有 /pages/_app.js，因此 global.css 未被解析。

使用以下内容创建 /pages/_app.js 解决了该问题

import '../styles/globals.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

请参阅https://nextjs.org/docs/basic-features/built-in-css-support