Tailwind 媒体查询无法正常工作

Question

tailwind media 媒体查询在 1000 像素以上工作正常，但在低于 1000 像素时无法工作。

此代码工作正常。

但不工作 使用以下时

如果您想专门针对最大宽度为 1000 像素的屏幕，您可以使用以下内容：

<div class="hidden md:block lg:block xl:block 2xl:block"> <!-- Hidden on small screens, visible on screens up to 1000px wide -->
  Content to hide on small screens and screens wider than 1000px
</div>

另一个解决方案是您应该在 Taiwind 配置中定义媒体查询。例如

const defaultTheme = require('tailwindcss/defaultTheme')

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  darkMode: 'class',
  theme: {
    fontFamily: {
      satoshi: ['Satoshi', 'sans-serif'],
    },
    colors: {
      current: 'currentColor',
      transparent: 'transparent',
      white: '#FFFFFF',
      black: '#1C2434'
    },
    screens: {
      '2xsm': '375px',
      xsm: '425px',
      '3xl': '2000px',
      ...defaultTheme.screens,
    },
  },
  plugins: [require("daisyui")],
}

Answer 1

如果您想专门针对最大宽度为 1000 像素的屏幕，您可以使用以下内容：

<div class="hidden md:block lg:block xl:block 2xl:block"> <!-- Hidden on small screens, visible on screens up to 1000px wide -->
  Content to hide on small screens and screens wider than 1000px
</div>

另一个解决方案是您应该在 Taiwind 配置中定义媒体查询。例如

const defaultTheme = require('tailwindcss/defaultTheme')

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  darkMode: 'class',
  theme: {
    fontFamily: {
      satoshi: ['Satoshi', 'sans-serif'],
    },
    colors: {
      current: 'currentColor',
      transparent: 'transparent',
      white: '#FFFFFF',
      black: '#1C2434'
    },
    screens: {
      '2xsm': '375px',
      xsm: '425px',
      '3xl': '2000px',
      ...defaultTheme.screens,
    },
  },
  plugins: [require("daisyui")],
}