SolidJS•11mo ago

Solid-UI The `border-border` class does not exist.

Recently got started with solid-ui and i love it a lot, however when i add it to projects where i am using daisyui as my styling system (just a wrapper ontop of tailwindcss) i get an error:

The `border-border` class does not exist. If `border-border` is a custom class, make sure it is defined within a `@layer` directive.

The `border-border` class does not exist. If `border-border` is a custom class, make sure it is defined within a `@layer` directive.

My root.css file:

/* TailWindCSS Files */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/* Custom Imports */
@import 'index.css';
@import 'scrollbar.css';
@import 'calendar.css';
@import 'components/addcropmodal.css';
@import 'components/addcropform.css';

/* Custom tailwind class overrides */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* TailWindCSS Files */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/* Custom Imports */
@import 'index.css';
@import 'scrollbar.css';
@import 'calendar.css';
@import 'components/addcropmodal.css';
@import 'components/addcropform.css';

/* Custom tailwind class overrides */
@tailwind base;
@tailwind components;
@tailwind utilities;

I am fairly certain i have everything setup correctly. A gist of my index.css where i placed the solid-ui styles and my tailwind.config.ts file.

1 Reply

DaOfficialWizard🧙OP•11mo ago

Note - i took the contents of ui.presets.js and i simply added them manually (then promptly removed that extraneous file) to my tailwind.config.ts file and the issue went away. Seems that there is an issue with the method of adding the presets to tailwind that causes the issue. I can not use solid-ui and daisyui along side each other - with a lot more granularity. I have made an issue on the repo, and will close this support thread.

Gaming

Programming

Solid-UI The `border-border` class does not exist.