在我的tailwindd.js.js中添加了一些自定义类(如颜色)后,我一直遇到EsLint错误“className is not a TailwindCSS class”,我不知道如何解决这个问题。在将自定义类添加到配置文件后,EsLint是否应该将其视为顺风类?
eslintrc.js:
// eslint-disable-next-line @typescript-eslint/no-var-requires
const fs = require("fs")
module.exports = {
extends: [
"next",
"prettier",
"react-app",
"react-app/jest",
"plugin:storybook/recommended",
"plugin:tailwindcss/recommended",
],
parserOptions: {
babelOptions: {
presets: [require.resolve("next/babel")],
},
},
rules: {
"testing-library/prefer-screen-queries": "off",
"@next/next/no-html-link-for-pages": "off",
"@typescript-eslint/no-unused-vars": [
"warn",
{
argsIgnorePattern: "^_",
varsIgnorePattern: "^_",
},
],
"sort-imports": [
"error",
{
ignoreCase: true,
ignoreDeclarationSort: true,
},
],
"tailwindcss/classnames-order": "off",
"import/order": [
1,
{
groups: ["external", "builtin", "internal", "sibling", "parent", "index"],
pathGroups: [
...getDirectoriesToSort().map((singleDir) => ({
pattern: `${singleDir}/**`,
group: "internal",
})),
{
pattern: "env",
group: "internal",
},
{
pattern: "theme",
group: "internal",
},
{
pattern: "public/**",
group: "internal",
position: "after",
},
],
pathGroupsExcludedImportTypes: ["internal"],
alphabetize: {
order: "asc",
caseInsensitive: true,
},
},
],
},
}
function getDirectoriesToSort() {
const ignoredSortingDirectories = [".git", ".next", ".vscode", "node_modules"]
return getDirectories(process.cwd()).filter((f) => !ignoredSortingDirectories.includes(f))
}
function getDirectories(path) {
return fs.readdirSync(path).filter(function (file) {
return fs.statSync(path + "/" + file).isDirectory()
})
}
字符串
tailwind.config.js:
/* eslint-disable @typescript-eslint/no-var-requires */
const defaultTheme = require("tailwindcss/defaultTheme")
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: "class",
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}",
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
colors: {
primary: {
50: "#eff6ff",
100: "#dbeafe",
200: "#bfdbfe",
300: "#93c5fd",
400: "#60a5fa",
500: "#3b82f6",
600: "#2563eb",
700: "#1d4ed8",
800: "#1e40af",
900: "#1e3a8a",
},
bodyBg: "#252525",
},
fontFamily: {
body: [
"Inter",
"ui-sans-serif",
"system-ui",
"-apple-system",
"system-ui",
"Segoe UI",
"Roboto",
"Helvetica Neue",
"Arial",
"Noto Sans",
"sans-serif",
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
"Noto Color Emoji",
],
sans: [
"Inter",
"ui-sans-serif",
"system-ui",
"-apple-system",
"system-ui",
"Segoe UI",
"Roboto",
"Helvetica Neue",
"Arial",
"Noto Sans",
"sans-serif",
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
"Noto Color Emoji",
],
},
borderWidth: {
DEFAULT: "1px",
0: "0",
2: "2px",
3: "3px",
4: "4px",
6: "6px",
8: "8px",
},
minHeight: {
...defaultTheme.height,
},
minWidth: {
...defaultTheme.width,
},
},
},
plugins: [],
future: {
hoverOnlyWhenSupported: true,
},
}
型
1条答案
按热度按时间von4xj4u1#
确保您已在tailwind.js.js文件中的Tailwind CSS配置中正确定义了自定义类。确保您在代码中使用的类与您在配置中定义的自定义类匹配。要使ESLint识别自定义Tailwind CSS类,请将自定义类添加到ESLint配置中的“tailwindcss/classnames-order”规则:“tailwindcss/classnames-order”:[“error”,{ //code here.“custom-classes”:[“primary-50”,“primary-100”,//添加您的代码],},],