时间戳

首页 > 解决方案 > 文本不在 React JS（和 Tailwind CSS）中居中

reactjs - 文本不在 React JS（和 Tailwind CSS）中居中

问题描述

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

（我使用Adrian Twarog 的本教程在我的 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 中将文本居中？谢谢！

标签： reactjstailwind-css

解决方案

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

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

推荐阅读