The `border-border` class cannot be found. In the case that `border-border` is a personalized class, ensure that it is declared within a `@layer` directive

Question

The `border-border` class cannot be found. In the case that `border-border` is a personalized class, ensure that it is declared within a `@layer` directive

The border-borderclass is not recognized. Ifborder-border

is a custom class, ensure it is defined within a

@layer directive.

globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;


 
@layer base {
  * {
    @apply border-border; //error
  }
  body {
    @apply bg-background text-foreground;
  }
}

I am puzzled by how this issue arose. It occurred in a React - Next app using Tailwind CSS and TypeScript, possibly related to the configuration in tailwind.config or globals.css files.

css reactjs next.js tailwind-css

Answer 1

Answer №1

In the event that someone experiences this issue, it came to my attention that I had both a tailwind.config.js and tailwind.config.ts files in the top-level directory of my repository (I had forgotten to remove the tailwind.config.js).

Removing the unnecessary tailwind.config.js resolved the issue.

I hope this information proves helpful!

Answer 2

In the event that someone experiences this issue, it came to my attention that I had both a tailwind.config.js and tailwind.config.ts files in the top-level directory of my repository (I had forgotten to remove the tailwind.config.js).

Removing the unnecessary tailwind.config.js resolved the issue.

I hope this information proves helpful!

Answer 3

Answer №2

In your tailwind.config.js file, make sure to include a prefix for classes that you define in your .css file. For instance, if you have a class named border-border and your prefix is 'tw-', then modify it to tw-border-border.

I encountered a similar problem while working with plate editor.

Answer 4

In your tailwind.config.js file, make sure to include a prefix for classes that you define in your .css file. For instance, if you have a class named border-border and your prefix is 'tw-', then modify it to tw-border-border.

I encountered a similar problem while working with plate editor.

Answer 5

Answer №3

According to the error message, in order to use @apply for a class name, Tailwind must recognize the class either through a Tailwind plugin or in a @layer base/components/utilities.

The class name border-border is not predefined in Tailwind, so you will need to define it in order to use @apply.

You can define it in a Tailwind plugin like this:

module.exports = {
  // …
  plugins: [
    plugin(function({ addUtilities }) {
      addUtilities({
        '.border-border': {
          // Your styles here
        },
      })
    })
  ]
}

Alternatively, you could use border as a value for borderWidth to generate a border-border class using the core Tailwind borderWidth plugin:

module.exports = {
  // …
  theme: {
    extend: {
      borderWidth: {
        border: 'Your value here',
      },
    },
  },
}

Another option is to define it in your CSS within a @layer:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  .border-border {
    /* Your styles here */
  }

  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

Answer 6

According to the error message, in order to use @apply for a class name, Tailwind must recognize the class either through a Tailwind plugin or in a @layer base/components/utilities.

The class name border-border is not predefined in Tailwind, so you will need to define it in order to use @apply.

You can define it in a Tailwind plugin like this:

module.exports = {
  // …
  plugins: [
    plugin(function({ addUtilities }) {
      addUtilities({
        '.border-border': {
          // Your styles here
        },
      })
    })
  ]
}

Alternatively, you could use border as a value for borderWidth to generate a border-border class using the core Tailwind borderWidth plugin:

module.exports = {
  // …
  theme: {
    extend: {
      borderWidth: {
        border: 'Your value here',
      },
    },
  },
}

Another option is to define it in your CSS within a @layer:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  .border-border {
    /* Your styles here */
  }

  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

Answer 7

Answer №4

Delete the tailwind.config.js file to only keep the tailwind.config.ts file.

Answer 8

Delete the tailwind.config.js file to only keep the tailwind.config.ts file.

Answer 9

Answer №5

The issue primarily arises due to the TypeScript extension tailwind.config.ts. To resolve this issue, you need to maintain the SADHCDN UI question:

Where is your tailwind.config.js located?

