Laravel Unknown at rule @tailwindcss(unknownAtRules)

Question

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"
    }
}

you have not used any tailwind class so after running there will be nothing — Lee
– Lee, Commented Feb 22, 2022 at 7:04
you can add <h1 class="text-center">Heading</h1> and re-run npm run dev — Lee
– Lee, Commented Feb 22, 2022 at 7:05
I added the line you told me and ran npm run dev and no change still the same warning and app.css still the same — calvincani
– calvincani, Commented Feb 22, 2022 at 7:12

user4200410 · Accepted Answer · 2022-03-23 20:50:15Z

7

I had the same problem and solved by exchanging

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

with

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

and re-running

npm run dev

answered Mar 23, 2022 at 20:50

user4200410

Sign up to request clarification or add additional context in comments.

Comments

Xedni · Accepted Answer · 2023-12-20 18:57:42Z

5

"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

1 Comment

stanley mbote Over a year ago

if instead you are are not using any css preprocessor and just the css, the command looks similar to what @Diego as mentioned. Add this command and that should be able to fix the issue "css.lint.unknownAtRules": "ignore"

stanley mbote · Accepted Answer · 2022-09-30 07:55:39Z

1

Basically, the three rules are the key ones when you want to run Tailwind in your project. I am also currently learning Tailwind; my app.css file contains only those three rules, and I am good to go. I want to believe the rest of the configuration could be custom rules set. The major issue will be if Tailwind ain't responding at all when you are calling the tailwind CSS classes.

For my case, I had to manually copy the directive to my app.css file as they were not being populated automatically during the Tailwind CSS installation process.

answered Sep 30, 2022 at 7:55

stanley mbote

1,3261 gold badge11 silver badges20 bronze badges

Comments

Lee · Accepted Answer · 2022-02-22 07:30:34Z

0

webpack.min.js missing below line.

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'), // add this line
        require('tailwindcss'),
    ]);

answered Feb 22, 2022 at 7:30

Lee

4182 silver badges8 bronze badges

5 Comments

calvincani Over a year ago

Now I get an error: Error: Cannot find module 'postcss-import'.

Lee Over a year ago

can you run npm i postcss-import

calvincani Over a year ago

did what you said, ran npm run dev and no change the app.css still show the three @tailwind rules and warnings

Lee Over a year ago

what your laravel and laravel mix version? you can check it in compose.json and package.json

calvincani Over a year ago

I edited the question again and added the information thanks @Lee

Collectives™ on Stack Overflow

Laravel Unknown at rule @tailwindcss(unknownAtRules)

4 Answers 4

Comments

1 Comment

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related