I am following a tutorial [traversy media – React & Tailwind CSS Image Gallery] and I’ve just begun. At the timestamp 9:49, you can see the header text size is big and also on changing the size, the changes are reflected. But consider my app.js:

Consider the app.js:

import React from "react";

function App() {
  return (
    <div>
      <h1 className="text-6xl">Hello</h1>
    </div>
  );
}

export default App;

Output [It is very much like this in the ss, but i got Please avoid using URL shorteners while inserting an image in this post so] :

Hello

The text should be bigger [obviously not here, in the react app]. I mean, the text “Hello” has got a fixed size and it does not change. The jsx is not adding any formatting to the text. Also if i change 6xl to 3xl or anything else, there is no difference seen. Maybe the classes are not linked. I am confused why this is happening.

Here’s tailwind.css:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './assets/main.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

reportWebVitals();

Please help. Thankyou.