Tailwind CSS字体尺寸有效，但边距和边界不d。我是否错误地安装了它？

Question

我正在尝试使用Tailwind CSS来设置我的网页 - 整个过程。但是，我的直接目标是在一些输入和按钮上使用边框上一些文本。这是我发现我的尾风配置错误的地方。

因为这种“不起作用”的方式很难诊断出谷歌搜索。我发现了一个结果，建议添加border，因为没有border代码border-brack没有border> border应用本身。但是我做到了，没有任何改变。此外，我可以参见在浏览器中，没有添加边距。

我希望以下代码应为我的按钮提供边框和黑色边框。它没有。

function Button({ label, action }) {
    return (
        <button
            className="border-2 border-black mt-3 text-2xl"
            onClick={() => {
                action();
            }}
        >
            {label}
        </button>
    );
}

export default Button;

这是我的浏览器中存在的代码：＆lt; button class =“ border-2 border-2 border-beld-3 text-2xl”＆gt; next＆lt;/butt＆gt;，所以我们知道风格已经到达按钮了。

此外，我看到以来字体已经更新以来，我添加了尾风CSS（因为用自己的tailwind覆盖了默认字体样式），和 以下样式 do 工作：

＆lt ; H2 className =“ text-2xl”＆gt; foo＆lt;/h2＆gt; //文本实际上更大，证实了Tailwind CSS正在应用某些内容

我必须配置某些东西以使尾风达到我的代码吗？

这是tailwind.config.js在其默认状态下，与/src一起坐在父级目录中：

module.exports = {
    content: ["./src/**/*.{html,js}"],
    theme: {
        extend: {}
    },
    plugins: []
};

运行npx tailwindcss -i ./ src/index.csss.csss -o ./dist/output.css -watch 和我确实有＆lt; link href =“/dist/output.css” rel =“ stylesheet”＆gt;在我的index.html文件中“ rel =“ nofollow noreferrer”>在文档中描述的方式

package.json因为我假设有人会问：

{
  "name": "westland",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "autoprefixer": "^10.4.7",
    "postcss": "^8.4.14",
    "tailwindcss": "^3.1.5"
  }
}

请帮助＆amp;谢谢你！

编辑：测试显示Border-Red-500有效，但Border-Black却没有。

Answer 1

如果border-2不起作用，您也可以使用另一种替代方案，即ring-1和ring-black。

Answer 2

在您的tailwind.config.js中使用它

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}