时间戳

首页 > 解决方案 > 配置中的 Tailwind 新屏幕添加导致默认断点不起作用

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

问题描述

海我正在为我的反应项目使用顺风。当我在配置中添加一个新的自定义屏幕断点时，像“sm”“md”“lg”这样的旧屏幕断点都停止工作，类不会进入 html。一旦我删除了新添加的断点，它就开始正常工作了。

我正在使用带有反应的尾风，按照尾风css中的官方指南安装。

在旁注中，我也无法使用默认颜色。

注意：我是根据著名的 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"
  }
}

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

标签： reactjstailwind-css

解决方案

如果您想保留默认主题并添加自己的断点，则必须在扩展部分下添加新的断点。

例子：

module.exports = {
  purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
  darkMode: false, // or 'media' or 'class'
  theme: {      /* any styles mentioned here will replace default classes */
    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",
      },
    },
    screens:{
      pc:"1450px",
    },
    extend: {    /* mention your styles under this section */
      zIndex: {
        "-10": "-10",
      },
    screens:{
      pc:"1450px",
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

重要 如果你想扩展一个小断点，你需要将它与所有现有断点一起提及（多个小断点应该按照从小到大的顺序提及）

来自 tailwindcss 文档的示例

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    screens: {
      'xs': '475px',
      ...defaultTheme.screens,
    },
  },
  variants: {},
  plugins: [],
}

推荐阅读