@-prefixed utility classes (e.g., @2xl:self-center) not working #156
Description
Describe the bug or issue
The example code and some component files use utility classes with an @ prefix for breakpoints or variants (e.g., @2XL:self-center, @max-2xl:mask-y-from-50%). However, these classes are not being applied in the browser, and do not appear in the generated CSS.
Is Fulldev supposed to support these shortcut/variant classes out of the box? If not, should the documentation/examples be updated to use standard Tailwind syntax (e.g., 2xl:self-center)?
global.css
@import "tailwindcss";
astro.config.mjs
// @ts-check
import { defineConfig } from "astro/config";
import tailwindcss from "@tailwindcss/vite";
// https://astro.build/config
export default defineConfig({
vite: {
plugins: [tailwindcss()],
},
});
tsconfig.json
{
"extends": "astro/tsconfigs/strict",
"include": [".astro/types.d.ts", "**/*"],
"exclude": ["dist"],
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}
package.json dependencies
"dependencies": {
"@tailwindcss/postcss": "^4.1.18",
"@tailwindcss/vite": "^4.1.18",
"astro": "^5.16.9",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"lucide-react": "^0.562.0",
"lucide-static": "^0.562.0",
"simple-icons": "^16.5.0",
"tailwind-merge": "^3.4.0",
"tailwindcss": "^4.1.18"
},
"devDependencies": {
"tw-animate-css": "^1.4.0"
}