tailwind CSS @Apply指令在Laravel不起作用

发布于 2025-02-02 13:38:14 字数 3987 浏览 3 评论 0原文

我目前正在将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();

resources/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;
    }
}

resourcess/css/app2.scss

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

不确定为什么@apply不起作用，但是@Layer似乎工作正常。请帮忙，谢谢。

原文

I am currently using Laravel with Vue js alongside with tailwind css. It seems that the tailwindcss @apply keeps showing Unknown Property name.

Following is my Vue File

    <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();

resources/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;
    }
}

resourcess/css/app2.scss

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

Not sure why @apply is not working but @layer seems to be working fine. Kindly help, thank you.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

多彩岁月 2025-02-09 13:38:14

将您的类移入＆lt;样式范围范围内的中的app.ccs文件成为@layer组件的一部分。

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

/* 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;
    }
}

Move your class inside <style scoped> to the app.ccs file to be part of @layer components.

You can create a custom class to apply to that view only.

/* 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;
    }
}

回复收藏 0 原文

~没有更多了~