css 为什么有些Tailwind类可以工作，而其他的不行？

093gszye 于 2023-06-25 发布在其他

关注(0)|答案(4)|浏览(156)

我还没有找到一个有效的解决方案。我按照Tailwind安装页面上的步骤操作。我把一切都联系起来了。我知道Tailwind正在应用于index.html，因为字体是不同的，我能够样式的背景颜色的标题。但到目前为止，这些都是有效的。如果我尝试添加任何额外的类（例如。flex，font-weight），到header或其他任何东西，都没有变化。
我的HTML head和header：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="./assets/css/dist/output.css" rel="stylesheet">
    <link href="./assets/css/src/input.css" rel="stylesheet">
    <title>Room-3</title>
</head>
<body>
    <!-- Class "flex" isnt working -->
    <header class=" flex bg-slate-400">
        <h1>Room-3</h1>
        <p id="what-we-do">What We Do</p>
        <button>Get Started</button>
    </header>
    <script src="./tailwind.config.js"></script>
</body>

我的tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./"],
  theme: {
    extend: {},
  },
  plugins: [],
}

我的输入.css：

注意：@tailwind在每个示例中都是红色的并带有下划线，所以我怀疑问题与此文件有关 *

@tailwind base;
@tailwind components;
@tailwind utilities;

css

来源：https://stackoverflow.com/questions/72902496/why-some-tailwind-classes-are-working-and-others-arent

4条答案

按热度按时间

5t7ly7z51#

它应该工作得很好。如果背景工作，那么其他的应该也能工作
类名称可能有错误。
试试这个代码：

<header class="flex items-center justify-around bg-slate-400">
  <h1 class="">Room-3</h1>
  <p id="what-we-do">What We Do</p>
  <button class="text-2xl">Get Started</button>
</header>

输出如下所示：

赞(0）回复(0）举报 2023-06-25

de90aj5v2#

至于你提到的所有类别，即。flex, bg-slate-400都在工作。这意味着tailwind css在你的系统上安装正确。
要查看flex的工作情况，可以添加flex-col或justify-evenly来为flex指定方向。
但是，如果你添加font-weight，这将不起作用，因为它不是任何类，你可以添加font-bold, font-medium,..将工作。
下面给出了一个工作示例

<script src="https://cdn.tailwindcss.com"></script>
    <header class="flex justify-evenly bg-slate-300">
        <h1 class="font-extrabold">Room-3</h1>
        <p id="what-we-do">What We Do</p>
        <button class="font-extralight">Get Started</button>
    </header>

赞(0）回复(0）举报 2023-06-25

fruv7luv3#

我有类似的问题。我在本地开发环境中使用phpStorm开发一个Laravel应用程序，我对类所做的更改并没有在浏览器中呈现。Tailwind将只加载代码中使用的类，但除非你运行npm，否则Tailwind将无法识别你在IDE中键入的内容。

npm run dev

赞(0）回复(0）举报 2023-06-25

x8diyxa74#

在顺风配置文件中应用路径。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content:{
    relative: true, 
    files: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./layout/**/*.{js,ts,jsx,tsx,mdx}", ==> I am using outside component So when i add path it working.
 
  ],},
  theme: {
    extend: {},
  },
  plugins: [],
}

在顺风的文档中也写了不要使用极其广泛的模式。