The `aspect-video` class does not exist.

[ap1969]

Filament Version

v3.2.92

Plugin Version

v3.6.2

PHP Version

PHP 8.2.14

Problem description

Hi Adam,

I've just updated my app, and I'm getting the following error:

[vite:css] [postcss] /path/to/app/vendor/awcodes/filament-curator/resources/css/plugin.css:72:17: The aspect-video class does not exist. If aspect-video is a custom class, make sure it is defined within a @layer directive.

Tailwind config:

import "dotenv/config";
import forms from "@tailwindcss/forms";
import colors from "tailwindcss/colors";
import postcss from "postcss";
import tailwindcss from "tailwindcss";
import autoprefixer from "autoprefixer";
import cssnano from "cssnano";

import * as path from "path";
import * as fs from "fs";
import plugin from "tailwindcss/plugin";
import preset from "./vendor/filament/support/tailwind.config.preset";

let directories = [
    "./app/Filament/**/*.blade.php",
    "./resources/js/**/*.vue",
    "./resources/views/**/*.blade.php",
    "./storage/framework/views/*.php",
    "./vendor/filament/**/*.blade.php",
    "./vendor/razorui/blade-application-ui/resources/views/components/**/*.blade.php",
    "./vendor/awcodes/filament-curator/resources/**/*.blade.php",
    "./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
    //"./node_modules/flowbite/**/*.js",
];

let safelist = "";

/** @type {import('tailwindcss').Config} */
export default {
    presets: [preset],

    content: directories,

    darkMode: "class",

    theme: {
        extend: {
            // Removed because of FOUC (flash of unstyled content)
            // fontFamily: {
            //     sans: ["Nunito", ...defaultTheme.fontFamily.sans],
            // },
            colors: {
                danger: colors.rose,
                primary: colors.blue,
                success: colors.green,
                warning: colors.yellow,
                secondary: colors.orange,
            },
        },
        screens: {
            sm: "640px",
            // => @media (min-width: 640px) { ... }

            md: "768px",
            // => @media (min-width: 768px) { ... }

            lg: "1024px",
            // => @media (min-width: 1024px) { ... }

            xl: "1280px",
            // => @media (min-width: 1280px) { ... }

            "2xl": "1536px",
            // => @media (min-width: 1536px) { ... }
        },
    },

    plugins: [
        colors,
        forms,
        require("@tailwindcss/aspect-ratio"),
        plugin(function ({ addBase }) {
            addBase({});
        }),
    ],
};

Package.json

"dependencies": {
        "@headlessui/vue": "^1.6.7",
        "@heroicons/vue": "^1.0.6",
        "@ryangjchandler/alpine-clipboard": "^2.2.0",
        "@ryangjchandler/alpine-tooltip": "^1.2.0",
        "@tailwindcss/aspect-ratio": "^0.4.2",
        "@tailwindcss/forms": "^0.4.1",
        "@tailwindcss/typography": "^0.5.10",

Any idea? I've read around and can't find anything that's helped.

Regards, Andy

Expected behavior

Expected tailwind compilation to happen normally.

Steps to reproduce

npm run build

which just runs 'vite'

Reproduction repository

No response

Relevant log output

No response

[ap1969]

I rolled back to the prior version I had working, 3.5.7, and I can now rebuild tailwind again. That was the only thing I rolled back.

[awcodes]

Honestly, not sure aspect-video certainly exists in tailwind. https://tailwindcss.com/docs/aspect-ratio#setting-the-aspect-ratio

[awcodes]

Maybe because you're including the tailwind aspect-ratio plugin and it's part of core now. Has been for a while.

[awcodes]

A lot of this config doesn't make sense to me, for example why is colors registered as a plugin and why is the preset imported from tailwind instead of filament.?

[ap1969]

Hmm. I wonder if I've collared stuff from various sources half of which is out of date and half is Chatgpt...

I'll re-visit the config and try again.

Thanks Adam

[ap1969]

The colors plugin was a carry-over from an older version of tailwind, so I've removed that.

In terms of preset, that's imported from filament, following instructions here https://filamentphp.com/docs/3.x/actions/installation

And I got it sorted eventually. Again, I'd mixed up legacy config with new. I hate upgrades!

Appreciate your help again Adam.