, ensuring it has a .js extension. If you already have a tailwind.config.ts file in your Next.js project, simply delete it and retain the tailwind.config.js file generated by SADHCDN UI. This should clarify things and assist you moving forward.

Answer 10

The issue primarily arises due to the TypeScript extension tailwind.config.ts. To resolve this issue, you need to maintain the SADHCDN UI question:

Where is your tailwind.config.js located?

, ensuring it has a .js extension. If you already have a tailwind.config.ts file in your Next.js project, simply delete it and retain the tailwind.config.js file generated by SADHCDN UI. This should clarify things and assist you moving forward.

Answer 11

Answer №6

Encountering a comparable issue, I discovered that certain styles were deleted from tailwind.config.js during the installation of tremor. It could be beneficial to review your version control and ensure nothing has been removed from tailwind.config.js.

Answer 12

Encountering a comparable issue, I discovered that certain styles were deleted from tailwind.config.js during the installation of tremor. It could be beneficial to review your version control and ensure nothing has been removed from tailwind.config.js.

Answer 13

Answer №7

I encountered a similar issue due to using custom CSS variables with Hex colors in my setup, which were referenced in tailwind.config.js.

❌ Incorrect Tailwind 2 syntax

:root{
  --color-primary: #9D4E48;
}

colors: {
  primary: 'var(--color-primary)',
}

→ The solution was transitioning from Tailwind 2 syntax to Tailwind 3 syntax:

✅ Correct Tailwind 3 syntax

:root{
  --color-primary: 6deg 37.0% 38.6%; /* equivalent to #9D4E48 */
}

colors: {
  primary: 'hsl(var(--color-primary) / <alpha-value>)', // #9D4E48
}

Refer to the documentation on using CSS variables in TailwindCSS for more information.

If you prefer an easier way, you can rely on ChatGPT/Copilot to assist in converting your colors.

Answer 14

I encountered a similar issue due to using custom CSS variables with Hex colors in my setup, which were referenced in tailwind.config.js.

❌ Incorrect Tailwind 2 syntax

:root{
  --color-primary: #9D4E48;
}

colors: {
  primary: 'var(--color-primary)',
}

→ The solution was transitioning from Tailwind 2 syntax to Tailwind 3 syntax:

✅ Correct Tailwind 3 syntax

:root{
  --color-primary: 6deg 37.0% 38.6%; /* equivalent to #9D4E48 */
}

colors: {
  primary: 'hsl(var(--color-primary) / <alpha-value>)', // #9D4E48
}

Refer to the documentation on using CSS variables in TailwindCSS for more information.

If you prefer an easier way, you can rely on ChatGPT/Copilot to assist in converting your colors.

The `border-border` class cannot be found. In the case that `border-border` is a personalized class, ensure that it is declared within a `@layer` directive

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

How can I prevent or override the text being pushed to the right by CSS::before?

Issue with TinyMCE Editor: Inoperative

Using Bootstrap 4: How to maximize the width of a span element placed near a label

Styles coded in CSS are not reflecting on the displayed webpage, despite being visible in the Integrated

The rating and comment section is failing to adapt to smaller screens, creating a terrible user experience

What is the best way to conceal the main list but still show the nested list within?

Testing NextJS App Router API routes with Jest: A comprehensive guide

Linking Background Images in HTML

Is there a way to emphasize text within a string of object array items?

Trouble Scrolling Webpage Vertically on Screens Exceeding 768px Width

Tips for formatting dates in react-calendar?

Using shadow effects on the <Grid> component with Material UI

"Is there a way to align a span element on the same line as an h

Numerous sections with tabs on the webpage

How to Style an Element Based on Fragment Identifier in Href Attribute Using CSS

Hermes js engine encounters a TypeError when attempting to access the property '__expo_module_name__' of an undefined value

Relocate a table beside an image

Having trouble retrieving items from local storage in NextJS?

What is the process for generating an array of objects using two separate arrays?

Is it necessary for React to pass onClick as props to sub components?