一些使用數字的 Tailwind CSS 類不再有效

Question

當我開始處理我的項目時，它是基本的 HTML，安裝了 Tailwind CSS，一切正常。 我可以使用包含數字的類中的所有值，例如text-2xl 、 text-8xl 、 text-9xl和ml-2 、 mt-6等。

但是出了點問題，現在這些值中的大部分都不起作用。 我不能使用text-2xl/4xl/5xl/6xl/8xl/9xl ，但text-3xl/7xl工作正常，就像我開始從事該項目時一樣。 與邊距相同。 例如ml-1/2/3/4不會工作，但ml-5可以像以前一樣工作。

HTML：

<body class="h-screen w-screen overflow-x-clip scroll-smooth">
    <div class="h-screen w-screen flex justify-center bg-gradient-to-bl from-sky-300 to-sky-500">
        <div class="h-full w-full grid xl:grid-cols-2 items-center">

            <div class="flex flex-col w-full h-full justify-center text-white font-slab">
                <h1 class="text-7xl ml-5">Szia!</h1>
            </div>

        </div>
        <img class="absolute w-1/4 md:w-1/12 xl:w-[4%] left-auto right-auto bottom-[5%] animate-bounce"
            src="../src/scroll.png" alt="" />
    </div>
</body>

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  mode: 'jit',
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
    fontFamily: {
      'oswald': ['"Oswald"', 'sans-serif'],
      'slab': ['"Roboto Slab"', 'serif'],
    },
  },
  plugins: [],
}

我不知道我做錯了什么或者是什么導致了這種情況發生。

我刪除了大部分包含自定義值的類，例如xl:w-[4%] ，因為我認為這可能是導致問題的原因，但據我所知，沒有任何改變。

我還嘗試在 web 檢查器選項卡中搜索類，但根本沒有應用它們。

編輯：從配置文件中刪除 Just-In-Time，然后npx tailwindcss -i./src/input.css -o./dist/output.css --watch我的文件夾解決了這個問題。

Answer 1

可能是jit導致問題嘗試從配置中刪除 jit 文件

並再次嘗試使用

 npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

一些使用數字的 Tailwind CSS 類不再有效

問題描述

1 個解決方案

解決方案1
0 2023-01-16 11:31:36

一些使用數字的 Tailwind CSS 類不再有效

問題描述

1 個解決方案

解決方案1 0 2023-01-16 11:31:36

解決方案1
0 2023-01-16 11:31:36