tailwind css @apply 指令在 laravel 中不起作用答案

【问题标题】：tailwind css @apply directive not working in laraveltailwind css @apply 指令在 laravel 中不起作用
【发布时间】：2022-08-14 09:54:57
【问题描述】：

我目前正在使用 Laravel 和 Vue js 以及 tailwind css。似乎tailwindcss @apply 一直显示未知属性名称。

以下是我的 Vue 文件

    <template>
        <Head title=\"My Team\" />
    
        <BreezeAuthenticatedLayout>
            <template #header>
                <h2 class=\"font-semibold text-xl text-gray-800 leading-tight\">
                    My Team
                </h2>
            </template>
    
            <div class=\"max-w-7xl mx-auto sm:px-6 lg:px-8\">
                <ul class=\"sr-navtab-list\">
                    <template v-for=\"(item, index) in tabs\" :key=\"index\">
                        <li :class=\"{ active: route().current(item.route_name) }\">
                            <Link :href=\"route(item.route_name, { id: user_id })\">{{
                                item.label
                            }}</Link>
                        </li>
                    </template>
                </ul>
            </div>
    
            <div class=\"max-w-7xl mx-auto sm:px-6 lg:px-8 mt-10\">
                <div class=\"bg-white overflow-hidden shadow-sm sm:rounded-lg\">
                    <div class=\"p-6 bg-white border-b border-gray-200\">
                        <slot />
                    </div>
                </div>
            </div>
    
            <div>
                <button class=\"btn-primary\">test</button>
            </div>
        </BreezeAuthenticatedLayout>
    </template>
    
    <script>
    import BreezeAuthenticatedLayout from \"@/Layouts/Authenticated.vue\";
    import { Head, Link } from \"@inertiajs/inertia-vue3\";
    
    export default {
        components: {
            BreezeAuthenticatedLayout,
            Head,
            Link,
        },
    
        props: {
            user_id: String,
        },
    
        data() {
            return {
                tabs: [
                    { label: \"List\", route_name: \"myteam.list\" },
                    { label: \"Hierarchy\", route_name: \"myteam.hierarchy\" },
                ],
            };
        },
    
        mounted() {},
    };
    </script>

<style scoped>
ul.sr-navtab-list {
    @apply pb-2; //not working

}

ul.sr-navtab-list > li {
    @apply inline-block; //not working

}

ul.sr-navtab-list > li > a {
    @apply inline-block p-4 bg-gray-200; //not working

}

ul.sr-navtab-list > li.active > a {
    @apply bg-white; //not working

}

ul.sr-navtab-list > li:hover > a {
    @apply bg-gray-50; //not working
}
</style>

webpack.mix.js

const mix = require(\"laravel-mix\");
mix.js(\"resources/js/app.js\", \"public/js\")
    .vue()
    .postCss(\"resources/css/app.css\", \"public/css\", [
        require(\"postcss-import\"),
        require(\"tailwindcss\"),
        require(\"autoprefixer\"),
    ])
    .sass(\"resources/css/app2.scss\", \"public/css\")
    .webpackConfig(require(\"./webpack.config\"))
    .sourceMaps();

mix.options({
    hmrOptions: {
        host: \"localhost\",
        port: \"8079\",
    },
});

mix.webpackConfig({
    devServer: {
        port: \"8079\",
    },
});

mix.version();

资源/css/app.css

@import \"tailwindcss/base\";
@import \"tailwindcss/components\";
@import \"tailwindcss/utilities\";

@layer components {
    .btn-primary {
        @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
    }
}

资源/css/app 2.scss

$fa-font-path: \"/webfonts\";
@import \"@fortawesome/fontawesome-free/css/all.min\";

不知道为什么@apply 不工作，但@layer 似乎工作正常。请帮忙，谢谢。

您是否阅读过这里的文档：tailwindcss.com/docs/functions-and-directives#apply？我对 Vue 不够熟悉，但听起来您尝试做的不是推荐的方式。
早期版本运行良好。我认为与版本有关。但没关系，有一个解决方法。非常感谢。
你有没有找到解决办法？我正在经历同样的事情
@Grant Nope，我没有，我只是使用旧时尚方式和 css 添加了样式

标签： laravel vuejs3 tailwind-css laravel-mix-vue3

【解决方案1】：

将 <style scoped> 中的类移动到 app.ccs 文件中，使其成为 @layer components 的一部分。

您可以创建一个自定义类以仅应用于该视图。

/* element-plus */
@import "element-plus/dist/index.css";

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

@layer components {
    .btn-custom {
        @apply py-2 px-4 bg-blue-900 text-red-300 font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
    }
}

【讨论】：