TailwindCSS 背景顏色不會改變，除非我在 CSS 文件中改變

Question

我在將最后一個 div（帶有“下午好”）更改為任何背景顏色時遇到問題。 在 Tailwind Play 上它顯示它正在工作，但在 VSCode 和 Live Server 擴展中，它不會顯示對頁面的更改，除非我將背景添加到 style.css 文件中

另一個奇怪的事情是，如果我將背景設置為像上面的 div 一樣的漸變，它會起作用嗎？？

編輯：它也不會改變導航欄的 bg-color。 它粘在白色上。

來自 Tailwind Play 的工作示例https://play.tailwindcss.com/sFN1L7UmvI

HTML

<body class="p-0 m-0">
    <div class="navbar bg-base-300">
        <div class="flex-1 px-2 lg:flex-none">
            <label tabindex="0" class="btn btn-ghost rounded-btn">Home</label>
        </div>
        <div class="flex justify-end flex-1 px-2">
            <div class="flex items-stretch">
                <div class="dropdown dropdown-end">
                    <label tabindex="0" class="btn btn-ghost rounded-btn">Dropdown</label>
                    <ul tabindex="0" class="menu dropdown-content p-2 shadow bg-base-100 rounded-box w-52 mt-4">
                        <li><a>Helpful Links</a></li>
                        <li><a>Communities</a></li>
                        <li><a>About Me</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="flex-col w-screen h-screen flex justify-center bg-gradient-to-tr from-teal-600 to-green-900">
        <div class="flex flex-col justify-center items-center text-zinc-900">
            <div id="welcome" class="text-center">
                <H1><span class="auto-type"></span></H1>

            </div>
            <div class="w-96 text-center">
                <p>Welcome, Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat in eligendi ipsam nihil atque repellendus voluptates totam aut, labore accusamus. Laboriosam recusandae a quam quis ex reiciendis unde consequuntur alias.</p>
            </div>
        </div>
    </div>
    <div class="bg-teal-200 w-screen h-screen">
            <h4>Good afternoon</h4>   
    </div>

STYLES.CSS 文件

@import url('https://fonts.googleapis.com/css2?family=Gemunu+Libre&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alkalami&display=swap');

#welcome {
    font-family: 'Gemunu Libre', sans-serif;
    animation: fadeIn 3s;
    font-size: 5em;
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

順風配置

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./index.html'],
  theme: {
    fontFamily: {
      'sans': ["'Gemunu Libre'", 'sans-serif'],
    },
    extend: {},
  },
  plugins: [],
};

Answer 1

在查看 tailwindcss 文檔后，導航欄的背景顏色沒有改變，因為沒有 class 名稱 bg-base-300。 如果你想添加自定義顏色，你可以像這樣修改 tailwind 配置：

module.exports = {
  theme: {
    extend: {
      colors: {
        'base': 'colorCode', 
      },
    }
  }
}

或者您可以直接在 class 名稱上使用自定義顏色，如下所示：

bg-[colorCode]

查看文檔tailwind ，尤其是關於背景顏色以及如何修改 tailwind 上的自定義顏色

TailwindCSS 背景顏色不會改變，除非我在 CSS 文件中改變

問題描述

1 個解決方案

解決方案1
1 2022-10-07 01:44:17

TailwindCSS 背景顏色不會改變，除非我在 CSS 文件中改變

問題描述

1 個解決方案

解決方案1 1 2022-10-07 01:44:17

解決方案1
1 2022-10-07 01:44:17