Question

您好，我的 React 项目正在使用顺风。当我在配置中添加一个新的自定义屏幕断点时，旧的屏幕断点，如“sm”“md”“lg”都停止工作，类没有进入 html。一旦我删除了新添加的断点，它就开始正常工作了。

我正在使用带有 react 的 tailwind，按照 tailwindcss 中的官方指南进行安装。

另外，我也不能使用默认颜色。

注意：我是按照臭名昭著的 React 入门包构建的

我的顺风配置。

module.exports = {
  purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    colors: {
      white: {
        50: "#fefffe",
        150: "#4f4f4f",
        250: "#d7dce1",
        350: "rgb(127, 139, 153)",
        450: "rgb(235, 238, 241)",
        550: "rgb(104, 109, 115)",
        650: "rgb(228, 228, 231)",
      },
      red: {
        50: "#DA0037",
      },
      green: {
        50: "rgb(40, 191, 123)",
      },
      iceberg: {
        DEFAULT: "#DFF4F3",
        50: "#FFFFFF",
        100: "#FFFFFF",
        200: "#FFFFFF",
        300: "#FFFFFF",
        400: "#FFFFFF",
        500: "#DFF4F3",
        600: "#B9E7E5",
        700: "#93DAD7",
        800: "#6DCDC8",
        900: "#47C0BA",
      },
      "black-squeeze": {
        DEFAULT: "#DDE7F2",
        50: "#FFFFFF",
        100: "#FFFFFF",
        200: "#FFFFFF",
        300: "#FFFFFF",
        400: "#FFFFFF",
        500: "#DDE7F2",
        600: "#B8CDE4",
        700: "#93B3D6",
        800: "#6E99C8",
        900: "#497FBA",
      },
      "pigeon-post": {
        DEFAULT: "#B9BBDF",
        50: "#FFFFFF",
        100: "#FFFFFF",
        200: "#FFFFFF",
        300: "#FFFFFF",
        400: "#DCDDEF",
        500: "#B9BBDF",
        600: "#9699CF",
        700: "#7377BF",
        800: "#5055AF",
        900: "#40448C",
      },
      "polo-blue": {
        DEFAULT: "#878ECD",
        50: "#FFFFFF",
        100: "#FFFFFF",
        200: "#F3F4FA",
        300: "#CFD2EB",
        400: "#ABB0DC",
        500: "#878ECD",
        600: "#636CBE",
        700: "#4650A8",
        800: "#373F84",
        900: "#282E60",
      },
    },
    screens:{
      pc:"1450px",
    },
    extend: {
      zIndex: {
        "-10": "-10",
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

我的包json


  "dependencies": {
    "@craco/craco": "^6.1.2",
    "@fortawesome/fontawesome-free": "5.15.3",
    "@popperjs/core": "^2.9.2",
    "@testing-library/jest-dom": "^5.12.0",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "chart.js": "2.9.4",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "autoprefixer": "^9.8.6",
    "postcss": "^7.0.36",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.4"
  }
}

感谢任何帮助。现在我正在将所有颜色添加到自定义并将所有屏幕断点添加到配置。有没有其他方法可以让它在没有这个繁琐任务的情况下工作。

Answer 1

在 screens 的情况下，如果您的自定义断点小于最大的默认断点（即 2xl = 1536px），您需要指定整个断点对象（包括默认值）。

通常这些东西用 theme.extend.{property} 扩展，但根据 Tailwind documentation

<块引用>

如果要额外增加一个小断点，不能用 extend 因为小断点将被添加到断点列表，断点需要从小到大排序最大以便使用最小宽度断点按预期工作系统。相反，覆盖整个屏幕键

所以你的屏幕部分配置应该是

module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      'pc': '1450px',
      '2xl': '1536px',
    },
    extend: {
      colors: {
      white: {
        50: "#fefffe",
        150: "#4f4f4f",
        250: "#d7dce1",
        350: "rgb(127, 139, 153)",
        450: "rgb(235, 238, 241)",
        550: "rgb(104, 109, 115)",
        650: "rgb(228, 228, 231)",
      },
      red: {
        50: "#DA0037",
      },
      green: {
        50: "rgb(40, 191, 123)",
      },
      iceberg: {
        DEFAULT: "#DFF4F3",
        50: "#FFFFFF",
        100: "#FFFFFF",
        200: "#FFFFFF",
        300: "#FFFFFF",
        400: "#FFFFFF",
        500: "#DFF4F3",
        600: "#B9E7E5",
        700: "#93DAD7",
        800: "#6DCDC8",
        900: "#47C0BA",
      },
      "black-squeeze": {
        DEFAULT: "#DDE7F2",
        50: "#FFFFFF",
        100: "#FFFFFF",
        200: "#FFFFFF",
        300: "#FFFFFF",
        400: "#FFFFFF",
        500: "#DDE7F2",
        600: "#B8CDE4",
        700: "#93B3D6",
        800: "#6E99C8",
        900: "#497FBA",
      },
      "pigeon-post": {
        DEFAULT: "#B9BBDF",
        50: "#FFFFFF",
        100: "#FFFFFF",
        200: "#FFFFFF",
        300: "#FFFFFF",
        400: "#DCDDEF",
        500: "#B9BBDF",
        600: "#9699CF",
        700: "#7377BF",
        800: "#5055AF",
        900: "#40448C",
      },
      "polo-blue": {
        DEFAULT: "#878ECD",
        50: "#FFFFFF",
        100: "#FFFFFF",
        200: "#F3F4FA",
        300: "#CFD2EB",
        400: "#ABB0DC",
        500: "#878ECD",
        600: "#636CBE",
        700: "#4650A8",
        800: "#373F84",
        900: "#282E60",
      },
    },
    } 

  }
}

在配置中添加 Tailwind 新屏幕导致默认断点不起作用

1 个答案: