search

wireui / wireui

TallStack UI components
https://v1.wireui.dev
MIT License
1.37k stars 166 forks source link

Issue Compiling Assets #807

Closed abbasmashaddy72 closed 6 months ago

abbasmashaddy72 commented 6 months ago

Describe the bug Unable to compile all the classes of wireui some issue with my tailwind.config file

The Frontend Config Just works fine and compiles all the assets when compare to backend it does not compile all

To Reproduce Steps to reproduce the behavior: You can Check the Code, Actually no Steps, just followed the wireui installation instructions.

Expected behavior I excepted it to work same as frontend tailwind config file but not working.

Dependencies

Backend Config

const colors = require("tailwindcss/colors");
const {
    toRGB,
    withOpacityValue,
} = require("@left4code/tw-starter/dist/js/tailwind-config-helper");

/** @type {import('tailwindcss').Config} */
module.exports = {
    mode: "jit",
    presets: [
        require("../../../vendor/power-components/livewire-powergrid/tailwind.config.js"),
        require("../../../vendor/wireui/wireui/tailwind.config.js"),
    ],
    content: [
        "./app/Livewire/Backend/**/*.php",
        "./resources/views/components/auth/**/*.blade.php",
        "./resources/views/components/backend/**/*.blade.php",
        "./resources/views/layouts/bePartials/**/*.blade.php",
        "./resources/views/layouts/app.blade.php",
        "./resources/views/livewire/backend/**/*.blade.php",
        "./resources/views/pages/backend/**/*.blade.php",
        "./resources/views/profile/**/*.blade.php",
        "./resources/views/vendor/**/*.blade.php",
        "./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
        "./vendor/power-components/livewire-powergrid/resources/views/**/*.php",
        "./vendor/power-components/livewire-powergrid/src/Themes/Tailwind.php",
        "./vendor/wire-elements/modal/resources/views/*.blade.php",
        "./vendor/wireui/wireui/src/**/*.php",
        "./vendor/wireui/wireui/ts/**/*.ts",
        "./vendor/wireui/wireui/src/View/**/*.php",
        "./vendor/wireui/wireui/resources/**/*.blade.php",
    ],
    darkMode: "class",
    options: {
        safelist: [
            "sm:max-w-2xl",
            {
                pattern: /max-w-(sm|md|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl)/,
                variants: ["sm", "md", "lg", "xl", "2xl"],
            },
        ],
    },
    theme: {
        extend: {
            colors: {
                "pg-primary": colors.gray,
                rgb: toRGB(colors),
                primary: withOpacityValue("--color-primary"),
                secondary: withOpacityValue("--color-secondary"),
                success: withOpacityValue("--color-success"),
                info: withOpacityValue("--color-info"),
                warning: withOpacityValue("--color-warning"),
                pending: withOpacityValue("--color-pending"),
                danger: withOpacityValue("--color-danger"),
                light: withOpacityValue("--color-light"),
                dark: withOpacityValue("--color-dark"),
                slate: {
                    50: withOpacityValue("--color-slate-50"),
                    100: withOpacityValue("--color-slate-100"),
                    200: withOpacityValue("--color-slate-200"),
                    300: withOpacityValue("--color-slate-300"),
                    400: withOpacityValue("--color-slate-400"),
                    500: withOpacityValue("--color-slate-500"),
                    600: withOpacityValue("--color-slate-600"),
                    700: withOpacityValue("--color-slate-700"),
                    800: withOpacityValue("--color-slate-800"),
                    900: withOpacityValue("--color-slate-900"),
                },
                darkmode: {
                    50: withOpacityValue("--color-darkmode-50"),
                    100: withOpacityValue("--color-darkmode-100"),
                    200: withOpacityValue("--color-darkmode-200"),
                    300: withOpacityValue("--color-darkmode-300"),
                    400: withOpacityValue("--color-darkmode-400"),
                    500: withOpacityValue("--color-darkmode-500"),
                    600: withOpacityValue("--color-darkmode-600"),
                    700: withOpacityValue("--color-darkmode-700"),
                    800: withOpacityValue("--color-darkmode-800"),
                    900: withOpacityValue("--color-darkmode-900"),
                },
            },
            fontFamily: {
                roboto: ["Roboto"],
            },
            container: {
                center: true,
            },
            maxWidth: {
                "1/4": "25%",
                "1/2": "50%",
                "3/4": "75%",
            },
            strokeWidth: {
                0.5: 0.5,
                1.5: 1.5,
                2.5: 2.5,
            },
        },
    },
    plugins: [
        require("@tailwindcss/forms")({
            strategy: "class",
        }),
        require("postcss-multiple-tailwind"),
    ],
    variants: {
        extend: {
            boxShadow: ["dark"],
        },
    },
};

