next.js 顺风-某些类不起作用

j2datikz 于 2023-01-02 发布在其他

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

我在nextjs项目中使用了tailwind，当我重新启动服务器时（我的意思是用npm run dev再次启动服务器），一些tailwind代码不工作，当我在“inspect Element”中编写类属性时，它工作，但tailwind代码不工作。
不工作：w-1/2（宽度：25%），lg：w-0（媒体屏幕和（最大宽度：1024像素）{代码}）
我的顺风. config. js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    screens: {
      sm: { max: "640px" },
      md: { max: "768px" },
      lg: { max: "1024px" },
      xl: { max: "1280px" },
      "2xl": { max: "1536px" },
    }
  },
  plugins: [],
};

我的global.css文件：

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

@import "./reset.css";

next.js

来源：https://stackoverflow.com/questions/74952676/tailwind-some-class-not-works

2条答案

按热度按时间

nhhxz33t1#

你需要传递完整的w-1/2类，而不是像1/2那样传递部分类，因为tailwind不支持动态类。
请尝试以下代码。

function Component({ width}) {
  return (
    <div
      className={`${width}`}
    >
      Hello there
    </div>
  );
}

并将其用作

<Component
width={"w-1/2"}
/>

编辑：使用安全列表类

作为最后的手段，Tailwind提供了安全列表类
安全列表是最后的手段，应该只在不可能扫描某些内容以查找类名的情况下使用。这种情况很少见，您应该几乎永远不需要此功能。
在您的示例中，您希望具有不同的宽度。您可以使用正则表达式来包括所有您希望使用pattern的宽度
单位：tailwind.config.js

module.exports = {
  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}',
  ],
  safelist: [
    {
      pattern: /w-(1/2|2/2|1/6|2/6)/, // You can define all the width you desire

    },
  ],
  // ...
}

赞(0）回复(0）举报 2023-01-02

mnemlml82#

你必须创建一个扩展对象，其中包含你的个性化代码，如下所示：

theme: {
    extend: {
      screens: {
  
        'clg': '1090px',   
  
        'cxl': '1159px',      
  
        'c2xl': '1213px',
  
        'c3x1': '1373px',
        
        'c4x1': '1480px',
        
        'c5x1': '1579px',

        'c6x1': '1679px',

        'c7x1': '1740px',

        'c8x1': '1820px',
        
      },

赞(0）回复(0）举报 2023-01-02

我来回答

next.js 顺风-某些类不起作用

2条答案

编辑：使用安全列表类

相关问题

热门标签

最新问答