Tailwind断点错误，自动！重要添加

Question

我面临着一个奇怪的 tailwindcss 问题。

我正在查看超过 1024px 的页面
将 vite 与 postcss 插件和 tailwind 一起使用
惯性和 Laravel
我删除了 tailwindcss 并重新安装了它

我的html代码：

<div class="flex flex-wrap lg:flex-nowrap gap-6 py-20 items-center justify-between text-left lg:text-right">
</div>

结果是这样的：

@media (min-width: 1024px) {
      .lg\:text-right {
        text-align: right;
      }
    }
    @media (min-width: 1024px) {
      .lg\:flex-nowrap {
        flex-wrap: nowrap;
      }
    }
    .text-left {
      text-align: left;
    }
    .py-20 {
      padding-top: 80px;
      padding-bottom: 80px;
    }
    .gap-6 {
      gap: 24px;
    }
    .justify-between {
      justify-content: space-between;
    }
    .items-center {
      align-items: center;
    }
    .flex-wrap {
      flex-wrap: wrap;
    }
    .flex {
      display: flex;
    }
    .text-left {
      text-align: left !important;
    }
    .flex-wrap {
      flex-wrap: wrap !important;
    }

或者更确切地说作为屏幕截图：

我的CSS文件：

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

button:focus-visible {
    outline: none !important;
}

input:focus {
    border: 2px inset rgba(22, 142, 223, 1);
}

我的顺风配置：

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        './resources/views/**/*.vue',
        './resources/js/user.js',
        './resources/js/admin.js',
        './resources/js/**/*.{vue,js}',
        "./resources/**/*.{vue,js,ts,jsx,tsx}",

    ],

    theme: {
        extend: {
            spacing: {
                '0': '0px',
                '0.5': '2px',
                '1': '4px',
                '2': '8px',
                '2.5': '10px',
                '3': '12px',
                '3.5': '14px',
                '3.75': '15px',
                '4': '16px',
                '5': '20px',
                '6': '24px',
                '8': '32px',
                '8.5': '34px',
                '10': '40px',
                '12': '48px',
                '14': '56px',
                '15': '60px',
                '16': '64px',
                '19': '76px',
                '20': '80px',
                '30': '120px',
                '32': '128px',
                '59': '236px',
            },
        }
    },
    plugins: [
        require('@tailwindcss/forms'),
    ],
}

我的app.blade.php

<!DOCTYPE html>
<html class="h-full font-text">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    @vite('resources/js/user.js')
    @inertiaHead
    @routes('user')
</head>
<body class="antialiased bg-white">

    @inertia

</body>
</html>

有什么想法为什么 text-left 和 flex-wrap 添加了 !important 吗？整个断点逻辑无法正常工作。

Answer 1

我明白了..它被vuetify覆盖了。

我浏览了传递的CSS文件并在元数据中找到了它。

Tailwind断点错误，自动！重要添加

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

1个回答

最新问题

Tailwind断点错误，自动！重要添加

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

1个回答

最新问题

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