TailwindCSS 某些自定义颜色不起作用

Question

我目前正在使用 NativeWind 进行 React Native 项目，并且在项目中的自定义颜色渲染方面遇到一些问题。 NativeWind 是建立在 TailwindCSS 之上的，所以我认为这个问题与 TailwindCSS 中的问题相同。

我在 tailwind.config.js 文件中有一些自定义颜色，其中大多数在代码库中渲染得很好。但是，某些不渲染。

tailwind.config.js

module.exports = {
  content: [
    "./App.{js,jsx,ts,tsx}",
    "./src/screens/**/*.{js,jsx,ts,tsx}",
    "./src/components/**/*.{js,jsx,ts,tsx}",
    "./src/components/MapComponents/**/*.{js,jsx,ts,tsx}",
    "./src/assets/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      fontSize: {
        xs: "11px",
        sm: "12px",
        base: "15px",
        lg: "18px",
        xl: "20px",
        "2xl": "26px",
        "3xl": "32px",
      },
      colors: {
        gray: {
          base: "#e5e7eb",
          dark: "#69686D",
        },
        blue: {
          accent: "#0085ff",
          dark: "#5a49d9",
        },
        red: {
          base: "#FF0000",
        },
        food: {
          inner: "#ffc0c1",
          outer: "#ff6665",
        },
        deal: {
          inner: "#7ba8cc",
          outer: "#277bc0",
        },
        challenge: {
          inner: "#cfc0fe",
          outer: "#7446ae",
        },
        event: {
          inner: "#f09b72",
          outer: "#ea047e",
        },
        music: {
          inner: "#76ba99",
          outer: "#00ffab",
        },
        sport: {
          inner: "#F87070",
          outer: "#FE3E3E",
        },
        outdoors: {
          inner: "#4ABE21",
          outer: "#49AC26",
        },
        business: {
          inner: "#DEEE2B",
          outer: "#CEDD26",
        },
      },
    },
  },
  plugins: [],
};

使用 bg-blue-accent 渲染 View 容器，它将该 View 的背景颜色渲染为关联的自定义颜色。然而，bg-food-outer 由于某种原因不起作用。除了交易、挑战、音乐等其他内容之外，我还拥有来自 vscode 的 tailwind 扩展，它显示 tailwindstyle 的 css 代码，并且当我在代码库中输入 bg-food-outer 时，它会显示正确的 css 颜色。

我尝试执行 expo start -c 来清除缓存，但这似乎也不起作用。如何渲染其余的自定义颜色？

Answer 1

我假设您正在使用 NativeWind，因为 React Native 最近终止了对 TailwindCSS 的支持。

首先停止expo服务器。然后，不要使用 expo start 启动它，而是运行 expo start -c 来擦除 NativeWind 添加的缓存并重新启动服务器。

来源：https://www.nativewind.dev/guides/troubleshooting

Answer 2

您可以尝试在您的

tailwind.config.js

文件中使用安全列表方法。这明确列出了 tailwind 应生成的自定义类，从而防止它们在构建过程中被清除 以下是有关如何在

tailwind.config.js

文件中实现安全列表方法的示例代码：

module.exports = {
  content: ["./App.{js,ts,jsx,tsx}", "./src/**/*.{js,ts,jsx,tsx}"],
  safelist: ['bg-food-outer', 'bg-deal-inner', 'bg-challenge-outer'],
  theme: {
    extend: {
      colors: {
        food: { outer: "#ff6665" },
        deal: { inner: "#7ba8cc" },
        challenge: { outer: "#7446ae" }
      }
    }
  },
};

进行更改后尝试重新启动服务器，当我遇到此错误时，它对我有帮助