next.js EsLint错误:Classname不是Tailwind CSS类

swvgeqrz  于 2023-11-18  发布在  其他
关注(0)|答案(1)|浏览(209)

在我的tailwindd.js.js中添加了一些自定义类(如颜色)后,我一直遇到EsLint错误“className is not a TailwindCSS class”,我不知道如何解决这个问题。在将自定义类添加到配置文件后,EsLint是否应该将其视为顺风类?
eslintrc.js:

  1. // eslint-disable-next-line @typescript-eslint/no-var-requires
  2. const fs = require("fs")
  3. module.exports = {
  4. extends: [
  5. "next",
  6. "prettier",
  7. "react-app",
  8. "react-app/jest",
  9. "plugin:storybook/recommended",
  10. "plugin:tailwindcss/recommended",
  11. ],
  12. parserOptions: {
  13. babelOptions: {
  14. presets: [require.resolve("next/babel")],
  15. },
  16. },
  17. rules: {
  18. "testing-library/prefer-screen-queries": "off",
  19. "@next/next/no-html-link-for-pages": "off",
  20. "@typescript-eslint/no-unused-vars": [
  21. "warn",
  22. {
  23. argsIgnorePattern: "^_",
  24. varsIgnorePattern: "^_",
  25. },
  26. ],
  27. "sort-imports": [
  28. "error",
  29. {
  30. ignoreCase: true,
  31. ignoreDeclarationSort: true,
  32. },
  33. ],
  34. "tailwindcss/classnames-order": "off",
  35. "import/order": [
  36. 1,
  37. {
  38. groups: ["external", "builtin", "internal", "sibling", "parent", "index"],
  39. pathGroups: [
  40. ...getDirectoriesToSort().map((singleDir) => ({
  41. pattern: `${singleDir}/**`,
  42. group: "internal",
  43. })),
  44. {
  45. pattern: "env",
  46. group: "internal",
  47. },
  48. {
  49. pattern: "theme",
  50. group: "internal",
  51. },
  52. {
  53. pattern: "public/**",
  54. group: "internal",
  55. position: "after",
  56. },
  57. ],
  58. pathGroupsExcludedImportTypes: ["internal"],
  59. alphabetize: {
  60. order: "asc",
  61. caseInsensitive: true,
  62. },
  63. },
  64. ],
  65. },
  66. }
  67. function getDirectoriesToSort() {
  68. const ignoredSortingDirectories = [".git", ".next", ".vscode", "node_modules"]
  69. return getDirectories(process.cwd()).filter((f) => !ignoredSortingDirectories.includes(f))
  70. }
  71. function getDirectories(path) {
  72. return fs.readdirSync(path).filter(function (file) {
  73. return fs.statSync(path + "/" + file).isDirectory()
  74. })
  75. }

字符串
tailwind.config.js:

  1. /* eslint-disable @typescript-eslint/no-var-requires */
  2. const defaultTheme = require("tailwindcss/defaultTheme")
  3. /** @type {import('tailwindcss').Config} */
  4. module.exports = {
  5. darkMode: "class",
  6. content: [
  7. "./index.html",
  8. "./src/**/*.{js,ts,jsx,tsx}",
  9. "./app/**/*.{js,ts,jsx,tsx,mdx}",
  10. "./pages/**/*.{js,ts,jsx,tsx,mdx}",
  11. "./components/**/*.{js,ts,jsx,tsx,mdx}",
  12. "./src/**/*.{js,ts,jsx,tsx,mdx}",
  13. ],
  14. theme: {
  15. extend: {
  16. colors: {
  17. primary: {
  18. 50: "#eff6ff",
  19. 100: "#dbeafe",
  20. 200: "#bfdbfe",
  21. 300: "#93c5fd",
  22. 400: "#60a5fa",
  23. 500: "#3b82f6",
  24. 600: "#2563eb",
  25. 700: "#1d4ed8",
  26. 800: "#1e40af",
  27. 900: "#1e3a8a",
  28. },
  29. bodyBg: "#252525",
  30. },
  31. fontFamily: {
  32. body: [
  33. "Inter",
  34. "ui-sans-serif",
  35. "system-ui",
  36. "-apple-system",
  37. "system-ui",
  38. "Segoe UI",
  39. "Roboto",
  40. "Helvetica Neue",
  41. "Arial",
  42. "Noto Sans",
  43. "sans-serif",
  44. "Apple Color Emoji",
  45. "Segoe UI Emoji",
  46. "Segoe UI Symbol",
  47. "Noto Color Emoji",
  48. ],
  49. sans: [
  50. "Inter",
  51. "ui-sans-serif",
  52. "system-ui",
  53. "-apple-system",
  54. "system-ui",
  55. "Segoe UI",
  56. "Roboto",
  57. "Helvetica Neue",
  58. "Arial",
  59. "Noto Sans",
  60. "sans-serif",
  61. "Apple Color Emoji",
  62. "Segoe UI Emoji",
  63. "Segoe UI Symbol",
  64. "Noto Color Emoji",
  65. ],
  66. },
  67. borderWidth: {
  68. DEFAULT: "1px",
  69. 0: "0",
  70. 2: "2px",
  71. 3: "3px",
  72. 4: "4px",
  73. 6: "6px",
  74. 8: "8px",
  75. },
  76. minHeight: {
  77. ...defaultTheme.height,
  78. },
  79. minWidth: {
  80. ...defaultTheme.width,
  81. },
  82. },
  83. },
  84. plugins: [],
  85. future: {
  86. hoverOnlyWhenSupported: true,
  87. },
  88. }

von4xj4u

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”,//添加您的代码],},],

相关问题