TailwindCSS 断点小于 `lg` 会覆盖 Flask 应用程序中的所有样式

Question

我正在开发一个 Flask 应用程序，遇到了一个非常奇怪的问题，无论屏幕大小如何，

md

断点和较小的断点始终适用。我能够通过以下步骤重现此问题：

创建一个新目录并安装 TailwindCSS (
```
npm install tailwindcss
```
,
```
npx tailwindcss init
```
)
适当设置内容目录(
```
"./templates/**/*.html"
```
)
创建一个基本的 Flask 应用程序，其中包含已编译的 TailwindCSS
尝试使用 md 断点应用样式。

根据这个基本设置，这里有一些代码：

tailwind.config.js

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

base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="{{url_for('static',filename='dist/css/output.css')}}">    
  <title>Test App {% block title %}{% endblock title %}</title>
</head>
<body>
<h1>Test App</h1>
<section>
  <header>
    {% block header %}{% endblock header %}
  </header>
  <main>
    {% block content %}{% endblock content %}
  </main>
</section>
</body>
</html>

home.html

{% extends 'base.html' %}

{% block header %}
  <h2>{% block title %}Home{% endblock title %}</h2>
{% endblock header %}

{% block content %}
  <p class="text-green-500 md:text-red-500">
    Learn more about this project by visiting the About page.
  </p>
{% endblock content %}

在这个令人难以置信的最小示例中，文本颜色不会按预期随

md

断点而改变，但如果使用

lg

或

xl

断点则会改变。这可能是什么原因造成的？

Answer 1

此问题是由于缺少

<meta name="viewport" content="width=device-width, initial-scale=1.0">

在 HTML 的头部。

TailwindCSS 断点小于 `lg` 会覆盖 Flask 应用程序中的所有样式

问题描述投票：0回答：1

1个回答

最新问题

TailwindCSS 断点小于 `lg` 会覆盖 Flask 应用程序中的所有样式

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1