用 sm 覆盖样式：

Question

我希望我的边框在类似移动设备的设备上位于顶部，而在其他设备上位于左侧。它在移动设备上运行，但对于其他设备，它正在添加属性。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
    <title>Home</title>
</head>

<body>
  <img src="https://picsum.photos/800/400" alt="login image" class="rounded-t-lg sm:rounded-l-lg">
</body>

</html>

Answer 1

由于您添加的 rounded-t-lg 没有前缀，因此它对所有屏幕尺寸都有效。

要在 sm 断点处隐藏屏幕上边框，您必须添加 sm:rounded-t-none。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
    <title>Home</title>
</head>

<body>
  <img src="https://picsum.photos/800/400" alt="login image" class="rounded-t-lg sm:rounded-t-none sm:rounded-l-lg">
</body>

</html>

用 sm 覆盖样式：

Overwriting a style with sm:

css

tailwind-css