Reputation: 353

Laravel Unknown at rule @tailwindcss(unknownAtRules)

I installed a new Laravel project. I want to use Tailwind CSS and follow the instructions precisely 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 watched a video, and the video the person runs npm dev, and the app.css file is full of rules populated by Tailwind CSS.

Here is my directory structure for resources

tailwind.config.js

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

Blade/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>

webpack.mix.js

const mix = require("laravel-mix");

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js("resources/js/app.js", "public/js").postCss(
    "resources/css/app.css",
    "public/css",
    [require("tailwindcss")]
);

Can anybody help me to use Tailwind and continue the project, please?

composer.json

{
    "name": "laravel/laravel",
    "type": "project",
    "description": "The Laravel Framework.",
    "keywords": ["framework", "laravel"],
    "license": "MIT",
    "require": {
        "php": "^8.0.2",
        "fruitcake/laravel-cors": "^2.0.5",
        "guzzlehttp/guzzle": "^7.2",
        "laravel/framework": "^9.0",
        "laravel/sanctum": "^2.14",
        "laravel/tinker": "^2.7"
    },
    "require-dev": {
        "fakerphp/faker": "^1.9.1",
        "laravel/sail": "^1.0.1",
        "mockery/mockery": "^1.4.4",
        "nunomaduro/collision": "^6.1",
        "phpunit/phpunit": "^9.5.10",
        "spatie/laravel-ignition": "^1.0"
    },
    "autoload": {
        "psr-4": {
            "App\\": "app/",
            "Database\\Factories\\": "database/factories/",
            "Database\\Seeders\\": "database/seeders/"
        }
    },
    "autoload-dev": {
        "psr-4": {
            "Tests\\": "tests/"
        }
    },
    "scripts": {
        "post-autoload-dump": [
            "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
            "@php artisan package:discover --ansi"
        ],
        "post-update-cmd": [
            "@php artisan vendor:publish --tag=laravel-assets --ansi --force"
        ],
        "post-root-package-install": [
            "@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
        ],
        "post-create-project-cmd": [
            "@php artisan key:generate --ansi"
        ]
    },
    "extra": {
        "laravel": {
            "dont-discover": []
        }
    },
    "config": {
        "optimize-autoloader": true,
        "preferred-install": "dist",
        "sort-packages": true
    },
    "minimum-stability": "dev",
    "prefer-stable": true
}

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "autoprefixer": "^10.4.2",
        "axios": "^0.25",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.4.6",
        "tailwindcss": "^3.0.23"
    },
    "dependencies": {
        "postcss-import": "^14.0.2"
    }
}

Upvotes: 2

Answers (4)

Diego

Reputation: 49

"If you are working in VSCode, you need to disable the lint rule of unknownAtRules.

RECOMMENDED FIX:

Create .vscode at the root of your project
Create file named settings.json if not existing(By default the modern version of VS code come with the settings.json file).
Identify the filetype you are using for example css or scss
Create an empty json object {}
Inside json object add, [FILE EXTENSION OF STEP 3].scss.lint.unknownAtRules": "ignore"

Here is how the file will look like in the case of scss extension:

.vscode > settings.json

{
   "scss.lint.unknownAtRules": "ignore"
}

It helps you push the change in git and share the fix with the team.

SECOND WAY:

Do the same as explained above inside your VSCode Global settings.json. It will fix the problem for you but not for others using the same codebase. You can open the file by using

Cmd+Shift+P

and then choosing "Preferences: Open Settings (JSON)". Usually, it fixes the issue right away, but you can reload browser if needed.

Fix: For vue use "css.lint.unknownAtRules": "ignore". Credits => @zijizhu"

I found the answer here HERE thanks to: Mr Fambo

Laravel Unknown at rule @tailwindcss(unknownAtRules)

Answers (4)

Related Questions