NextJS -大多数Tailwind类都可以工作...但不是全部

monwx1rj 于 12个月前发布在其他

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

我有一个奇怪的例子，像w-1/2这样的类可以工作，但是w-1/3不能，尽管being documented。
下面是我的代码：

<thead>
  <tr>
    <th class="px-5 py-3 border-b-2 border-gray-300 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider w-1/4">Invoice Number</th>
    <th class="px-5 py-3 border-b-2 border-gray-300 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider w-1/4">Customer</th>
    <th class="px-5 py-3 border-b-2 border-gray-300 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider w-1/4">Status</th>
    <th class="px-5 py-3 border-b-2 border-gray-300 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider w-1/4">Amount Due</th>
    <th class="px-5 py-3 border-b-2 border-gray-300 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider w-1/4">Actions</th>
  </tr>
</thead>

字符串
我知道他们甚至没有被应用在开发工具上。

的数据
检查.next/static/css/上的CSS文件，我也可以看到缺少该类。

的
我不知道该怎么办了.这里是相关的配置文件.

package.json

{
  "name": "biller",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "js-cookie": "^3.0.5",
    "next": "14.0.4",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.0.4",
    "postcss": "^8",
    "tailwindcss": "^3.3.0"
  }
}

型

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
        './src/components/**/*.{js,ts,jsx,tsx,mdx}',
        './src/app/**/*.{js,ts,jsx,tsx,mdx}',
        './src/context/**/*.{js,ts,jsx,tsx,mdx}',
        './src/utils/**/*.{js,ts,jsx,tsx,mdx}',
        './src/hooks/**/*.{js,ts,jsx,tsx,mdx}',
    ],
    theme: {
        extend: {},
    },
    plugins: [],
};

型
我的src文件夹中的所有路径都被覆盖了，所以不可能是它。

更新

我弄明白了其中的一部分。显然，这是因为我没有“硬编码”类在JSX上呈现的方式，而是这样做：

// "witdth" prop is optional. Can have values like "1/2", "1/3", "1/4", etc.
export const TH = ({ children, width }) => {
    const widthClass = width ? `w-${width}` : '';
    return (
        <th
            className={`px-5 py-3 border-b-2 border-gray-300 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider ${widthClass}`}
        >
            {children}
        </th>
    );
};

型
显然，它只会被包括，如果它是硬编码的。这糟透了...有没有办法防止这种情况？

next.js

来源：https://stackoverflow.com/questions/77769851/nextjs-most-tailwind-classes-work-but-not-all

2条答案

按热度按时间

fdbelqdn1#

您可以考虑：

安全列出所有可能的类，强制Tailwind为未找到的类生成CSS规则：

/** @type {import('tailwindcss').Config} */
module.exports = {
  // …
  safelist: [
    'w-1/2',
    'w-1/3',
    'w-1/4',
  ]
  // …
}

或

/** @type {import('tailwindcss').Config} */
module.exports = {
  // …
  safelist: [
    { pattern: /^w-1\/\d+$/ },
  ]
  // …
}

重构代码以使用style属性：

// Have `width` be some valid CSS `width` value like `50%`, `33.3%`,
// `25%` for `1/2`, `1/3`, `1/4` respectively.
export const TH = ({ children, width }) => {
  return (
    <th
      className="…"
      style={{ width }}
    >
      {children}
    </th>
  );
};

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

vsnjm48y2#

问题

Tailwind在最终的CSS文件中只包含显式使用和可扩展的类。这背后的原因是尽可能减少文件大小。
Tailwind无法动态Map没有预先定义的类。

溶液

您可以使用安全工具来确保某些类始终包含在最终的CSS代码中。

tailwind.config.js

export default {
  safelist: [
    // can list them individually
    'w-1/2',
    'w-1/3',
    // or can create a more comprehensive rule as well
    {
      pattern: /^w-1\/\d+$/, // The regex written by @Wongjn can be perfect
    },
  ],
}

字符串

NextJS -大多数Tailwind类都可以工作...但不是全部

2条答案

问题

溶液

更多信息

相关问题

热门标签

最新问答