Calendar in React not displaying correctly with Tailwind CSS

Description: Hello,

I'm trying to create a calendar in React using Tailwind CSS, but the calendar component is not displaying correctly on the web page. I have checked the console and verified that the rows and columns are generated correctly, but they are stacking vertically on the web page.

Here are the relevant code snippets:

import React, { useState } from 'react';
import './App.css';
import { getMonth } from './util';
import CalendarHeader from './components/CalendarHeader';
import Sidebar from './components/Sidebar';
import Month from './components/Month';
function App() {
const [currentMonth, setCurrentMonth] = useState(getMonth());
return (
<React.Fragment>
<div className="h-screen flex flex-columns">
<CalendarHeader/>
<div className="flex flex-1">
<Sidebar/>
<Month month={currentMonth}/>
</div>
</div>
</React.Fragment>
);
}
export default App;
import dayjs from 'dayjs';
export function getMonth(month = dayjs().month()){
const year =dayjs().year()
const ayinIlkGunu = dayjs(new Date(year, month, 1)).day()
let currentAySayac = 0 - ayinIlkGunu
const daysMatrix= new Array(5).fill([]).map(() => {
return new Array(7).fill(null).map(() => {
currentAySayac++
return dayjs(new Date(year, month, currentAySayac))
})
})
return daysMatrix;
}
import React from 'react';
import Day from './Day';
export default function Month({ month }) {
return (
<div className="flex-1 grid grid-cols-7 grid-rows-5">
{month.map((row, i) => (
<React.Fragment key={i}>
{row.map((day, idx) => (
<Day day={day} key={idx} />   
))}
</React.Fragment>
))}
</div>
);
}
import React from 'react';
export default function Day({ day }) {
return (
<div className="bg-gray-200 p-2">
{day.format()}
</div>
);
}

The Month component of the calendar is designed to have a grid structure with 7 columns and 5 rows. However, on the web page, the calendar is stacking vertically.

I'm using Tailwind CSS for styling, and I have added the bg-gray-200 p-2 classes to the Day component to style each day element.

How can I resolve this issue? Is there any error or missing piece in the provided code? I'm looking forward to your assistance.

Thank you!

It's really hard to make Tailwind work in the CodeSandBox it seems... You were missing to import the css in the index.js:

Index.js

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./styles.css"; // 🟥 Import here
import App from "./App";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
<StrictMode>
<App />
</StrictMode>
);

And create this file on root, beside package.json:

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {}
},
plugins: []
};

In the sandbox it's not gonna work, but if you export to ZIP and run local it will:

https://codesandbox.io/s/compassionate-bash-lqdd3w?file=/src/index.js