vite can't recognize tailwind classes in laravel application-CodePudding

I have laravel application I use tailwind in it. But when I write a tailwind class, say, w-100 it returns :

[vite:css] [postcss] C:\Users\eymen\OneDrive\Desktop\work\websites\elnaj7\resources\css\app.css:4:1: The w-100 class does not exist. If w-100 is a custom class, make sure it is defined within a @layer directive. file: C:\Users\eymen\OneDrive\Desktop\work\websites\elnaj7\resources\css\app.css:4:1 error during build: CssSyntaxError: [postcss] C:\Users\eymen\OneDrive\Desktop\work\websites\elnaj7\resources\css\app.css:4:1: The w-100 class does not exist. If w-100 is a custom class, make sure it is defined within a @layer directive. at Input.error (C:\Users\eymen\OneDrive\Desktop\work\websites\elnaj7\node_modules\postcss\lib\input.js:148:16) at AtRule.error (C:\Users\eymen\OneDrive\Desktop\work\websites\elnaj7\node_modules\postcss\lib\node.js:60:32) at processApply (C:\Users\eymen\OneDrive\Desktop\work\websites\elnaj7\node_modules\tailwindcss\lib\lib\expandApplyAtRules.js:357:29) at C:\Users\eymen\OneDrive\Desktop\work\websites\elnaj7\node_modules\tailwindcss\lib\lib\expandApplyAtRules.js:505:9 at C:\Users\eymen\OneDrive\Desktop\work\websites\elnaj7\node_modules\tailwindcss\lib\processTailwindFeatures.js:55:50 at plugins (C:\Users\eymen\OneDrive\Desktop\work\websites\elnaj7\node_modules\tailwindcss\lib\index.js:38:63) at LazyResult.runOnRoot (C:\Users\eymen\OneDrive\Desktop\work\websites\elnaj7\node_modules\postcss\lib\lazy-result.js:339:16) at LazyResult.runAsync (C:\Users\eymen\OneDrive\Desktop\work\websites\elnaj7\node_modules\postcss\lib\lazy-result.js:393:26) at async compileCSS (file:///C:/Users/eymen/OneDrive/Desktop/work/websites/elnaj7/node_modules/vite/dist/node/chunks/dep-4da11a5e.js:44551:25) at async Object.transform (file:///C:/Users/eymen/OneDrive/Desktop/work/websites/elnaj7/node_modules/vite/dist/node/chunks/dep-4da11a5e.js:44055:55)

I use two input files, app and user.

layout (shortened):

<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.config:

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,
        }),
    ],
});

tailwind.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: [],
}

the output file has some generated classes because I tried to run tailwind without vite. But lots of problems happened and I returned to vite.

CodePudding user response：

w-100 isn't a default Tailwind class, the biggest you have is w-96. That's why it's telling you to add it to the config as a custom class.

Here's Tailwind's docs on widths: https://tailwindcss.com/docs/width