Laravel Unknown at rule @tailwindcss(unknownAtRules)

我安装了一个新的 Laravel 项目。我想使用 Tailwind CSS 并严格按照 Tailwind 网站的说明进行操作。当我运行 npm run dev 时,我的 resources/css/app.css 文件没有填充 Tailwind 规则,我仍然只有三个:

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

在规则 @tailwindcss(unknownAtRules) 处出现未知警告。我看了一个视频,这个人运行 npm dev 的视频,app.css 文件充满了由 Tailwind CSS 填充的规则。

这是我的资源目录结构

enter image description here

tailwind.config.js

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

刀片/视图

<!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")]
);

有人可以帮我使用 Tailwind 并继续这个项目吗?

作曲家.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/",
            "DatabaseFactories": "database/factories/",
            "DatabaseSeeders": "database/seeders/"
        }
    },
    "autoload-dev": {
        "psr-4": {
            "Tests": "tests/"
        }
    },
    "scripts": {
        "post-autoload-dump": [
            "IlluminateFoundationComposerScripts::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"
    }
}
stack overflow Laravel Unknown at rule @tailwindcss(unknownAtRules)
原文答案

答案:

作者头像

“如果你在 VSCode 中工作,你需要禁用 unknownAtRules 的 lint 规则。

推荐修复:

在项目的根目录创建 .vscode 创建名为 settings.json 的文件 确定您正在使用的文件类型,例如 css 或 scss 创建一个空的 json 对象 {} 在 json 对象中添加,“ [FILE EXTENSION OF STEP 3].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: https://github.com/tailwindlabs/tailwindcss/discussions/5258 感谢 https://github.com/mrfambo

https://flaviocopes.com/fix-unknown-at-rule-tailwind/#:~:text=Here's%20how%20to%20fix%20this,Done

作者头像

webpack.min.js 缺少下一行。

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

我有同样的问题并通过交换解决

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

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

并重新运行

npm run dev
作者头像

基本上,当您想在项目中运行 Tailwind 时,这三个规则是关键。我目前也在学习 Tailwind;我的 app.css 文件只包含这三个规则,我很高兴。我想相信其余的配置可以是自定义规则集。主要问题是当您调用 tailwind CSS 类时 Tailwind 是否完全没有响应。

就我而言,我不得不手动将指令复制到我的 app.css 文件中,因为在 Tailwind CSS 安装过程中它们没有被自动填充。