Tailwindcss无法与next.js一起使用；配置有什么问题？ 使用下面的信息，进行了更改，并且仍然奇怪地出现了同样的问题

编程问答 2022-06-12

问题描述

由于某些原因，nextwind.js中的顺风无法正确呈现。

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

样式文件夹-tailwind.css

@tailwind base; 

/* 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} />

我在做什么错？很困惑，通常这种设置很好。

这是网站btw-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,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"
  }
}

谢谢！

解决方法

我的项目存在同样的问题，但我尝试像这样更改 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不再需要加载到nextjs中，并且模块本身受支持。 （因此您可以使用CSS内容将其删除）

第二，如果您使用的是较新版本，顺风风水就不再需要如此复杂的设置。

因此，您需要安装postcss-preset-env，但现在确实不需要大型配置。

查看此示例https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss

css-purgejavascriptreactjsreactjstailwind-css