在源文件中未检测到 Tailwind 实用程序类

Question

我正在使用 Tailwind 与 vite 项目进行反应，并且在让 Tailwind 类正常工作时遇到问题。

我尝试过重新启动项目以及更新 npm 和 node。类似的问题专门与问题选项卡中的 linting 错误相关，但与实用程序类无关。大多数实用程序类问题都与 tailwind.config.js 文件中的格式错误有关。据我所知，我这里没有这个问题。

这是我启动开发服务器时收到的警告。

index.css 文件的问题。

tailwind.config.js。

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

vite.config.js.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

postcss.config.js。

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

package.json。

{
  "name": "comparable-lists",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.66",
    "@types/react-dom": "^18.2.22",
    "@vitejs/plugin-react": "^4.2.1",
    "autoprefixer": "^10.4.19",
    "eslint": "^8.57.0",
    "eslint-plugin-react": "^7.34.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.6",
    "postcss": "^8.4.38",
    "tailwindcss": "^3.4.3",
    "vite": "^5.2.0"
  }
}

index.css。

main.jsx。

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

index.html。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

app.jsx。

import './App.css'

function App() {

  return (
    <main>
      <h1 className='text-red'>Tailwind with react with vite.</h1>
    </main>
  )
}

export default App

项目文件结构。

Answer 1

使用您的 Tailwind 配置，

text-red

将不是有效的 Tailwind 类。我也看不到任何其他可能是 Tailwind 类的字符串，因此出现错误消息。一旦您在

content

文件团覆盖的文件中使用有效的 Tailwind 类，该警告就会消失。

例如，您可以使用

text-red-500

代替

text-red

。

在源文件中未检测到 Tailwind 实用程序类

问题描述投票：0回答：1

1个回答

最新问题

在源文件中未检测到 Tailwind 实用程序类

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1