Frontend Config

const colors = require("tailwindcss/colors");
const plugin = require("tailwindcss/plugin");

/** @type {import('tailwindcss').Config} */
module.exports = {
    mode: "jit",
    presets: [require("../../../vendor/wireui/wireui/tailwind.config.js")],
    content: [
        "./app/Http/Livewire/Frontend/**/*.php",
        "./resources/views/components/frontend/**/*.blade.php",
        "./resources/views/auth/**/*.blade.php",
        "./resources/views/layouts/guest.blade.php",
        "./resources/views/layouts/fePartials/**/*.blade.php",
        "./resources/views/layouts/fePartials/**/*.blade.php",
        "./resources/views/livewire/frontend/**/*.blade.php",
        "./resources/views/pages/frontend/**/*.blade.php",
        "./resources/views/vendor/wireui/**/*.blade.php",
        "./resources/views/vendor/cookie-consent/**/*.blade.php",
        "./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
        "./vendor/wire-elements/modal/resources/views/*.blade.php",
        "./vendor/wireui/wireui/src/**/*.php",
        "./vendor/wireui/wireui/ts/**/*.ts",
        "./vendor/wireui/wireui/src/View/**/*.php",
        "./vendor/wireui/wireui/resources/**/*.blade.php",
        "./node_modules/flowbite/**/*.js",
    ],
    options: {
        safelist: ["sm:max-w-2xl"],
    },
    darkMode: "class",
    important: true,
    theme: {
        screens: {
            xs: "540px",
            sm: "640px",
            md: "768px",
            lg: "1024px",
            xl: "1280px",
            "2xl": "1536px",
        },
        fontFamily: {
            nunito: ['"Nunito", sans-serif'],
            inter: ["Inter"],
        },
        container: {
            center: true,
            padding: {
                DEFAULT: "12px",
                sm: "1rem",
                lg: "45px",
                xl: "2rem",
                "2xl": "5rem",
            },
        },
        extend: {
            colors: {
                dark: "#3c4858",
                black: "#161c2d",
                "dark-footer": "#192132",
            },
            boxShadow: {
                sm: "0 2px 4px 0 rgb(60 72 88 / 0.15)",
                DEFAULT: "0 0 3px rgb(60 72 88 / 0.15)",
                md: "0 5px 13px rgb(60 72 88 / 0.20)",
                lg: "0 10px 25px -3px rgb(60 72 88 / 0.15)",
                xl: "0 20px 25px -5px rgb(60 72 88 / 0.1), 0 8px 10px -6px rgb(60 72 88 / 0.1)",
                "2xl": "0 25px 50px -12px rgb(60 72 88 / 0.25)",
                inner: "inset 0 2px 4px 0 rgb(60 72 88 / 0.05)",
                testi: "2px 2px 2px -1px rgb(60 72 88 / 0.15)",
            },
            spacing: {
                0.75: "0.1875rem",
                3.25: "0.8125rem",
            },

            maxWidth: ({ theme, breakpoints }) => ({
                1200: "71.25rem",
                992: "60rem",
                768: "45rem",
            }),

            zIndex: {
                1: "1",
                2: "2",
                3: "3",
                999: "999",
            },
        },
    },
    plugins: [
        require("flowbite/plugin"),
        require("tailwind-scrollbar-hide"),
        require("postcss-multiple-tailwind"),
    ],
};
joaopalopes24 commented 6 months ago

This is working normally, check the version 1 documentation here.

abbasmashaddy72 commented 5 months ago

This is working normally, check the version 1 documentation here.

Checked but this does not work I have 2 tailwind config file in which one file it works and other does not