Не подключаются tailwind elements к проекту Laravel vue3 inertia

Question

Не подключаются tw-elements к проекту на Laravel vue3 inertia. Все подключал и инициализировал по документации, сам tailwind (т.е стили) работает корректно и стили доступны в страницах vue3, но при подключении и инициализации tw-element, элементы не работают, их стили и разметка отображается, но скрипты не работают, а так же IDE выдает предупреждение при импорте элементов из tw-elements, предупреждение: Cannot resolve symbol 'initTE', и так со всеми элементами, не только с initTE.

app.js:

import { createApp, h } from 'vue'
import { createInertiaApp, Link } from '@inertiajs/vue3'

createInertiaApp({
    resolve: name => {
        const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
        return pages[`./Pages/${name}.vue`]
    },
    setup({el, App, props, plugin}) {
        createApp({render: () => h(App, props)})
            .use(plugin)
            .component('inertia-link', Link)
            .mount(el)
    },
})

vite.config:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        vue(),
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
    ],
});

tailwind.config:

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
        "./resources/**/*.vue",
        "./node_modules/tw-elements/dist/js/**/*.js"
    ],
    theme: {
        extend: {},
    },
    darkMode: "class",
    plugins: [require("tw-elements/dist/plugin.cjs")]
}

app.css:

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

app.blade.php:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    @vite('resources/js/app.js')
    @vite('resources/css/app.css')
    @inertiaHead
    <link
        href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap"
        rel="stylesheet" />
</head>
<body>
@inertia
</body>
</html>

script страницы vue3:

<script>
import {defineComponent} from 'vue'
import {Link} from "@inertiajs/vue3";
import { onMounted } from "vue";
import {
    Tab,
    initTE,
} from "tw-elements";

onMounted(() => {
    initTE({ Tab });
});

export default defineComponent({
    name: "Home",
    components:{
        Link
    }
})
</script>

Абсолютно пустой проект, кроме vue3 inertia и tailwind никакие другие зависимости я не устанавливал. Вот еще раз предупреждение IDE в скриншоте:

Все подключено по документации, но все равно элементы tailwind не работают, в чем может быть проблема? Заранее Всем спасибо за уделенное мне время.

Answer 1

У меня получилось заставить это работать, скорее всего вы забыли про app.js

app.js import 'tw-elements';

tailwind.config.js

plugins: [forms, typography, require("tw-elements/dist/plugin.cjs")],

content: [ './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php', './vendor/laravel/jetstream/**/*.blade.php', './storage/framework/views/*.php', './resources/views/**/*.blade.php', './resources/js/**/*.vue', './node_modules/tw-elements/dist/js/**/*.js', './resources/**/*.{vue,js}', ],

В самом компоненте

<script setup>  
import { onMounted } from "vue";
import { Ripple, initTE } from "tw-elements";
onMounted(() => {
  initTE({ Ripple });
});
</script>

БЛОГ НА HUSL

Не подключаются tailwind elements к проекту Laravel vue3 inertia

Ответы (1 шт):