responsive design arbitrary-values like min-[320px]:bg-blue-300 does not work

[tylerrrkd]

Hi friends, I am using the responsive design, and I wanna use the arbitrary-values like min-[800px]:bg-blue-300 but nothing happen, while using md:bg-blue-300 everything is okay. However, in this situation, custom value is really what I want. How to resolve this problem.

Thank for your help.

Here is my tailwind.config.js.

const defaultTheme = require('tailwindcss/defaultTheme');

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
  theme: {
    extend: {
      colors: {
        theme: `var(--theme-color)`,
      },
      screens: {
        // => @media (min-width: 0px and max-width: 639px) { ... }
        xs: { min: '0px', max: '639px' },
        /**
         * @see https://tailwindcss.com/docs/screens#adding-smaller-breakpoints
         */
        ...defaultTheme.screens,
      },
    },
  },
  plugins: [],
};

[wongjn]

The min-* and max-* variants are disabled under some conditions pertaining to the theme.screens values. One of these conditions is if any value is not a string, as per your xs value. See #9558 (comment) for details.

To work around this, you could consider removing your xs value, and using the max-sm: variant on utility classes instead.