我有一个laravel应用程序，我在其中使用顺风。但当我编写顺风类时，比如w-100，它返回：
[vite:css][postpass]C:\Users\eymen\OneDrive \Desktop\work\websites\elnaj7\resources\css\app.css:4:1:
w-100类不存在。如果w-100是自定义类，请确保它是在@layer指令中定义的。文件：C:\Users\eymen\OneDrive \Desktop\work\websites\elnaj7\resources\css\app.css:4:1生成过程中出错：CssSyntaxError:[postss]C:\Users\eymen\OneDrive \Desktop\work\websites\elnaj7\resources\css\app.css:4:1:w-100类不存在。如果w-100是自定义类，请确保它是在@layer指令中定义的。在Input.error(C:\Users\eymen\OneDrive \Desktop\work\websites\elnaj7\node_modules\postss\lib\Input.js:148:16(AtRule.error(C:\Users\eymen\OneDrive \Desktop\work\websites\elnaj7\node_modules\postss\lib\node.js:60:32(在processApply(C:\Users\eymen\OneDrive \Desktop\work\websites\elnaj7\node_modules\tailwindcss\lib\lib\expandApplyAtRules.js:357:29(位于C:\Users\eymen\OneDrive \Desktop\work\websites\elnaj7\node_modules\tailwindcss\lib\lib\expandApplyAtRules.js:505:9位于C:\Users\eymen\OneDrive \Desktop\work\websites\elnaj7\node_modules\tailwindcss\lib\processTailwindFeatures.js:50在插件上(C:\Users\eymen\OneDrive \Desktop\work\websites\elnaj7\node_modules\tailwindcss\lib\index.js:38:63(在LazyResult.runOnRoot(C:\Users\eymen\OneDrive \Desktop\work\websites\elnaj7\node_modules\postss\lib\lazy-result.js:339:16(在LazyResult.runAsync(C:\Users\eymen\OneDrive \Desktop\work\websites\elnaj7\node_modules\postss\lib\lazy-result.js:393:26(异步compileCSS(file:///C:/Users/eymen/OneDrive/Desktop/work/websites/elnaj7/node_modules/vite/dist/node/chunks/dep-4da11a5e.js:445551:25(在异步Object.transform(file:///C:/Users/eymen/OneDrive/Desktop/work/websites/elnaj7/node_modules/vite/dist/node/chunks/dep-4da11a5e.js:44055:55(
我使用两个输入文件，应用程序和用户。
布局(缩短(：
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="dns-prefetch" href="//fonts.gstatic.com">
@vite(['resources/css/app.css'])
<link rel="stylesheet" href="{{ asset('css/app.css') }}"> <!--when I remove this line all tailwind basic stylings get removed-->
<!-- styles -->
@yield('styles')
<!-- Head Scripts -->
@yield('head-scripts')
</head>
<body>
<div id="app">
@yield('content')
</div>
</body>
</html>
vite.g:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/css/app.css',
'resources/css/user.css',
],
refresh: true,
}),
],
});
顺风.config
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./resources/views/auth/**/*.blade.php',
'./resources/views/errors/**/*.blade.php',
'./resources/views/layouts/**/*.blade.php',
'./resources/views/user/**/*.blade.php',
'./storage/framework/views/*.php',
],
theme: {
},
plugins: [],
}
输出文件中有一些生成的类，因为我尝试在没有vite的情况下运行tailwind。但是发生了很多问题，我回到了维特。
w-100不是默认的Tailwind类，最大的是w-96。这就是为什么它告诉您将其作为自定义类添加到配置中。
以下是Tailwind关于宽度的文档：https://tailwindcss.com/docs/width