TailwindCSS and React Not Correctly Importing JSX Elements

Question

I have two files: The main file - App.js and a JSX Element which I want to load in App.js. element.js has the following code:

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;

The App.js file is as follows:

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

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

export default App;

When importing, VSC shows that "element is declared but not used", and the html page shows nothing but a white page.

Kid · Accepted Answer · 2021-11-12 04:13:45Z

2

In JSX, lower-case tag names are considered to be HTML tags. However, lower-case tag names with a dot (property accessor) aren't.

See HTML tags vs React Components.

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

answered Nov 12, 2021 at 4:13

Kid

1,2602 gold badges16 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

TailwindCSS and React Not Correctly Importing JSX Elements

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related