文本不在 React JS（和 Tailwind CSS）中居中答案

【问题标题】：Text is not centering in React JS (and Tailwind CSS)文本不在 React JS（和 Tailwind CSS）中居中
【发布时间】：2021-10-18 08:43:21
【问题描述】：

最近，我开始使用带有 React JS 的 Tailwind CSS。

（我使用 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 中将文本居中？谢谢！

【问题讨论】：

标签： reactjs tailwind-css

【解决方案1】：

你要在 div 中居中 h1 标签，这样你就可以试试这个

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

【讨论】：

感谢您的回答 Atif！我刚才试过了，但它仍然没有居中。
你应该试试<h1 className="text-7xl text-gray-800 uppercase tracking-wide text-center w-full">Text</h1>
请看是否有顺风课程在申请？
我已经尝试测试 Tailwind CSS 是否适用于该网站，并且确实如此。另外，感谢您的帮助！
顺便说一句，它应该可以工作play.tailwindcss.com/H48WpDauOg。不管怎样，谢谢

【解决方案2】：

只需删除容器类，因为它会根据屏幕宽度提供多个宽度。

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

【讨论】：

非常感谢努哈！有用！欢迎来到 StackOverflow！ :)
我的荣幸。 :)