TailwindCSS 和 React 无法正确导入 JSX 元素

Question

我有两个文件：主文件 - App.js 和我想在 App.js 中加载的 JSX 元素。 element.js 有以下代码：

const element = () => {
    return (
        <div className="text-gray-100 bg-gray-800 h-64 px-4">
            <h1>Test Title</h1>
            <p>Lorem ipsum</p>
        </div>
    );
};

export default element;

App.js文件如下：

import './App.css';
import element from './element';

function App() {
  return (
    <div className="flex">
      <element />
    </div>
  );
};

export default App;

导入时，VSC显示“element is declared but not used”，html页面只显示白页

Answer 1

在 JSX 中，小写的标签名称被认为是 HTML 标签。但是，带点的小写标签名称（属性访问器）不是。

参见 HTML 标签与 React 组件。

<component /> compiles to React.createElement('component') (html tag)
<Component /> compiles to React.createElement(Component)
<obj.component /> compiles to React.createElement(obj.component)

TailwindCSS 和 React 无法正确导入 JSX 元素

TailwindCSS and React Not Correctly Importing JSX Elements

javascript

reactjs

tailwind-css