CODEWITHSUNDEEP
reactjstailwind-css
Wolfizzy
Wolfizzy

Reputation: 681

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!

Upvotes: 0

Views: 3969

Answers (3)

Code A Program
Code A Program

Reputation: 1

If you want use container class you want add center true in config file

/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    extend: {
     container:{
       center:true
     }
    },
  },
  plugins: [],
}

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

Upvotes: 0

Nuha Al-sameai
Nuha Al-sameai

Reputation: 178

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>

Upvotes: 4

Atif Zia
Atif Zia

Reputation: 793

You are going to center h1 tag inside div so you can try this

<div className="container flex justify-center">
   <h1 className="text-7xl text-gray-800 uppercase tracking-wide">
        Text
   </h1>
</div>

Upvotes: 1

Related Questions