配置中的 Tailwind 新屏幕添加导致默认断点不起作用
Posted
技术标签:
【中文标题】配置中的 Tailwind 新屏幕添加导致默认断点不起作用【英文标题】：Tailwind new screen addition in config leads to not working of default break point 【发布时间】：2021-09-15 02:48:43 【问题描述】：嘿，我正在为我的反应项目使用顺风。当我在配置中添加一个新的自定义屏幕断点时，像“sm”“md”“lg”这样的旧屏幕断点都停止工作，类不会进入 html。一旦我删除了新添加的断点，它就开始正常工作了。
我正在使用带有 react 的 tailwind，按照 tailwindcss 中的官方指南安装。
另外，我也不能使用默认颜色。
注意：我是用著名的 react starter pack 构建的
我的顺风配置。
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"
感谢任何帮助。 现在我正在将所有颜色添加到自定义并将所有屏幕断点添加到配置。 有没有其他方法可以让它在没有这个无聊的任务的情况下同时工作。
【问题讨论】：
【参考方案1】：如果您想保留默认主题并添加自己的断点，则必须在扩展部分下添加新的断点。
示例：
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: [],
【讨论】：
【参考方案2】：在screens 的情况下，如果您的自定义断点小于最大的默认断点（即2xl = 1536px），则需要指定整个断点对象（包括默认值）。
通常这样的东西用theme.extend.property扩展，但根据Tailwinddocumentation
如果你想添加一个额外的小断点，你不能使用
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",
,
,
【讨论】：
谢谢，有道理，颜色也是这样，添加了一些颜色后，我无法使用默认颜色。 没有。要使用默认颜色，您不需要覆盖theme.colors，而是将您的颜色重新定位到theme.extend.colors
谢谢你的回答，我在顺风中读到了它，上面清楚地注明了。我应该开始更认真地阅读文档，你太棒了:)以上是关于配置中的 Tailwind 新屏幕添加导致默认断点不起作用的主要内容，如果未能解决你的问题，请参考以下文章