javascript TailwindCSS样式未应用于我的Next js应用

o2rvlv0m 于 2022-11-20 发布在 Java

关注(0)|答案(4)|浏览(145)

我已经创建了一个Next js应用程序。正如他们在文档中所说的，我将TailwindCSS集成到了我的项目中。一切都很顺利。但是，我得到的结果是一个网页上没有应用TailwindCSS样式。
我将提供我认为导致此问题的文件。
如果有人能澄清我哪里错了，我将不胜感激。

索引.js文件

return (
    <div className="flex justify-center">
      <div className="px-4" style={{maxWidth: "1600px"}}>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2> Test
        </div>
      </div>
    </div>
       )

postcss.config.js档案：

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

顺风配置js

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

全局.css

@tailwind base;
@tailwind components;
@tailwind utilities;

JavaScript

来源：https://stackoverflow.com/questions/74481467/tailwindcss-styles-are-not-applied-in-my-next-js-app

4条答案

按热度按时间

nhaq1z211#

您的tailwind.config.js需要一个content字段，以便Tailwind知道在哪里查找正在调用的实用程序类。

content: ["./src/**/*.{js,ts,jsx,tsx}"],

以下是我的完整配置：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Tailwind不会应用任何类（包括它们的重置类），直到您在代码中使用它们的一个实用类，因此如果它不知道您使用了其中的任何一个，则不会应用任何样式。

赞(0）回复(0）举报 2022-11-20

5lhxktic2#

应在tailwind.config.js文件中添加以下代码

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

It should work fine.

赞(0）回复(0）举报 2022-11-20

62o28rlo3#

对我有效的方法：
1.将watch脚本添加到package.json文件中scripts

确保为输入/输出css文件给予正确的路径

"scripts": {
    "watch": "npx tailwindcss -i src/input.css -o dist/output.css --watch"
 }

2：运行它：

npm run watch

赞(0）回复(0）举报 2022-11-20

hmae6n7t4#

您的tailwind.config.js没有将其连接到您要处理的页面的代码。您应该包含此代码。

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

上面的代码（去掉注解）来自他们的网站，
https://tailwindcss.com/docs/guides/nextjs

赞(0）回复(0）举报 2022-11-20

我来回答

javascript TailwindCSS样式未应用于我的Next js应用

4条答案

相关问题

热门标签

最新问答