css Question posted in
Some basic documentation can be found here.

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

2

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    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:

    @layer utilities {
  .w-50 {
    …
  }
}

    Or, consider checking you have 50 as a value for the width core utilities. In tailwind.config.js:

    module.exports = {
  theme: {
    width: {
      '50': 'Your value here',
    },
  },
  // …
};

    or

    module.exports = {
  theme: {
    extends: {
      width: {
        '50': 'Your value here',
      },
    },
  },
  // …
};

    Make sure it is defined at theme.width.50 if you don’t want any of the default width values to be available. Otherwise, make sure it is defined at theme.extends.width.50.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search