next.js Tailwind CSS不工作，即使类反映在HTML标签上

zsbz8rwp 于 12个月前发布在其他

关注(0)|答案(2)|浏览(115)

我只是不知道这里出了什么问题，顺风从来没有在第一次尝试工作。In this screenshot shows that the html tag actually changes
我已经将我的global.css配置更改为

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

根据stackoverlow的这个答案，我也已经在tailwind.config.js中添加了一些内容

/** @type {import('tailwindcss').Config} */
module.exports = {
  **content: [
      "./pages/**/*.{js,ts,jsx,tsx,mdx}",
      "./components/**/*.{js,ts,jsx,tsx,mdx}",
      "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],**
  mode: "jit",
  theme: {
    extend: {
      fontFamily: {
        inter: ["Inter", "sans-serif"],
      },
      colors: {
        "black-100": "#2B2C35",
        "primary-blue": {
          DEFAULT: "#2B59FF",
          100: "#F5F8FF",
        },
        "secondary-orange": "#f79761",
        "light-white": {
          DEFAULT: "rgba(59,60,152,0.03)",
          100: "rgba(59,60,152,0.02)",
        },
        grey: "#747A88",
      },
      backgroundImage: {
        'pattern': "url('/pattern.png')",
        'hero-bg': "url('/hero-bg.png')"
      }
    },
  },
  plugins: [],
};

我还尝试执行以下命令npx tailwind-i tailwind.css -o ./layouts/styles.css --watch它找不到路径，然后我将其更改为npx tailwindcss -i build src/app/global.css -o public/styles.css，它说

[Error: EISDIR: illegal operation on a directory, read] {
  errno: -4068,
  code: 'EISDIR',
  syscall: 'read'
}

无论如何，我正在使用pnpm命令，我确实尝试使用pnpm而不是npx与这两个命令，但仍然不起作用。最后一部分，下面是我的page.tsx代码：

'use client'

import React from 'react';

export default function Home ()  {
  return (
    <div className="text-center mt-8">
     <h2 className='text-2xl font-semibold'>Hello brow</h2>
    </div>
  );
}

我期待顺风css的作品，因为它的类已经反映到HTML标记时，我检查的元素。

next.js

来源：https://stackoverflow.com/questions/76842094/the-tailwind-css-doesnt-work-even-the-classes-reflect-on-the-html-tag

2条答案

按热度按时间

6kkfgxo01#

我不确定，但有三件事可以确保Tailwind工作：

Global.css需要

@顺风基地;
@尾风组件;
@顺风公用事业;

_app.js

导入'tailwindcss/tailwind.css'

顺风配置

module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
 
    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        git: {
          50: "#c778dd33",
          100: '#c778dd',
        },
      }
    },
  },
  plugins: [],
}

赞(0）回复(0）举报 12个月前

hgtggwj02#

为了解决这个问题，我必须使用命令npm run dev和 *'run'**重新构建节点模块，它将rebuild，并注意到我们只是在现有的next js应用程序中安装了tailwind css。

赞(0）回复(0）举报 12个月前