间距不适合我在顺风css

Question

我刚开始学习顺风CSS，一整天我都在试图理解为什么space-x-n不适合我我在谷歌上到处找，但没有找到

这是我的代码:

<nav class="bg-gray-800">
<div class="max-w-7xl mx-auto">
<div class="flex justify-between">
<div class="flex space-x-4">
<div>
<a href="#">
<img src="/src/logo.png" style="height:40px;" alt="logo">
</a>
</div>
<div>
<a href="">Features</a>
<a href="">Pricing</a>
</div>
</div>
<div>secondary nav</div>
</div>
</div>
</nav>

这是我的app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

配置文件

const defaultTheme = require('tailwindcss/defaultTheme');
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
'./resources/js/Pages/*.vue',
],
theme: {
extend: {
fontFamily: {
sans: ['Nunito', ...defaultTheme.fontFamily.sans],
},
},
screens:{
sm: '480px',
md: '768px',
lg: '976px',
xl: '1440px'
}
},
plugins: [require('@tailwindcss/forms')],
};

Answer 1

检查生成的标记，如果没有space-x-4，则可能在构建步骤中出现错误。也有可能这个文件不是配置的顺风内容文件的一部分。

你的标记看起来是正确的。gap-x-4和space-x-4应该在两个包含的div之间提供16px的间隙。

您可以为包含徽标的第一个div设置mr-4边距作为解决方案。

看到https://tailwindcss.com/docs/gap changing-row-and-column-gaps-independently

Answer 2

对于那些仍然有这个问题的人，正如@andreas提到的，只是过去你的代码在这里，并检查它是否工作，如果是，可能你有一个编译问题，其他类可能仍然工作，因为它们已经在输出文件中可用。

可能的解决方案:

1. 确保你的开发服务器正在工作和监视。
2. 校验配置文件(内容prop)