just what I think will be a simple solution, but I can’t find it. I have found similar problems with people using the Hover style and a white space right after, witch is wrong. But it is not my case.
I’m building my firts React and Tailwind application, when trying to create and use a custom style, i receive this error:
The `w-50` class does not exist. If `w-50` is a custom class, make sure it is defined within a `@layer` directive.
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.nav-link {
@apply w-50 h-50 rounded-md hover:bg-indigo-600 grid place-items-center;
}
}
/** @type {import('tailwindcss').Config} */
export default {
content: ["./index.html", "./src/**/*.{html,js,jsx,css}"],
theme: {
extend: {},
},
plugins: [],
};
2
Answers
Answering my own question, I don't know exactly why, but "50" and some other values as "30" is a value for widht/height that is not supported, so I just change it to "10" or others that are acceptable for the @apply method.
As per the error, you have tried to use the
w-50
class that does not resolve to a class that Tailwind knows about.Again, as per the error, if it is a custom class, consider defining it in a
@layer base/components/utilities
like:Or, consider checking you have
50
as a value for thewidth
core utilities. Intailwind.config.js
:or
Make sure it is defined at
theme.width.50
if you don’t want any of the defaultwidth
values to be available. Otherwise, make sure it is defined attheme.extends.width.50
.