Why adding ta-gallery into Laravel 8 app I got errors in tailwind.config.js?

[sergeynilov]

i try to add markusantonwolf/ta-gallery/
into Laravel 8 / livewire 2.5 / alpinejs 3 / tailwindcss: 2.2 app

amd modifying file tailwind.config.js as it is proposed in the docs , I got a lot of syntax errors in my PHPStorm 2021.1 : https://prnt.sc/1t3z3er
also I got next errors in console npm command :

master@master-laptop:/mnt/_work_sdb8/wwwroot/lar/Hostels4J$ npm run watch-poll

> @ watch-poll /mnt/_work_sdb8/wwwroot/lar/Hostels4J
> mix watch -- --watch-options-poll=1000


✖ Mix
  Compiled with some errors in 1.58s

ERROR in ./resources/css/app.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError: Unexpected token (13:15)
    at _class.pp$4.raise (/mnt/_work_sdb8/wwwroot/lar/Hostels4J/node_modules/acorn-node/node_modules/acorn/dist/acorn.js:2927:15)
    at _class.pp.unexpected (/mnt/_work_sdb8/wwwroot/lar/Hostels4J/node_modules/acorn-node/node_modules/acorn/dist/acorn.js:698:10)
    at _class.pp.expect (/mnt/_work_sdb8/wwwroot/lar/Hostels4J/node_modules/acorn-node/node_modules/acorn/dist/acorn.js:692:28)
    at _class.pp$3.parseExprList (/mnt/_work_sdb8/wwwroot/lar/Hostels4J/node_modules/acorn-node/node_modules/acorn/dist/acorn.js:2818:14)
    at _class.pp$3.parseExprAtom (/mnt/_work_sdb8/wwwroot/lar/Hostels4J/node_modules/acorn-node/node_modules/acorn/dist/acorn.js:2298:28)
    at _class.parseExprAtom (/mnt/_work_sdb8/wwwroot/lar/Hostels4J/node_modules/acorn-node/lib/dynamic-import/index.js:77:117)
    at _class.pp$3.parseExprSubscripts (/mnt/_work_sdb8/wwwroot/lar/Hostels4J/node_modules/acorn-node/node_modules/acorn/dist/acorn.js:2129:21)
    at _class.pp$3.parseMaybeUnary (/mnt/_work_sdb8/wwwroot/lar/Hostels4J/node_modules/acorn-node/node_modules/acorn/dist/acorn.js:2106:19)
    at _class.parseMaybeUnary (/mnt/_work_sdb8/wwwroot/lar/Hostels4J/node_modules/acorn-node/lib/private-class-elements/index.js:122:54)
    at _class.pp$3.parseExprOps (/mnt/_work_sdb8/wwwroot/lar/Hostels4J/node_modules/acorn-node/node_modules/acorn/dist/acorn.js:2041:21)
    at processResult (/mnt/_work_sdb8/wwwroot/lar/Hostels4J/node_modules/webpack/lib/NormalModule.js:721:19)
    at /mnt/_work_sdb8/wwwroot/lar/Hostels4J/node_modules/webpack/lib/NormalModule.js:827:5
    at /mnt/_work_sdb8/wwwroot/lar/Hostels4J/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /mnt/_work_sdb8/wwwroot/lar/Hostels4J/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/mnt/_work_sdb8/wwwroot/lar/Hostels4J/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (/mnt/_work_sdb8/wwwroot/lar/Hostels4J/node_modules/postcss-loader/dist/index.js:142:7)

1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack compiled with 2 errors

Content of my tailwind.config.js :

const defaultTheme = require('tailwindcss/defaultTheme');

const ta_gallery_safelist = require('./node_modules/@markusantonwolf/ta-gallery/src/plugin/safelist')

module.exports = {
    mode: 'jit',
    purge: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/laravel/jetstream/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',

        options: {
            safelist: [...ta_gallery_safelist]
        }
    ],


    theme: {
        extend: {

            backgroundImage: theme => ({
                'test-device-sm': "url('/img/test-device/sm.png')",
                'test-device-md': "url('/img/test-device/md.png')",
                'test-device-lg': "url('/img/test-device/lg.png')",
                'test-device-xl': "url('/img/test-device/exlg.png')",
            }),

            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
        },

        // ...
        taGallery: {
            animations: ['swing', 'swipe', 'slide', 'rotate', 'snake', 'window', 'scroll', 'fade', 'dynamic'],
                animation_default: 'slide', // default value
                aspect_ratios: [
                // all aspect ratios
                'square',
                'movietone',
                'large',
                'tv',
                'academy',
                'imax',
                'classic',
                'still',
                'modern',
                'common',
                    'golden',
                'super',
                'hd',
                'wide',
                {
                    instagram: 3 / 5, // add your own aspect ratio
                },
            ],
        },
        // ...
    },


    // ...
    variants: {
    // ...
        taGallery: ['responsive'], // default value
            extend: {
            // ...
        },
    },
    // ...
    plugins: [
        require('@markusantonwolf/ta-gallery')({
            respectPrefix: true, // respect prefix option in config: true (default) | false
            respectImportant: true, // respect important option in config: true (default) | false
        }),
    ],


    plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
};

Seems I did all in the same way as in plugin docs, but why I have these errors ? Some misconfigure of my laravel app?

Thanks!

[markusantonwolf]

@sergeynilov sorry I don't have any experiences with Livewire. "mini-css-extract-plugin" isn't used in TA-Gallery. Do you still have this issue?

[toxageek]

purge: {
  content: [
    './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
    './vendor/laravel/jetstream/**/*.blade.php',
    './storage/framework/views/*.php',
    './resources/views/**/*.blade.php',
  ],
  options: {
    safelist: [...ta_gallery_safelist]
  }
},

[Jako]

@sergeynilov Your tailwind.config.js has two plugin sections. Only the last one is used.

[markusantonwolf]

@Jako totally right - @sergeynilov this might be the solution to your issue. Thanks...