[Bug]: Unable to Use Tailwind CSS classes Available Breakpoints in Storybook Components in a Remix Project about storybook

[MrDalo]

I have the same issue with Storybook + React but I can't find solution for that 😥

[MrDalo]

Describe the bug

Steps to reproduce the issue

1. Install and Set up a Project Remix V2
2. Install Tailwind CSS in Remix Project
   I experimented with adding the Available breakpoints class, for example "md:hidden ", I found that it worked fine. When running on Remix
   I want to install storybook into Remix and Tailwind.css.

***3. After installing Storybook, I encountered an issue can't use the Available breakpoints class, such as "md:hidden". How can I resolve this problem?

import { NavLink } from '@remix-run/react'

{/* can't use the Available breakpoints class when install storybook */}
<NavLink to="#" className="md:hidden">Test hidden</NavLink> 

To Reproduce

Run Storybook and notice that the still appears in the Storybook, and the hidden command does not work even when using a desktop screen.

System

System:
    OS: macOS 14.3.1
    CPU: (8) arm64 Apple M2
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.1 - /usr/local/bin/node
    npm: 10.2.4 - /usr/local/bin/npm <----- active
  Browsers:
    Chrome: 123.0.6312.87
    Safari: 17.3.1
  npmPackages:
    @storybook/addon-essentials: ^8.0.5 => 8.0.5 
    @storybook/addon-interactions: ^8.0.5 => 8.0.5 
    @storybook/addon-links: ^8.0.5 => 8.0.5 
    @storybook/addon-onboarding: ^8.0.5 => 8.0.5 
    @storybook/addon-styling-webpack: ^1.0.0 => 1.0.0 
    @storybook/blocks: ^8.0.5 => 8.0.5 
    @storybook/react: ^8.0.5 => 8.0.5 
    @storybook/react-vite: ^8.0.5 => 8.0.5 
    @storybook/test: ^8.0.5 => 8.0.5 
    eslint-plugin-storybook: ^0.8.0 => 0.8.0 
    storybook: ^8.0.5 => 8.0.5

Additional context

No response

In my case I found the solution. In tailwind.config.ts I have wrong scope for the project in the content field of the config object.
This is my code:

import type { Config } from 'tailwindcss'

const config = {
  darkMode: ['class'],
  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
  prefix: '',
  theme: {
    container: {
      center: true,
      padding: '2rem',
      screens: {
        '2xl': '1400px',
      },
    },
    extend: {
      colors: {
        border: 'rgb(var(--border) / <alpha-value>)',
        input: 'rgb(var(--input) / <alpha-value>)',
      },
      borderRadius: {
        lg: 'var(--radius)',
        md: 'calc(var(--radius) - 2px)',
        sm: 'calc(var(--radius) - 4px)',
      },
      keyframes: {
        'accordion-down': {
          from: { height: '0' },
          to: { height: 'var(--radix-accordion-content-height)' },
        },
        'accordion-up': {
          from: { height: 'var(--radix-accordion-content-height)' },
          to: { height: '0' },
        },
        shimmer: {
          '100%': {
            transform: 'translateX(100%)',
          },
        },
      },
      animation: {
        'accordion-down': 'accordion-down 0.2s ease-out',
        'accordion-up': 'accordion-up 0.2s ease-out',
      },
    },
  },
  plugins: [require('tailwindcss-animate')],
} satisfies Config

export default config