Search code examples
reactjstailwind-css

Text is not centering in React JS (and Tailwind CSS)

Recently, I've started playing with Tailwind CSS with React JS.

(I used this tutorial by Adrian Twarog to install Tailwind on my React project.)

And I was trying to center a h1 on my page, except...

enter image description here

...that's what happened. But to me, it doesn't make sense! I've already centered my text and everything.

App.js

import React from "react";

function App() {
  return (
    <div className="container place-items-center">
      <h1 className="text-7xl text-gray-800 uppercase tracking-wide text-center">
        Text
      </h1>
    </div>
  );
}

export default App;

tailwind.config.js:

module.exports = {
  purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
  darkMode: false,
  theme: {
    extend: {
      colors: {
        orange: "#f97b4f",
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

index.css

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;900&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
}

h1 {
  font-weight: 900;
}

My question is, how do I center my text in Tailwind CSS? Thank you!

Solution

  • Just remove the container class cause it gives several widths based on the width of the screen.

     <div className="place-items-center">
  <h1 className="text-7xl text-gray-800 uppercase tracking-wide text-center">
    Text
  </h1>
</div>