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顯示“元素已聲明但未使用”，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)