文本未在 React JS 中居中（和 Tailwind CSS）

Question

最近，我开始使用 Tailwind CSS 和 React JS。

（我使用 Adrian Twarog 的 this tutorial 在我的 React 项目上安装了 Tailwind。）

我试图将 h1 在我的页面上居中，除了...

...就是这样。但对我来说，这没有意义！我已经将我的文字和所有内容居中。

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;
}

我的问题是，如何在 Tailwind CSS 中将文本居中？谢谢！

Answer 1

你要把 h1 标签放在 div 的中心，这样你就可以试试这个

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

Answer 2

只需删除容器 class 因为它会根据屏幕的宽度给出多个宽度。

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

文本未在 React JS 中居中（和 Tailwind CSS）

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

reactjs

tailwind-css