Unknown at rule @tailwindcss(unknownAtRules)

posted 3 years ago

I installed a new Laravel project. I want to use TailWindCSS and followed the instructions exactly as per the tailwind website. When I run npm run dev my resources/css/app.css file is not populated with Tailwind rules and I still have only the three:

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

with a warning of Unknown at rule @tailwindcss(unknownAtRules). I was watching a video and the video the person runs npm dev and the app.css file is full of rules populated by Tailwind

Here is my tailwind.config.js file:

module.exports = {
    content: [
        "./storage/framework/views/*.php",
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
        "./resources/**/*.vue",
    ],
    theme: { extend: {} },
    plugins: [],
};

and here is my main view:

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Add A Post</title>
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>

<body>
    @yield('content')
</body>

</html>

Last updated by @driesvints 3 years ago.

muldev

replied 3 years ago

In tailwind.config.js file, try this:

    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './resources/js/**/*.vue',
    ],

Let me know if that makes a difference.

caldevcani

replied 3 years ago

I tried what you said and not working no. I am using all the latest. Laravel 9 and the latest of all the plugins etc.

geowrgetudor

replied 3 years ago

What's your webpack.mix.js config?

charliesideroad

replied 2 years ago

If you are using VScode then add: Tailwind Css IntelliSense Extension, then add "files.associations": { "*.css": "tailwindcss" }, to settings.json file.

Moderators