#Shadcn installation removed "pb" and "mb" tailwind classes?

1 messages · Page 1 of 1 (latest)

sullen leaf
#

After the shadcn installation I cant use the "mb" or "pb" classes. Just "p" or "m" for example like "p-4" or "m-2" works fine but not when I just want a padding/margin at the bottom. I did not change anything in the css classes manually and also not in the tailwind config.

I only installed the sidebar component.
Please help me!

dense sundialBOT
#

Hi @sullen leaf. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Based on the information provided in the knowledge sources, I don't have enough specific details to directly address why the "pb" and "mb" Tailwind classes are not working after installing shadcn. However, I can offer some general troubleshooting steps based on related issues with Tailwind CSS in Next.js projects:

  1. Check your Tailwind configuration:
    Make sure your tailwind.config.js or tailwind.config.ts file includes the correct paths for content. For example:

    /** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,jsx}',
    './components/**/*.{js,jsx}',
    './@/**/*.{js,jsx}',
  ],
  // ... other configurations
}

    Ensure that all directories containing your components (including shadcn components) are included in the content array Source (https://github.com/vercel/next.js/issues/59104).

  2. Update dependencies:
    Sometimes, issues can be resolved by updating your project dependencies. Try running pnpm up (if you're using pnpm) or the equivalent for your package manager to update all packages to their latest compatible versions Source (https://github.com/vercel/next.js/issues/56656).

  3. Check for conflicting configurations:
    Ensure you don't have multiple Tailwind configuration files (e.g., both .js and .ts versions) as this can cause conflicts Source (https://github.com/vercel/next.js/issues/59104).

  4. Verify global styles import:
    Make sure you've properly imported the Tailwind directives in your global CSS file and that this file is imported in your root layout. For example:

    In app/globals.css:

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

And in app/layout.tsx:

import './globals.css'

Source (https://nextjs.org/docs/app/building-your-application/styling/tailwind-css#importing-styles)

  1. Restart development server:
    Sometimes, changes to Tailwind classes don't reflect immediately. Try stopping and restarting your Next.js development server.

If these steps don't resolve the issue, it might be helpful to create a minimal reproduction of the problem and seek further assistance from the Next.js or shadcn community forums.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: