Search code examples
cssreactjstailwind-css

Class does not exist in @Apply layer using Tailwind

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: [],
};
Solution

  • Answering my own question, after study a little more about Tailwind, Tailwind has a already fix build-in values to operate with. As you can see in it's mainly documentation above:

    https://tailwindcss.com/docs/width

    However it is possible to set new values in the tailwind.config.js file if you really need something those values does not embrace.